From 1015607f708fc50c5aea71f78d1bb4f72deaa8a7 Mon Sep 17 00:00:00 2001
From: Roberto Cano <3525807+robercano@users.noreply.github.com>
Date: Thu, 23 Jul 2026 22:49:01 +0200
Subject: [PATCH] feat(website): bring the product row of the shared header to
 brand book spec
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 apps/website/src/components/Topbar.tsx | 25 +++++++++++-------------
 apps/website/src/content.ts            |  7 +++++++
 apps/website/src/styles.css            |  9 ++++++---
 apps/website/test/Topbar.test.tsx      | 27 ++++++++++++++++++++++++++
 apps/website/test/content.test.ts      |  7 +++++++
 5 files changed, 58 insertions(+), 17 deletions(-)
 create mode 100644 apps/website/test/Topbar.test.tsx

diff --git a/apps/website/src/components/Topbar.tsx b/apps/website/src/components/Topbar.tsx
index bc65eae..1f02d9c 100644
--- a/apps/website/src/components/Topbar.tsx
+++ b/apps/website/src/components/Topbar.tsx
@@ -1,23 +1,20 @@
-import { NAV_LINKS } from "../content.js";
+import { NAV_LINKS, TOPBAR } from "../content.js";
 
+// Product row of the shared sticky header (brand book §08): glyph, then the bold product
+// name and a short context line, ahead of the site's own nav anchors. The reDeploy-specific
+// chevron mark previously rendered here was dropped — the family brand mark already anchors
+// the statusbar row above it, and duplicating a logo across both rows of the same sticky
+// header read as redundant. See the PR description for the full rationale.
 export default function Topbar() {
   return (
     <div className="topbar">
-      <svg className="mark" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-        <path
-          fill="#F5A524"
-          fillRule="evenodd"
-          d="M 107.1 55.23 L 97.58 55.23 L 97.58 51.84 A 17.59 17.59 0 0 0 80.12 34.12 L 39.81 34.12 A 17.7 17.7 0 0 0 22.12 51.84 L 22.12 55.23 L 12.79 55.23 L 12.79 48.6 A 27.21 27.21 0 0 1 38.1 24.68 L 81.75 24.68 A 27.21 27.21 0 0 1 106.99 47.55 L 106.99 55.23 Z M 81.75 95.18 L 38.1 95.18 A 27.21 27.21 0 0 1 12.82 72.3 L 12.82 64.78 L 22.16 64.78 L 22.16 68.02 A 17.58 17.58 0 0 0 39.69 85.65 L 80.04 85.65 A 17.65 17.65 0 0 0 97.72 68.02 L 97.72 64.78 L 107.06 64.78 L 107.06 71.25 A 27.21 27.21 0 0 1 81.75 95.18 Z"
-        />
-        <g stroke="#D6FF7A" strokeWidth="7.21" fill="none" strokeLinecap="round" strokeLinejoin="round">
-          <path d="M47 57 L60 45 L73 57" />
-          <path d="M47 75 L60 63 L73 75" />
-        </g>
-      </svg>
+      <span className="chev hl" aria-hidden="true">
+        {TOPBAR.glyph}
+      </span>
       <b>
         <span className="re">re</span>Deploy
-      </b>{" "}
-      <span className="chev hl">^^</span>
+      </b>
+      <span className="tagline"> — {TOPBAR.tagline}</span>
       <nav>
         {NAV_LINKS.map((link) => (
           <a key={link.label} href={link.href}>
diff --git a/apps/website/src/content.ts b/apps/website/src/content.ts
index aaead59..a77b07e 100644
--- a/apps/website/src/content.ts
+++ b/apps/website/src/content.ts
@@ -29,6 +29,13 @@ export const NAV_LINKS: NavLink[] = [
   { label: "github", href: REPO_URL },
 ];
 
+// Product row (brand book §08): glyph + bold product name + short context, ahead of the
+// site's own nav anchors. Kept short — this is a strip, not the hero subhead.
+export const TOPBAR = {
+  glyph: "^^",
+  tagline: "declarative, idempotent, verifiable deploys",
+};
+
 export const HERO = {
   headline: [{ text: "One spec. One graph. " }, { text: "One truth.", as: "hl" }] as RichSegment[],
   subhead: [
diff --git a/apps/website/src/styles.css b/apps/website/src/styles.css
index 16a31be..37ce7c7 100644
--- a/apps/website/src/styles.css
+++ b/apps/website/src/styles.css
@@ -133,9 +133,8 @@ body {
   font-size: 12px;
 }
 
-.topbar .mark {
-  width: 30px;
-  height: 30px;
+.topbar .chev {
+  font-weight: 700;
 }
 
 .topbar b {
@@ -148,6 +147,10 @@ body {
   font-weight: 500;
 }
 
+.topbar .tagline {
+  color: var(--dim);
+}
+
 .topbar nav {
   margin-left: auto;
   display: flex;
diff --git a/apps/website/test/Topbar.test.tsx b/apps/website/test/Topbar.test.tsx
new file mode 100644
index 0000000..877671c
--- /dev/null
+++ b/apps/website/test/Topbar.test.tsx
@@ -0,0 +1,27 @@
+import { render, screen } from "@testing-library/react";
+import Topbar from "../src/components/Topbar.js";
+import { NAV_LINKS, TOPBAR } from "../src/content.js";
+
+describe("Topbar", () => {
+  it("renders the shared header's product row: glyph, bold name, then a short context", () => {
+    const { container } = render(<Topbar />);
+
+    expect(screen.getByText(TOPBAR.glyph)).toBeInTheDocument();
+    expect(container.querySelector("b")?.textContent).toBe("reDeploy");
+    expect(container.textContent).toContain(TOPBAR.tagline);
+
+    // Brand book §08 order: glyph, then name, then context — ahead of the nav.
+    const text = container.textContent ?? "";
+    expect(text.indexOf(TOPBAR.glyph)).toBeLessThan(text.indexOf("reDeploy"));
+    expect(text.indexOf("reDeploy")).toBeLessThan(text.indexOf(TOPBAR.tagline));
+  });
+
+  it("still exposes the site's own nav anchors alongside the product row", () => {
+    render(<Topbar />);
+
+    for (const link of NAV_LINKS) {
+      const anchor = screen.getByRole("link", { name: link.label });
+      expect(anchor).toHaveAttribute("href", link.href);
+    }
+  });
+});
diff --git a/apps/website/test/content.test.ts b/apps/website/test/content.test.ts
index 9c32e74..48e8ea8 100644
--- a/apps/website/test/content.test.ts
+++ b/apps/website/test/content.test.ts
@@ -13,6 +13,7 @@ import {
   SPLIT_CAPTION,
   STUDIO_SECTION,
   STUDIO_URL,
+  TOPBAR,
   type RichSegment,
 } from "../src/content.js";
 
@@ -85,6 +86,12 @@ describe("content", () => {
     }
   });
 
+  it("has a short, non-empty topbar glyph and tagline for the shared header's product row", () => {
+    expect(TOPBAR.glyph).toBe("^^");
+    expect(TOPBAR.tagline.length).toBeGreaterThan(0);
+    expect(TOPBAR.tagline.length).toBeLessThan(80);
+  });
+
   it("has a footer prompt line and a three-entry family strip with exactly one current item", () => {
     expect(FOOTER.promptUser).toBe("roberto@thesolidchain:~$");
     expect(FOOTER.family).toHaveLength(3);