commit 381955352615d3a1aeb88fd44688ecb8574a9c25
parent 19e70e1131b587d222e8467ca34780d06683aa3a
Author: I Mean I'm Just Saying <imeanimjustsaying@kiwifarms.st>
Date: Sun, 28 Jun 2026 23:05:47 -0400
feat(homepage): merge masthead into a shrink-on-scroll header
The big hero wordmark and the small sticky header logo are now one element.
On the home page the wordmark starts large (a step down from the old hero)
and collapses to the compact header bar the moment you scroll; every other
route always shows the compact state.
New client SiteHeader owns the wordmark + brass mark, keying its size/height
and the border+blur background off usePathname() (home) and a scroll flag
(scrollY > 4). Header becomes a thin server wrapper; the hero section is
removed from page.tsx (the page starts straight into the landing).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Diffstat:
4 files changed, 77 insertions(+), 27 deletions(-)
diff --git a/homepage/CHANGELOG.md b/homepage/CHANGELOG.md
@@ -36,6 +36,10 @@
chrome: the masthead is just the wordmark (no eyebrow/subtitle) and the chart
and site-grid zones carry no section labels — separation is by space alone.
Chart entry animation is disabled so bars/areas paint immediately.
+- **Wordmark masthead = the header.** The big "Archilyzer" wordmark and the small
+ sticky header logo are one element (`app/components/SiteHeader.tsx`): large as a
+ masthead at the top of the home page, it shrinks to the compact sticky bar the
+ moment you scroll. Other routes always show the compact bar.
- **Hub Markdown pages dropped.** The `[slug]` doc routes, the `index`-page home
body, the `PageBody` renderer, and the doc nav are removed — the hub is now a
single page (re-addable later if needed). See `app/page.tsx`, the new hub
diff --git a/homepage/app/components/Header.tsx b/homepage/app/components/Header.tsx
@@ -1,20 +1,10 @@
-import Link from "next/link";
import { currentHomepage } from "../lib/homepage";
+import { SiteHeader } from "./SiteHeader";
// Top nav for the hub. The hub is a single cross-site landing, so the header is
-// just the branding mark linking home plus a quiet mono descriptor.
+// just the branding mark + wordmark — large as a masthead on the home page,
+// collapsing to a compact sticky bar on scroll (see SiteHeader).
export default function Header() {
const config = currentHomepage();
- return (
- <header className="sticky top-0 z-20 border-b border-[var(--border)] bg-[rgba(12,10,8,0.72)] backdrop-blur-md">
- <div className="max-w-6xl mx-auto px-5 sm:px-6 h-14 flex items-center gap-3">
- <Link href="/" className="group flex items-center gap-2.5">
- <span className="h-2.5 w-2.5 rotate-45 rounded-[2px] bg-[var(--accent)] shadow-[0_0_14px_var(--accent)] transition group-hover:bg-[var(--accent-strong)]" />
- <span className="font-display text-[1.35rem] leading-none font-semibold tracking-tight text-[var(--foreground)]">
- {config.headerTitle}
- </span>
- </Link>
- </div>
- </header>
- );
+ return <SiteHeader title={config.headerTitle} />;
}
diff --git a/homepage/app/components/SiteHeader.tsx b/homepage/app/components/SiteHeader.tsx
@@ -0,0 +1,66 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useEffect, useState } from "react";
+
+// The hub's single wordmark. On the home page it starts as a large masthead and
+// collapses to the compact header bar the moment you scroll; every other route
+// always shows the compact state. (Merges what used to be a separate hero
+// heading + a small sticky logo into one element.)
+export function SiteHeader({ title }: { title: string }) {
+ const isHome = usePathname() === "/";
+ const [scrolled, setScrolled] = useState(false);
+
+ useEffect(() => {
+ const onScroll = () => setScrolled(window.scrollY > 4);
+ onScroll();
+ window.addEventListener("scroll", onScroll, { passive: true });
+ return () => window.removeEventListener("scroll", onScroll);
+ }, []);
+
+ const large = isHome && !scrolled;
+
+ return (
+ <header
+ className={
+ "sticky top-0 z-20 transition-[background-color,border-color] duration-300 ease-out " +
+ (large
+ ? "border-b border-transparent"
+ : "border-b border-[var(--border)] bg-[rgba(12,10,8,0.72)] backdrop-blur-md")
+ }
+ >
+ <div
+ className={
+ "max-w-6xl mx-auto px-5 sm:px-6 flex items-center transition-[height] duration-300 ease-out " +
+ (large ? "h-28 sm:h-40" : "h-14")
+ }
+ >
+ <Link href="/" className="group flex items-end gap-2.5 sm:gap-3.5">
+ <span
+ className={
+ "shrink-0 rotate-45 rounded-[3px] bg-[var(--accent)] transition-all duration-300 ease-out group-hover:bg-[var(--accent-strong)] " +
+ (large
+ ? "mb-1.5 h-3.5 w-3.5 sm:h-4 sm:w-4 shadow-[0_0_18px_var(--accent)]"
+ : "mb-1 h-2.5 w-2.5 shadow-[0_0_14px_var(--accent)]")
+ }
+ />
+ {isHome ? (
+ <h1
+ className={
+ "font-display font-semibold leading-[0.9] tracking-[-0.02em] text-[var(--foreground)] transition-[font-size] duration-300 ease-out " +
+ (large ? "text-4xl sm:text-6xl" : "text-[1.35rem]")
+ }
+ >
+ {title}
+ </h1>
+ ) : (
+ <span className="font-display text-[1.35rem] font-semibold leading-none tracking-tight text-[var(--foreground)]">
+ {title}
+ </span>
+ )}
+ </Link>
+ </div>
+ </header>
+ );
+}
diff --git a/homepage/app/page.tsx b/homepage/app/page.tsx
@@ -4,7 +4,6 @@ import {
HOMEPAGE_SUMMARY_VERSION,
type HomepageSummary,
} from "yt-dlp-transcript-common/lib/homepageSummary";
-import { currentHomepage } from "./lib/homepage";
import { HomeLanding } from "./components/HomeLanding";
// The hub home route IS the cross-site landing: the wordmark, headline KPIs, one
@@ -47,17 +46,8 @@ function loadSummary(): HomepageSummary {
}
export default function Home() {
- const config = currentHomepage();
const summary = loadSummary();
- return (
- <div className="flex flex-col gap-12 sm:gap-16">
- <section className="reveal flex items-center gap-3.5 pt-2">
- <span className="h-3.5 w-3.5 rotate-45 rounded-[3px] bg-[var(--accent)] shadow-[0_0_18px_var(--accent)]" />
- <h1 className="font-display text-5xl sm:text-7xl font-semibold leading-[0.95] tracking-[-0.02em] text-[var(--foreground)]">
- {config.siteTitle}
- </h1>
- </section>
- <HomeLanding summary={summary} />
- </div>
- );
+ // The wordmark masthead lives in the header now (SiteHeader), large at the top
+ // and shrinking on scroll — so the page starts straight into the landing.
+ return <HomeLanding summary={summary} />;
}
