Skip to content

Threaded post support for NodeBB

Let's Build It
146 5 116.4k 1
  • Oh really ?
    That would be super cool 🙂

    Have 2 versions maybe. One adapted to your personalized code and one adapted to Harmony (without customizing the appearance of topics (stock))

    I’m probably asking too much 🙂

    wrote on last edited by
    #17

    @DownPW said in Threading support for NodeBB:

    I’m probably asking too much

    Nope. Not at all. I’m fact, developing one from stock Harmony is probably a better idea as it’ll work out of the box.

    Leave it with me.

  • wrote on last edited by
    #18

    I’ve set my DEV environment to vanilla and will develop a working solution for that.

  • wrote on last edited by phenomlab
    #19

    Hi All,

    Some very early (subject to the odd bug) code released in DEV. You will need an account there - let me know if you need a password reset

    https://sudonix.dev/topic/331/how-to-install-a-self-hosted-instance-of-iframely-for-use-with-nodebb

    This code is quite complex, and leverages some interesting CSS classes. The most important change is that it removes the stock timeline bar, and will replace it with it’s own. This is for a variety of reasons - mostly around cumulative layout shift and pseudo elements being used in the stock CSS.

  • wrote on last edited by
    #20

    I have tested but I don’t see switch on dev

    image.png

  • I have tested but I don’t see switch on dev

    image.png

    wrote on last edited by
    #21

    @DownPW It only triggers at 1200px and above - do you have your browser size set smaller?

  • wrote on last edited by
    #22

    Just added some transition effects. Note that depending on how many elements there are on the screen, this might cause layout shift.

  • wrote on last edited by DownPW
    #23

    oh yes I’m on 1920 x 1080 screen

    oups 🙂

  • oh yes I’m on 1920 x 1080 screen

    oups 🙂

    wrote on last edited by
    #24

    @DownPW Does it work now? By 1200px I meant wide

  • wrote on last edited by
    #25

    hmmmm nope

  • hmmmm nope

    wrote on last edited by
    #26

    Odd. Seems to work for me.

  • wrote on last edited by DownPW
    #27

    nope it’s normal, i’m on 1080px height

  • nope it’s normal, i’m on 1080px height

    wrote on last edited by
    #28

    @DownPW I’m going to reset your DEV password and login as you to check

  • wrote on last edited by
    #29

    I see why. Let me fix that

  • wrote on last edited by
    #30

    @DownPW can you log back into DEV and try again? Should be working now.

  • wrote on last edited by phenomlab
    #31

    Here’s a video of the threading code working on stock Harmony on NodeBB.

    However, it’s important to note that the timeline bar is removed and recreated. There is a good reason for this, as without taking this route, it would mean that the timeline bar will look out of place. It’s certainly possible to use the existing bar and use a variety of CSS to move it around, although this is VERY inconsistent in my testing, and lands up being far too complex when it comes to having multiple CSS classes that do not include a specific scenario etc.

    In this case, it’s so much quicker to hide and replace the existing one - we do this in the default view also with the threaded view disabled, and I’m sure you won’t notice the difference 🙂 For obvious reasons, this code is configured to only fire on displays of 1200px or more - obviously, firing on a mobile device wouldn’t look very good at all.

    Here’s the video

    If you like what you see, here’s the code.

    https://github.com/phenomlab/nodebb-harmony-threading

    Final note - The code you see in the video is designed to work with stock Harmony. The code running on Sudonix is VERY different and uses a variety of CSS to render the view you see here. It’s “possible” to emulate this look, although it does mean that you will have to replace your custom CSS with that of Sudonix.

  • Here’s a video of the threading code working on stock Harmony on NodeBB.

    However, it’s important to note that the timeline bar is removed and recreated. There is a good reason for this, as without taking this route, it would mean that the timeline bar will look out of place. It’s certainly possible to use the existing bar and use a variety of CSS to move it around, although this is VERY inconsistent in my testing, and lands up being far too complex when it comes to having multiple CSS classes that do not include a specific scenario etc.

    In this case, it’s so much quicker to hide and replace the existing one - we do this in the default view also with the threaded view disabled, and I’m sure you won’t notice the difference 🙂 For obvious reasons, this code is configured to only fire on displays of 1200px or more - obviously, firing on a mobile device wouldn’t look very good at all.

    Here’s the video

    If you like what you see, here’s the code.

    https://github.com/phenomlab/nodebb-harmony-threading

    Final note - The code you see in the video is designed to work with stock Harmony. The code running on Sudonix is VERY different and uses a variety of CSS to render the view you see here. It’s “possible” to emulate this look, although it does mean that you will have to replace your custom CSS with that of Sudonix.

    wrote on last edited by
    #32

    @phenomlab wow… that looks really cool. I need to fire up a NodeBB box and test.

  • wrote on last edited by
    #33
  • wrote on last edited by
    #34

    this is very cool. Thanks @phenomlab

  • wrote on last edited by DownPW
    #35

    Very cool like as already said above and a big thanks for hard work (I see the th function.js and woowwww 🙂 )

    I test it now and I have see this with plugin user-browsers :

    Do you know where it could come from?

    This also breaks the display of the site title

    Can we do the same thing but without expanding the topic toolbar on header ?


    EDIT :

    I see that you seem put other things in the function.js on github like banner, logo, fancybox… 🙂
    I said to myself that I found this file way too long without asking too many questions !

    –> But I have the bug display with user browsers plugin which I will try to solve

  • Very cool like as already said above and a big thanks for hard work (I see the th function.js and woowwww 🙂 )

    I test it now and I have see this with plugin user-browsers :

    Do you know where it could come from?

    This also breaks the display of the site title

    Can we do the same thing but without expanding the topic toolbar on header ?


    EDIT :

    I see that you seem put other things in the function.js on github like banner, logo, fancybox… 🙂
    I said to myself that I found this file way too long without asking too many questions !

    –> But I have the bug display with user browsers plugin which I will try to solve

    wrote on last edited by phenomlab
    #36

    @DownPW hmm. Not sure why I copied all of that code, but will change asap. I also have a fix for the browsing users plugin issue but didn’t include it because others might not be using it.

    I’ll get to this as soon as I can.

    EDIT - Done
    EDIT 2 - I just noticed on your DEV box that you have (thanks to me - sorry) a ton of JS code you don’t need. You should probably clean that up.


