@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.

1. Install Node 22:
   nvm install 22
2. Switch to Node 22:
   nvm use 22
3. Set it as your default:
   nvm alias default 22
4. 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.

1. Remove the old NodeSource list (optional but cleaner):
   sudo rm /etc/apt/sources.list.d/nodesource.list
2. 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 -
3. Install/Upgrade Node.js:
   sudo apt-get install -y nodejs
4. Verify the installation:
   node -v

Method 3: Using the ‘n’ Package

If you have npm installed, you can use the n interactive manager.

1. Clear the npm cache:
   sudo npm cache clean -f
2. Install the ‘n’ helper:
   sudo npm install -g n
3. Install Node 22:
   sudo n 22
4. 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.

Hey everyone,

I’m not sure where to post this, I’ll let @phenomlab edit it if necessary.

Already posted here : https://community.nodebb.org/topic/19318/focus-mode-simply-immersive-reading-for-nodebb

I’ve been working on a small client-side script that adds an simply immersive reading mode to NodeBB. No plugin required, just a few lines of custom JS and CSS dropped into the ACP.

I’m just sharing this here for fun : https://github.com/DroidBV8/nodebb-focus-mode

What it does

Pressing F (or clicking the icon in the right sidebar) hides everything that isn’t the content you’re trying to read:

• Both sidebars
• Header / brand bar
• Footer
• Topic thumbnails and sidebar tools (reply, follow, timeline)

The content area reflows to a centered 860px column, font size bumps up slightly, and a reading progress bar appears at the top of the page.

To exit: press F again, Escape, or click the floating button that appears in the bottom-right corner.

Details

Activation effect : a subtle CRT glitch effect plays on toggle. Three CSS variables let you dial the intensity up or down without touching the keyframes:

--fm-glitch-opacity: 1;   /* 0.5 = subtle | 2 = heavy */
--fm-glitch-skew:    1deg;
--fm-glitch-shift:   4px;

Keyboard : F to toggle. Ctrl+F, Cmd+F and Alt+F are ignored so you don’t accidentally trigger it when searching the page.

Scroll preservation : when toggling, the layout shifts because sidebars appear/disappear. The script measures the position of the nearest visible post before and after the layout change, then compensates with scrollBy so you stay exactly where you were.

Topic-only : the button is greyed out on non-topic pages with a tooltip explaining why. Pressing F outside a topic shows a small toast instead of doing nothing silently.

Mobile: disabled entirely under 768px. No button injected, no state restored.

Theming : all colors reference Bootstrap CSS variables (--bs-body-bg, --bs-border-color, --bs-primary, etc.) so it adapts automatically to any NodeBB theme, light or dark.

State : saved in localStorage, restored on next visit. Uses try/catch so it degrades gracefully in private browsing.

Implementation notes

The script is a self-contained IIFE, hooking into the standard NodeBB client-side events:

$(window).on('action:ajaxify.end',   function () { focusMode(); });
$(window).on('action:topic.loaded',  function () { focusMode(); });
// etc.

The glitch effect is pure CSS @keyframes , the JS only adds/removes classes. Layout compensation is synchronous (getBoundingClientRect → scrollBy) with no setTimeout on the scroll itself, which avoids triggering NodeBB’s scroll-based URL updater in a loop.

Compatibility

Tested on NodeBB 3.x with Bootstrap 5 themes. Should work on any setup using the standard sidebar components (nav.sidebar-left, nav.sidebar-right).

@crazycells I did see something similar to that article, yes. I never fully understood why anyone would want to give unfettered and complete access to AI without first understanding exactly what it had control of, and what it intended to do with that access.

This isn’t the first “horror story” and it won’t be the last.

@crazycells Yes, because of this code

$(document).ready(function () {
    $(window).on('action:ajaxify.end', function (data) {
        if (config && config.uid > 0) {
            // User is logged in, so don't fire any message
        } else {
            // Insert content into the selected element
            var addAfterLastPost = $(
                "<div class='alert alert-warning alert-dismissible fade show' role='alert'>" +
                "<p><strong>Hello! It looks like you're interested in this conversation, but you don't have an account yet.</strong></p>" +
                "<p>Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, " +
                "and choose to be notified of new replies (ether email, or push notification). You'll also be able to save bookmarks, use reactions, and upvote to show your appreciation to other community members.</p>" +
                "<p>With your input, this post could be even better 💗"+
                "<br><br>"+
                "<a style='margin-right:5px;' component='topic/reply/guest' href='/register' class='fw-semibold btn btn-sm btn-warning'>Register</a>" +
                "<a component='topic/reply/guest' href='/login' class='fw-semibold btn btn-sm btn-info'>Log in</a>" +
                "<button type='button' class='btn-close' data-bs-dismiss='alert' aria-label='Close'></button>" +
                "</div>"
            );
            $('ul[component="topic"]').after(addAfterLastPost);
        }
    });
});

