Using the new custom-homepage feature

Dev
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