Skip to content
Sudonix

Threaded post support for NodeBB

Let's Build It
146 5 70.4k 1
  • cagatayundefined cagatay

    @phenomlab thank you Mark i did not read this one.

    phenomlabundefined

    @cagatay no problems. Easily missed!!

    Mark – Founder, Phenomlab Ltd
    Executive IT & Security Leadership
    Phenomlab Ltd

    0
  • DownPWundefined DownPW

    Small specific request.

    I try to adapt the code to my environment.

    I modified the background of the following classes:

    .page-topic .topic .posts.timeline .timeline-event,
.page-topic .topic .posts.timeline > [component="post/placeholder"],
.page-topic .topic .posts.timeline > [component="post"] {
  border-left: none;
  transition: transform 0.3s ease !important;
  background: var(--bs-body-bg);
  background: var(--bs-body-navbar);
}

    .post-container.threaded {
  background: var(--bs-body-bg) !important;
  background: var(--bs-body-navbar)!important;
}

    li.pt-4.self-post:not(.self-post .topic-owner-post).threaded {
  transform: translateX(0px) !important;
  transition: transform 0.3s ease !important;
  background: var(--bs-body-bg);
  background: var(--bs-body-navbar)!important;
  padding-right: 30px;
}

    and other code, for example :

    .page-topic .topic .posts.timeline [component="topic/event"].timeline-event, .page-topic .topic .posts.timeline [component="topic/necro-post"].timeline-event {
    background: transparent;
}

    .page-topic .topic .posts.timeline .timeline-event:last-child, .page-topic .topic .posts.timeline>[component="post/placeholder"]:last-child, .page-topic .topic .posts.timeline>[component=post]:last-child {
    margin-left: 0.5rem;
}

    When I activate mode it works without problem but it does not disappear when I deactivate the mode. (Return to vanilla)

    I think I understand by reading the code that it is necessary to specify the classes chnaged in the function.js (with add .threaded) but I don’t really see how to add more

    f0208e5f-2863-48df-98a7-273e8a944377-image.png

    phenomlabundefined

    @DownPW said in Threading support for NodeBB:

    I think I understand by reading the code that it is necessary to specify the classes chnaged in the function.js (with add .threaded) but I don’t really see how to add more

    Can you post the current function code you have?

    Mark – Founder, Phenomlab Ltd
    Executive IT & Security Leadership
    Phenomlab Ltd

    0
  • DownPWundefined

    sure :

    function threaded() {
    $(document).ready(function () {
        // Check if the screen width is 1200px or more
        if ($(window).width() >= 1200) {
            // Check if the dropdown already exists
            if ($('#enableThreading').length === 0) {
                var threadView = $('<div class="threads-wrapper"><i class="fa fa-fw fa-bars left"></i><form class="form"><div class="form-check form-switch sticky-tools-bar"> \
                    <input class="form-check-input" id="enableThreading" type="checkbox" data-field="enableThreading"> \
                    <label class=" d-none d-md-inline fw-semibold" for="enableThreading"><i class="fa fa-fw fa-bars-staggered right"></i></label> \
                </div></form></div>');
                $('.topic .sticky-tools ul [component="topic/browsing-users"]:last-of-type').append(threadView);
                // Check if there's a stored state for the checkbox and update it
                var storedState = localStorage.getItem('enableThreadingState');
                if (storedState === 'true') {
                    $('#enableThreading').prop('checked', true);
                }
            }
            // Toggle the class 'threaded' on or off when the checkbox changes state
            $('#enableThreading').on('change', function () {
                var isChecked = $(this).is(':checked');
                if (isChecked) {
                    console.log('Thread view is active.');
                    $('ul[component="topic"]').addClass('threaded');
                    $('.posts-container').addClass('threaded')
                    $('ul[component="topic"]').addClass('threaded')
                    $('.post-container').addClass('threaded')
                    $('.timeline-event').addClass('threaded')
                    $('[component="post/footer"]').addClass('threaded');
                    $('[component="post"]').each(function () {
                        // Add the 'threaded' class to matching elements
                        if ($(this).hasClass('pt-4') || $(this).hasClass('self-post')) {
                            $(this).addClass('threaded');
                            $('.topic .sticky-tools').addClass('threaded');
                        }
                    });
                } else {
                    console.log('Thread view is inactive.');
                    $('[component="post"]').removeClass('threaded');
                    $('ul[component="topic"]').removeClass('threaded');
                    $('.posts-container').removeClass('threaded')
                    $('ul[component="topic"]').removeClass('threaded')
                    $('.post-container').removeClass('threaded')
                    $('.timeline-event').removeClass('threaded')
                    $('[component="post/footer"]').removeClass('threaded');
                    $('.topic .sticky-tools').removeClass('threaded');
                }
                // Store the checkbox state in localStorage
                localStorage.setItem('enableThreadingState', isChecked);
            });
            // Check for changes in the checkbox state when the page loads
            $('#enableThreading').trigger('change');
        }
    });
}

