Jak je postavený tenhle web

Web je jedna aplikace v TypeScriptu. Server i prohlížeč sdílejí tytéž typy, takže změna adresy nebo dat se projeví chybou v editoru, ne na produkci.

• TanStack Start a TanStack Router: vykreslení na serveru, typované cesty a parametry. Proč jsme ho zvolili místo Next.js, píšeme na blogu.
• React 19, Vite 8 a Nitro jako server. Běží v Node 24 v Dockeru pod neprivilegovaným uživatelem.
• Tailwind CSS 4 a vlastní tokeny pro denní a noční režim. Komponenta se nevětví podle režimu, větví se token.
• Paraglide pro překlady: texty se kompilují do typovaných funkcí, takže překlep v klíči je chyba v editoru, ne prázdné místo na stránce.
• TypeScript 7, Oxlint a Oxfmt. Kontrola typů, lint i formát běží jedním příkazem pnpm run cq a jsou součástí CI.

Každá veřejná stránka se předvykresluje při sestavení. Jeden seznam adres slouží pro prerender i pro sitemapu, takže se nemůžou rozejít.

• JS a CSS jsou předkomprimované do gzipu i brotli a mají v názvu otisk obsahu, takže je prohlížeč drží v cache rok (immutable).
• HTML se vždy ověřuje (must-revalidate): nový článek je vidět hned po nasazení.
• Dvě variabilní písma místo sady řezů, obě přednačtená, aby text po načtení neposkakoval.
• Rastr v úvodu se kreslí do 2D canvasu a má vlastní e2e test na snímkový rozpočet. Ten běží sám, aby měřil vykreslování, ne zátěž od ostatních testů.

Content Security Policy se skládá pro každou HTML odpověď zvlášť. Do script-src se zapíšou SHA-256 otisky přesně těch inline skriptů, které v odpovědi jsou. Nonce by nešel, protože stránky jsou předvykreslené a nonce by v souboru zamrzl.

• Strict-Transport-Security s preload, Cross-Origin-Opener-Policy, X-Content-Type-Options, X-Frame-Options: DENY a Referrer-Policy.
• Permissions-Policy vypíná 14 rozhraní prohlížeče, která web nepotřebuje: kameru, mikrofon, polohu, platby, USB a další.
• Vložit jde jen video z youtube-nocookie.com a Vimea. Nic jiného se do stránky nedostane.
• Návštěvnost měří Umami na vlastní doméně, bez cookies a bez lišty se souhlasem.
• CI umí vygenerovat SBOM ve formátu CycloneDX a ověřit ho proti požadavkům nařízení o kybernetické odolnosti (CRA).

Web má čtenáře, kteří nejsou lidé. Vyhledávače i jazykové modely dostanou totéž co návštěvník, jen ve tvaru, který jim sedí.

• Každá stránka má canonical, hreflang pro oba jazyky a jeden JSON-LD graf: firma, web, stránka, drobečková navigace, u článků autor.
• Sitemapa uvádí datum změny jen tam, kde ho opravdu známe. Datum sestavení by byl falešný signál čerstvosti.
• Táž adresa vrátí markdown místo HTML, když si o něj klient řekne hlavičkou Accept: text/markdown. Agent tak čte obsah bez lišty a skriptů.
• /llms.txt shrnuje firmu pro modely. /.well-known/agent-skills/index.json a /.well-known/ai-catalog.json popisují, co agent na webu může udělat; hlavička Link na ně odkazuje z každé stránky.
• Přes WebMCP web nabízí agentům v prohlížeči nástroje: otevřít stránku, zjistit kontakt a odeslat poptávku. Popis nástroje agentovi říká, že ji smí poslat jen pro člověka, který o ni požádal a potvrdil její obsah.
• robots.txt povoluje AI crawlery a pravidlem Content-Signal říká, k čemu obsah smějí použít.

Články jsou markdown v repozitáři, vedle kódu. Při sestavení je zpracuje unified (remark a rehype) a kód obarví Shiki, takže v prohlížeči neběží žádný zvýrazňovač.

• Obrázek bez alternativního textu sestavení zastaví. Nedostupný obsah se nedá nasadit omylem.
• Odkaz na YouTube nebo Vimeo na samostatném řádku se sám změní ve vložené video v režimu bez cookies.
• Každý jazyk má RSS feed s celým textem článků a každý autor svůj vlastní.

Přístupnost se testuje stejně jako všechno ostatní: automaticky.

• Playwright pouští axe nad stránkami v obou režimech a obou jazycích.
• Barvy mají kontrastní povinnost. Oranžová jako text má vlastní ztmavený token, protože ta původní na světlém podkladu neprojde.
• Odkaz pro přeskočení navigace, hlášení změny stránky pro čtečky obrazovky, viditelný fokus a respekt k prefers-reduced-motion.

Unit testy ve Vitestu a Testing Library hlídají logiku: CSP, vyjednávání jazyka, markdown pro agenty, feed, formuláře. E2e testy v Playwrightu procházejí web jako člověk: navigaci, klávesnici, motivy, SEO značky i přístupnost.

Značka >_ v liště otevře terminál. Umí ls, cd, cat, whoami a pár dalších příkazů, kterými si přečtete obsah jiné stránky, aniž byste opustili tu svou. Je v něm i had a rm -rf taky něco udělá.

Nic z toho nemusíte brát na slovo. Stačí terminál:

npx lighthouse https://bhpslabs.com/cs --view

curl -s -D - -o /dev/null https://bhpslabs.com/cs | grep -i content-security-policy

curl -s -H "Accept: text/markdown" https://bhpslabs.com/cs/audit

curl -s https://bhpslabs.com/llms.txt

curl -s https://bhpslabs.com/.well-known/agent-skills/index.json

curl -s https://bhpslabs.com/cs/blog/feed.xml