Skip to content

NodeBB v3 and Harmony Theme

Discussion
  • And now, something of a quandary. Given the imminent (well, Q2 2023) release of NodeBB v3 and the timed release of the Harmony theme that will ship with it - considering the hundreds of hours in terms of development Iā€™ve invested in this new engine, do I

    Iā€™m also looking for indications as to how many will jump onto the v3 train when it arrives - for example, I fully expect there to be a transition period, but is there any point in keeping the v2 theming engine afloat when v3 will render support for it obsolete at some point in future? I know v2 will be around for some time, but it canā€™t be infinite for obvious reasons - at some point, NodeBB will want to pull the plug on this as it will be considered legacy.

    Very interested in thoughtsā€¦

  • Iā€™m also interested to understand migration timelines if you have (or have even thought about) them. What would be the amount of work and effort involved for you own sites? I expect a torrent of new CSS at the very leastā€¦

  • phenomlabundefined phenomlab referenced this topic on
  • For me, you have to abandon V2 or else you have to choose to stay on something that will be obsolete after a while or that will stabilize without major updates. Why not ? Itā€™s a choice.

    For my part, I would like to upgrade to V3 either with persona on bootstrap5 which wonā€™t change a lot in terms of design or switch to the Harmony theme which I find very beautiful and modern at first sight. I must see the theme in live and test it before take a decision.

    On the other hand, I already know that a lot of users will be disconcerted or even very surprised or will stop coming to the forum.
    There too it is a choice.

    ā€“ Personna or Harmony in V3, in both cases, itā€™s going to be a crazy job (less for Personna):

    • First of all, we will of course have to be sure that all the plugins we use work correctly with this version (or wait until they do, which would leave time to worry about other things)

    • That all the JavaScript and functions developed with Mark @phenomlab work like the Theme Switcher, the footerbar, the welcome message with change of the logo etc.) I will surely have to modify the code of all these functionalities according to Personna/Harmony/Bootsrap5 and I know @phenomlab will be there to help me. It is especially him who has the knowledge of the JS. I prefer CSS even though Iā€™m not stupid

    • You will then have to code from scratch (if Harmony) or adapt (persona) all the CSS themes already present with the Switcher theme. In my opinion the ideal will be to start from scratch because a good part of the CSS classes will no longer exist and there will be new ones

    ā€“> Anyway I would wait at least for the first stable release before coding anything in CSS or functionality.
    ā€“> So by the time all the plugin devs update, harmony is fine-tuned and everything said above is coded correctly, it wonā€™t be before the end of 2023 in my opinion that it will be in production without bugs.
    ā€“> Of course all this will have to be done on a development VM. I just installed mine with nodeBB 3.0.0 alpha 3

    I expect a lot on the improvement of the chat system or the global chat plugin.
    It is a very appreciated function and not badly used on our forum (we like to discuss without going through other platforms)

  • @DownPW this is a great response, and it sounds very much like youā€™ve thought things though. I agree - it makes more sense to cease development of the v2 theming engine, and focus on v3.

    However, itā€™s worth noting that v3 (particularly with Harmony if I understood correctly) will also have the capability of switching themes - or at least, colour swatches, which is where I was originally heading with v2. It will be interesting to see how this materialises over time, given that the version in Persona seems to be something of an afterthought that doesnā€™t work very well either.

    The new Swatch capabilities skates for inclusion into Harmony may well render the custom theme switcher we developed obsolete if it offers a hook meaning it can be extended.

    From my perspective, all of my custom scripts will be updated to work with, and be fully supported in, v3. This is inclusive of the theme switcher (if applicable) and the custom footer etc.

  • @phenomlab said in NodeBB v3 and Harmony Theme:

    his is a great response, and it sounds very much like youā€™ve thought things though. I agree - it makes more sense to cease development of the v2 theming engine, and focus on v3.
    However, itā€™s worth noting that v3 (particularly with Harmony if I understood correctly) will also have the capability of switching themes - or at least, colour swatches, which is where I was originally heading with v2. It will be interesting to see how this materialises over time, given that the version in Persona seems to be something of an afterthought that doesnā€™t work very well either.
    The new Swatch capabilities skates for inclusion into Harmony may well render the custom theme switcher we developed obsolete if it offers a hook meaning it can be extended.
    From my perspective, all of my custom scripts will be updated to work with, and be fully supported in, v3. This is inclusive of the theme switcher (if applicable) and the custom footer etc.

    Personally, if the new swatch on harmony theme is just a color change, that wouldnā€™t suit me at all. Switching with CSS is just huge and much more functional
    We should also offer integration officially to NodeBB. that would be awesome šŸ˜‰

  • @DownPW Iā€™m running Harmony now on https://sudonix.dev šŸ™‚ There is no swatch functionality from what I can see, so the code we developed is still up for the taking.

  • @DownPW I missed this - there is a skin switcher

    9f54e2bc-e717-4cae-a642-49c3d41d5238-image.png

  • @phenomlab Yep but that donā€™t work with css File ?

    I had tried in the past to create a theme with the official nodebb doc and I never succeeded

  • @DownPW Iā€™ll need to look at the structure, but I canā€™t see why not.

  • @phenomlab

    I also see another problem with this selector : he display all the default themes.
    We should be able to remove all those present by default and display only those we need

    in addition as soon as you do a CTRL + F5 or refresh web page with F5, it removes the theme lol

  • @DownPW yes, I noticed that also. Looks like session data isnā€™t being retained.

  • @phenomlab said in NodeBB v3 and Harmony Theme:

    @DownPW Iā€™m running Harmony now on https://sudonix.dev šŸ™‚ There is no swatch functionality from what I can see, so the code we developed is still up for the taking.

    thanks for this one šŸ‘
    I could check it more seriouslyā€¦

  • Just looking through my code here, and provided that Persona as a NodeBB theme continues to be maintained, then the conversion of my code to v3 is a relatively simple affair meaning I could continue with my Swatch code without too much effort.

    Essentially, the move from v2 to v3 is basically the migration of bootstrap from v3 to v5. I suppose much of this depends on the future of Personaā€¦

    EDIT - Iā€™ll just leave this here
    https://community.nodebb.org/topic/16908/january-2023-developer-update/15?_=1673947070798

  • @phenomlab said in NodeBB v3 and Harmony Theme:

    Just looking through my code here, and provided that Persona as a NodeBB theme continues to be maintained, then the conversion of my code to v3 is a relatively simple affair meaning I could continue with my Swatch code without too much effort.
    Essentially, the move from v2 to v3 is basically the migration of bootstrap from v3 to v5. I suppose much of this depends on the future of Personaā€¦
    EDIT - Iā€™ll just leave this here

    Do you think I could go through your swatch rather than the one I have?

    Because I donā€™t believe you released your code here. Whether ?

    Either way, I know Iā€™ll have to start all over again in these 2 cases

  • @DownPW Yes, of course. However, because of the change of elements, I have to re-write most of it. In addition, only one theme will be supported - either Persona, or Harmony. If we go the Harmony route (which is highly likely) then virtually all of the swatch needs to be re-written including LESS etc.

    I donā€™t want to support more than one theme and would ideally stick to Harmony.

  • @phenomlab said in NodeBB v3 and Harmony Theme:

    Yes, of course. However, because of the change of elements, I have to re-write most of it. In addition, only one theme will be supported - either Persona, or Harmony. If we go the Harmony route (which is highly likely) then virtually all of the swatch needs to be re-written including LESS etc.
    I donā€™t want to support more than one theme and would ideally stick to Harmony.

    Yes indeed, we have to focus on one main theme and not two. (Persona or Harmony)

    I donā€™t yet have the opinions of the other members of my team but since itā€™s I who will then develop the themes compatible with Harmony, I think that we will go towards the road of Harmony

    If you are ready to share your codes once finished and explain how to use it, itā€™s really a good thing and I already thank you in advance šŸ˜‰

  • @DownPW said in NodeBB v3 and Harmony Theme:

    If you are ready to share your codes once finished and explain how to use it, itā€™s really a good thing and I already thank you in advance

    More than happy to do so. In fact, BS5 makes it so much easier as LESS variables are being used, which we simply target and change. Far LESS (pun intended) work !

  • @DownPW Iā€™ve started development work on Harmony in v3 and should have some beta code for you to test soon. Stay tuned!

  • @phenomlab Oh yeah very good news šŸ˜‰

  • phenomlabundefined phenomlab forked this topic on
  • hello mark

    here is my tutorial for install V3.00 but itā€™s for alpha3.0 like you see in command.

    cd /path/to/your/nodebb
    git rev-parse HEAD  # save this value in case you need to roll back  
    git fetch && git checkout bootstrap5
    git reset --hard v3.0.0-alpha.3
    npm config set legacy-peer-deps true
    ./nodebb upgrade -mi
    ./nodebb build
    ./nodebb start
    

    ā€“ My questions :

    • How to know the name of the last version for V3 for install it (here is alpha.3) and adapt cli command above ?

    • How to upgrade the dev environment ? I know when Harmony itā€™s upgrade, we must upgrade boottrap 5

    ā€“ Here the command to upgrade bootstrap5 :

    git fetch && git checkout bootstrap5
    

    Many thanks


