Render a post above the discovery-list-container-top Outlet

Andrew_Rowe · January 24, 2026, 11:52pm

I’m a noob at this sorry

I used ask discourse to ask:

in a theme i want to render the first post from two topics above the topic list in the discovery-list-container-top Outlet

it gave me several versions which to my eyes looked like it should work. All are throwing an error in the preview. I ask discourse:

how would I put the sample code in the JS tab instead of files?

it gave me this version

import { apiInitializer } from "discourse/lib/api";
import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";

class FirstPosts extends Component {
  @tracked posts = [];

  constructor() {
    super(...arguments);
    this.loadPosts();
  }

  async loadPosts() {
    let topicIds = [123, 456]; // change to your topic IDs
    let posts = [];
    for (let id of topicIds) {
      let res = await fetch(`/t/${id}.json`);
      let data = await res.json();
      if (data.post_stream && data.post_stream.posts.length > 0) {
        posts.push(data.post_stream.posts[0]);
      }
    }
    this.posts = posts;
  }

  static template = <template>
    {{#each this.posts as |post|}}
      <div class="first-post-preview">
        <h4>{{post.topic_title}}</h4>
        {{{post.cooked}}}
      </div>
    {{/each}}
  </template>;
}

export default apiInitializer("0.11.1", api => {
  api.renderInOutlet("discovery-list-container-top", FirstPosts);
});

and when I pasted the error code into ask discourse it gave me this version

import { apiInitializer } from "discourse/lib/api";

// Global data store (hacky, but works for the JS tab)
window.firstPostsData = [];

fetch("/t/123.json")
  .then(r => r.json())
  .then(data => window.firstPostsData.push(data.post_stream.posts[0]));

fetch("/t/456.json")
  .then(r => r.json())
  .then(data => window.firstPostsData.push(data.post_stream.posts[0]));

export default apiInitializer(api => {
  api.renderInOutlet("discovery-list-container-top", 
    <template>
      {{#each (theme-prefix "firstPostsData" window=true) as |post|}}
        <div class="first-post-preview">
          <h4>{{post.topic_title}}</h4>
          {{{post.cooked}}}
        </div>
      {{/each}}
    </template>
  );
});

Can someone tell me what I’m doing wrong?

the error in the console was:

Compile error: SyntaxError: /theme-4/discourse/api-initializers/theme-initializer.gjs:

this is what showed in the preview

Thank you

NateDhaliwal · January 25, 2026, 1:05am

I’ve tweaked it and this seems to work:

import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";
import { htmlSafe } from "@ember/template";
import { ajax } from "discourse/lib/ajax";
import { apiInitializer } from "discourse/lib/api";

class FirstPosts extends Component {
  @tracked posts = [];

  constructor() {
    super(...arguments);
    this.loadPosts();
  }

  async loadPosts() {
    let topicIds = [123, 1807]; // change to your topic IDs
    let posts = [];
    for (constid of topicIds) {
      const data = await ajax(`/t/${id}.json`);
      if (data.post_stream && data.post_stream.posts.length > 0) {
        posts.push(data.post_stream.posts[0]);
      }
    }
    this.posts = posts;
  }

  <template>
    {{#each this.posts as |post|}}
      <div class="first-post-preview">
        <h4>{{post.topic_title}}</h4>
        {{htmlSafe post.cooked}}
      </div>
    {{/each}}
  </template>;
}

export default apiInitializer((api) => {
  api.renderInOutlet("discovery-list-container-top", FirstPosts);
});

EDIT: Now using ajax() and htmlSafe instead of triple curly braces.

Andrew_Rowe · January 25, 2026, 1:25am

Thank you Nate! I’m trying to figure out what you changed

Your code seems to match my first version

You have replaced let with const in the for loop

is that correct?

ask discourse version throws error

for (let id of topicIds) {
      let res = await fetch(`/t/${id}.json`);
      let data = await res.json();
      if (data.post_stream && data.post_stream.posts.length > 0) {
        posts.push(data.post_stream.posts[0]);
      }
    }

Nate’s version runs

for (let id of topicIds) {
      const res = await fetch(`/t/${id}.json`);
      const data = await res.json();
      if (data.post_stream && data.post_stream.posts.length > 0) {
        posts.push(data.post_stream.posts[0]);
      }
    }

Can anyone explain what is wrong? Why Let wouldn’t work and const does?

Thanks again Nate

NateDhaliwal · January 25, 2026, 1:30am

I tried let and the result was the same. It’s just that I’d normally use const when using fetch() or ajax().

I believe the error comes from the static template = line. With it, I get:

[THEME 10283 'Pokemon Theme'] Error: connector component has no associated template. Ensure the template is colocated or authored with gjs.
    at h (plugin-connectors.js:35:11)
    at eY.renderInOutlet (plugin-api.gjs:1116:5)
    at todo.gjs:43:7
    at eH (plugin-api.gjs:3363:10)
    at Object.initialize (api.js:21:14)
    at i.initialize (app.js:265:28)
    at index.js:379:19
    at e.each (index.js:183:7)
    at e.walk (index.js:112:10)
    at e.each (index.js:59:20)
    at e.topsort (index.js:65:10)
    at iL._runInitializer (index.js:392:11)
    at iL.runInstanceInitializers (index.js:377:10)
    at l._bootSync (instance.js:116:22)
    at iL.didBecomeReady (index.js:784:18)
    at invoke (index.js:262:14)
    at m.flush (index.js:180:11)
    at g.flush (index.js:334:19)
    at z._end (index.js:762:32)
    at _boundAutorunEnd (index.js:499:12)

And if I just use <template> directly, there’s no error. I don’t think using static template is valid here, so just using the template tag directly works.

Andrew_Rowe · January 25, 2026, 4:10pm

I foolishly deleted the version I was testing and now I can’t get Nate’s most recent version to run

theme-initializer.gjs:18 Uncaught (in promise) ReferenceError: constid is not defined
    at n.loadPosts (theme-initializer.gjs:18:10)
    at new n (theme-initializer.gjs:12:10)
    at h.createComponent (index.js:259:12)
    at $.create (index.js:419:28)
    at Object.evaluate (index.js:985:23)
    at Object.evaluate (index.js:103:106)
    at tr.evaluateSyscall (index.js:2873:20)
    at tr.evaluateInner (index.js:2852:64)
    at tr.evaluateOuter (index.js:2849:10)
    at tH.next (index.js:4167:45)
    at tH._execute (index.js:4157:21)
    at tH.execute (index.js:4133:41)
    at tq.sync (index.js:4194:120)
    at tz.render (index-BCp6wOJU.js:4636:43)
    at index-BCp6wOJU.js:4934:16
    at eX (index.js:2414:7)
    at tG._renderRoots (index-BCp6wOJU.js:4914:7)
    at tG._renderRootsTransaction (index-BCp6wOJU.js:4962:12)
    at tG._renderRoot (index-BCp6wOJU.js:4904:10)
    at tG._appendDefinition (index-BCp6wOJU.js:4828:10)
    at tG.appendOutletView (index-BCp6wOJU.js:4818:10)
    at invoke (index.js:264:14)
    at m.flush (index.js:180:11)
    at g.flush (index.js:334:19)
    at z._end (index.js:762:32)
    at _boundAutorunEnd (index.js:499:12)

this very first version is the only one I can get to run

import { apiInitializer } from "discourse/lib/api";
import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";

class FirstPosts extends Component {
  @tracked posts = [];

  constructor() {
    super(...arguments);
    this.loadPosts();
  }

  async loadPosts() {
    let topicIds = [98, 239]; // change to your topic IDs
    let posts = [];
    for (let id of topicIds) {
      const res = await fetch(`/t/${id}.json`);
      const data = await res.json();
      if (data.post_stream && data.post_stream.posts.length > 0) {
        posts.push(data.post_stream.posts[0]);
      }
    }
    this.posts = posts;
  }

  <template>
    {{#each this.posts as |post|}}
      <div class="first-post-preview">
        <h4>{{post.topic_title}}</h4>
        {{{post.cooked}}}
      </div>
    {{/each}}
  </template>;
}

export default apiInitializer((api) => {
  api.renderInOutlet("above-main-container", FirstPosts);
});

I am trying to use the theme JS tab to do this

maybe I should switch to a theme on gitthub, is that where my limitation is?

merefield · January 25, 2026, 6:58pm

Yes, let and const are effectively identical here so that’s not the issue.

merefield · January 25, 2026, 7:04pm

I believe (in theme components and plugins) you can only include templates with that syntax in a standalone .gjs file as that suffix flags the interpreter to pre-compile it. Not sure how that affects the inbuilt online theme system.

Moving to GitHub is in any case a very good idea.

Andrew_Rowe · January 25, 2026, 7:11pm

Thank you for that advice, I am trying to do that now. Getting as far as I have has given me encouragement. Nate’s code above actually runs and puts the two topics on top. I will start a new topic with my theme idea and try to document what I learn. ask.discourse.org is absolutely amazing!

Topic		Replies	Views
Cannot put the template in the desired outlet Dev	13	233	November 13, 2024
Modernizing inline script tags for templates & JS API Dev dev-news	43	3611	November 21, 2025
Cannot get the js in my component to compile SyntaxError: Private field must be used in an enclosing class Dev	14	201	September 21, 2024
Using the JS API Developer Guides plugin-api , explanation , code	17	11607	November 25, 2025
Fetch third party data for topic list Dev	8	106	August 13, 2024

Render a post above the discovery-list-container-top Outlet

Related topics