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?

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!

Hi can you please explain how to add a component( search banner or a custom component already installed on forum) inside the home.hbs file to make it show on new custom homepage thanks

In the first post there’s a link to Github with comments explaining the feature. I believe this is still an experimental feature and to try it out you need to use and Install the Discourse Theme CLI console app to help you build themes.

thanks for reply manuel, i am already using the cli , git documents show how to add the custom html not actual component , i want to add the serach banner which is already installed on forum , can i call it in home.hbs or i have to create a new html search banner to use

[image] Raza shield: i want to add the serach banner which is already installed on forum How about showing it on the homepage then? [image]

yes this is the issue , i need to add it on homepage , i have added one custom now i have 2 let me remove one from theme thanks agains , much appreciate

[image] Penar Musaraj: 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). As mentioned when there’s multiple iterations it works on the subsequent ones and only the first time the filter is not applied. So it would work when I add an initial dry run to the store: javascripts/discourse/sample-custom-homepage/connectors/above-main-container/sample-list.gjs helloStore import Component from "@glimmer/component"; import didInsert from "@ember/render-modifiers/modifiers/did-insert"; import { action } from "@ember/object"; import { service } from "@ember/service"; import { tracked } from "@glimmer/tracking"; export default class SampleList extends Component { @service store; @tracked featuredTagTopics = []; constructor() { super(...arguments); this.helloStore(); this.getTopics(); } @action async helloStore() { await this.store.findFiltered("topicList", { This file has been truncated. show original I don’t know how to properly debug this, but maybe it helps to narrow down the issue.

Sounds like a cache that needs warming.

Yeah it has to do with how we preload data. I have a PR ready with a potential fix: DEV: Extract theme resolution to a helper by pmusaraj · Pull Request #27426 · discourse/discourse · GitHub Will merge early next week.

Using the new custom-homepage feature

Development

manuel (Manuel Kostka) August 27, 2024, 8:17pm 42

Seems to work for me.. Do you already render another component? I think there was the issue that it only works with one. Or it’s because I’m only using it on stable right now.

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

Using the new custom-homepage feature

Related topics