Section 16 · Integration

Starlight.

Docs at docs.virtuprobe.studio run on Astro Starlight. Out of the box it's a competent Material-leaning docs site. We tune it to match the marketing surface so users don't feel a brand seam when they cross from landing to docs.

Config

astro.config.mjsimport starlight from "@astrojs/starlight";

export default defineConfig({
  integrations: [
    starlight({
      title: "VirtuProbe Studio",
      logo: { src: "./src/assets/logo.svg", replacesTitle: true },
      customCss: ["./src/styles/tokens.css", "./src/styles/starlight.css"],
      head: [
        { tag: "link", attrs: { rel: "preconnect", href: "https://fonts.googleapis.com" } },
        { tag: "link", attrs: { rel: "stylesheet",
          href: "https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap" }}
      ],
      social: { github: "https://github.com/virtuprobe" },
      sidebar: [
        { label: "Getting started", autogenerate: { directory: "start" }},
        { label: "Probes", autogenerate: { directory: "probes" }},
        { label: "Chains", autogenerate: { directory: "chains" }},
        { label: "MITM proxy", autogenerate: { directory: "mitm" }},
        { label: "Reference", autogenerate: { directory: "reference" }},
      ]
    })
  ]
});

Tokens shim

Starlight has its own CSS variables. Map ours onto theirs in one short file:

starlight.css:root,
[data-theme="dark"] {
  /* surface */
  --sl-color-bg:        var(--vp-color-bg);
  --sl-color-bg-nav:    var(--vp-color-bg-2);
  --sl-color-bg-sidebar: var(--vp-color-bg);
  --sl-color-bg-inline-code: var(--vp-color-bg-2);
  --sl-color-bg-accent: var(--vp-color-bg-2);
  /* lines */
  --sl-color-hairline:        var(--vp-color-line);
  --sl-color-hairline-light:  var(--vp-color-line);
  --sl-color-hairline-shade:  var(--vp-color-line-2);
  /* text */
  --sl-color-white:     var(--vp-color-fg);
  --sl-color-gray-1:    var(--vp-color-fg);
  --sl-color-gray-2:    var(--vp-color-fg-dim);
  --sl-color-gray-3:    var(--vp-color-fg-mute);
  --sl-color-gray-4:    var(--vp-color-fg-mute);
  --sl-color-gray-5:    var(--vp-color-fg-faint);
  --sl-color-gray-6:    var(--vp-color-line-2);
  /* accents — neon for links and active sidebar */
  --sl-color-accent:     var(--vp-color-neon);
  --sl-color-accent-low: color-mix(in oklch, var(--vp-color-neon) 14%, transparent);
  --sl-color-accent-high: var(--vp-color-neon-lime);
  /* type */
  --sl-font: var(--vp-font-body);
  --sl-font-mono: var(--vp-font-mono);
}

/* Display headings use Chakra Petch */
.sl-markdown-content :is(h1, h2, h3) { font-family: var(--vp-font-display); letter-spacing: -0.01em; }
.sl-markdown-content h1 { font-size: var(--vp-fs-h1); font-weight: 600; }
.sl-markdown-content h2 { font-size: var(--vp-fs-h2); font-weight: 600; margin-top: 2.6em; }

/* Code blocks: Starlight ships Expressive Code, theme it dark + add our header strip */
.expressive-code .frame { background: var(--vp-color-bg-2); border: 1px solid var(--vp-color-line); border-radius: var(--vp-radius-md); }
.expressive-code .frame .header { background: var(--vp-color-bg-3); color: var(--vp-color-fg-mute); font: 500 11.5px var(--vp-font-mono); }

/* Sidebar active item */
.sidebar-content a[aria-current="page"] {
  background: color-mix(in oklch, var(--vp-color-neon) 12%, transparent);
  color: var(--vp-color-neon);
  border-left: 2px solid var(--vp-color-neon);
}

/* Search box matches our input */
[data-pagefind-ui] .pagefind-ui__search-input {
  background: var(--vp-color-bg-2);
  border: 1px solid var(--vp-color-line-2);
  color: var(--vp-color-fg);
}

What we add to docs (not Starlight defaults)

protocol tagsa Markdown shortcode :tag[HTTP] · authored as MDX component
callout boxesre-styled to match our .callout · neon left bar
marketing navadd a top-bar link back to virtuprobe.studio · same wordmark
favicon & OGshare the marketing assets folder · don't fork

Don't