Frontendkod för nollningshemsidorna nollning.esek.se och e-nollning.nu/\d{4}/.nollning.esek.se.
Skriven i Next.js för att få SSR (och för att @afroborg var lite trött på SvelteKit).
Däremot används såklart TailwindCSS för att inte behöva skriva egen csskod (🤮).
Designen är gjord av Phøset 2022 tillsammans med @afroborg och @blennster (och säkert andra som inte får cred). Målet var att hitta en lösning som kan fungera flera år framåt, med endast tweaking på t.ex. färger, bilder och innehåll.
Vi gissar att detta kommer ändras lite varje år men skitsamma
Upplägget är enkelt - man bygger olika sektioner i backenden (strapi) som sedan hämtas i varje anrop. Sedan parsas dessa sidorna beroende på namnet som de har i strapi.
T.ex:
Phøset lägger in en text-komponent med lite innehåll från en WYSIWYG i strapi.
API-anropet kommer då innehålla ett objekt som ser ut enligt följande:
{
...
content = [
...
{
__component: 'content.text',
...
}
]
}Komponenten <StrapiComponents content={content} /> gör sedan en switch-check och renderar ut en komponent med en färdig layout för just text.
Sidan kan antingen hämtas direkt utan subdomänsprefix (https://nollning.esek.se) eller med prefix (xxxx.nollning.esek.se). Detta är för att vi vill kunna spara gamla sidor live efter att nollningen varit (vissa är nostalgiska)
Beroende på hur man hämtar sidan får man olika utfall:
Om inget prefix sätts, så kommer det göras en default mot nuvarande året (new Date().getFullYear()) och endast detta årets information kommer visas.
index.tsx komponenten kommer då att parsa ut årtalet (i detta fallet 2020) och göra en filtrerad sökning mot api:et för att hämta just det årets data. På så sätt kan vi se till att alltid spara information för tidigare år.
Eftersom vi inte vill att alla ska kunna gå in på nollning.esek.se under tiden som phøset bygger hemsidan i strapi, finns det ett password-fält som de sätter i adminpanelen. Om password är '' sidan alltid att gå att läsas in, annars måste en ?password={password} flagga sättas i frontenden.