This was adopted into core as far as I know, so I’ve removed my manual code.

thanks @DownPW ! this is definitely very helpful.

Solved. Tuto here and here

I was experiencing 500 (Internal Server Error) responses from the proxy, visible in the browser console:

GET https://proxy.xxx-xxx.net/ogproxy?url=https%3A%2F%2Fzupimages.net%2Fup%2F26%2F16%2Fld8h.jpg 500 (Internal Server Error)

After investigation, I found two root causes:

1. Direct image URLs being sent to the proxy

The custom JavaScript responsible for detecting links and sending them to the proxy was using the following regex to exclude direct image links:

var fileExtensionPattern = /\.(png|jpeg|gif|pdf|docx?|xlsx?|pptx?|zip|rar|svg)$/i;

Note that .jpg and .webp were missing from the pattern. As a result, links ending in .jpg were not recognized as direct image URLs and were forwarded to the OGProxy, which then tried to scrape them as web pages using open-graph-scraper — causing a 500 error.

The fix was to add the missing extensions:

var fileExtensionPattern = /\.(jpg|png|jpeg|gif|pdf|docx?|xlsx?|pptx?|zip|rar|svg|webp)$/i;

2. The proxy not following HTTP redirects

Some image hosting services (e.g. zupimages.net) return a 301 redirect from the bare domain to www. When curl follows the redirect manually the image loads fine:

curl -IL https://zupimages.net/up/26/16/ld8h.jpg
HTTP/2 301 → https://www.zupimages.net/up/26/16/ld8h.jpg
HTTP/2 200

However, the proxy’s axios.get() call does not handle this gracefully when open-graph-scraper is involved, resulting in a 500 error being returned to the client.

My questions are:

1. Is there a known best practice for handling redirect chains in open-graph-scraper?
2. Would passing maxRedirects or followRedirect options explicitly to axios or ogs fix this reliably?
3. Is there a cleaner way to pre-filter direct image/file URLs before they reach the proxy, ideally at the NodeBB plugin level rather than in custom JS?

Thanks in advance.

@phenomlab thank you! I appreciate it!

@Madchatthew This is really inspiring! Keep it up! There is life after Windows…

@phenomlab this is good. I see this happen a lot. It is unclear because usually it is a group talking and going over things and trying to plan according to the knowledge that they have with what is working and not working now. And yet some time down the road, something new comes out, something changes and now what was possible isn’t and vise versa. I have seen these kinds of situations, and I encourage taking very good notes and making them so they are always accessible to you/your team so that way a search can be done and the notes appear and you know exactly why, what, how and where the decision was made.

When I say you, I mean anyone in a position to make decisions that bring about change in whatever area it might be.

So far so good .

@phenomlab said:

@DownPW Possible, yes, but not using the existing code. It would need to be changed to test for multiple entries based on two distinct widget areas. This should work (it’s already applied on your DEV server)

