// @ts-check import { defineConfig } from 'astro/config'; import starlight from '@astrojs/starlight'; import tailwindcss from '@tailwindcss/vite'; // Custom highlight grammar for the playground's simple-mode command language // (advanced-mode examples use the built-in `sql` grammar). Fence with ```rdbms. import rdbmsLang, { rdbmsSyntax } from './src/grammars/rdbms.mjs'; // https://astro.build/config export default defineConfig({ // Production origin (apex domain). Enables the sitemap, canonical URLs, and // Open Graph `og:url`/`og:image` resolution. A `www` host, if used, should // 301-redirect here so a single canonical origin is advertised. Local dev is // unaffected — this only changes *generated absolute* URLs, not where the // dev/preview server binds. site: 'https://relplay.org', // Bind the dev/preview server to IPv4 loopback. Astro/Vite's default // `localhost` bind resolves to IPv6 `::1` here, which breaks SSH // `-L 4321:127.0.0.1:4321` tunnels (they target IPv4). Pinning 127.0.0.1 // keeps loopback-only access and makes tunnelling unambiguous. server: { host: '127.0.0.1' }, integrations: [ starlight({ title: 'RDBMS Playground', tagline: 'Learn relational databases by doing.', // Header logo: a database-table glyph with a teal primary-key cell. // Separate light/dark files so the outline adapts to the theme; // `replacesTitle: false` keeps the "RDBMS Playground" wordmark beside it. logo: { light: './src/assets/relplay-logo-light.svg', dark: './src/assets/relplay-logo-dark.svg', replacesTitle: false, }, // Footer override: Starlight's default footer + a small company/source line. components: { Footer: './src/components/Footer.astro', }, // TODO(Phase B): a header social link to the repo is deliberately omitted // — the source/issues link lives understated in the footer instead. customCss: ['./src/styles/global.css'], // Register the simple-mode command grammar with Expressive Code (Shiki). expressiveCode: { shiki: { langs: [rdbmsLang, rdbmsSyntax] } }, // Pragmatic structure (ADR-website-001 §7 / website/STYLE.md): Getting // started, Guides, Reference, Concepts. Autogenerated per directory; // in-section order is controlled by each page's `sidebar.order` // frontmatter. sidebar: [ { label: 'Getting started', items: [{ autogenerate: { directory: 'getting-started' } }] }, { label: 'Using the playground', items: [{ autogenerate: { directory: 'using-the-playground' } }] }, { label: 'Guides', items: [{ autogenerate: { directory: 'guides' } }] }, { label: 'Reference', items: [{ autogenerate: { directory: 'reference' } }] }, { label: 'Concepts', items: [{ autogenerate: { directory: 'concepts' } }] }, ], }), ], vite: { plugins: [tailwindcss()], }, });