Using Plugin Outlet Connectors from a Theme or Plugin

Arkshine · January 11, 2024, 6:14pm

You can see an example here:

discourse/discourse-stat-banner/blob/main/javascripts/discourse/initializers/stat-banner.js#L5


      
          import { apiInitializer } from "discourse/lib/api";
          import StatBanner from "../components/stat-banner";
          
          export default apiInitializer("1.14.0", (api) => {
            api.renderInOutlet(settings.plugin_outlet.trim(), StatBanner);
          });

StatBanner is a native class defined in components directory:

github.com

discourse/discourse-stat-banner/blob/main/javascripts/discourse/components/stat-banner.gjs

import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";
import { action } from "@ember/object";
import didInsert from "@ember/render-modifiers/modifiers/did-insert";
import { inject as service } from "@ember/service";
import { htmlSafe } from "@ember/template";
import { ajax } from "discourse/lib/ajax";
import { defaultHomepage } from "discourse/lib/utilities";

export default class StatBanner extends Component {
  @service site;
  @service siteSettings;
  @service router;
  @tracked stats;

  <template>
    {{! template-lint-disable modifier-name-case }}
    {{#if this.shouldShow}}
      <div class="stat-banner__wrapper" {{didInsert this.getAboutStats}}>
        {{#if settings.banner_title}}

This file has been truncated. show original

In your case, that would be api.renderInOutlet("above-main-container", YourClass)

I don’t think you can do it in the HEAD file. You should split your code into multiple files.

I encourage you to use Discourse Theme CLI as it will be much easier to develop a Theme component!

Is your Theme Component public?

Topic		Replies	Views
Developing Discourse Plugins - Part 2 - Connect to a plugin outlet developers plugin-guides , tutorial	36	26869	April 13, 2023
Important changes to Plugin Outlets for Ember 2.10 dev	23	6332	June 1, 2018
Developing Discourse Plugins - Part 1 - Create a basic plugin developers plugin-guides , tutorial	30	73991	December 8, 2023
Theme-Component v Plugin: What's the difference dev	22	4962	June 9, 2020
Add background video to certain user profiles? dev	6	1041	February 13, 2022

Using Plugin Outlet Connectors from a Theme or Plugin

Related Topics