function chatBanner() {
    var roomName = $("h5[component='chat/header/title']").text().trim();
    var roomNameWidget = $('[id*="chat-modal"] .btn-ghost.btn-sm.dropdown-toggle').text().trim();
    var bannerContent;
    if (roomName === "General" || roomNameWidget === "General") {
        bannerContent = '<div id="chatbanner"><i class="fa fa-fw fa-circle-info link-primary" aria-hidden="true"></i> Message 1. </div>';
    } else if (roomName === "Support" || roomNameWidget === "Support")  {
        bannerContent = '<div id="chatbanner"><i class="fa fa-fw fa-circle-info link-primary" aria-hidden="true"></i> Message 2.</div>';
    } else if (roomName === "Info" || roomNameWidget === "Info")  {
        bannerContent = '<div id="chatbanner"><i class="fa fa-fw fa-circle-info link-primary" aria-hidden="true"></i> Message 3</div>';
    } else if (roomName === "xxxxxx" || roomNameWidget === "xxxxxx")  {
        bannerContent = '<div id="chatbanner"><i class="fa fa-fw fa-circle-info link-primary" aria-hidden="true"></i> Message 4</div>';
    } else if (roomName === "xxxxxx" || roomNameWidget === "xxxxxx")  {
        bannerContent = '<div id="chatbanner"><i class="fa fa-fw fa-circle-info link-primary" aria-hidden="true"></i> Message 5</div>';
    } else if (roomName === "xxxxxx" || roomNameWidget === "xxxxxx") {
        bannerContent = '<div id="chatbanner"><i class="fa fa-fw fa-circle-info link-primary" aria-hidden="true"></i> Message 6</div>';
    } else {
        bannerContent = '<div id="chatbanner"><i class="fa fa-fw fa-circle-info link-primary" aria-hidden="true"></i> Ce canal est une discussion privée. </div>';
    }
    var chatMessagesContainer = $('[component="chat/system-message"]:last-of-type');
    //var existingMessages = $('[component="chat/message"]');
    var existingMessages = $('[component="chat/composer"]');

    if (existingMessages.length === 0) {
        // If there are no messages, append the banner to the messages container
        chatMessagesContainer.first().after(bannerContent);
    } else {
        // If there are messages, add the banner after the last message
        //existingMessages.last().after(bannerContent);
        existingMessages.before(bannerContent);
    }
}

Here, we are using || which is essentially an OR operator. Because we cannot know the chat room ID in advance, it is necessary to use a wildcard to track it

[id*="chat-modal"] .btn-ghost.btn-sm.dropdown-toggle

I see bugs with this code and chat box widget I use on my categories page

What was happening

NodeBB allows multiple chat windows to be open simultaneously , the widget and the full/modal-page DM view. Both exist in the DOM at the same time.

The original code used global jQuery selectors like $(‘[component=“chat/composer”]’) which scanned the entire page and found elements from both chat windows at once. When you opened “XY” caht while “XXY” was still open in the widget, the selectors would pick up the wrong room name or inject the banner into the wrong window.

The key discovery was that the action:chat.loaded event passes the modal DOM element directly as data. By wrapping it in $(data) and using $modal.find(…) for every selector, all queries are scoped exclusively to the correct modal, making it impossible for two open chat windows to interfere with each other.

FIX code (to adapt to your rooms) :

