From 1906266e7dae46f69e74fb0d335f532dbdd17095 Mon Sep 17 00:00:00 2001 From: Amine Ilidrissi <38422328+aminevg@users.noreply.github.com> Date: Fri, 5 Jun 2026 14:20:08 +0900 Subject: [PATCH] feat(docs): revamp site with Starlight 0.39 re-skin and landing page MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Port the approved prototype redesign into the docs site as a CSS-first re-skin on stock Starlight — the brand is expressed by remapping Starlight's own design tokens plus Expressive Code config, with no component overrides beyond the net-new landing pieces. - Upgrade @astrojs/starlight 0.38 -> 0.39 (migrate autogenerated sidebar groups to the new items[] shape) - Add Fraunces (Fontsource variable) as the display typeface, remap the accent to indigo in both themes, and theme asides, file tree, tabs, TOC, sidebar, and code frames through tokens - Add a landing page: hero emblem with glow-ring, two code cards, a feature CardGrid, and an install block, plus new CodeCard, CodeCards, HonoLogo, and AstroLogo components The landing code samples use the current @gomighty/hono API (mighty() middleware + c.render({ component, props })). --- packages/docs/astro.config.mjs | 34 +- packages/docs/package.json | 3 +- packages/docs/src/components/AstroLogo.astro | 59 +++ packages/docs/src/components/CodeCard.astro | 123 ++++++ packages/docs/src/components/CodeCards.astro | 23 + packages/docs/src/components/HonoLogo.astro | 20 + .../docs/src/components/starlight/Hero.astro | 92 +++- packages/docs/src/content/docs/index.mdx | 132 +++++- packages/docs/src/styles/custom.css | 333 +++++++++++++- pnpm-lock.yaml | 406 +++++++++++------- 10 files changed, 1026 insertions(+), 199 deletions(-) create mode 100644 packages/docs/src/components/AstroLogo.astro create mode 100644 packages/docs/src/components/CodeCard.astro create mode 100644 packages/docs/src/components/CodeCards.astro create mode 100644 packages/docs/src/components/HonoLogo.astro diff --git a/packages/docs/astro.config.mjs b/packages/docs/astro.config.mjs index aedd866..7f8bf60 100644 --- a/packages/docs/astro.config.mjs +++ b/packages/docs/astro.config.mjs @@ -20,7 +20,33 @@ export default defineConfig({ SiteTitle: "@/components/starlight/SiteTitle.astro", Hero: "@/components/starlight/Hero.astro", }, - customCss: ["./src/styles/custom.css"], + expressiveCode: { + styleOverrides: { + // Frame cosmetics only — Night Owl (Starlight's default theme) carries + // the syntax palette untouched. We just round the corners, soften the + // shadow, and tint the chrome to the brand. + borderRadius: "0.6rem", + borderColor: "var(--sl-color-gray-5)", + frames: { + // Let `frameBoxShadowCssValue` own the shadow entirely. + shadowColor: "transparent", + frameBoxShadowCssValue: "0 24px 60px -34px rgba(0, 0, 0, 0.5)", + // Active code-tab indicator picks up the magenta brand pop. + editorActiveTabIndicatorTopColor: "var(--mty-magenta-hot)", + editorActiveTabIndicatorBottomColor: "transparent", + editorTabBarBorderBottomColor: "var(--sl-color-gray-5)", + // Copy button tinted to the neutral surface tokens. + inlineButtonBorder: "var(--sl-color-gray-5)", + }, + }, + }, + customCss: [ + // Display typeface — Fraunces (variable: weight + optical-size axes, + // upright + italic). Body/mono stay on Starlight's system stacks. + "@fontsource-variable/fraunces/standard.css", + "@fontsource-variable/fraunces/standard-italic.css", + "./src/styles/custom.css", + ], social: [ { icon: "github", @@ -42,15 +68,15 @@ export default defineConfig({ sidebar: [ { label: "Hello, World!", - autogenerate: { directory: "guides/hello-world" }, + items: [{ autogenerate: { directory: "guides/hello-world" } }], }, { label: "Core Concepts", - autogenerate: { directory: "guides/core-concepts" }, + items: [{ autogenerate: { directory: "guides/core-concepts" } }], }, { label: "Backend Adapters", - autogenerate: { directory: "guides/backend-adapters" }, + items: [{ autogenerate: { directory: "guides/backend-adapters" } }], }, { slug: "guides/roadmap", diff --git a/packages/docs/package.json b/packages/docs/package.json index 81531b4..0d18ce7 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -15,7 +15,8 @@ "node": "24.x" }, "dependencies": { - "@astrojs/starlight": "^0.38.2", + "@astrojs/starlight": "^0.39.3", + "@fontsource-variable/fraunces": "^5.2.9", "astro": "catalog:", "motion": "^12.23.12", "sharp": "^0.34.2", diff --git a/packages/docs/src/components/AstroLogo.astro b/packages/docs/src/components/AstroLogo.astro new file mode 100644 index 0000000..6df2a18 --- /dev/null +++ b/packages/docs/src/components/AstroLogo.astro @@ -0,0 +1,59 @@ +--- +/** + * Astro brand mark — used as a `slot="logo"` inside . Astro ships two + * official logomarks: a gradient-on-dark version (white star + comet tail) and a + * solid #17191E version for light backgrounds (the white knockout would vanish + * on light). This component owns that swap itself, keyed off the resolved theme. + */ +--- + + + + diff --git a/packages/docs/src/components/CodeCard.astro b/packages/docs/src/components/CodeCard.astro new file mode 100644 index 0000000..eea842d --- /dev/null +++ b/packages/docs/src/components/CodeCard.astro @@ -0,0 +1,123 @@ +--- +/** + * A landing-page "hero" code card: bespoke window chrome (macOS dots + a brand + * logo + a filename) wrapping a *real* Expressive Code block (passed as the + * default slot — author the fence with `frame="none"` so EC renders just the + * highlighted code and this card supplies the frame). + * + * - `file` — the filename shown in the title bar. + * - `logo` — a named slot for the brand mark (e.g. ), + * so each card can own its own logo + theme-variant logic. + */ +interface Props { + file: string; +} + +const { file } = Astro.props; +--- + +
+
+ + + {file} +
+
+
+ + diff --git a/packages/docs/src/components/CodeCards.astro b/packages/docs/src/components/CodeCards.astro new file mode 100644 index 0000000..2e8a5b1 --- /dev/null +++ b/packages/docs/src/components/CodeCards.astro @@ -0,0 +1,23 @@ +--- +/** + * Two-up grid wrapper for the landing-page s. Collapses to a single + * column below Starlight's primary layout breakpoint (50rem). + */ +--- + +
+ + diff --git a/packages/docs/src/components/HonoLogo.astro b/packages/docs/src/components/HonoLogo.astro new file mode 100644 index 0000000..c72771b --- /dev/null +++ b/packages/docs/src/components/HonoLogo.astro @@ -0,0 +1,20 @@ +--- +/** + * Hono brand mark — the official flame logomark (gradient on both themes, so it + * needs no light/dark variant). Used as a `slot="logo"` inside . + */ +--- + + diff --git a/packages/docs/src/components/starlight/Hero.astro b/packages/docs/src/components/starlight/Hero.astro index c71709d..4c93ee3 100644 --- a/packages/docs/src/components/starlight/Hero.astro +++ b/packages/docs/src/components/starlight/Hero.astro @@ -9,7 +9,10 @@ const PAGE_TITLE_ID = "_top"; ---
-