Modify TopicExcerpt template?

Development

AI-generated summary

In a Dev category discussion, dsims seeks to enhance the TopicExcerpt component by adding the topic creator’s avatar, but finds no direct way to modify it without duplicating logic — particularly around @expandPinned. merefield suggests alternatives like replacing the excerpt cell or using plugin outlets with CSS, though dsims clarifies the excerpt isn’t a standalone cell and the relevant plugin outlet (topic-list-main-link-bottom) lacks access to @expandPinned. After exploring workarounds, including replicating logic from topic-list-item.gjs and discovery/topics.js, dsims humorously pleads for a cleaner solution. In response, awesomerobot agrees and submits a PR to pass @expandPinned to the topic-list-main-link-bottom outlet, addressing the core request. The thread highlights the complexity of modifying built-in Discourse components and the community’s collaborative problem-solving approach.

1

I want to add the topic-creator avatar to topic-list excerpts, but there doesn’t seem to be anyway to modify the Topic Excerpt.

TopicExcerpt:

I think the only option is to hide .topic-excerpt with CSS and use my own component via the topic-list-main-link-bottom Plugin Outlet which is right under the TopicExcerpt area. The problem with that is the plugin outlet only gets the topic as an arg, so I have to duplicate all the logic in expandPinned to know if I should be showing it or not.

tl;dr; Could we get a PluginOutlet inside the TopicExcerpt and/or pass @expandPinned to the topic-list-main-link-bottom outlets?

2

You have more options now, see:

3

I’ve looked into all the options AFAIK. There is no surgical way to modify the just the excerpt that I can see.

4

yes there is, delete it and add your own

5

You mean replace the whole topic-list-item with my own? I’d like to avoid having to maintain all that when I only want to modify a small piece.

6

no, replace the excerpts cell, or add another one next to it and hide it.

7

The excerpt is not a cell. It’s used inside the topic-cell and in the mobile item

You can also see there that the nearby topic-list-main-link-bottom plugin-outlet only passes the @topic, but not @expandPinned.

8

Ah yes you are right, apologies.

I saw the file in the topic-list components and made an assumption.

But in any case, there’s loads of tools to achieve what you want here, no?

Plugin outlet looks like a good option and then manipulate the layout with CSS?

9

As for the expandPinned, maybe replicate the logic in your new Component as much as you need to?

10

Yeah that’s the path i was going down. Which also means replicating

  get useMobileLayout() {
    return applyValueTransformer(
      "topic-list-item-mobile-layout",
      this.site.mobileView,
      { topic: this.args.outletArgs.topic }
    );
  }
  //and from discovery/topics.js
  get expandGloballyPinned() {
    !this.expandAllPinned();
  }
  get expandAllPinned() {
    const category = this.discovery.category?.id
    const tag = this.discovery.tag?.id
    return category || tag;
  }

I was hoping pleading to the gods might produce a cleaner option :pray: :sweat_smile:

11

That’s what I’m usually doing on a Monday morning.

12

this seems reasonable, so I’ve done this here:

https://github.com/discourse/discourse/pull/31334