How to add a new tab with content from a group?

AI-generated summary

Adding a Tab with Content from a Group in Discourse

DavidGNavas asked how to add a tab like the IOI Tracker tab on the Hitman forum, which shows content from a specific group.

ampburner provided a JavaScript solution that can be added to the page HEAD through the admin panel, allowing the creation of a custom tab without installing plugins or forking the Discourse source code. The code is available for others to use.

However, cpradio noted that this approach requires JavaScript to be enabled and may not be crawlable by search engines.

An alternative solution is the discourse-dev-nav-item plugin, which was originally used on talk.turtlerockstudios.com, as mentioned by codinghorror and eviltrout.

DavidGNavas plans to use the JavaScript solution to add a tab with a specific category.

Continuing the discussion from Please visit our Discourse Forum! (Directory):

Hi, @ampburner, your forum looks fantastic :smile:

I haven’t found any how-to post that explains how to add a tab like the one you have added, called IOI Tracker and showing the content from a specific group.

Can someone explain how to do that?
Thanks!

Thanks :smile:

Disclaimer - I’m sure my solution is kinda hacky. There might be better solutions.

Basically, what I did was add some javascript to the page HEAD by adding a script under Admin > Customize > CSS, HTML > Header.

The script hooks into some of Discourse’s javascript events to manipulate the DOM and insert some html.
The advantage of this approach is that it can all be done through the admin panel so you don’t need to install plugins or fork the Discourse source code.

that said, here’s the source code:

<script>
Discourse.Route.reopen({
        activate: function() {
            this._super();
            Em.run.next(function(){
                insertIOITrackerConditionally();
            });
        } 
    });

function insertIOITrackerConditionally()
{
    if(jQuery("#ioi-tracker-li").length <= 0){
        jQuery('ul.nav :last').after('<li id="ioi-tracker-li" class="ember-view" title="track the activity of IOI employees on Hitmanforum"><a href="/groups/iointeractive">IOI Tracker</a></li>'); 
    }
//some other stuff here to format the page (if you're on the actual group page)    
    
}
</script>

the hack was inspired by https://talk.turtlerockstudios.com

Just insert it in the admin panel and you’re good to go.

Could you recategorize this thread under how-to? I’m sure others might have the same question.

Re-categorized. One down side to your approach is it requires JavaScript to be enabled (which isn’t a big deal) and search-engines won’t be able to find that additional tab for crawling (I’m not sure how well groups are handled by search-engines to begin with).

My forum is a video game related fan-forum which is also frequented by the developers of the videogame.

The function of the tab is to allow the fans to keep track of the activity of the developers.

I’m not that worried about SEO of those particular pages (the important content is in the topics), but I would imagine that Discourse has built-in ways to make sure that the group pages are also crawled and indexed.

Thank you very much for share your code!

I think we will use to add a tab with an specific category :smile:

The topnav dev group link on talk.turtlerockstudios.com is a tiny plugin @eviltrout wrote, did we open source that Robin?

Sure did!

https://github.com/discourse/discourse-dev-nav-item