feat(website): adopt the shared The Solid Chain sticky header - #167
Merged
Conversation
…ok spec PR #166 already added the shared thesolidchain.com statusbar (row 1) above the website's product topbar (row 2), sticky as one header. Row 2 itself didn't yet follow the brand book §08 pattern used by the other family sites: glyph, then the bold product name, then a short context blurb, ahead of any product nav. - Topbar: reorder to glyph-first (`^^`), add a short tagline sourced from the README/meta description ("declarative, idempotent, verifiable deploys"), drop the reDeploy-specific chevron mark SVG — the family brand mark already anchors the statusbar row directly above it, so a second logo in row 2 read as redundant. The site's own nav anchors (pipeline/studio/packages/github) are preserved, now following the brand-row strip. - content.ts: centralize the glyph/tagline as TOPBAR, matching how NAV_LINKS and FOOTER are already content-driven. - styles.css: drop the now-unused .mark rule, add .tagline (dim) and bold the .chev glyph to match the family's subbar glyph weight. - tests: new Topbar.test.tsx asserts the row order (glyph → name → tagline) and that nav anchors still resolve; content.test.ts covers the new TOPBAR export. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This was referenced Jul 23, 2026
robercano
added a commit
that referenced
this pull request
Jul 24, 2026
The shared-header rework (#166/#167) deliberately keeps only the family mark + ASCII product row in the sticky header, which left the full product logo (amber v1.9 iter32 frame + lime ^^ glyph) absent from the page. Adds it as a BrandMark component centered above the hero headline, verbatim from brand/products/tsc-redeploy.svg. Co-authored-by: Roberto Cano <3525807+robercano@users.noreply.github.com> Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
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
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
Normalizes the non-scrolling top chrome across The Solid Chain's family of sites —
thesolidchain.com, reCode, reDeFi, and reDeploy all share the same sticky header pattern
now: a corporate statusbar (row 1, verbatim across every site) and a product-specific
strip (row 2, per-product but same shape).
Row 1 was already added to this site in #166 (the shared statusbar: cream TSC mark linking
to thesolidchain.com, traffic dots,
roberto@thesolidchain: ~, the online LED, uptime/region,amber cursor) — reproduced verbatim from the reference implementation at
recode.thesolidchain.com (source:
site/index.htmlinrobercano/reCode). That part needed no further changes here.This PR finishes the job on row 2 (the product strip), bringing it in line with brand
book §08: glyph, bold product name, short context — the same shape as reCode's own subbar
(
</> reCode — session replay …).What changed (
apps/website)Topbar.tsx: reordered to glyph-first (^^in lime#D6FF7A), then**reDeploy**,then a short tagline (
— declarative, idempotent, verifiable deploys, sourced from therepo's own README/meta description) — ahead of the existing nav anchors
(pipeline/studio/packages/github), which are preserved unchanged.
start of the topbar. The family brand mark already anchors the statusbar directly above it
(row 1), so a second logo in row 2 of the same sticky header read as redundant rather than
reinforcing. The site's own nav is real, useful, and unique to this app, so it stays — it
just now sits after the brand-book-compliant strip instead of interleaved with it.
content.ts: centralized the glyph/tagline asTOPBAR, matching howNAV_LINKSandFOOTERare already content-driven (this repo keeps marketing copy out of JSX).styles.css: dropped the now-unused.markrule (the SVG it styled is gone), added.tagline(dim, same treatment as the rest of the muted topbar text), and bolded.chevto match the family's subbar glyph weight (700).
Topbar.test.tsxasserts the row order (glyph → name → tagline) and that thenav anchors still resolve to the right hrefs;
content.test.tscovers the newTOPBARexport.Row 1's statusbar (from #166) is untouched — including its blinking amber cursor, which was
an intentional, already-reviewed refinement over the reference's static cursor (honors
prefers-reduced-motion), not something this PR revisits.Verification
pnpm install --prefer-offline— clean, from the committed lockfile.pnpm -F @redeploy/website typecheck— clean.pnpm -F @redeploy/website lint— clean (0 warnings,--max-warnings=0).pnpm -F @redeploy/website build(vite build) — succeeds.pnpm -F @redeploy/website test— 28/28 passing (5 test files).pnpm -F @redeploy/website coverage— 100% statements/functions/lines, 97.67% branches onthe touched module — above the repo's 80% threshold.
Reference
site/index.htmlinrobercano/reCode(the.hdr/.statusbar/.subbarblock).
🤖 Generated with Claude Code