Ako je táto stránka postavená

Táto stránka je zámerne malá: jedna stránka, jeden blog a čo najmenej JavaScriptu. Takto do seba jednotlivé časti zapadajú, ak by ste chceli postaviť niečo podobné.

Terminál je rozloženie

Stránka je zostavená ako terminálová aplikácia. Hore je lišta kariet, dole stavový riadok a všetko medzi nimi sú panely: rámčeky s nadpisom vsadeným do horného okraja. Všetky ich kreslí jeden malý komponent, Pane.

Blog ako zobrazenie zoznam–detail: zoznam zostáva na mieste, kým sa príspevok mení.

Navigácia sleduje rovnakú myšlienku. V blogu zostáva zoznam príspevkov vľavo, zatiaľ čo sa príspevok otvára vpravo, takže pri prechode medzi príspevkami nikdy nepotrebujete odkaz späť. Klávesové skratky fungujú ako v termináli a túto tabuľku môžete zoradiť kliknutím na hlavičku stĺpca:

Pohyb je väčšinou CSS. Príkaz v úvode sa píše animáciou steps(), panely sa vynárajú pri posúvaní do zorného poľa a čiara pod lištou kariet aj percento v stavovom riadku sledujú pozíciu posunu. Všetko sa vypína pri prefers-reduced-motion.

Písanie príspevkov

Príspevky sú obyčajné súbory Markdown v content/blog/<slug>/<locale>.md, zobrazované pomocou TanStack Markdown. Chýbajúci preklad sa nahradí anglickým súborom a draft: true nechá príspevok mimo produkčných zostavení.

Zvyšok zabezpečujú tri nástroje TanStack:

• Markdown spracuje príspevok a vykreslí ho ako prvky Reactu, bez HTML reťazca uprostred.
• Highlight zafarbuje bloky kódu. Zbalené sú len jazyky, ktoré zaregistrujem, a farby pochádzajú z rovnakých CSS premenných ako zvyšok témy.
• Charts a Table sa vkladajú jednoriadkovým komentárom, ktorý pomenúva súbor JSON vedľa príspevku.

Bloky kódu môžu mať nadpis so súborom:

export function createEmbeds(slug: string, locale: string) {
  return {
    chart: ({ data = "", kind = "bar", x = "x", y = "y", title = "Chart" }) => (
      <TuiChart
        rows={getPostDataset(slug, data, locale)}
        kind={kind}
        x={x}
        y={y}
        label={title}
      />
    ),
  }
}

Fungujú aj bežné tabuľky Markdown a preberajú rovnaký štýl:

Takto veľa zdrojových súborov leží v každom priečinku v čase písania:

Generované ikony a karty pre sociálne siete

Next.js 16 vytvára obrázky metadát zo súborov v adresári app/:

• icon.tsx a apple-icon.tsx kreslia favikonu a ikonu pre iOS z jediného SVG, assets/logo-icon.svg.
• opengraph-image.tsx kreslí kartu domovskej stránky a ďalší súbor kreslí kartu pre každý príspevok.

Súbor favicon.tsx neexistuje. Dokumentácia výslovne uvádza, že favikonu nemožno generovať, preto túto prácu robí icon.tsx. Všetky zdieľajú malú sadu základných prvkov, takže zmena značky mení favikonu aj všetky karty naraz.

Inštrumentácia

Pozorovateľnosť zabezpečujú dva súbory. instrumentation.ts beží na serveri a hlási chyby požiadaviek. instrumentation-client.ts beží pred hydratáciou a sleduje chyby klienta, webové metriky a zmeny trás. Oba odovzdávajú udalosti reportéru, ktorý ich rozdeľuje príjemcom:

export const serverReporter = createReporter([
  consoleSink,
  ...(endpoint ? [endpointSink(endpoint)] : []),
])

Udalosti klienta sa posielajú na /api/observability, ktoré ich zapisuje. Neskoršie napojenie reportéra na skutočný zberač znamená pridať jedného príjemcu bez zásahu do žiadneho zo vstupných súborov.

Preklady

Stránka je dostupná v desiatich jazykoch vrátane arabčiny a hebrejčiny, ktoré sa čítajú sprava doľava. Každý text žije v súbore správ pre daný jazyk; ak kľúč niekedy chýba, správy predvoleného jazyka sa primiešajú zospodu, takže stránka nikdy nezostane prázdna. Príspevky fungujú rovnako: každý jazyk má vlastný súbor a ak chýba, použije sa angličtina.