function threadedChat() {
    $(document).ready(function () {
        // Check if the screen width is 1200px or more
        if ($(window).width() >= 1200) {
            // Check if the dropdown already exists
            if ($('#enableThreadingChat').length === 0) {
                var chatView = $('<div class="threads-wrapper"><i class="fa fa-fw fa-bars left"></i><form class="form"><div class="form-check form-switch sticky-tools-bar"> \
                    <input class="form-check-input" id="enableThreadingChat" type="checkbox" data-field="enableThreading"> \
                    <label class=" d-none d-md-inline fw-semibold" for="enableThreadingChat"><span class="title-tooltip top" tooltip-text="Éditer Profil"><i class="fa fa-fw fa-bars-staggered right"></i></label> \
                </div></form></div>');
                $('[component="chat/header"]').prepend(chatView);

                // Check if there's a stored state for the checkbox and update it
                var storedState = localStorage.getItem('enableThreadingStateChat');
                if (storedState === 'true') {
                    $('#enableThreadingChat').prop('checked', true);
                }
            }

            // Toggle the class 'threaded' on or off when the checkbox changes state
            $('#enableThreadingChat').on('change', function () {
                var isChecked = $(this).is(':checked');
                if (isChecked) {
                    console.log('Thread view is active.');
                    $('[component="chat/message"]').each(function () {
                        // Add the 'threaded' class to matching elements
                        if ($(this).hasClass('chat-message')) {
                            $(this).addClass('threaded');
                        }
                    });
                } else {
                    console.log('Thread view is inactive.');
                    $('[component="chat/message"]').removeClass('threaded');
                }

                // Store the checkbox state in localStorage
                localStorage.setItem('enableThreadingStateChat', isChecked);
            });

            // Check for changes in the checkbox state when the page loads
            $('#enableThreadingChat').trigger('change');
        }
    });
}


$(window).on('action:chat.loaded', function(data) {
        threadedChat();
});
$(window).on('action:chat.received', function(data) {
        threadedChat();
});
$(window).on('action:ajaxify.end', function (data) {
    threaded();
});

$(window).on('action:posts.edited', function (data) {
    threaded();
});

$(window).on('action:posts.loaded', function (data) {
    threaded();
});

    PW and WS Spirit alive

    phenomlabundefined 2 Replies
    0
  • DownPWundefined DownPW

    sure :

    function threaded() {
    $(document).ready(function () {
        // Check if the screen width is 1200px or more
        if ($(window).width() >= 1200) {
            // Check if the dropdown already exists
            if ($('#enableThreading').length === 0) {
                var threadView = $('<div class="threads-wrapper"><i class="fa fa-fw fa-bars left"></i><form class="form"><div class="form-check form-switch sticky-tools-bar"> \
                    <input class="form-check-input" id="enableThreading" type="checkbox" data-field="enableThreading"> \
                    <label class=" d-none d-md-inline fw-semibold" for="enableThreading"><i class="fa fa-fw fa-bars-staggered right"></i></label> \
                </div></form></div>');
                $('.topic .sticky-tools ul [component="topic/browsing-users"]:last-of-type').append(threadView);
                // Check if there's a stored state for the checkbox and update it
                var storedState = localStorage.getItem('enableThreadingState');
                if (storedState === 'true') {
                    $('#enableThreading').prop('checked', true);
                }
            }
            // Toggle the class 'threaded' on or off when the checkbox changes state
            $('#enableThreading').on('change', function () {
                var isChecked = $(this).is(':checked');
                if (isChecked) {
                    console.log('Thread view is active.');
                    $('ul[component="topic"]').addClass('threaded');
                    $('.posts-container').addClass('threaded')
                    $('ul[component="topic"]').addClass('threaded')
                    $('.post-container').addClass('threaded')
                    $('.timeline-event').addClass('threaded')
                    $('[component="post/footer"]').addClass('threaded');
                    $('[component="post"]').each(function () {
                        // Add the 'threaded' class to matching elements
                        if ($(this).hasClass('pt-4') || $(this).hasClass('self-post')) {
                            $(this).addClass('threaded');
                            $('.topic .sticky-tools').addClass('threaded');
                        }
                    });
                } else {
                    console.log('Thread view is inactive.');
                    $('[component="post"]').removeClass('threaded');
                    $('ul[component="topic"]').removeClass('threaded');
                    $('.posts-container').removeClass('threaded')
                    $('ul[component="topic"]').removeClass('threaded')
                    $('.post-container').removeClass('threaded')
                    $('.timeline-event').removeClass('threaded')
                    $('[component="post/footer"]').removeClass('threaded');
                    $('.topic .sticky-tools').removeClass('threaded');
                }
                // Store the checkbox state in localStorage
                localStorage.setItem('enableThreadingState', isChecked);
            });
            // Check for changes in the checkbox state when the page loads
            $('#enableThreading').trigger('change');
        }
    });
}

