Skip to content

Create a dynamic category list

Moved Let's Build It
  • 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.

  • phenomlabundefined phenomlab marked this topic as a regular topic on
  • Ouaaaaaa Very good work my friend. You worked like crazy to offer us this;) I will test this as soon as possible;)

    Love this functionnality !

    @phenomlab said in Create a dynamic category list:

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

    And as I told you in DM, seeing how you help us, my codes are yours, no problem for that 😉

    Big up !

  • @DownPW thanks. Really happy with how this turned out to be honest!

  • Ps - if anyone likes the theme in the screenshot, it’s called “Blackout” and will be featured in V3 of sudonix when released.

  • @DownPW has just pointed out a valid issue here. If you have lots of categories, then the list can easily extend the browser window, and if you resize the browser, you won’t be able to access it properly. For this to work, you’d need to apply custom CSS to that - for example, the below, but it should only be applied at a minimum of 1200px so will need to use a media class.

        li#thecategories {
            min-width: 250px;
            font-size: 90%;
            overflow: auto;
            height: calc(100vh - 110px);
        }
    

    This specific CSS calculates the height of the browser window, then removes some of it to allow for the bottom bar in desktop view (note that you might not be using this, so you’ll need to adjust the calc value as you see fit).

  • I’ll revise the original post to reflect this

  • I’ve been playing around with this today, and created a “tree” view

    image.png

  • If you’d like the code for this, then it’s below (it’s essentially a “fork” of the original to allow for extra classes)

    JS

    $(document).ready(function() {
        $.getJSON('/api/categories', function(data, status) {
            $.each(data.categories, function(key, value) {
                var categorylist = $(" \
    	<li class='dropdown-item tree-root'><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 class='tree-branch' style='list-style: none;'>" +
                    this.children.map(c => `<li class='dropdown-item tree-node'><span class='category-menu-tree-node'><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>"
                );
                if ($(window).width() < 767) {
                    $(".bottombar #thecategories").append(categorylist);
                } else {
                    $(".sidebar-left #thecategories").append(categorylist);
                }
            });
        });
    });
    

    CSS

    ul.tree-branch {
        border-left: 1px solid var(--bs-border-color);
        margin-left: 22px;
    }
    li.tree-node:before {
        border-bottom: 1px solid var(--bs-border-color);
        position: relative;
        top: -0.3em;
        height: 1em;
        width: 30px;
        content: "";
        display: inline-block;
        left: -48px;
    }
    span.category-menu-tree-node {
        margin-left: -35px;
    }
    

    NOTE: I use variables for all of my CSS, so you’ll need to substitute var with your own HEX values. Also note, that you still need the original CSS from the first post for this to work - what is listed above only provides you with the tree, branches, and nodes effect.

  • This looks so cool, thanks @phenomlab @DownPW

  • @phenomlab is there something wrong with the category list panel?

    edit: it is fixed now. When I minimize the screen size on my computer and then expand it again, the panel goes blank. But it is fixed when I refresh the page, I guess this is something expected.

  • @crazycells No, not at all. I can’t reproduce this, but that does sound like a hardware acceleration issue. What happens if you disable that (I’m assuming Chrome here if of course, but the same applies for other browsers)

    https://pureinfotech.com/disable-hardware-acceleration-chrome/

  • @phenomlab sorry, my mistake, it is fixed now.
    I am using Firefox, but this morning I needed to restart to update Firefox, so I believe I was having the problem yesterday night because of the outdated browser.

  • @crazycells Good. Glad to hear it’s an even simpler fix 🙂

  • phenomlabundefined phenomlab moved this topic from Customisation on
  • Just circling back here as I’ve been helping @cagatay this morning on his site, and noticed that if you use a mixture of fa-brands and fa-solid then the code supplied above may produce some odd looking results.

    If this is the case, replace the function with this

    $(document).ready(function() {
        $.getJSON('/api/categories', function(data, status) {
            $.each(data.categories, function(key, value) {
                var iconClass = 'fa'; // Default to 'fa' if the icon type is not recognized
                
                // Check if the icon is FontAwesome Unicode
                if (this.icon.startsWith('&#x') || this.icon.startsWith('&#xf')) {
                    iconClass = 'fa';
                } else if (this.icon.startsWith('fab')) {
                    iconClass = 'fab';
                }
                
                var categorylist = $(" \
        <li class='dropdown-item tree-root'><span class='category-menu'><i class='" + iconClass + " " + this.icon + "'></i><a style='display: inherit;' class='dropdown-item rounded-1' href='/category/" + this.slug + "'>" + this.name + "</a></span></li> \
            <ul class='tree-branch' style='list-style: none;'>" +
                    this.children.map(c => {
                        var childIconClass = 'fa'; // Default to 'fa' for child icons
                        
                        // Check if the child icon is FontAwesome Unicode
                        if (c.icon.startsWith('&#x') || c.icon.startsWith('&#xf')) {
                            childIconClass = 'fas';
                        } else if (c.icon.startsWith('fab')) {
                            childIconClass = 'fab';
                        }
                        
                        return `<li class='dropdown-item tree-node'><span class='category-menu-tree-node'><i class='${childIconClass} ${c.icon}'></i><a class='dropdown-item rounded-1' style='display: inherit;' href='/category/${c.slug}'>${c.name}</a></span></li>`;
                    }).join(" ") +
                    "</ul>"
                );
                
                if ($(window).width() < 767) {
                    $(".bottombar #thecategories").append(categorylist);
                } else {
                    $(".sidebar-left #thecategories").append(categorylist);
                }
            });
        });
    });
    
    

    In fact, if you want to replace it anyway to make your experience “future proof”, you can use this code now 🙂


  • 5 Votes
    3 Posts
    274 Views

    Very good like always 😉

  • 50 Votes
    107 Posts
    3k Views

    @crazycells

    image.png

    image.png

  • 1 Votes
    26 Posts
    1k Views

    Yes ogproxy too is functionnal on dev

  • 15 Votes
    27 Posts
    1k Views

    For anyone else coming here and is struggling to get pm2 to work with Umami (as I did - it started, but never seemed to work after a reboot which is pretty useless), you can use the below. Obviously, change the parts noted inside the [brackets]. Follow the below instructions:

    Instructions

    Open a terminal and create a new systemd service file:

    sudo nano /etc/systemd/system/umami.service

    Add the following content to the file:

    [Unit] Description=Umami Analytics Server After=network.target [Service] Type=simple User=[umami user] WorkingDirectory=[path to umami] ExecStart=/usr/local/bin/node [path to umami]/node_modules/.bin/next start Restart=on-failure [Install] WantedBy=multi-user.target

    Replace [umami user] with the username of the user that should run the Umami service, and [path to umami] with the actual path to your Umami installation.

    Save the file and exit the editor.

    Reload the systemd manager configuration:

    sudo systemctl daemon-reload

    Enable the Umami service to start on boot:

    sudo systemctl enable umami.service

    Start the Umami service:

    sudo systemctl start umami.service

    You can check the status of the service with:

    sudo systemctl status umami.service

    This systemd service file will ensure that Umami starts automatically when the system boots, and it will restart the service if it fails. Remember to adjust the WorkingDirectory and ExecStart paths according to where Umami is installed on your system, and ensure that Node.js is installed and accessible at /usr/bin/node (or adjust the path to Node.js as necessary).

  • 19 Votes
    35 Posts
    2k Views

    @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

  • 50 Votes
    146 Posts
    18k Views

    Updated git for above change

    https://github.com/phenomlab/nodebb-harmony-threading/commit/14a4e277521d83d219065ffb14154fd5f5cfac69

  • 20 Votes
    110 Posts
    9k Views

    @crazycells said in Setup OGProxy for use in NodeBB:

    are they cached for each user separately?

    No. It’s a shared cache

    @crazycells said in Setup OGProxy for use in NodeBB:

    additionally, this is also handling youtube videos etc, right?

    No. This is handled by nodebb-plugin-ns-embed

  • About this category

    Pinned Let's Build It
    5
    2 Votes
    5 Posts
    380 Views

    I’m going to be adding some new posts to the labs category, and will use this going forward when writing code that could easily be adopted by others (a great example is the OGProxy, which I will move here).

    If you have any ideas of would like a walkthrough of how to set something up, then this is the place it should go.