Loading topics in a new-plugin outlet I've added

Dev
2

I think I have gotten this to work. Goal: load certain topics at a specified spot in a new template (probably works for adding to existing templates too, but I haven’t tested that):

  1. Insert your made-up plugin outlet in your template (my made-up plugin outlet is called “great-topics”, like):

{{plugin-outlet name="great-topics"}}

  1. add the handlebars code (ie, your component) in a connector:

[your-plugin]/assets/javascripts/discourse/connectors/great-topics/new-component.hbs

<div>I am in the plugin outlet! Load the topics:</div>
{{topic-list topics=featuredTopics showPosters=true}}
  1. add the javascript code for the component that is in your new connector:

[your-plugin]/assets/javascripts/discourse/connectors/great-topics/new-component.js.es6
[this code is adapted from the following meta post that has code that loads topics with the tag “featured”: How to add a featured topic list to your Discourse homepage]

const ajax = require('discourse/lib/ajax').ajax;
const Topic = require('discourse/models/topic').default;

setupComponent(args, component) {
 ajax("/tag/featured.json").then(function (result) {
                 
   let featuredTopics = [];
   // Create an empty array, we'll push topics into it

   var featuredUsers = result.users;
   // Get the relevant users

   result.topic_list.topics.slice(0, 4).forEach(function (topic) {
   // We're extracting the topics starting at 0 and ending at 4
   // This means we'll show 3 total. Increase 4 to see more.

     topic.posters.forEach(function (poster) {
        poster.user = $.grep(featuredUsers, function (e) { return e.id == poster.user_id; })[0];
                        });
         // Associate users with our topic

      featuredTopics.push(Topic.create(topic));
        // Push our topics into the featuredTopics array
     });
   }) //end result.topic.topic_list...
                    
component.set('featuredTopics', featuredTopics);  //this is where the topics get added to the component
 
component.set("loadingTopics", false); //my above code doesn't have a loader. but this is there if you do want a loader. Have to add to hbs file for that in addition. See linked post on meta above

  }); //end ajax 


 }//end setup component

This is working for me, at least, to load topics with the tag “featured” in the plugin outlet in my new template.

To see this working, will have to restart the server.

1 Like