Editorial UI refresh + local-dev QoL (frontmatter, mermaid zoom, filterable branches, env passphrase, discoverBranches)

[pwalus]

Bundles the design + local-dev iterations I've been running against a Byredo docs deployment. Everything new is either purely additive (UI, frontmatter, mermaid zoom) or env-gated so existing deployments are unaffected until they opt in.

Summary

• Editorial UI refresh — warm cream paper + near-black ink + ochre accent; Fraunces (variable serif) + DM Sans + JetBrains Mono loaded via `next/font`. Split editorial sign-in cover, ink-on-paper masthead, sidebar that auto-expands + pretty-names files/folders + highlights the current page with a checkmark and ochre band. Coloured mermaid palette. Ruled editorial tables. Dark-ground code blocks.

• Frontmatter rendering — YAML frontmatter is now parsed via `gray-matter` and rendered above the article as an "At a glance" block: serif title, italic description, metadata grid with tag chips + formatted dates + status badges, and full-width one-per-line sections for long arrays (`related`, `applies_to`). Duplicate `# Title` in the body is stripped when it matches frontmatter's title.

• Mermaid: fullscreen zoom + per-participant colour — `Zoom` button opens a portal-rendered overlay with wheel-zoom, drag-pan, HUD, and Escape-to-close. Actor rects in sequence diagrams and node shapes in flowcharts get cycled through a distinct palette post-render so multi-actor diagrams read at a glance.

• Filterable branch switcher — search input at the top of the dropdown, case-insensitive substring filter, match highlighting, current branch pinned, Enter selects the first non-current match, Escape clears then closes.

• `discoverBranches: true` — new top-level config flag; when set, the config loader calls `repos.listBranches` for `DOCS_REPO` and merges every branch into `config.branches`. Explicit `branches:` entries stay in place and act as templates for permissions/comments/chat. Fails soft.

• `PROJECTPAGES_PASSPHRASE_` env override — per-user-group passphrase can now be set in the environment (`vaimo` → `PROJECTPAGES_PASSPHRASE_VAIMO`, etc.). Env value wins when non-empty; config passphrase remains a fallback. Real secrets no longer have to live in the docs repo.

• `PROJECTPAGES_LOCAL_CONFIG` — local-dev backdoor to load `projectpages.config` from a filesystem path instead of the GitHub API. Nothing needs to be committed to the docs repo for local iteration.

• `DEV_AUTH_BYPASS=1` — local-dev backdoor to skip the passphrase check and log in as the first user group. Env-gated, off by default.

• Docs — README + all `docs/` pages updated for the above (authentication, configuration, deployment, content-rendering, design, project-structure).

Test plan

• Existing deployments (no new env vars set, no config changes) render identically apart from the visual refresh — no functional regressions.
• Sign in with a real passphrase via config's `userGroups[].passphrase`.
• Sign in with `PROJECTPAGES_PASSPHRASE_` set; verify env value wins.
• Sign in with `DEV_AUTH_BYPASS=1`; any input logs in as the first group.
• Set `PROJECTPAGES_LOCAL_CONFIG=/abs/path`; verify config loads from disk and no GitHub API call fires for the config.
• Set `discoverBranches: true`; open the branch switcher — every remote branch appears.
• Type in the branch switcher search box; verify substring match + highlight; current branch stays pinned.
• Open a `.md` file with YAML frontmatter; verify the "At a glance" block renders with title, description, tags, related list; body's `# Title` is stripped when it matches.
• Open a doc with a mermaid diagram; verify actor/node colours cycle; click Zoom; scroll to zoom, drag to pan, Escape closes.
• Sidebar: pretty names show (no `.md`, underscores → spaces, acronyms preserved). Folder containing the active file is auto-expanded.
• All existing routes still authenticate correctly; comments still scoped by `(file_path, branch)`.

Notes for reviewers

• `app/globals.css` has `!important` on the list-marker rules because Tailwind v4's preflight resets `list-style: none` in `@layer base` and (in this Turbopack build) that wins over an unlayered rule. If that quirk gets fixed upstream, the `!important` can come out.
• The frontmatter Markdown renderer preserves the pre-refresh signature — `renderMarkdown()` still returns just the HTML string. New callers can use `renderMarkdownWithFrontmatter()` for the `{ html, frontmatter }` shape.

🤖 Generated with Claude Code