Adding stuff in a plugin outlet

pfaffman · May 15, 2023, 8:50pm

Here’s stuff for adding stuff to a theme

First look in theme-component - Discourse Meta for examples, like

See how this file is named and the stuff that’s in it:

discourse/discourse-categories-navbar/blob/main/javascripts/discourse/components/custom-categories-navbar.hbs

<HorizontalOverflowNav>
  {{#each site.categories as |sc|}}
    {{#unless sc.parentCategory}}
      <li>
        {{category-link
          sc
          extraClasses=(if (eq this.activeSlug sc.slug) "active")
        }}
      </li>
    {{/unless}}
  {{/each}}
</HorizontalOverflowNav>

and then this one can be used to make stuff available to the handlebar file

github.com

discourse/discourse-categories-navbar/blob/main/javascripts/discourse/components/custom-categories-navbar.js

import Component from "@glimmer/component";
import { inject as service } from "@ember/service";
import { tracked } from "@glimmer/tracking";

export default class CustomCategoriesNavbar extends Component {
  @service site;
  @service router;
  @tracked activeSlug = "";

  constructor() {
    super(...arguments);
    this.setActiveSlug();
    this.router.on("routeDidChange", this, this.setActiveSlug);
  }

  setActiveSlug() {
    const currentRoute = this.router.currentRoute;

    if (currentRoute && currentRoute.attributes?.category) {
      let activeCategory = currentRoute.attributes.category;

This file has been truncated. show original