From d4970ef40859977afb078d0a40a08c0e3ed27bcd Mon Sep 17 00:00:00 2001 From: Josh Date: Sun, 17 May 2026 10:26:59 -0700 Subject: [PATCH] feat(brand): wire anhh-* tokens, fonts, ~/ vite alias, WHP sidebar --- astro.config.mjs | 76 +++++++++++++++++++++++++--------- package.json | 1 + src/assets/logo.svg | 4 ++ src/styles/anhh-tokens.css | 85 ++++++++++++++++++++++++++++++++++++++ 4 files changed, 147 insertions(+), 19 deletions(-) create mode 100644 src/assets/logo.svg create mode 100644 src/styles/anhh-tokens.css diff --git a/astro.config.mjs b/astro.config.mjs index 69b83b3..e2a5704 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -1,26 +1,64 @@ // @ts-check import { defineConfig } from 'astro/config'; import starlight from '@astrojs/starlight'; +import sitemap from '@astrojs/sitemap'; +import { fileURLToPath } from 'node:url'; // https://astro.build/config export default defineConfig({ - integrations: [ - starlight({ - title: 'My Docs', - social: [{ icon: 'github', label: 'GitHub', href: 'https://github.com/withastro/starlight' }], - sidebar: [ - { - label: 'Guides', - items: [ - // Each item here is one entry in the navigation menu. - { label: 'Example Guide', slug: 'guides/example' }, - ], - }, - { - label: 'Reference', - items: [{ autogenerate: { directory: 'reference' } }], - }, - ], - }), - ], + site: 'https://kb.anhonesthost.com', + vite: { + resolve: { + alias: { + // `~` resolves to /src so partial imports are depth-independent: + // import SignIn from '~/content/partials/signing-in.mdx'; + '~': fileURLToPath(new URL('./src', import.meta.url)), + }, + }, + }, + integrations: [ + starlight({ + title: 'An Honest Host KB', + description: 'Customer documentation for WHP and other An Honest Host services.', + logo: { + src: './src/assets/logo.svg', + replacesTitle: false, + }, + customCss: [ + '@fontsource-variable/inter', + '@fontsource-variable/jetbrains-mono', + './src/styles/anhh-tokens.css', + ], + editLink: { + baseUrl: 'https://repo.anhonesthost.net/cloud-hosting-platform/kb-anhonesthost/_edit/main/', + }, + sidebar: [ + { + label: 'WHP', + items: [ + { + label: 'Getting started', + items: [{ autogenerate: { directory: 'whp/getting-started' } }], + }, + { + label: 'How-to guides', + items: [{ autogenerate: { directory: 'whp/how-to' } }], + }, + { + label: 'Reference', + items: [{ autogenerate: { directory: 'whp/reference' } }], + }, + { + label: 'Add-ons', + items: [{ autogenerate: { directory: 'whp/add-ons' } }], + }, + ], + }, + // Future products only appear once they have content. + ], + pagefind: true, + lastUpdated: true, + }), + sitemap(), + ], }); diff --git a/package.json b/package.json index fcf0488..77ff772 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "start": "astro dev", "build": "astro build", "preview": "astro preview", + "check": "astro check", "astro": "astro" }, "dependencies": { diff --git a/src/assets/logo.svg b/src/assets/logo.svg new file mode 100644 index 0000000..40942e5 --- /dev/null +++ b/src/assets/logo.svg @@ -0,0 +1,4 @@ + + AHH + KB + diff --git a/src/styles/anhh-tokens.css b/src/styles/anhh-tokens.css new file mode 100644 index 0000000..ff91dee --- /dev/null +++ b/src/styles/anhh-tokens.css @@ -0,0 +1,85 @@ +/* + * An Honest Host brand tokens, mapped onto Starlight's CSS custom properties. + * Source palette: design spec § 8. + */ + +:root { + /* Brand palette — constants across modes */ + --anhh-primary: #1a56db; + --anhh-primary-hover: #2563eb; + --anhh-accent: #00d4aa; + + /* Typography */ + --sl-font: 'Inter Variable', 'Inter', system-ui, -apple-system, sans-serif; + --sl-font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, monospace; + + /* Map brand → Starlight accent (both modes) */ + --sl-color-accent: var(--anhh-primary); + --sl-color-accent-high: var(--anhh-primary-hover); + --sl-color-accent-low: rgba(26, 86, 219, 0.15); +} + +/* Dark mode — Starlight default */ +:root, +:root[data-theme='dark'] { + --anhh-bg: #0a1628; + --anhh-bg-elevated: #111827; + --anhh-bg-surface: #1e293b; + --anhh-text-primary: #f0f4ff; + --anhh-text-secondary: #94a3b8; + --anhh-text-muted: #64748b; + --anhh-border-color: #334155; + --anhh-accent-dim: rgba(0, 212, 170, 0.1); + --anhh-accent-border: rgba(0, 212, 170, 0.2); + + --sl-color-bg: var(--anhh-bg); + --sl-color-bg-nav: var(--anhh-bg-elevated); + --sl-color-bg-sidebar: var(--anhh-bg-elevated); + --sl-color-bg-inline-code: var(--anhh-bg-surface); + --sl-color-text: var(--anhh-text-primary); + --sl-color-text-accent: var(--anhh-accent); + --sl-color-gray-1: var(--anhh-text-primary); + --sl-color-gray-2: var(--anhh-text-secondary); + --sl-color-gray-3: var(--anhh-text-muted); + --sl-color-gray-4: var(--anhh-border-color); + --sl-color-hairline: var(--anhh-border-color); +} + +/* Light mode */ +:root[data-theme='light'] { + --anhh-bg: #f0f4ff; + --anhh-bg-elevated: #ffffff; + --anhh-bg-surface: #e2e8f0; + --anhh-text-primary: #0f172a; + --anhh-text-secondary: #475569; + --anhh-text-muted: #94a3b8; + --anhh-border-color: #cbd5e1; + --anhh-accent-dim: rgba(0, 212, 170, 0.08); + --anhh-accent-border: rgba(0, 212, 170, 0.3); + + --sl-color-bg: var(--anhh-bg); + --sl-color-bg-nav: var(--anhh-bg-elevated); + --sl-color-bg-sidebar: var(--anhh-bg-elevated); + --sl-color-bg-inline-code: var(--anhh-bg-surface); + --sl-color-text: var(--anhh-text-primary); + --sl-color-text-accent: var(--anhh-accent); + --sl-color-gray-1: var(--anhh-text-primary); + --sl-color-gray-2: var(--anhh-text-secondary); + --sl-color-gray-3: var(--anhh-text-muted); + --sl-color-gray-4: var(--anhh-border-color); + --sl-color-hairline: var(--anhh-border-color); +} + +/* Accent-teal callout — used by paid-addon-callout.mdx, support-link.mdx, tip