function threadedChat() {
    $(document).ready(function () {
        // Check if the screen width is 1200px or more
        if ($(window).width() >= 1200) {
            // Check if the dropdown already exists
            if ($('#enableThreadingChat').length === 0) {
                var chatView = $('<div class="threads-wrapper"><i class="fa fa-fw fa-bars left"></i><form class="form"><div class="form-check form-switch sticky-tools-bar"> \
                    <input class="form-check-input" id="enableThreadingChat" type="checkbox" data-field="enableThreading"> \
                    <label class=" d-none d-md-inline fw-semibold" for="enableThreadingChat"><span class="title-tooltip top" tooltip-text="Éditer Profil"><i class="fa fa-fw fa-bars-staggered right"></i></label> \
                </div></form></div>');
                $('[component="chat/header"]').prepend(chatView);

                // Check if there's a stored state for the checkbox and update it
                var storedState = localStorage.getItem('enableThreadingStateChat');
                if (storedState === 'true') {
                    $('#enableThreadingChat').prop('checked', true);
                }
            }

            // Toggle the class 'threaded' on or off when the checkbox changes state
            $('#enableThreadingChat').on('change', function () {
                var isChecked = $(this).is(':checked');
                if (isChecked) {
                    console.log('Thread view is active.');
                    $('[component="chat/message"]').each(function () {
                        // Add the 'threaded' class to matching elements
                        if ($(this).hasClass('chat-message')) {
                            $(this).addClass('threaded');
                        }
                    });
                } else {
                    console.log('Thread view is inactive.');
                    $('[component="chat/message"]').removeClass('threaded');
                }

                // Store the checkbox state in localStorage
                localStorage.setItem('enableThreadingStateChat', isChecked);
            });

            // Check for changes in the checkbox state when the page loads
            $('#enableThreadingChat').trigger('change');
        }
    });
}


$(window).on('action:chat.loaded', function(data) {
        threadedChat();
});
$(window).on('action:chat.received', function(data) {
        threadedChat();
});
$(window).on('action:ajaxify.end', function (data) {
    threaded();
});

$(window).on('action:posts.edited', function (data) {
    threaded();
});

