Usando o novo recurso de página inicial personalizada

Dev
45

Tenho usado isso bastante, junto com meu componente Homepage Blocks. Duas sugestões:

Classes padrão

Ajustei o componente para que ele sempre adicione uma classe homepage ao corpo e uma classe active a um link da barra lateral com href=\"/custom\". Esses recursos poderiam provavelmente ser padrões para o modificador?

  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");
      }
    }
  });
});

(Inicialmente, eu queria adicionar o link da barra lateral por padrão, mas não conseguir editar tal link na interface parece ser um grande inconveniente para mim, veja How can I edit sidebar links that are added with api.addCommunitySectionLink?)

Renderização Rápida Inicial

Eu não saberia como abordar isso tecnicamente. Mas me pergunto, se aterrissarmos em uma página inicial personalizada, que normalmente exibe uma seleção limitada de conteúdo, poderíamos melhorar o FCP (First Contentful Paint) para a página inicial e renderizá-la enquanto o restante do aplicativo está carregando? Talvez eu esteja entendendo mal a natureza da arquitetura de aplicativo único aqui… parece um pouco decepcionante ser apresentado à animação de carregamento primeiro, depois a uma página bastante simples, que por si só poderia estar lá quase instantaneamente.

4 curtidas