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"; ---
-