$(window).on('action:posts.loaded', function (data) {
    threaded();
});
    phenomlabundefined

    @DownPW Thanks. You should remove the threadedChat function and these lines

    $(window).on('action:chat.loaded', function(data) {
        threadedChat();
});
$(window).on('action:chat.received', function(data) {
        threadedChat();
});

    That code is not functional yet and is very experimental 🙂

    I’ll have a look at your DEV environment to make the code recommendations.

    Mark – Founder, Phenomlab Ltd
    Executive IT & Security Leadership
    Phenomlab Ltd

    0
  • DownPWundefined DownPW

    sure :

    function threaded() {
    $(document).ready(function () {
        // Check if the screen width is 1200px or more
        if ($(window).width() >= 1200) {
            // Check if the dropdown already exists
            if ($('#enableThreading').length === 0) {
                var threadView = $('<div class="threads-wrapper"><i class="fa fa-fw fa-bars left"></i><form class="form"><div class="form-check form-switch sticky-tools-bar"> \
                    <input class="form-check-input" id="enableThreading" type="checkbox" data-field="enableThreading"> \
                    <label class=" d-none d-md-inline fw-semibold" for="enableThreading"><i class="fa fa-fw fa-bars-staggered right"></i></label> \
                </div></form></div>');
                $('.topic .sticky-tools ul [component="topic/browsing-users"]:last-of-type').append(threadView);
                // Check if there's a stored state for the checkbox and update it
                var storedState = localStorage.getItem('enableThreadingState');
                if (storedState === 'true') {
                    $('#enableThreading').prop('checked', true);
                }
            }
            // Toggle the class 'threaded' on or off when the checkbox changes state
            $('#enableThreading').on('change', function () {
                var isChecked = $(this).is(':checked');
                if (isChecked) {
                    console.log('Thread view is active.');
                    $('ul[component="topic"]').addClass('threaded');
                    $('.posts-container').addClass('threaded')
                    $('ul[component="topic"]').addClass('threaded')
                    $('.post-container').addClass('threaded')
                    $('.timeline-event').addClass('threaded')
                    $('[component="post/footer"]').addClass('threaded');
                    $('[component="post"]').each(function () {
                        // Add the 'threaded' class to matching elements
                        if ($(this).hasClass('pt-4') || $(this).hasClass('self-post')) {
                            $(this).addClass('threaded');
                            $('.topic .sticky-tools').addClass('threaded');
                        }
                    });
                } else {
                    console.log('Thread view is inactive.');
                    $('[component="post"]').removeClass('threaded');
                    $('ul[component="topic"]').removeClass('threaded');
                    $('.posts-container').removeClass('threaded')
                    $('ul[component="topic"]').removeClass('threaded')
                    $('.post-container').removeClass('threaded')
                    $('.timeline-event').removeClass('threaded')
                    $('[component="post/footer"]').removeClass('threaded');
                    $('.topic .sticky-tools').removeClass('threaded');
                }
                // Store the checkbox state in localStorage
                localStorage.setItem('enableThreadingState', isChecked);
            });
            // Check for changes in the checkbox state when the page loads
            $('#enableThreading').trigger('change');
        }
    });
}

function threadedChat() {
    $(document).ready(function () {
        // Check if the screen width is 1200px or more
        if ($(window).width() >= 1200) {
            // Check if the dropdown already exists
            if ($('#enableThreadingChat').length === 0) {
                var chatView = $('<div class="threads-wrapper"><i class="fa fa-fw fa-bars left"></i><form class="form"><div class="form-check form-switch sticky-tools-bar"> \
                    <input class="form-check-input" id="enableThreadingChat" type="checkbox" data-field="enableThreading"> \
                    <label class=" d-none d-md-inline fw-semibold" for="enableThreadingChat"><span class="title-tooltip top" tooltip-text="Éditer Profil"><i class="fa fa-fw fa-bars-staggered right"></i></label> \
                </div></form></div>');
                $('[component="chat/header"]').prepend(chatView);

                // Check if there's a stored state for the checkbox and update it
                var storedState = localStorage.getItem('enableThreadingStateChat');
                if (storedState === 'true') {
                    $('#enableThreadingChat').prop('checked', true);
                }
            }

            // Toggle the class 'threaded' on or off when the checkbox changes state
            $('#enableThreadingChat').on('change', function () {
                var isChecked = $(this).is(':checked');
                if (isChecked) {
                    console.log('Thread view is active.');
                    $('[component="chat/message"]').each(function () {
                        // Add the 'threaded' class to matching elements
                        if ($(this).hasClass('chat-message')) {
                            $(this).addClass('threaded');
                        }
                    });
                } else {
                    console.log('Thread view is inactive.');
                    $('[component="chat/message"]').removeClass('threaded');
                }

                // Store the checkbox state in localStorage
                localStorage.setItem('enableThreadingStateChat', isChecked);
            });

            // Check for changes in the checkbox state when the page loads
            $('#enableThreadingChat').trigger('change');
        }
    });
}


$(window).on('action:chat.loaded', function(data) {
        threadedChat();
});
$(window).on('action:chat.received', function(data) {
        threadedChat();
});
$(window).on('action:ajaxify.end', function (data) {
    threaded();
});

$(window).on('action:posts.edited', function (data) {
    threaded();
});