function chatBanner(modalElement) {
    var $modal = $(modalElement);

    $modal.find('#chatbanner').remove();

    var roomName = $modal.find('[component="chat/room/name"]').text().trim();

    if (!roomName) {
        var placeholder = $modal.find('[component="chat/input"]').attr('placeholder') || '';
        roomName = placeholder.replace(/^Message #?/, '').trim();
    }

    var bannerContent;
    if (roomName === "General") {
        bannerContent = '<div id="chatbanner"><i class="fa fa-fw fa-circle-info link-primary" aria-hidden="true"></i> Chat message banner</div>';
    } else if (roomName === "xxxxxxxxxx") {
        bannerContent = '<div id="chatbanner"><i class="fa fa-fw fa-circle-info link-primary" aria-hidden="true"></i> Chat message banner</div>';
    } else if (roomName === "xxxxxxxxxx") {
        bannerContent = '<div id="chatbanner"><i class="fa fa-fw fa-circle-info link-primary" aria-hidden="true"></i> Chat message banner</div>';
    } else if (roomName === "xxxxxxxxxx") {
        bannerContent = '<div id="chatbanner"><i class="fa fa-fw fa-circle-info link-primary" aria-hidden="true"></i> Chat message banner</div>';
    } else if (roomName === "xxxxxxxxxx") {
        bannerContent = '<div id="chatbanner"><i class="fa fa-fw fa-circle-info link-primary" aria-hidden="true"></i> Chat message banner</div>';
    } else if (roomName === "Les geeks de l'espace") {
        bannerContent = '<div id="chatbanner"><i class="fa fa-fw fa-circle-info link-primary" aria-hidden="true"></i> Chat message banner</div>';
    } else {
        bannerContent = '<div id="chatbanner"><i class="fa fa-fw fa-circle-info link-primary" aria-hidden="true"></i> Chat message banner</div>';
    }

    $modal.find('[component="chat/composer"]').first().before(bannerContent);
}

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

I’m happy to see this

PrestaShop + modules IA

https://www.prestashop.com

Magento

https://developer.adobe.com/open/magento

@Sampo2910 search the forum here for ogproxy which is the client side version of that plugin I wrote.

It’s in use here on this forum.

@phenomlab said:

@Madchatthew ouch. Sounds nasty. Did you get to the bottom of why it happened?

I believe it is due to not everything getting upgraded because i wasn’t checking on the different packages I had installed from the AUR. Then when I ran yay it was like, hey would you like to update all of these things that you haven’t updated in months, perhaps years or ever for that matter and I was like yes please

If you don’t have yay there are no notifications that you need more updates than what you realize. Chrome was staying updated because it would give me a notification, but there was the nvidia package that needed to be upgraded as well and I had never upgraded it. I didn’t realize it and should have. Then some of those packages use cmake and that needed to be updated as well. So using yay is beneficial to make sure you get all the updates you need.

@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

@baris said:

You should change your selectors so it doesn’t look at the entire document. You probably only want to apply fancybox to stuff inside the #content element which is what changes when the user navigates around the page. So use $('#content a').... for your selectors then the forum logo in the header won’t be selected.

I modified the JS Fancybox code now and this code and it seem better

// ---------------------------------------------
// Fancybox Media Reader (Without Website Logo)
// ---------------------------------------------

if (top.location.pathname !== '/login') {
    $(window).on('action:posts.loaded', function(data) {
        console.log("Polling DOM for lazyLoaded images to apply Fancybox");
        $(document).ready(function() {
            $('#content a').not('.forum-logo').not(".avatar").not(".emoji").not(".bmac-noanimate").each(function() {
                $('#content a[href*=".jpg"], #content a[href*=".jpeg"], #content a[href*=".png"], #content a[href*=".gif"], #content a[href*=".webp"]').addClass("noanimate");
            });
        });
    });
}

if (top.location.pathname !== '/login') {
    $(document).ready(function() {
        $(window).on('action:ajaxify.end', function(data) {
            $('#content a').not('.logo').not(".avatar").not(".emoji").not(".bmac-noanimate").each(function() {
                $('#content a[href*=".jpg"], #content a[href*=".jpeg"], #content a[href*=".png"], #content a[href*=".gif"], #content a[href*=".webp"]').addClass("noanimate");
                data.preventDefault()
                // Strip out the images contained inside blockquotes as this looks nasty :)
                $('#content blockquote img').remove();
            });
            Fancybox.bind(
                '#content a[href*=".jpg"], #content a[href*=".jpeg"], #content a[href*=".png"], #content a[href*=".gif"], #content a[href*=".webp"]',
                {
                    groupAll: true,
                }
            );
        });
    });
}

// Chat fancybox - fires when chat module loaded and AJAX calls new chat
$(document).ready(function() {
    $(window).on('action:chat.loaded', function(data) {
        // >>> Se limiter au contenu principal uniquement <<<
        $('#content img').not('.forum-logo').not(".avatar").not(".emoji").not(".bmac-noanimate").each(function() {
            var newHref = $(this).attr("src");
            $(this).wrap("<a class='fancybox' href='" + newHref + "'/>");
            $('#content a[href*=".jpg"], #content a[href*=".jpeg"], #content a[href*=".png"], #content a[href*=".gif"], #content a[href*=".webp"]').addClass("noanimate");
            data.preventDefault();
            // Strip out the images contained inside blockquotes as this looks nasty :)
            $('#content blockquote img').remove();
        });
        Fancybox.bind(
            '#content a[href*=".jpg"], #content a[href*=".jpeg"], #content a[href*=".png"], #content a[href*=".gif"], #content a[href*=".webp"]',
            {
                groupAll: true,
            }
        );
    });
});

For the logo, I must use overflow: visible !important; on [component="brand/logo"]

/* --- Logo --- */
[component="brand/logo"] {
  max-height: 50px;
  width: auto;
  height: auto;
  max-width: 100%;     
  display: block;
  object-fit: contain;  
  object-position: left center;
  overflow: visible !important;
}

Better result !!

@phenomlab said:

If you bypass or disable cloudflare, does the problem subside?

I will test that tonight.

I have create waf rules on CF and page rule for ignore socket.io…

Here’s another… Google busy again!

https://www.theverge.com/tech/870056/google-cellular-data-lawsuit-settlement