This category is designed to offer practical advice, step by step guidance, and code suggestions for you to create you very own “Franken” build to suit your needs… “It’s Alive!!”
I’ve had limited success with the plugin nodebb-plugin-twitter and its various forks in the sense that the embeds failed to load - here’s an example of that exact problem (never resolved from what I can see)
https://github.com/NodeBB-Community/nodebb-plugin-twitter/issues/2
I decided to write my custom JS which can be found here
https://github.com/phenomlab/nodebb-twitter-embeds
This not only works in the same way as the NodeBB plugin, but will also render client-side so does not pile up in terms of resources on your server 🙂 In addition, the available arguments for the embeds are below
https://developer.x.com/en/docs/twitter-for-websites/embedded-tweets/guides/embedded-tweet-parameter-reference
Here’s a real-life example
https://x.com/phenomlab/status/1810648261369233607
For those who have delved as deep into styling NodeBB as I have, this is for you 🙂
It’s relatively easy to achieve this look when a topic is updated (note the different coloured posts card)
84655243-fa6c-4007-9588-944e4a4800e1-image.png
Here, we simply target the below class
body:not(.user-guest) li.unread .stats-postcountHowever, it’s not so simple an affair to achieve the same look in the category view as the two DIVs are identical and have no unique classes
c4ee50a6-5f48-4cd3-a103-3a15cb9c6461-image.png
0fe2c02c-1b7d-451c-a3c4-bbcb7ce21115-image.png
To work around this, we can use a very simple function that adds an ID to the “posts” DIV as shown below (this is placed in /admin/appearance/customise#custom-js)
$(document).ready(function() { $(window).on('action:ajaxify.end', function(data) { // Select the div using its class $('.card.card-header.border-0.p-2.overflow-hidden.rounded-1.d-flex.flex-column.align-items-center').each(function() { // Check if the div contains the word "Posts" if ($(this).text().trim().includes("Posts")) { // Assign the id 'catpost' to the div $(this).attr('id', 'updated-posts'); } }); }); });This code will first look for the classes .card.card-header.border-0.p-2.overflow-hidden.rounded-1.d-flex.flex-column.align-items-center in the DOM, and if there, it will add the ID of updated-posts, meaning you can then target with the same CSS you are using in the recent view. See below
c4e1119b-89dd-4cc0-b433-862d83c73782-image.png
You’ll see that the ID has been added as required, and this means we can now adjust the original CSS so it looks like the below
body:not(.user-guest) li.unread .stats-postcount, body:not(.user-guest) .unread #updated-postsNOTE: body:not(.user-guest) is being used so that the effect is not being applied to those who are not logged in as that wouldn’t make any sense - your mileage here may vary though.
6d1ea244-a15d-449f-b674-db9e7063f1b4-image.png
Doesn’t that look better? For the life of me, I can’t understand why these two elements do not have ID’s set already, but there you go.
Enjoy.
Have you ever found yourself struggling for that killer phrase where you know you need that competitive edge to get you over the line, but just can’t find the words? Look no further! Introducing the Corporate Bullshit Generator; a product absolutely guaranteed to make your speech or presentation stand out well above the others. Just copy the phrase generated below and insert where required.
Give it a whirl, and amaze your peers with your superior intellect 😛
Try It
Ok, in all seriousness, this is something I wrote on the back of being subjected to “death by PowerPoint” some time ago - an extremely dull deck full containing over 100 slides - with random “buzz words” inserted where the author thought it appropriate. This is my response to that specific scenario. Full sarcasm is intended!
In terms of code, this is 100% JS - there is also a PHP version for those who’d prefer that - in actual fact, I originally wrote it in PHP but only this afternoon converted that to JS.
Enjoy! If you’d like the code, let me know. I intend to create a “coding playground” where stuff like this can be found.
I have to admit, @DownPW gets the credit for this, as I saw something he was working on for his release of v3 and liked it so much I asked him if I could “steal” it for my own site.
I took his original design concept and extended it using the NodeBB API. In Harmony, it looks like this (see resultant menu on the left underneath the categories button).
66a69d0c-6842-432a-9dd8-9706d21f8e15-image.png
Now I have you salivating 🙂 I expect you’d like the code to test for yourself? Sure…
Firstly, you’ll need to go to /admin/settings/navigation
Locate the Categories icon as shown below, and enable the “Dropdown” feature
969c795a-e5fd-4fc3-b11f-66dbc2c9a9bb-image.png
Save
Now add the below code into the section shown
<li id="thecategories"><span class="category-menu"><i class="fa fa-fw fa-list"></i><a style="display: inherit;" class="dropdown-item rounded-1" href="/categories">All Categories</span></a></li>0648fc30-fb08-4661-ad37-fc0d72acefe3-image.png
Save your changes
Now to go /admin/appearance/customise#custom-js
Paste this code into the editor
$(document).ready(function() { $.getJSON('/api/categories', function(data, status) { $.each(data.categories, function(key, value) { var categorylist = $(" \ <li><span class='category-menu'><i class='fal " + this.icon + "'></i><a style='display: inherit;' class='dropdown-item rounded-1' href='/category/" + this.slug + "'>" + this.name + "</a></span></li> \ <ul style='list-style: none;'>" + this.children.map(c => `<li><span class='category-menu'><i class='fal ${c.icon}'></i><a class='dropdown-item rounded-1' style='display: inherit;' href='/category/${c.slug}'>${c.name}</a></span></li>`).join(" ") + "</ul><li class='dropdown-divider'></li>" ); if ($(window).width() < 767) { $(".bottombar #thecategories").append(categorylist); } else { $(".sidebar-left #thecategories").append(categorylist); } }); }); });Save the changes
Now go to /admin/appearance/customise#custom-css
Add the below code into the CSS console
li#thecategories { min-width: 250px; padding-left: 10px; font-size: 90%; padding-right: 10px; } span.category-menu { display: inline; margin-left: 10px; margin-right: 10px; }Note, you’ll likely need to adjust this CSS to suit your own site and layout.
NOTES: It’s important to detail here that the JS function does all of the work for you, but will include any icons you’ve defined for categories etc. If you don’t use icons, you should remove the below sections
<i class='fal " + this.icon + "'></i>Of equal importance is the below if/else
if ($(window).width() < 767) { $(".bottombar #thecategories").append(categorylist); } else { $(".sidebar-left #thecategories").append(categorylist); }This determines the size of the viewport in use (mobile versus desktop) and then based on the output from the device, determines where to append the dynamic output - either the sidebar or the bottombar). As this is effectively choosing a location, we can use the same id of #thecategories twice as it’s “one or zero” - either one, but not both - in a nutshell, you cannot declare the same ID twice or this will cause you problems.
As this code uses the API, it never needs to be updated - if you remove or add any categories, these are reflected as soon as you reload the browser. So we don’t kill the CPU or the website itself, this code is only called onLoad and does not trigger using any ajax callbacks.
Enjoy.
I wanted to add functionality into Sudonix so that it
a) Adds a new DIV in the form of a panel/card after the last post if the topic is “solved”
b) Adds a link that will take you straight to the solution
c) Scrolls to that particular DIV containing the solution using page scrolling with an offset
Basically, it would look like this - see video below:
To my mind, this is a nice touch - a key feature that is missing from the Q&A plugin. I’ve asked for it to be added, although I’m not sure how much of an appetite there is for this, so with some simple HTML, NodeBB Widget areas, and some jQuery, it’s all possible 🙂
Widget code below:
https://github.com/phenomlab/nodebb-q-a-extension/blob/main/widget.html
How to use Open /admin/extend/widgets Drag and drop a HTML widget into the topic.tpl template, positioned in the Topic Footer Paste the code from Github into the HTML pane like below36a2f2d0-ed7a-4f94-a5fa-1b742c331413-image.png
Save the changesAdd this into your custom CSS /admin/appearance/customise#custom-css. Note that this is a “starting point” that uses var and so you will need to adjust to fir your own site.
https://github.com/phenomlab/nodebb-q-a-extension/blob/main/style.css
From now, any topics which are enabled for Q&A and set to a question will look something like the below
Resolvedddbf913b-bb9e-401c-8e15-530b6d2a23c0-image.png
Unresolved6ea90947-30e1-4a0e-a4a8-4305267f9d3a-image.png
Unanswered3d16f558-94f7-49bc-84c2-44f0b14e55f6-image.png
This makes the Q&A plugin a bit more intuitive - what do you think?
For anyone who has been following the below thread, this is for you in terms of installation on your own forum. As with all good demos and POC’s, this site runs the OGProxy and you’ll see it working as you trawl through this post.
https://sudonix.org/topic/495/ogproxy-a-replacement-for-iframely
First things firstThere’s some things we need to cover first before we start to deploy any code. Remember how in the thread above, I mentioned that OGProxy is in fact a server and client, and not a plugin. I could have made the client side a plugin, but to me, there’s little point given the length of code required to actually execute the previewLinks() function.
That said, there are actually three distinct elements that make up the OGProxy framework. These are
A nodeJS based server that is responsible for working in the background, and makes use of the existing open-graph-scraper package you’ll find in NPM - no point in reinventing the wheel here 🙂https://www.npmjs.com/package/open-graph-scraper
A proxy server is required, and needs to run in a subdomain of your parent. For example, if your domain is something.com then you need to setup an A record at your DNS provider for proxy and have it point to the same IP address where your web server sits that hosts NodeBB. You’ll then need to create an nginx config for this new site (see later in this walkthrough), and access that as https://proxy.something.com (the https is an expected standard these days, so don’t be surprised by this).
Client side execution of the previewLinks() function. NodeBB comes with it’s own custom JS panel, and we’ll be making good use of that.
Some custom CSS
If you are curious as to what each line of the node server is doing, I have provided a detailed explanation here
Spoiler
The OGProxy sets up a server using the NodeJS Express framework to handle a route for fetching Open Graph data from a given URL. Let’s go through the code and understand its functionality:
Importing Required Modules:
express: The Express framework for creating the server. open-graph-scraper: A module for scraping Open Graph data from a web page. cors: A middleware for enabling Cross-Origin Resource Sharing. url: The built-in Node.js module for working with URLs. memory-cache: A simple in-memory cache for storing and retrieving data. axios: A popular HTTP client for making requests. meta-parser: A module for parsing meta properties from HTML. cheerio: A library for parsing and manipulating HTML. path: The built-in Node.js module for working with file paths.Creating an Express App and Configuring the Server:
express() creates an instance of the Express application. port specifies the port number on which the server will listen. app.use(cors({ origin: 'https://sudonix.org' })) enables Cross-Origin Resource Sharing, allowing requests from the specified origin.Handling the Route:
app.get('/ogproxy', async (req, res) => {...}) defines a route for handling GET requests to ‘/ogproxy’. The callback function is an asynchronous function that receives the request (req) and response (res) objects.Request Validation:
let { url } = req.query; extracts the ‘url’ query parameter from the request. const requestApiKey = req.headers['x-api-key']; retrieves the value of the ‘x-api-key’ header from the request. If the request API key doesn’t match the expected apiKey, a 401 Unauthorized response is sent. If the ‘url’ parameter is missing or doesn’t start with ‘http’, the URL is constructed using the request’s protocol and host.Caching:
The code checks if the requested URL is already cached in the memory-cache. If so, the cached result is returned as a JSON response. If the URL is not cached, the code proceeds to scrape the Open Graph data.Scraping Open Graph Data:
The ogs module is used to scrape Open Graph data from the provided URL asynchronously. If the scraping is successful and the required data is present, the code proceeds to fetch additional data.Fetching Additional Data:
The code uses axios to fetch the content of the website associated with the URL. The fetched HTML content is passed to cheerio for parsing and manipulation. meta-parser is used to extract meta properties from the HTML content. The extracted meta properties and other relevant data are stored in the metadata object.Handling Favicon:
If a favicon URL is present in the metadata, the code resolves the full URL based on the provided URL. The code uses axios to fetch the favicon image as an array buffer. The favicon data is then converted to a base64 string and appended with the appropriate data URL prefix. If an error occurs while fetching the favicon, an error message is logged to the console.Modifying and Caching the Results:
The metaProperties and faviconUrl are added to the results obtained from the Open Graph scraping. The URL and its corresponding results are cached using the memory-cache module. The results are sent as a JSON response.Error Handling:
If any error occurs during the scraping or processing of data, a 500 Internal Server Error response is sent.Starting the Server:
app.listen(port, () => {...}) starts the server and listens on the specified port. A log message is printed to the console indicating the server is running.Overall, this code sets up an Express server that acts as a proxy for fetching Open Graph data from a given URL. It includes caching to improve performance and handles additional data retrieval such as website content, meta properties, and favicon images. The server responds to requests with the scraped Open Graph data in a JSON format.
1. Build the serverI’ve simplified this process so that you only need to perform the basic steps to get up and running. At this point. I’m, going to assume you have the directory structure in place already for your subdomain - now navigate to the root path, for example
cd /home/sudonix.org/domains/proxy.sudonix.orgWe are going to be taking the files from my Git Repository located here
https://github.com/phenomlab/ogproxy
Once you are in the right place, issue
git clone https://github.com/phenomlab/ogproxyYou should see something like this being returned
Cloning into 'ogproxy'... remote: Enumerating objects: 28, done. remote: Counting objects: 100% (28/28), done. remote: Compressing objects: 100% (26/26), done. remote: Total 28 (delta 9), reused 0 (delta 0), pack-reused 0 Unpacking objects: 100% (28/28), 234.21 KiB | 4.78 MiB/s, done.Now move into the ogproxy directory
cd ogproxy/Once you are there, issue
npm installThis will install the required libraries for the server to work. There may be some messages generated that refer to legacy or outdated libraries - for the time being, this is ok, and you can ignore it
npm WARN deprecated har-validator@5.1.5: this library is no longer supported npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead. npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details. npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142 added 148 packages, and audited 149 packages in 2sAt this point, you could feasibly run
node serverWhich will respond with a message telling you that the service is listening on port 2000 (which you can change if you need to). However, for the time being, leave it - if you’ve already executed this command, kill it 🙂
Edit the server.js fileLocate server.js in the same directory structure, and look for these two lines
const apiKey = 'YOUR_API_KEY_HERE'; app.use(cors({ origin: 'FULL_FQDN_OF_YOUR_ORIGIN_HERE' }));For the first part, you’ll need to generate an API key. You can do that here
https://generate-random.org/api-key-generator?count=1&length=64&type=mixed-numbers&prefix=
64bit is certainly enough to keep the server secured and is the recommendation. Keys of other lengths seem to be truncated in transit.
9e7bf32d-de54-4de2-b187-75dc2fc056db-image.png
You should land up with a key like the below after you click “Generate API Keys”
9XWxMB8y8IMv3NXeg4yA58xvfC4Js9AgaqyH28IGfJStcG6kEzNl5QD26j09bV5M
Save that key in the space where you see YOUR_API_KEY_HERE so it looks like
const apiKey = '9XWxMB8y8IMv3NXeg4yA58xvfC4Js9AgaqyH28IGfJStcG6kEzNl5QD26j09bV5M';Now in the origin section, this is the full FQDN (Fully Qualified Domain Name) of your site. For example, if you use https://forum.example.com as your forum’s URL, then you use this etc.
app.use(cors({ origin: 'https://forum.example.com' }));Save the server script, and close the editor. Don’t be tempted to touch anything else 🙂
Create a service so that your Proxy runs unattendedLet’s create a file called /etc/systemd/system/ogproxy.service
Inside this new file, paste the below code
[Unit] Description=OGProxy Server After=network.target [Service] ExecStart=/usr/bin/node /path/to/your/subdomain/ogproxy/server.js WorkingDirectory=/path/to/your/subdomain/ogproxy Restart=always RestartSec=3 [Install] WantedBy=multi-user.targetObviously, you’ll need to replace /path/to/your/subdomain/ with the actual path you are using.
Save the file and exit the editor.
Now issue
sudo systemctl start ogproxyAnd
sudo systemctl enable ogproxyIf evrything went well, then your new ogproxy service should be running. You can test this with
systemctl status ogproxyYou should receive output similar to the below
cdcee78b-5b63-4762-943f-5ae25f3301f2-image.png
if you see the above (with your settings, and not mine), then the service is running.
2. Configure the NGINX reverse proxyLocate your nginx.conf file that relates to the subdomain you created in step 1. Edit that file
Your config should be made to look like the below
server { server_name [YOUR PROXY URL]; listen [IP_ADDRESS]; root /home/sudonix.org/domains/proxy.sudonix.org/ogproxy; index index.php index.htm index.html; location / { proxy_set_header Access-Control-Allow-Origin *; proxy_set_header Host $host; proxy_pass http://localhost:2000; proxy_redirect off; proxy_set_header Host $host; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Api-Key $http_x_api_key; } location /images { index index.php index.htm index.html; root /home/sudonix.org/domains/proxy.sudonix.org/ogproxy; } fastcgi_split_path_info "^(.+\.php)(/.+)$"; listen [IP ADDRESS]:443 ssl http2; ssl_certificate [PATH TO YOUR SSL CERT] ssl_certificate_key [PATH TO YOUR SSL KEY] }You obviously need to replace the values below with your own
[YOUR PROXY URL] [IP_ADDRESS] [PATH TO YOUR SSL CERT] [PATH TO YOUR SSL KEY]The above is a base config to get things working, and you may require more (for example access and error logging etc) - up to you.
Save the config, and issue
nginx -t
if the config is ok with no errors, restart nginx
3. Client-side codeNow for the icing on the cake…
In NodeBB, navigate to /admin/appearance/customise#custom-js
Add all of the code you see in the below link at the end of your custom JS file
https://github.com/phenomlab/ogproxy/blob/main/function.js
Find the below two lines
var proxy = "FULL_FQDN_OF_YOUR_OGPROXY_HERE"; var apiKey = "YOUR_API_KEY_HERE";So, for example, those two values should be something like this
var proxy = "https://proxy.mydomain.com"; var apiKey = "9XWxMB8y8IMv3NXeg4yA58xvfC4Js9AgaqyH28IGfJStcG6kEzNl5QD26j09bV5M";Save the custom js
4. Restart the OGProxy service sudo systemctl start ogproxyVerify
sudo systemctl status ogproxy 4. Custom CSSYou’ll no doubt want some custom CSS for the classes that this code generates, so feel free to copy these classes in your custom CSS
.card img.card-favicon { max-width: 21px; max-height: 21px; margin-right: 10px; } h4.card-site-title { color: var(--bs-body-color); text-transform: capitalize; } .card.card-preview { margin: 20px 0 20px 0; width: 50%; } .card.card-wrapper { background: none; width: 450px; } [component="chat/message"] .card.card-preview { margin: 20px 0 20px 0; width: 30%; } .card.card-preview img:not(.card-favicon) { object-fit: cover; width: 100%; max-height: 15rem; border-top-left-radius: 0.375rem; border-top-right-radius: 0.375rem; } .card.card-preview .img-fluid { max-width: 100% !important; } .card-preview p.card-text { font-size: 80%; color: var(--bs-body-color); } .card-preview h5.card-title { font-weight: 600; font-size: 120%; color: var(--bs-body-color); }Obviously, you’ll need to amend these to suit your site, and tastes 🙂 (and also note the use of variables, so you may need to substitute those where applicable)
Take a deep breath… And test it!!
I decided that Hostrisk, my infosec news site needed a facelift, and given the nature of the information being presented, it didn’t lean itself very well to a forum in my view… So, I changed it 🙂
Because of the CSS changes, the layout only changes at 1200px so if you’re viewing the site itself on a mobile, you won’t notice any difference. However, the desktop view now looks like this
35320c81-ab45-4bb1-84d8-e9c3a6e31eee-image.png
This is all CSS with no js whatsoever.
NOTE: For the latest stable release, see https://sudonix.org/post/8433Enjoy
Based on the previous “threaded” capabilities Sudonix had in v2 of NodeBB, and despite me stating that it wouldn’t return… well - I’ve missed it! So much so, that I’ve completely redesigned and developed it.
Those with eagle eyes might have noticed this toggle switch in the thread view - note that this will only trigger on desktops with a size of 1200px minimum for obvious screen estate reasons, so it won’t be available on mobile devices. I “could” make it available, but in my opinion, it would look horrible 🤢 (so I haven’t).
So that does this “toggle switch” do?
faa8375f-d823-44b0-9a3a-946a127f9ebb-image.png
You’ll notice that to the left, you have a simple “bars” icon, and to the right, a “staggered bars” icon. This essentially means that if the toggle is off, the normal post view is presented -which looks a bit like this
95922787-ecb2-48c0-a468-a22a06e71c7b-image.png
Nothing new there you might say (apart from the timeline positioning perhaps…). Now toggle the switch…and you should see the “magic” happen
d76fe017-2c01-4a63-a679-ca873e39f9d1-image.png
You’ll (hopefully) notice that the post view becomes “threaded” in the sense that it takes the approach of whom is posting, and makes a decision to reposition those elements to give you a “threaded” view. This (well, I think so) significantly improves readibility on larger screens and makes the reading experience so much better on the eyes.
Take a good long thread like the below to see it in full
https://sudonix.org/topic/184/move-out-from-flarum-to-wordpress
It’s hard to show you just how well this works without a video… So my advice is try it out for yourself 🙂
I am not a fan of the Google Analytics platform for a variety of reasons - the most important being its lack of privacy, lack of full GDPR compliance, and most of all, it will easily slow your site down. Whilst literally every website owner on the planet wants some form of visibility into how their site performs, who uses it, and where the traffic originates from, it’s difficult to obtain this data in the most efficient manner, and still respect the privacy of visitors to your website.
For a while, I used Matomo, although over time, it’s pretty clear that their original mission is changing, and they are looking to monetise what was once an Open Source product. Don’t get me wrong - it still is, but if you take a look at their website, you’ll see what I mean 🙂
Additionally, Matomo runs on PHP and MySQL. It has a lot of settings, and in my view, it is unnecessarily complex. I wanted something
Lightweight Simple to setup Simple to get the data I want without having to spy on people 🙂It was at this point that I stumbled across Umami Stats
https://umami.is/features
And here’s their tagline
7197434f-2e66-42a8-857b-75a9361247d0-image.png
Being curious, I decided to stand up my own self-hosted installation to see what it can do.
Here’s the result
c6aff45d-7cd0-4220-8c75-ce878970c7ce-image.png
If you are looking for no-nonsense stats that just “work” without impacting the privacy of your users, I’d suggest you take a look at this.
I had someone mention to me yesterday that they liked the footer widget present on the Categories page, which looks like the below
86490b64-c376-4d65-bb58-7ab6974b3531-image.png
This isn’t custom code at all, but in fact the “Board Stats” widget which is added when nodebb-widget-board-stats is installed. However, there were various elements I didn’t like - particularly, the layout, which by default (on here) would have looked like this
8afe3e4a-3d0b-4600-94ee-2f49fc9755e1-image.png
There’s nothing “wrong” with it (apart from the fact that the calculations seem a little off with actual users vs guests - not a show stopper for me), but I didn’t want some elements to be displayed, and so I used the below CSS to hide them, and then modify the alignment so it looks like the first image
.widget-board-stats { display: flex; flex-direction: row-reverse; justify-content: space-around; } .widget-board-stats h3 { display: none; }This basically hides anything in that widget that uses h3 as the header, and then arranges the widget itself so that flex-direction and justify-content are included which lines up everything nicely.
If you’d like the widget to look like a card, you can set that in the widget itself by adding the below code into the widget container
<div class="card"><h5 class="card-header">{{title}}</h5><div class="card-body">{{body}}</div></div>Effectively, the below.
72cd64c2-cd44-4195-8906-438d9126ee45-image.png
Or, you can drag the card element into the container area like the below, and drop it
fabebce6-0b44-4ad9-9160-023103dc0aa5-image.png
Enjoy.
Hello @phenomlab
I search a javascript code for nodebb to block and replace with a specific/customize message domain an URL Wirth a blacklist on topic, quick reply and composer like plugin-beep do it.
I’m working on it but I don’t have anything that works, hence the request for help from your expertise.
here an exemple who doesn’t work
// Add this script in a custom JavaScript file or inline in your HTML document.addEventListener('DOMContentLoaded', function () { // List of blocked domains or URLs var blockedDomains = [ 'example.com', 'blockeddomain.com', // Add more domains as needed ]; // Custom message to be displayed for blocked content var blockedMessage = 'This content is blocked.'; // Function to check if a URL contains a blocked domain function isBlocked(url) { for (var i = 0; i < blockedDomains.length; i++) { if (url.includes(blockedDomains[i])) { return true; } } return false; } // Function to replace blocked content function replaceBlockedContent(content) { // Check if the content contains a blocked domain if (isBlocked(content)) { // Replace the content with the blocked message return blockedMessage; } return content; } // Get all the elements containing topic content (adjust the selector as needed) var topicContentElements = document.querySelectorAll('.topic-content'); // Iterate through each element and replace blocked content topicContentElements.forEach(function (element) { element.innerHTML = replaceBlockedContent(element.innerHTML); }); });Thanks
Hello @phenomlab
like thread view in topics and in Chat, I got the idea of having the same principle for the material view in the home page, the recent Topics view, unread, inside topics etc…
We could call it Material View
The idea would be to have a button in the right sidebar (User Bar) to activate the Material view or not. The container to use would therefore be [component="sidebar/right]
This should of course not interact with the Thread view mode in the topics nor with the Stock code of nodeBB
To not interfere with the other 2 codes, we could name the CSS class to add .mview or .material for example
This is the desired result if you activate the Material view button :
– Home Page :
a039760d-3601-4afc-a694-47de36fe4a1c-image.png
– Recent, unread, etc…
fc3c540e-455f-4e9a-93bc-d58ec1e2c44d-image.png
– Topic (without thread View)
4c790ca3-9095-4f10-b319-de6c6b4741ff-image.png
Here the CSS code ofr apply this Chnage without Javascript Code, just CSS :
// ------------------------------------------ // Thread CATEGORIES & TOPIC (TEST) // ------------------------------------------ /* Home Page and Recent */ @media (min-width: 576px) { [component=post], [component="category/topic"], [component="categories/category"], li[component="chat/message"], [component="chat/recent/room"], div#users-container a { background: var(--bs-post-category-wrapper); background: #f7f7f7; border-radius: var(--bs-post-category-wrapper-radius); border-radius: 0.375rem; margin-bottom: var(--bs-post-category-wrapper-margin); margin-bottom: 20px; border: 1px solid var(--bs-border-color); } } @media (min-width: 576px){ [component="category/topic"], [component="categories/category"] { margin-bottom: var(--bs-post-category-topic-margin); margin-bottom: 20px; } } @media (min-width: 576px) { ul.topics-list li, li[component="chat/message"], [component="chat/recent/room"], div#users-container a { padding: 0.75rem 0 !important; padding-left: 20px !important; padding-right: 20px !important; } } ul.topics-list li { border-bottom: 1px solid var(--bs-border-color); } @media (min-width: 1600px) { [component=category] > *, .categories-list > *, [component="groups/container"] > *, .users-container > * { transition: opacity 150ms linear 100ms, transform 150ms ease-in-out 100ms; } } @media (min-width: 1600px) { [component=category] > *, .categories-list > *, [component="groups/container"] > *, .users-container > * { visibility: visible; } } @media (min-width: 576px) { [component="categories/category"] { padding: 20px; } } /* Topics & Posts */ .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; /*box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;*/ transition: margin-left 0.3s ease, margin-right 0.3s ease; border: 1px solid var(--bs-border-color); background: #F7F7F7; } .post-footer.border-bottom.pb-2 { border-bottom: 0rem !important; } li.necro-post.text-muted.timeline-event.d-flex.gap-2.pt-4 { box-shadow: none !important; border-radius: 0rem !important; border: none; background: none !important; } .page-topic .topic .posts.timeline .timeline-event.highlight, .page-topic .topic .posts.timeline > [component="post/placeholder"].highlight, .page-topic .topic .posts.timeline > [component=post].highlight { border-radius: 0.375rem; } @media (min-width: 1200px) { ul[component=topic]:before { margin-left: 50px; } } @media (min-width: 1200px) { .posts-container:before { margin-left: 43px; } ul[component=topic]:after { margin-left: 43px; } } @media (min-width: 576px) { .page-topic .topic .posts.timeline [component="topic/event"].timeline-event .timeline-badge, .page-topic .topic .posts.timeline [component="topic/necro-post"].timeline-event .timeline-badge { margin-left: 1rem; } } a.post-index.text-muted.d-none.d-md-inline { margin-right: 5px; } .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 { padding-bottom: 0rem; }– A helping hand developing this would be super cool. Unless you don’t care at all and you don’t like the idea.
– For now I have a beginning, the following code inspired by your previous codes but I don’t know if I’m on the right track
// ------------------------------------------ // material View Mode // ------------------------------------------ function material() { $(document).ready(function () { // Check if the screen width is 460px or more if ($(window).width() >= 460) { // Check if the custom thread view button already exists if ($('#materialThreadViewButton').length === 0) { // Create the button for custom thread view mode with custom IDs var threadViewButton = $('<div class="material-threads-wrapper"><form class="form"><div class="form-check form-switch material-threads-wrapper"> \ <input class="form-check-input" id="materialThreadViewButton" type="checkbox" data-field="materialThreadView"> \ <label class=" d-none d-md-inline fw-semibold" for="materialThreadViewButton"></label> \ </div></form></div>'); // Append the button to the right sidebar $('[component="sidebar/right"]').append(threadViewButton); } // Check if there's a stored state for the checkbox and update it var storedState = localStorage.getItem('materialThreadViewState'); if (storedState === 'true') { $('#materialThreadViewButton').prop('checked', true); } // Toggle the class 'material' on or off when the checkbox changes state $('#materialThreadViewButton').on('change', function () { var isChecked = $(this).is(':checked'); var theTooltip = isChecked ? "Material Thread View Off" : "Material Thread View On"; // Update tooltip message // Toggle CSS rules when the button is turned on or off if (isChecked) { console.log('Material Thread view is active.'); // Apply your CSS rules here } else { console.log('Material Thread view is inactive.'); // Remove the CSS rules here } // Store the checkbox state in localStorage localStorage.setItem('materialThreadViewState', isChecked); // Update the tooltip title $(this).attr('data-original-title', theTooltip).tooltip('dispose').tooltip({ placement: 'bottom', title: theTooltip, trigger: 'hover' }); }); // Check for changes in the checkbox state when the page loads $('#materialThreadViewButton').trigger('change'); } }); } // Attach the material function to relevant events $(window).on('action:ajaxify.end', function (data) { material(); }); $(window).on('action:posts.edited', function (data) { material(); }); $(window).on('action:posts.loaded', function (data) { material(); });– Here the result :
07d72e1d-8ca3-46f8-92ce-5beeeefc8c70-image.png
Following on from the “Threaded post support for NodeBB” topic below
https://sudonix.org/topic/569/threaded-post-support-for-nodebb
I am delighted to now announce something “similar” for chat 🙂 See below - forgive the blurred image - it’s set that way intentionally to maintain privacy for individual members, but it’s enough for you to see the flow
2f572f31-4f6c-4fcf-93fd-1fe84b6895c0-image.png
This specific code is less complex than posts as there is “less to target” in terms of actual elements, and less global positioning of other elements to take into consideration. Without further ado…
https://github.com/phenomlab/nodebb-harmony-chat-threading
You’ll need to copy the content of style.css and paste this into ACP->/admin/appearance/customise, and also the content of functions.js into ACP->/admin/appearance/customise#custom-js
IMPORTANTFor this to work as intended, you need a temporary patch file which is discussed here
https://community.nodebb.org/topic/17307/action-event-client-side-for-creating-and-updating-posts/21
And the actual file itself here
https://github.com/NodeBB/NodeBB/commit/a7517d886f83703dc158c0e2327542156b539eb6
This new hook does not exist pre 3.5.0 and will need to be added manually to your existing NodeBB core, then rebuild, and restart.
If you don’t want to modify the core, then you can comment out (or remove) the below lines of functions.js but then you will lose the ability to convert to threaded chat when new data is added to the DOM
$(window).on('action:chat.onMessagesAddedToDom', function(data) { $(document).ready(function() { console.log('hook triggered'); threadedChat(); }); });You may also land up with an error in the console which could result in the remainder of the site not loading properly if either the core patch is not applied, or the above lines removed.
As soon as 3.5.0 is released, this hook will be there by default and no longer needs to be added.
Finally, if you are using chatBanner then you will need this updated function
https://sudonix.org/topic/538/adding-a-banner-to-chat-messages/30
Hello! I hope everything is going well. 😊 I’m interested in creating a page featuring a captivating rotating star effect similar to what’s showcased on the https://gatsbyconf.com/ website.
Could you please guide me on how to achieve a similar WordPress page using the Gutenberg builder? Specifically, I’m aiming to incorporate the rotating effect, and I intend to overlay additional text elements on it. While attempting to save the page, I encountered difficulties in copying the required CSS or JS for the effect. I’m uncertain about where to commence. Your assistance in this matter would be greatly appreciated. Thank you!
With NodeBB v3 on the horizon, I thought it would make sense for me to provide a guide on how to upgrade an existing (or newly built - up to you) environment to v3.beta1
This guide assumes you already have a v2 test environment functional and are looking to upgrade to v3.Let’s start:
First, ensure your nodebb instance has been stopped 🙂 Type npm config set legacy-peer-deps true cd /path/to/your/nodebb Type git rev-parse HEAD (save this value in case you need to roll back) Type git fetch && git checkout bootstrap5 Type git reset --hard v3.0.0-beta.1 Type ./nodebb upgrade -mi Now upgrade all your plugins to the latest version if available Type ./nodebb buildAs this will be a beta system, there will be frequent updates for the Harmony theme which will present themselves in the usual place (ACP -> Install Plugins - Out of Date). These should be installed in the usual fashion, although along with these updates, you will need to perform a git fetch and git pull of the bootstrap5 repository as it will shown as several releases behind.
Once you’ve updated the Harmony theme as below
dd590fb2-b062-4c3e-bc81-a4d715583aef-image.png
Type git fetch && git pullYou’ll see the import of a number of changed files
f0e3575c-b25d-4882-aeaf-5a6007ad984b-image.png
Type ./nodebb build && ./nodebb restart1039231a-efd0-4def-a2f0-99ee0597866e-image.png
You can ignore the warnings for now.
Enjoy the updated instance.
For a while now, I’ve been backing up MongoDB using a basic (and extremely simple) shell script. However, this did not allow for multiple backup sets, retention, purging of unwanted data etc., so I needed something a little more robust.
Deciding not to reinvent the wheel, I searched around for an existing script, and found this
https://gist.github.com/mrichie/3903260#file-automongobackup-sh
i’ve set this up on another production server I use at work, and it’s brilliant. It does exactly what it says on the tin 🙂 Would probably be very useful for others in the same boat.
EDIT - seems someone else forked this and made several changes / revisions
https://raw.githubusercontent.com/micahwedemeyer/automongobackup/master/src/automongobackup.sh
As much as I dislike Stack Overflow (see the below video for examples - it’s one of reasons why I created Sudonix in order to establish a fairer experience. This is an issue that sadly, has been rife on SA for years - in essence, it’s something of a toxic experience)
However, I do like the way they show accepted answers to posts
Below is an example
c6cc51fa-90cf-4947-8d11-f690895aa2dc-image.png
Simplistic, but effective. I also like the way it’s presented in NodeBB, so decided to create something of a “mash-up” to share with others.
Here’s the default NodeBB experience
7c14f469-bda4-4ba8-a567-680f7f916bc7-image.png
It’s effective - green border, with “solution” clearly stamped on it. Let’s take this a bit further with how we do this on Sudonix
66f96dd4-4d2f-489b-9b7c-e681c19fd6e4-image.png
Snazzy eh ?? 🙂
In reality, this isn’t difficult to do at all. Essentially, we just use the CSS :after technique like below
.posts [component=post][data-index="-1"].isSolved:before { border-radius: 4px; top: -0.25rem; } .isSolved:after { content: "\f058"; font-family: "Font Awesome 5 Pro"; position: absolute; top: 43px; right: 35px; font-size: 3rem; font-weight: 400; color: #77B300; }Note that I’m using the Pro version of Font Awesome here, so if you want to use Font Awesome Free, you’ll need to substitute the block as below
.isSolved:after { content: "\f058"; font-family: "Font Awesome 5 Free"; position: absolute; top: 43px; right: 35px; font-size: 3rem; font-weight: 900; color: #77B300; }As I’m also using an absolute placement here, it’s important I define two viewport classes, so
@media (min-width: 1200px) { .isSolved:after { content: "\f058"; font-family: "Font Awesome 5 Pro"; position: absolute; top: 43px; right: 35px; font-size: 3rem; font-weight: 400; color: #77B300; } }And for mobile
@media (max-width: 767px) { .isSolved .clearfix.post-header { margin-left: 5px !important; margin-top: 20px; } .isSolved:after { content: "\f058"; font-family: "Font Awesome 5 Pro"; position: absolute; top: 14px; right: 97px; font-size: 2rem; font-weight: 400; color: #77B300; } }This means that in mobile view, I get the below
e1a4443c-407f-4749-ba31-ac8d97327b60-image.png
And when you combine CSS, imagination, code blocks, and real answers for real people, you get something like this
ece7dabc-81ea-45ac-8711-e4411c573290-image.png
Enjoy…
This category is designed to offer practical advice, step by step guidance, and code suggestions for you to create you very own “Franken” build to suit your needs… “It’s Alive!!”