$(window).on('action:posts.loaded', function (data) {
    threaded();
});
    phenomlabundefined

    @DownPW I changed your CSS as it was lacking the actual .threaded class which is the target we add and remove

    .page-topic .topic .posts.timeline [component="topic/event"].timeline-event, .page-topic .topic .posts.timeline [component="topic/necro-post"].timeline-event.threaded {
    background: transparent !important;
    margin-bottom: 10px !important;
}
.page-topic .topic .posts.timeline .threaded:last-child .timeline-event:last-child,
.page-topic .topic .posts.timeline .threaded:last-child>[component="post/placeholder"]:last-child,
.page-topic .topic .posts.timeline .threaded:last-child>[component=post]:last-child {
    margin-left: 0.5rem !important;
}

    Seems to work, but can you confirm?

    Mark – Founder, Phenomlab Ltd
    Executive IT & Security Leadership
    Phenomlab Ltd

    0
  • DownPWundefined

    nope

    Sorry I was on my way back from work @phenomlab

    So in fact I’m already going to try adding .threaded to the CSS code.

    When I activate Thread mode, everything is OK however when I deactivate Thread mode, certain classes remain and are not deleted

    For example here, without Thread mode, the background is not returned to vanilla and the same thing for the border-radius :

    0a214db5-6435-49dc-b04d-52842ba0b28d-image.png

    PW and WS Spirit alive

    0
  • DownPWundefined DownPW

    nope

    Sorry I was on my way back from work @phenomlab

    So in fact I’m already going to try adding .threaded to the CSS code.

    When I activate Thread mode, everything is OK however when I deactivate Thread mode, certain classes remain and are not deleted

    For example here, without Thread mode, the background is not returned to vanilla and the same thing for the border-radius :

    0a214db5-6435-49dc-b04d-52842ba0b28d-image.png

    phenomlabundefined

    @DownPW For clarity, I didn’t change all of the classes - only the two you posted last

    Threading off

    fe3562db-edee-4f63-a8aa-1eb59c1279ea-image.png

    Threading on

    a92e0031-cf0c-416e-a1f7-53a6cb3a6631-image.png

    Mark – Founder, Phenomlab Ltd
    Executive IT & Security Leadership
    Phenomlab Ltd

    0
  • DownPWundefined

    yep but these 2 class have problem, on your screens, with Threading Off, background color use –bs-body-navbar and not –bs-body-bg.
    And if you seen topi event is not transparent like vanilla

    PW and WS Spirit alive

    phenomlabundefined 2 Replies
    0
  • DownPWundefined DownPW

    yep but these 2 class have problem, on your screens, with Threading Off, background color use –bs-body-navbar and not –bs-body-bg.
    And if you seen topi event is not transparent like vanilla

    phenomlabundefined

    @DownPW That should make no difference?

    Just remove it from the class

    .page-topic .topic .posts.timeline .timeline-event, .page-topic .topic .posts.timeline > [component="post/placeholder"], .page-topic .topic .posts.timeline > [component=post] {
    border-left: none;
    transition: transform 0.3s ease !important;
    background: var(--bs-body-bg);
    /* background: var(--bs-body-navbar); */
    border-radius: var(--bs-border-radius);
}

    9871c5b3-1b9b-415b-b848-0f663341fc09-image.png

    Mark – Founder, Phenomlab Ltd
    Executive IT & Security Leadership
    Phenomlab Ltd

    0
  • DownPWundefined

    that makes all the difference 🙂

    Vanilla is like this:

    image.png

    PW and WS Spirit alive

    1
  • DownPWundefined DownPW

    yep but these 2 class have problem, on your screens, with Threading Off, background color use –bs-body-navbar and not –bs-body-bg.
    And if you seen topi event is not transparent like vanilla

    phenomlabundefined

    @DownPW said in Threading support for NodeBB:

    And if you seen topi event is not transparent like vanilla

    It is for me

    6d89cea9-6311-48d1-8eea-07b7b827eafd-image.png

    Mark – Founder, Phenomlab Ltd
    Executive IT & Security Leadership
    Phenomlab Ltd

    0
  • DownPWundefined

    nope for me

    image.png

    PW and WS Spirit alive

    0
  • DownPWundefined

    no return to vanilla background

    blink2.gif

    vanilla: bs-body-bg
    thread ON: bs-body-navbar

    PW and WS Spirit alive

    phenomlabundefined DownPWundefined 2 Replies
    0
  • DownPWundefined DownPW

    no return to vanilla background

    blink2.gif

    vanilla: bs-body-bg
    thread ON: bs-body-navbar

    phenomlabundefined

    @DownPW Because your CSS has not been altered dude.

    ebe21e6c-5409-498f-a5dd-605403c52622-image.png

    Try now. It works for me?

    Mark – Founder, Phenomlab Ltd
    Executive IT & Security Leadership
    Phenomlab Ltd

    0
  • DownPWundefined

    I have not the same result :

    image.png

    I have bs-body-bg with thread ON

    PW and WS Spirit alive

    0
  • DownPWundefined DownPW

    I have not the same result :

    image.png

    I have bs-body-bg with thread ON

    phenomlabundefined

    @DownPW Isn’t that correct, or do you want --bs-body-navbar ?

    Mark – Founder, Phenomlab Ltd
    Executive IT & Security Leadership
    Phenomlab Ltd

    0
  • DownPWundefined DownPW

    no return to vanilla background

    blink2.gif

    vanilla: bs-body-bg
    thread ON: bs-body-navbar

    DownPWundefined

    @DownPW said in Threading support for NodeBB:

    vanilla: bs-body-bg
    thread ON: bs-body-navbar

    PW and WS Spirit alive

    0
  • DownPWundefined DownPW

    @DownPW said in Threading support for NodeBB:

    vanilla: bs-body-bg
    thread ON: bs-body-navbar

    phenomlabundefined

    @DownPW Right. Hold on.

    Mark – Founder, Phenomlab Ltd
    Executive IT & Security Leadership
    Phenomlab Ltd

    0
  • DownPWundefined

    or maybe for each modification this must be specified twice ?

    THREAD OFF

    /* Start of threaded CSS rules */
