Site dark mode, cache-block motif & changelog format / 官网暗色模式、缓存方块母题与更新日志改版#6627
Merged
SivanCola merged 6 commits intoJul 17, 2026
Merged
Conversation
Motivation: - The marketing site shipped light-only, which mismatches the terminal-tool audience, and the hero stacked many decorative effects at once (cursor glow, magnetic buttons, headline typewriter, dot grid, 3D tilt, spotlight borders, marquee) with no single signature interaction. - The cache-block visual from "How it works" is a product-native motif that was used only once. Changes: - Add a three-state theme switch (system/light/dark) shared by the marketing pages, community pages, and changelog: a pre-paint inline script reads localStorage "reasonix-theme", the shared theme.js module wires the toggle, keeps meta[theme-color] in sync, and follows OS theme changes while the preference is "system". - Flip every surface to tokens: hardcoded #fff surfaces become var(--card), white color-mix tints mix into var(--bg)/var(--card), nav blur backgrounds derive from var(--bg); global.css and community.css gain full :root[data-theme="dark"] palettes. - Remove cursor glow, magnetic buttons, and the h1 typewriter (JS, CSS, and the Base.astro div); the dot-grid and terminal-tilt rAF loops now run only while visible via IntersectionObserver. - Reuse the cache-block motif: section dividers become a row of cache blocks with a solid center, the 404 page gets a "gone cold" block row, kickers/docs-kickers go monospace with a "$ " prefix, and the hero headline highlights its keyword as a mono cache block. - Hide the header sign-in button below 640px so the theme switch fits the mobile nav. Verification: - cd site && npm test: 14/14 pass. - cd site && npm run build: 19 pages built; dist inspected for [data-theme=dark] rules, theme-switch markup, and removed-FX leftovers (none found).
Motivation: - The changelog layout was designed for monthly flagship releases, but Reasonix ships near-daily patches: every patch rendered a full-ceremony hero, empty Upgrade/Risk sections stayed on the page and in the TOC, the version rail listed every release flat, and /changelog/ duplicated the latest version page under two canonical URLs. Changes: - Render Guides/per-kind changes/Upgrade/Risk/Thanks sections only when they have content, and drop them from the TOC accordingly; section numbers are now sequential 01..N over the sections that actually render (no more mixed 01/U/R/heart badges). - Releases whose title is just the version string (patch releases) get a compact hero: no duplicated version line, no action buttons, summary as a plain lede. Thematic titles keep the full hero. - Group the version rail by minor (e.g. 1.17.x), showing the latest three patches per group; older patches sit behind a native <details> expander that auto-opens when it holds the current version. - /changelog/ now canonicalizes (and og:url) to the latest version's /changelog/vX.Y.Z/ URL via an optional canonical prop on Base.astro. - Align the changelog palette with the shared tokens: release blue/ink/backdrop alias to the global accent/ink/bg tokens and inherit their dark flip, keeping only --release-paper (the ledger identity) and the semantic orange/green as page-local tokens. Verification: - cd site && npm test: 14/14 pass. - cd site && npm run build: /changelog/ canonical points to /changelog/v1.17.14/; v1.17.14 renders compact with no empty sections and gapless 01-06 numbering; v1.17.13 renders the full hero with guides/upgrade/risks/thanks present.
github-actions
Bot
added
the
v2
Motivation: - The hero already presents the desktop app as the primary install path, but the download section at the bottom defaulted to the npm tab, so the two install narratives disagreed. Changes: - Reorder the download tabs to Desktop / npm / Homebrew and make the desktop pane the default active one; pane markup is otherwise unchanged, and ?dl= deep links plus data-goto jumps still activate panes by name. Verification: - cd site && npm test: 14/14 pass. - cd site && npm run build: 19 pages built; dist shows the desktop tab first and active by default.
Problem: - A thematic release whose title starts with the version string (e.g. "Reasonix 1.18.0 — Better agents") would be classified as a patch release and lose its full hero, including the download and GitHub actions. Root cause: - The classification regex /^reasonix\s+v?\d+\.\d+\.\d+/i had no end anchor, so any title merely STARTING with the version matched. Fix: - Extract isThematicTitle() into site/src/scripts/release-title.js: an exact, normalized comparison against "Reasonix <version>" and "Reasonix v<version>" (trimmed, case-insensitive, collapsed whitespace). Titles that only begin with the version stay thematic; edge cases (empty title/version) default to the full hero. - Cover it with release-title.test.mjs, including the "Reasonix 1.18.0 — Better agents" regression case. Verification: - cd site && npm test: 19/19 pass. - cd site && npm run build: 19 pages; v1.17.14 stays compact, v1.17.13 keeps the full hero.
Problem: - With the new theme switcher added, the header overflowed horizontally at 390px: the marketing nav measured ~448px and the install button was clipped by overflow-x: hidden; the community nav measured ~428px with the theme switch partially clipped and the account entry fully offscreen. Root cause: - The previous mitigation (hiding .nav-sign-in below 640px) only freed ~80px, not enough once brand text, language switch, theme switch, and install button all compete for 390px. Fix: - global.css ≤640px: logo-only brand (.nav .brand span hidden) and narrower theme-switch buttons (9px padding), bringing the nav to ~360px. - community.css: new ≤640px block hiding .brand .ctag, tightening .nav-inner padding/gap, and narrowing theme-switch buttons, bringing the nav to ~315px. - Add mobile-nav-contract.test.mjs asserting these contraction rules exist in the ≤640px blocks of both stylesheets (source-level contract; the repo has no browser layout test harness). Verification: - cd site && npm test: 19/19 pass. - cd site && npm run build: 19 pages built.
Problem: - The community header fit at 390px only while the async account slot was empty; the signed-out link widened it to 406px and was clipped. - The marketing header still overflowed at the 320px reflow boundary. Root cause: - The responsive contract did not budget for the post-load account control or the narrower mobile breakpoint. Fix: - Give the community brand a stable accessible name, collapse it to the mark below 440px, and tighten language, theme, account, and container spacing. - Add a 360px marketing breakpoint that preserves every header control at 320px. - Extend the source contract tests to cover the async account slot and narrow layout rules. Verification: - cd site && npm test: 20/20 passed. - cd site && npm run build: 19 pages built. - Browser checks at 390px and 320px showed no horizontal overflow after the account link loaded; desktop brand labels remained visible. - git diff --check passed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Two stacked commits modernizing the reasonix.io frontend:
Changes
Theming —
site: add dark mode, trim decorative FX, unify cache-block motiflocalStorage["reasonix-theme"], the sharedtheme.jsmodule wires the toggle, keepsmeta[theme-color]in sync, and follows OS changes while the preference is "system".#fffsurfaces →var(--card), whitecolor-mixtints →var(--bg)/var(--card), nav blur backgrounds derive fromvar(--bg); full:root[data-theme="dark"]palettes inglobal.cssandcommunity.css.$kickers, and the hero keyword rendered as a mono cache block.Changelog —
site: scale changelog format to the release cadence1.17.x) with a native<details>overflow expander that auto-opens when it holds the current version./changelog/canonicalizes (and og:url) to/changelog/vX.Y.Z/via a new optionalcanonicalprop onBase.astro.--release-paper(the ledger identity) and semantic orange/green as page-local tokens.Verification
cd site && npm test— 14/14 pass.cd site && npm run build— 19 pages built cleanly on top of the latestmain-v2./changelog/canonical →/changelog/v1.17.14/; v1.17.14 renders compact with gapless 01–06 numbering and no empty sections; v1.17.13 renders the full hero with guides/upgrade/risks/thanks present;[data-theme=dark]rules andtheme-switchmarkup present in built CSS/HTML; no removed-FX leftovers.Compatibility
state.json, config TOML, session files, Wails JSON contracts are all untouched). The only new storage key islocalStorage["reasonix-theme"]; when absent the site resolves to "system", matching previous behavior.site/src/data/community.jsonbuild output is intentionally excluded — it is regenerated byfetch-community.mjson every build.