Website is unusable without JavaScript: no navigation, no anchors in the static HTML

[raifdmueller]

Problem

The website is a complete dead end without JavaScript — not just "some dynamic features degrade", but nothing works at all: no navigation, not a single anchor reachable.

Evidence from the live site (plain curl, i.e. what every no-JS crawler and LLM fetcher sees):

1. Zero links in the static HTML of the home page. curl https://llm-coding.github.io/Semantic-Anchors/ returns a document with no <a href> element whatsoever. The header and footer are empty aria-hidden placeholder <div>s (#shell-header, #shell-footer, introduced for CLS in fix: eliminate CLS caused by SPA boot on homepage #432) that only main.js fills with real content.
2. No anchor list. The pre-rendered landing block (feat(seo): pre-render the landing answer block (What is Semantic Anchors?) #593) contains the hero text, but no catalog: none of the 161 anchors is mentioned or linked.
3. Anchor URLs are real 404s. curl -o /dev/null -w "%{http_code}" .../anchor/mece/ → 404. Anchor pages exist only through the GitHub-Pages 404.html SPA fallback, which renders nothing without JS.
4. Even if the header were static, its nav links are hash links (#/contracts), which do nothing without the JS router.

Impact

• Crawlers/LLMs: the pre-rendered doc pages (docs: add "Anchors and Training Data" article (from #582 discussion) #586/feat(seo): structured data (Organization + DefinedTermSet) and pre-render the article #592/feat(seo): pre-render the landing answer block (What is Semantic Anchors?) #593) are content islands. From the home page there is no crawlable path to any of them, and no crawlable path to any anchor. Link-based discovery and PageRank-style signals end at /.
• Humans without JS (strict privacy settings, broken script load, text browsers): blank navigation, empty page.
• This directly violates the project's own static-first litmus test: "The page MUST be fully readable with JavaScript disabled."

Expected

• The static HTML shell ships a real, visible header/footer navigation with plain <a href> links (clean URLs, no hash routes).
• The home page statically lists the catalog (categories + all anchors) with working links to crawlable targets.
• Both languages (EN + DE) are reachable as static HTML.
• JS stays progressive enhancement: with JS the SPA hydrates on top exactly as today (search, filters, modal, theme).

Scope note: real static detail pages per anchor (/anchor/<id>/index.html) are out of scope for this issue — first step is grid + list linking to the already pre-rendered /all-anchors reference.

[raifdmueller]

Analysis

Root causes (code level)

#	Cause	Location
1	Header/footer exist only as JS render functions; the shipped shell contains empty aria-hidden placeholders that main.js#hydrateShell() swaps at boot	website/index.html (skeleton), src/main.js:130-144, src/components/header.js, src/components/footer.js
2	The home catalog grid is rendered exclusively client-side from data/anchors.json + categories.json	src/main.js#renderHomePage() → card-grid.js
3	prerenderHome() (added in #593) injects only the hero text, no links, no catalog	scripts/prerender-routes.js:281
4	Nav/footer links are legacy hash routes (#/contracts, #/all-anchors) — meaningless without the JS router (which even has a redirect shim for them)	header.js, footer.js, src/utils/router.js:79-93
5	/anchor/<id> has no static representation (404 + SPA fallback); per-anchor sections in /all-anchors carry only title-derived IDs (#mece-principle), not the canonical anchor IDs (#mece), so there is no stable static link target per anchor	scripts/generate-llms-txt.js#generateAllAnchorsAdoc()
6	German exists only as a JS toggle (localStorage); the hreflang="de" alternate ?lang=de serves identical English HTML	src/i18n.js, website/index.html head

Solution (progressive enhancement, no SPA regression)

1. Static header + footer in the shell (website/index.html): replace the empty placeholders with real markup — logo, nav links, footer links — using clean URLs. Keep id="shell-header" / id="shell-footer" and the reserved heights, so hydrateShell() still swaps them in place at boot (CLS fix from fix: eliminate CLS caused by SPA boot on homepage #432 stays intact). Remove aria-hidden.
2. Clean URLs in the JS header/footer too (header.js, footer.js): switch #/x → BASE_URL-prefixed paths. The router already intercepts those clicks (router.js initRouter), so SPA behavior is unchanged — and the two nav variants stay consistent.
3. Static catalog on the home page: extend prerenderHome() to append a category → anchors link list (from categories.json + anchors.json) below the hero, reusing card-grid CSS classes already in the built stylesheet. Each anchor links to /all-anchors#<anchor-id>.
4. Stable per-anchor IDs in the full reference: generateAllAnchorsAdoc() emits [[<anchor-id>]] before each include, so /all-anchors#mece works. (Title-derived IDs like #mece-principle change — acceptable, they were never published as link targets.)
5. Static German: pre-render /de/ variants for the home page and every route that has a .de fragment (about, contributing, agentskill, rejected-proposals, brownfield, socratic-recovery-skill, spec-driven-development). Pages carry lang="de", self-canonical, and honest hreflang pairs (replacing the fake ?lang=de alternates). The router learns one rule: a /de/... path sets the language to DE and resolves the rest as the normal route, so JS users on a DE URL get the SPA in German.
6. Sitemap gains the /de/ routes; version bump + changelog entry.

Out of scope (follow-up candidates): static /anchor/<id>/index.html pages for all 161 anchors; no-JS search/filter.

Verification plan

• Unit tests for the new router /de rule and the prerender helpers (TDD).
• Full npm run build, then assert: dist/index.html contains <a href nav + catalog links; dist/de/index.html is German; every pre-rendered route reachable from / by following static links only.
• Playwright run with javaScriptEnabled: false against the preview build: navigate Home → Contracts → All Anchors → #mece purely via links.