.page-topic .topic .posts.timeline .timeline-event,
.page-topic .topic .posts.timeline > [component="post/placeholder"],
.page-topic .topic .posts.timeline > [component="post"] {
  border-left: none;
  transition: transform 0.3s ease !important;
  background: var(--bs-body-bg);
  /* background: var(--bs-body-navbar); */
  border-radius: var(--bs-border-radius);
}

    THREAD ON

    /* Start of threaded CSS rules */
.page-topic .topic .posts.timeline .timeline-event,
.page-topic .topic .posts.timeline > [component="post/placeholder"],
.page-topic .topic .posts.timeline > [component="post"].threaded {
  border-left: none;
  transition: transform 0.3s ease !important;
  /* background: var(--bs-body-bg); */
  background: var(--bs-body-navbar);
  border-radius: var(--bs-border-radius);
}

    Same things for other modif like border radius

    PW and WS Spirit alive

    0
  • DownPWundefined DownPW

    or maybe for each modification this must be specified twice ?

    THREAD OFF

    /* Start of threaded CSS rules */
.page-topic .topic .posts.timeline .timeline-event,
.page-topic .topic .posts.timeline > [component="post/placeholder"],
.page-topic .topic .posts.timeline > [component="post"] {
  border-left: none;
  transition: transform 0.3s ease !important;
  background: var(--bs-body-bg);
  /* background: var(--bs-body-navbar); */
  border-radius: var(--bs-border-radius);
}

    THREAD ON

    /* Start of threaded CSS rules */
.page-topic .topic .posts.timeline .timeline-event,
.page-topic .topic .posts.timeline > [component="post/placeholder"],
.page-topic .topic .posts.timeline > [component="post"].threaded {
  border-left: none;
  transition: transform 0.3s ease !important;
  /* background: var(--bs-body-bg); */
  background: var(--bs-body-navbar);
  border-radius: var(--bs-border-radius);
}

    Same things for other modif like border radius

    phenomlabundefined

    @DownPW Try now.

    Mark – Founder, Phenomlab Ltd
    Executive IT & Security Leadership
    Phenomlab Ltd

    0
Log in to reply

