Utilizzo della nuova funzione personalizzazione della homepage

Lo sto usando molto, insieme al mio componente Homepage Blocks. Due suggerimenti:

Classi predefinite

Ho modificato il componente in modo che aggiunga sempre una classe homepage al body e una classe active a un link della barra laterale con href=\"/custom\". Queste funzionalità potrebbero probabilmente essere predefinite per il modificatore?

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

(Inizialmente volevo aggiungere il link della barra laterale per impostazione predefinita, ma non poter modificare tale link dall’interfaccia mi sembra un vero svantaggio, vedi How can I edit sidebar links that are added with api.addCommunitySectionLink?)

Snappy First Paint

Non saprei come affrontare tecnicamente questo aspetto. Ma mi chiedo, se atterriamo su una homepage personalizzata, che tipicamente mostra una selezione limitata di contenuti, potremmo migliorare la FCP (First Contentful Paint) per la homepage e renderla già mentre il resto dell’app è in caricamento? Forse sto fraintendendo la natura dell’architettura single-app qui… sembra solo un po’ deludente essere presentati prima all’animazione di caricamento, per poi atterrare su una pagina piuttosto semplice, che di per sé potrebbe essere lì quasi istantaneamente.

4 Mi Piace