Related Topics
  • NodeBB Twitter / X embeds

    Let's Build It twitter script
    34
    21 Votes
    34 Posts
    16k Views
    DownPW
    @phenomlab said: @DownPW thanks for spotting (and fixing) this issue. I admittedly threw this together quickly for @jac some time ago, and it hasn’t had any love since. If OK with you, I’ll merge these changes into the github repository? No problem dude
  • Extended functions for Q&A NodeBB plugin

    Let's Build It q&a panels cards
    3
    4
    5 Votes
    3 Posts
    3k Views
    DownPW
    Very good like always
  • What plugins are being used here on Sudonix?

    Solved General nodebb plugins development
    6
    5 Votes
    6 Posts
    2k Views
    phenomlab
    @Roki-Antic Welcome! This site isn’t running Persona, but Harmony - a very heavily customised version at that. Do you have a URL where your site is currently located that is publicly accessible? Feel free to PM this info if you do not want to disclose here. Happy to help with any customisation needs.
  • Material View Support for Stock NodeBB

    Unsolved Let's Build It material view javascript css
    51
    4
    15 Votes
    51 Posts
    27k Views
    DownPW
    Oh yes, that’s what’s super cool, I learn something every day. Afterwards I start from so low in JS
  • Whitespace fixes in Nodebb

    Solved Customisation nodebb
    18
    2
    7 Votes
    18 Posts
    6k Views
    phenomlab
    @Panda Just circling back here with something of an update (which I think you’ll like). I’ve completely restructured the ranking system. There are now less ranks, with a higher point threshold to reach them. More importantly, if you reload the site, you’ll notice that the ranks are now icons. I also removed the “Author” badge, and made this a single icon, which (to me) looks much better.
  • NodeBB v3 and Harmony Theme

    Discussion nodebb theme
    22
    13 Votes
    22 Posts
    12k Views
    phenomlab
    Been playing with the user profile page this afternoon. Thought I’d post a video as I’m really pleased with how this came out profile-screen-capture.webm
  • [NODEBB] Wallpapers BUG on Firefox Mobile ?

    Solved Customisation nodebb wallpaper firefox mobile
    9
    1
    0 Votes
    9 Posts
    3k Views
    phenomlab
    @downpw I’m inclined to agree with this. There isn’t much else you can do, and provided it works with no odd looking artefacts in other browsers, then ok. The :before and :after are pseudo classes and very well supported across all browsers (except perhaps Internet Exploder, but who uses that these days ?)
  • Display tweets in widget [NodeBB]

    Solved Customisation
    29
    4 Votes
    29 Posts
    13k Views
    JAC
    @phenomlab brilliant, many thanks Mark