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.
1 like
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
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
1 like
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:
I don’t know how to properly debug this, but maybe it helps to narrow down the issue.
3 likes
Sounds like a cache that needs warming.
2 likes
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.
5 likes
The PR above has now been merged @nolo, it should fix the issue for you. Thanks again for the report!
2 likes
I noticed today that adding a component into a route via the new recommended method does not work when using this theme modifier.
import { apiInitializer } from "discourse/lib/api";
import welcomeBanner from "../components/welcome-banner";
export default apiInitializer("1.8.0", (api) => {
api.renderInOutlet("custom-homepage", welcomeBanner);
});
The only way it works is javascripts/connectors/custom-homepage/welcome-banner.hbs
4 likes
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.
3 likes
I’ll have to test out some more, I am not sure why this isn’t working for me atm.
2 likes
So I’ve been using this quite a lot, together with my Homepage Blocks component. Two suggestions:
Default classes
I adjusted the component so it always adds a homepage class to the body and an active class to a sidebar link with href="/custom". These features could probably be defaults for the modifier?
api.onPageChange(() => {
const currentRoute = router.currentRoute.name;
const customHomepageLink = document.querySelector(
'.sidebar-section-link[href="/custom"]'
);
if (currentRoute === "discovery.custom") {
document.body.classList.add("homepage");
if (customHomepageLink) {
customHomepageLink.classList.add("active");
}
} else {
document.body.classList.remove("homepage");
if (customHomepageLink) {
customHomepageLink.classList.remove("active");
}
}
});
});
(I initially wanted to add the sidebar link by default, but not being able to edit such a link on the interface seems a real drawback to me, see How can I edit sidebar links that are added with api.addCommunitySectionLink?)
Snappy First Paint
I wouldn’t know how to approach this technically. But I wonder, if we land on a custom homepage, which typically shows a limited content selection, could we improve the FCP for the homepage and render it already while the rest of the app is loading? Maybe I’m misunderstanding the nature of the single app architecture here.. it just feels a bit disappointing to be presented the loading animation first, then land on a rather simple page, which by itself could just be there quite instantly.
4 likes
Maybe… not sure. It’s relatively easy to add this class now to any component template, you just need to use the bodyClass helper. For example, in a separate theme we do this:
<template>
{{bodyClass "custom-homepage"}}
...
</template>
It achieves the same as the onPageChange hook, but it’s more reliable. It will only set that class to the body while the component is rendered.
If the component has all the data it needs already, then yes, no reason why it can’t rendered with the rest of the app. In most cases though, the component will need to make a request to get some extra data, which triggers the loading indicator. I can’t think of any easy way to make that load faster, tbh.
While we’re here, we made an additional improvement to this feature. Until very recently, the crawler view of the custom homepage was not customizable. Now it is, via a server-side HTML outlet: DEV: Fix custom homepage crawler display and override by pmusaraj · Pull Request #31841 · discourse/discourse · GitHub
5 likes
I used to modify my theme using the admin UI, but as I’m now getting a deprecation warning I’m looking at the custom-homepage option instead.
I’ve migrated my <head> and css by following this example. My attempt is here. So far so good.
The issue is now how to insert the search bar and the component ‘Who’s Online’.
In my previous <head> I simply added {{whos-online}} and {{search-menu}} where I wanted them in the code, but this does not work here - I cannot find how to inject them correctly.
Could someone please point me in the right direction here or know the correct syntax?
Final result should look like this (currently reverted to my previous, soon to be deprecated, code).
I had a quick look locally, and ran into an issue with the WhosOnline component. But after restarting the server, it worked fine. The code I used in the homepage component was:
import WhosOnline from "discourse/plugins/discourse-whos-online/discourse/components/whos-online";
...
<template>
<WhosOnline />
</template>
Keep in mind though that SearchMenu is always present, since it is in core, whereas <WhosOnline /> comes from a plugin and is only registered if the plugin is enabled.
3 likes
That solved the Who’s Online and Search Menu! Awesome. Now I just need to figure out the syntax for getting the feed I’m currently seeing here.
Currently it is being shown by just hiding everything else on the page except the feed, inserting the hero, whos online, search menu and links, and then positioning the feed relative to these by overriding the css. Not great.
I’m close to being able to do a custom homepage layout where I can place all the pieces in their proper places, but am missing how to grab the feed. I’ve tried inspecting the current page with Ember and checked out the discourse app components for how to import it but no success.
Any clues?
I’d use a component like Featured Lists to feature a topic list with a limited number of topics on the homepage. I believe if you insert the core list, you get an infinite list that lazy loads. Maybe that’s what you want? Though why bother then to add a separate homepage, rather than just building out your landing page right on that topic list view?
You could also look at my component Homepage Blocks to arrange your homepage layout. You can add components and arrange their order through an editor. The component also adds a body class homepage and an additional wrapper element homepage-blocks that you can use for better responsive styling. E.g. you could define a grid on the wrapper and adjust your layout depending on width, so you have one layout with a sidebar and main content on wide screens and a single row layout with all your content stacked up on more narrow views. Right now your sidebar items just shrink which might not look ideal on some widths.
This would be a simple example of a homepage grid that switches layout depending on width: https://forum.zolidar.com.
1 like