Related Topics
  • cagatayundefined

    What’s going on with NodeBB?

    Performance nodebb script die
    20
    8 Votes
    20 Posts
    2k Views
    phenomlabundefined
    @cagatay The most reliable way to upgrade Node.js on Ubuntu depends on how you originally installed it. Method 1: Using NVM (Recommended) If you already use Node Version Manager (NVM), upgrading is simple. NVM allows you to keep both versions and switch between them if needed. Install Node 22: nvm install 22 Switch to Node 22: nvm use 22 Set it as your default: nvm alias default 22 Verify the change: node -v Method 2: Using NodeSource (PPA) If you installed Node.js via apt using the NodeSource repository, you need to update the repository script to point to the new version. Remove the old NodeSource list (optional but cleaner): sudo rm /etc/apt/sources.list.d/nodesource.list Download and run the NodeSource setup script for Node 22: curl -fsSL [https://deb.nodesource.com/setup_22.x](https://deb.nodesource.com/setup_22.x) | sudo -E bash - Install/Upgrade Node.js: sudo apt-get install -y nodejs Verify the installation: node -v Method 3: Using the ‘n’ Package If you have npm installed, you can use the n interactive manager. Clear the npm cache: sudo npm cache clean -f Install the ‘n’ helper: sudo npm install -g n Install Node 22: sudo n 22 Update your shell: hash -r Troubleshooting Permission Denied: If you see permission errors using Method 2 or 3, ensure you are using sudo. Path Issues: If node -v still shows version 20 after upgrading via NVM, restart your terminal or run source ~/.bashrc. Conflicts: Avoid mixing these methods. If you switch from apt to nvm, it is best to sudo apt remove nodejs first to avoid path conflicts.
  • phenomlabundefined

    Threaded chat support for NodeBB

    Let's Build It threaded chat code
    35
    1
    19 Votes
    35 Posts
    9k Views
    phenomlabundefined
    @DownPW said in Threaded chat support for NodeBB: Better like this : add shadow and border-left on self answer Of course - you style to your own requirements and taste I’ll commit that CSS we discussed yesterday also
  • Pandaundefined

    Upgrade to NodeBB v3? 2BB or not 2BB, that is the question!

    Solved Configure nodebb upgrade nodebb
    8
    4 Votes
    8 Posts
    2k Views
    phenomlabundefined
    @Panda said in Upgrade to NodeBB v3? 2BB or not 2BB, that is the question!: So although thats a plugin it has Widget like element and stopped working on the Theme change Which is normal based on the widgets being reset when you change themes.
  • Pandaundefined

    adding some console.log to Nodebb

    Solved Customisation nodebb
    4
    1 Votes
    4 Posts
    2k Views
    phenomlabundefined
    @eeeee if you’re using the console, you could try node app.js > app.log 2>&1 This would redirect stdout to a file named app.log and redirect stderr to stdout. I’m not sure about standard logging under NodeBB, but there is an error log located at logs/error.log. Failing that, you could always stop the NodeBB service then use ./nodebb dev from the console which would then provide debug output.
  • phenomlabundefined

    Setting up a beta NodeBB v3 environment

    Moved Let's Build It nodebb upgrades beta1
    14
    3
    11 Votes
    14 Posts
    4k Views
    phenomlabundefined
    @dave1904 excellent news. Thanks for the feedback
  • Salaundefined

    Fresher in Nodebb install

    General nodebb
    24
    15 Votes
    24 Posts
    7k Views
    phenomlabundefined
    @Hari I’ve been reading a lot about APO. Looks impressive.
  • Pandaundefined

    Rotating homepage icons, gifs?

    Solved Configure nodebb
    2
    3 Votes
    2 Posts
    910 Views
    phenomlabundefined
    @eveh It’s not a GIF, no. It’s actually a webp file so made much smaller, and uses keyframes to control the rotation on hover. You can easily make your own though The CSS for that is as below @keyframes rotate180 { from { transform: rotate(0deg); } to { transform: rotate(180deg); } } @keyframes rotate0 { from { transform: rotate(180deg); } to { transform: rotate(0deg); } } Your milage may vary on the CSS below, as it’s custom for Sudonix, but this is the class that is used to control the rotate .header .forum-logo, img.forum-logo.head { max-height: 50px; width: auto; height: 30px; margin-top: 9px; max-width: 150px; min-width: 32px; display: inline-block; animation-name: rotate180, rotate0; animation-duration: 1000ms; animation-delay: 0s, 1000ms; animation-iteration-count: 1; animation-timing-function: linear; transition: transform 1000ms ease-in-out; }
  • phenomlabundefined

    NodeBB slow after DB recovery

    Solved Performance performance nodebb
    1
    5 Votes
    1 Posts
    693 Views
    No one has replied