Insert a glimmer component after first post

Dev
7

I’m afraid I may have been a bit over-optimistic here @pfaffman, sorry! The PR I made would introduce a new wrapper <div> between every single post, even if the outlet was not being used. That’s not really something we want to do.

There may be ways to avoid the wrapper… but nothing simple which we can do immediately.

So I think the best immediate solution for you is going to be copying the adplugin implementation which you referenced in the OP.

Essentially:

  1. Create a component (Glimmer or classic, doesn’t matter) which renders whatever you want

  2. Use registerWidgetShim to make that component available as a widget. The adplugin example is creating a widget called “after-post-ad”, which renders the PostBottomAd component. It is passing all of the widget attributes (@data) into the @model argument of the component.

  3. Use api.decorateWidget to render your new widget shim in the post:after position. In your case, since you only want it on the first post, you could do something like

    api.decorateWidget("post:after", (helper) => {
  if(helper.widget.model.post_number === 1){
    return helper.attach("my-widget-shim");
  }
});

When we eventually glimmer-ify the topic page, you’ll need to remove the widget shim/decoration, and replace it with a plugin outlet. That should be pretty easy, since all your display logic in the component will be reusable in the plugin outlet.

Let us know how you get on! Happy to help with any follow-up questions - I know there are a lot of moving parts here.

3 Likes