Related Topics
  • Nodebb icon on google page

    Solved Customisation
    9
    4 Votes
    9 Posts
    741 Views

    @Panda Itā€™s been raised multiple times, but only for the open source version, and not hosted.

  • nodebb loading emojis

    Solved Configure
    16
    1 Votes
    16 Posts
    677 Views

    @DownPW sure. Let me have a look at this in more detail. I know nginx plus has extensive support for this, but itā€™s not impossible to get somewhere near acceptable with the standard version.

    You might be better off handling this at the Cloudflare level given that it sits in between the requesting client and your server.

  • Podcast Share NodeBB

    Solved Configure
    15
    4 Votes
    15 Posts
    707 Views

    @cagatay You could experiment with nodebb-plugin-ns-embed but I expect the x-origin tag on the remote site to prevent playback.

  • Recent Cards plugin customization

    Solved Customisation
    21
    13 Votes
    21 Posts
    3k Views

    @pobojmoks thatā€™s easily done by modifying the code provided here so that it targets background rather than border

    In essence, the below should work

    $(document).ready(function() { $(window).on('action:ajaxify.end', function(data) { $('.recent-card-container').each(function(i) { var dataId = $(this).attr("data-cid"); var color = $('[role="presentation"]', this).css("background-color"); console.log("data-cid " + dataId + " is " + color); $('[data-cid="' + dataId + '"] .recent-card').attr("style", "background-color: " + color); }); }); });
  • Detect if user is admin

    General
    2
    0 Votes
    2 Posts
    494 Views

    @pwsincd I think you can use userData.isAdmin = isAdmin; if Iā€™m not mistaken - see
    https://community.nodebb.org/topic/15128/how-to-hide-whitelist-user-field-only-to-owner-or-admin?_=1648802303112 for an example

  • NodeBB 1.19.3

    Solved Performance
    33
    4 Votes
    33 Posts
    3k Views

    @phenomlab

    I find the problem Mark šŸ˜‰

    The error message indicated this path :

    http://localhost:4567/assets/plugins/nodebb-plugin-emoji/emoji/styles.css?v=6983dobg16u

    I change the path url on config.json

    47bacc80-f141-41e4-a261-3f8d650cc6f6-image.png

    And all itā€™s good šŸ™‚

    Weird, I didnā€™t have to change that path before 1.19.3

    But this does not prevent the problem from a clean install with Emoji Plugin

    EDIT: After test, that resolv the problem installation for 1.18.x but not for 1.19.x (I have other error message when I run ./nodebb Setup

    For resume: NodeJS 16_x with 1.18.x is ok

  • NodeBB - Created pages not found?

    General
    20
    3 Votes
    20 Posts
    1k Views

    @jac Exactly. Hard point to argue.

  • WordPress & NodeBB

    Solved WordPress
    6
    0 Votes
    6 Posts
    651 Views

    @jac That wonā€™t matter. You just redirect at nginx or apache level and itā€™ll work. The generally accepted standard though is to use a subdomain.