Connect your theme to plugin-outlets to inject templates with custom content

documentation theme developers
, ,
#21

Looks like header-before-notifications is what you’re looking for

<ul role="navigation" class="icons clearfix">
  <div class="ember-view header-before-notifications-outlet mitt-show-header-before-notifications" id="ember1203">
    <div class="mitt-outlet-location">
      <i class="fa fa-plug"></i>
      header-before-notifications plugin outlet
    </div>
  </div>
  
  <li class="ember-view header-dropdown-toggle" id="ember1153">
    <a id="search-button" 
    aria-label="search topics, posts, users, or categories" 
    title="search topics, posts, users, or categories" 
    href="/search" data-ember-action="1206" class="icon"> 
      <i class="fa fa-search"></i>
    </a>
  </li>

the

    <div class="mitt-outlet-location">
      <i class="fa fa-plug"></i>
      header-before-notifications plugin outlet
    </div>

was added by my plugin but you could have whatever there inside the <div class="ember-view header-before-notifications-outlet div

2 Likes
#22

thanks :slight_smile:

it worked like this:

<script type='text/x-handlebars' data-template-name='/connectors/header-before-notifications/create-new-topic'>
#23

Thank you for sharing nice tip. Do you think is suitable for “about” page?

#24

@Tom_Newsom

I’m unable to get this to work. Do you have to install a plugin first?

I have this in </head>:

<script type='text/x-handlebars' data-template-name='/connectors/header-before-notifications/home-page-link'>
    <a class="icon" href="http://example.com/" title="visit our home page"><i class="fa fa-home"></i></a>
</script>

and this in CSS:

.home-page-link {
    float: left;
}
.home-page-link .fa-home {
    padding: 0;
}
.d-header .icons .unread-private-messages {
    left: 122px;
}
.d-header .icons .flagged-posts {
    left: 80px;
}

Is there anything else I have to do?

#25

Since the header migration to VDOM this isn’t possible anymore.

The new way is this:

3 Likes
#26

Is there a post or other documentation that lists the various locations eligible for widget injection? For instance, the post you linked mentions home-logo but I don’t see that anywhere in the rendered site. How/where do I find that in ember or learn more about using that approach to inject links/content?

1 Like
#27

There is no master list as far as I am aware. I should mention that the widget stuff is not Ember, it’s our homegrown rendering framework for pieces of the site that need a lot of performance. Most of the site is regular Ember, but a few critical paths use our widget framework.

Any widget’s name can be extended, so if you are looking to add something to Discourse and find the code starts within a widget, just look up its name and you’re good to go!

2 Likes
#28

The outlets continue working everywhere, except for header and posts stream.

For those two, you can inspect the code here:

https://github.com/discourse/discourse/tree/master/app/assets/javascripts/discourse/widgets

2 Likes
#29

@eviltrout
In the context of my original post, then, is it possible to add an icon with an external link next to the :mag: search icon at the upper-right of the screen, on the floating header? I don’t see any widget element that seems it would support that. If outlets don’t work in the header and there’s no supporting widget, then there’s no way to do that anymore?

1 Like
#30

@david recommend you read the OP and have a think about it.

There are 2 points I feel would be very nice to address:

  1. It really is a bummer that we need to call api.registerConnectorClass instead of just using filenames like the plugin does. It makes all the skills you build as a plugin author not as tranferrable to theme authoring. Multiple js.es6 files per theme is a huge one that will help a lot.

  2. On the topic of es6, it is a huge bummer we can not use import in themes, this means we are stuck with stuff like return require("discourse/lib/utilities").isAppleDevice(); which is no fun.

5 Likes
#32

Both of these are done. I’ve kept the OP instructions as-is, because the new system can’t be used from the admin UI. More information at Splitting up theme Javascript into multiple files

5 Likes