Trying out the new custom-homepage feature: DEV: allow themes to render their own custom homepage by pmusaraj · Pull Request #26291 · discourse/discourse · GitHub :tada: @pmusaraj I wonder what’s the best approach to add components? So adding the custom-homepage modifier enables the discovery.custom route and shows a default info alert, rendered on the custom-homepage outlet: [image] I add a component to the outlet and it renders instead: [image] [image] However, when I add more than one component, I get an error: [image] [image] I can add more components to other outlets though. Here’s a view with plugin outlets visible: [image] [image] So I wonder how the new outlet should work: In a way, I wouldn’t need the outlet. I can just use the other available ones and limit components to the discovery.custom route Though it seems I need to put at least one component on the outlet, otherwise the default alert is rendered? Putting an empty template there doesn’t work. On the other hand, if I could add multiple components to the outlet, I wouldn’t need to have a route logic at all. Components would only show on the homepage because the outlet will not be available on other routes?

Another observation: I put a link on the sidebar using the /custom url: [image] It’s not highlighted when on the custom route. If I understand the logic with the sidebar highlights correctly, it should also be highlighted when on the root url /.

I see your issue more clearly after having a quick look at the Featured Lists component. One option is to refactor that component and have it output all of the lists into one Ember component. Then you could add that component to a plugin wrapper outlet. Another option is to add a second plugin outlet to the custom homepage template, something like . I may be hanging on to this custom-homepage outlet with a message for admins for not much good reason, to be honest. That warning is not all that useful… [image] Manuel Kostka: It’s not highlighted when on the custom route. Yeah, that can be tricky. In my local test just now, /custom there doesn’t work properly. It’s better to use /, that routes correctly. But it still doesn’t highlight.

[image] Penar Musaraj: Yeah, that can be tricky. In my local test just now, /custom there doesn’t work properly. It’s better to use /, that routes correctly. But it still doesn’t highlight. That seems to be a common issue. If I use /it also doesn’t highlight other routes set as the landing page. [image] Penar Musaraj: I may be hanging on to this custom-homepage outlet with a message for admins for not much good reason, to be honest. That warning is not all that useful… Yes, I could also imagine the warning just being displayed differently. The main advantage of wrapper outlets seems to be that I can conditionally yield core code or render custom one. But that would likely never be a case for that info message. [image] Penar Musaraj: I see your issue more clearly after having a quick look at the Featured Lists component. One option is to refactor that component and have it output all of the lists into one Ember component. Then you could add that component to a plugin wrapper outlet. There must be a misunderstanding. The component already wraps all lists in one wrapping component and renders it on any given outlet: [image] So I can add the component without issues to the current wrapper outlet on the custom homepage. What I can’t do is use that outlet to render more than one standalone component on the custom homepage. Components I would have installed as theme components, like these three: [image] My assumption is that making such use of several standalone theme components to build a custom homepage would be the common approach. Rather than building it all from scratch in one theme. [image] Penar Musaraj: Another option is to add a second plugin outlet to the custom homepage template, something like . If you consider adding another outlet or changing the outlet setup, I could give some more feedback from using it so far. Though I’ll wrap that rabbit hole in details :smile: So I realized that the outlet is rendered within the main-outlet element. The overall structure of these elements then is: main-outlet wrapper sidebar-wrapper main-outlet custom-homepage outlet As a designer I’m actually not that flexible arranging items on a custom homepage using this outlet. For the design shared above I rather used the before-main-outlet outlet, not only because I can put more than one component, but also because it doesn’t nest components within the main-outlet element. The structure as shared on the screenshot above looks like this: main-outlet wrapper sidebar-wrapper component: search banner component: featured topics component: featured lists main-outlet The advantage is that I can arrange elements across the width of the entire main-outlet wrapper and not just within the main-outlet element. To illustrate the point, if I’d render one of the components on the current custom-homepage outlet, it would render nested within the main-outlet element like this: [image] The most flexibility for custom designs in my view would be offered by a plugin outlet that is placed as a direct child of the main-outlet wrapper (similar to the before-main-outlet outlet) within a wrapping div That wrapping div would bundle all components added to it and allow for easy ordering. Such a structure would then look like: main-outlet wrapper sidebar-wrapper custom-homepage-wrapper component: search banner component: featured topics component: featured lists main-outlet So that’s my feedback as a designer. Guess it’s for you to decide how much that aligns with what you’d consider a common application for the custom homepage feature.

Presumably this page is “superficial” in that it will appear for the user but not for “Googlebot” and so won’t be indexed?

Correct, yes, for the crawler view I have opted to outputting just the top menu. Can’t really know from the Rails app what a theme will output in this route. [image] Manuel Kostka: If you consider adding another outlet or changing the outlet setup, I could give some more feedback from using it so far. I am thinking about the suggestions here @manuel, will make some time shortly to test out some changes. Please :bear: with me.

An issue I came across: I wanted to display the Homepage Feature component on the custom homepage. But then topics are not filtered on this route. The component just shows any recent topic that has an image. The code on the component is: const topicList = await this.store.findFiltered("topicList", { filter: "latest", params: { tags: [`${settings.featured_tag}`], order: sortOrder, } And it seems the params are not applied on the custom homepage. It works fine otherwise. Not sure why this happens? Edit: I use the same method on the Featured Lists component. When using this component on the custom homepage, the filter is also not applied. But only on the first list… when there’s more, the following lists are all filtered correctly.

Interesting, I’m not sure why that is, maybe there’s some logic in the topicList store that is tied to the discovery routes? The custom homepage is not a discovery route. I’m curious, does that same component with the params work fine in say an admin route? Or user profile route? Any chance you can check? @tynaut ran into a similar issue, so there’s likely something to be addressed here.

I tried with the Featured Lists component, it already has a setting to show the component everywhere. This doesn’t include admin routes, but I tried on all others (static pages, user profiles,..) and it seems to work everywhere expect the custom homepage. The other weird thing is, as mentioned, that it only doesn’t filter the first list. E.g. here I filter two lists, one for tag featured, one for General category, and that’s how the lists show on all other routes: [image] Just on the custom homepage route, they show like this: [image] So the first list doesn’t filter for the tag any more, but the second list does filter for the category. And when I switch the order of the lists, the first list doesn’t filter for category, but the second does filter for the tag: [image]

I found a little tricky to reproduce this properly with the Featured Homepage component, it mixes in too many other conditions. I can easily reproduce with a stripped down component though. I pushed this into a sample repo here: GitHub - pmusaraj/discourse-sample-custom-homepage · GitHub The sample-list component there should pull in only topics with the featured tag, but it doesn’t (it pulls in the first 3 topics for me). If I remove the custom_homepage modifier from that theme’s about.json file, then the right topics are pulled in. I’ll find someone more familiar with the store service to have a look. Thanks!

Using the new custom-homepage feature

Development

merefield (Robert) May 30, 2024, 1:51pm 18

I’ve added support for this feature into Discourse Bars 🍻 🍸 (a sidebar framework) - #43 by merefield

Topic		Replies	Views
(deprecated) Plugin outlet locations theme component Theme component end-of-life	38	11225	January 23, 2025
Custom Homepage for Groups Theme component	104	11050	August 6, 2025
Templating of my "component" broke. How do I fix it? Development	14	582	March 17, 2026
Add custom content that only appears on your homepage Developer Guides how-to	10	8604	February 29, 2024
How to replace/override homepage template Product Support	11	517	September 5, 2025

Using the new custom-homepage feature

Related topics