Using the new custom-homepage feature

Dev
28

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
30

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

31

How about showing it on the homepage then?

image
image860×89 7.32 KB

1 Like
32

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
37

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
38

Sounds like a cache that needs warming.

2 Likes
39

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
40

The PR above has now been merged @nolo, it should fix the issue for you. Thanks again for the report!

2 Likes
41

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
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.

3 Likes
43

I’ll have to test out some more, I am not sure why this isn’t working for me atm.

2 Likes
45

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.

3 Likes
46

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

4 Likes