I was close to giving up then I just used this code.
And changed the json path to /latest.json
<script type="text/discourse-plugin" version="0.8">
const ajax = require('discourse/lib/ajax').ajax;
const Topic = require('discourse/models/topic').default;
// We're using ajax and the Topic model from Discourse
api.registerConnectorClass('below-discovery-categories', 'featured-topics', {
// above-main-container is the plugin outlet,
// featured-topics is your custom component name
setupComponent(args, component) {
api.onPageChange((url, title) => {
if ((url == "/") || (url == "/categories") ){
// on page change, check if url matches
// if your homepage isn't /latest change this to /categories
$('html').addClass('custom-featured-topics');
// add a class to the HTML tag for easy CSS targetting
component.set('displayfeaturedTopics', true);
// we'll use this later to show our template
component.set("loadingTopics", true);
// helps us show a loading spinner until topics are ready
ajax("/latest.json").then (function(result){
// Get posts from tag "featured" using AJAX
// if this were a category you'd use /c/featured.json
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
});
component.set("loadingTopics", false);
// Topics are loaded, stop showing the loading spinner
component.set('featuredTopics', featuredTopics);
// Setup our component with the topics from the array
});
} else {
// If the page doesn't match the urls above, do this:
$('html').removeClass('custom-featured-topics');
// Remove our custom class
component.set('displayfeaturedTopics', false);
// Don't display our customization
}
});
}
});
</script>
<script type="text/x-handlebars" data-template-name="/connectors/below-discovery-categories/featured-topics">
{{#if displayfeaturedTopics}}
<!-- If our component is true, show this content: -->
<div class="custom-featured-topics-wrapper">
{{conditional-loading-spinner condition=loadingTopics}}
<!-- Show a loading spinner if topics are loading -->
{{#unless loadingTopics}}
<!-- Unless topics are still loading... -->
{{topic-list topics=featuredTopics showPosters=true}}
<!-- Show the topic list -->
{{/unless}}
</div>
{{/if}}
</script>