Back to Projects
Web/Full Stack

SplashKit Documentation Site Migration

Migrated SplashKit docs from a Ruby-based platform to Astro + Starlight, with JSON → MDX automation, modern navigation, and fast static rendering.

Web/Full Stack5 technologiesJan 2026
Category
Web/Full Stack
Tech Stack
5 items
Released
Jan 2026

Visual Highlights

SplashKit homepage screenshot
Production homepage after migration to a modern docs stack.
SplashKit API documentation page screenshot
Structured API navigation and category-driven docs architecture.

SplashKit Documentation Website Migration & Build

Project

Documentation Site Migration & Build for SplashKit

SplashKit is an open-source programming SDK that makes game and multimedia development approachable for beginners. It provides high-level APIs for graphics, audio, input, and platform-agnostic tooling across C++, C#, and Python.

Why Astro + Starlight

  • Astro pre-renders content to static HTML, keeping runtime JS minimal.
  • Starlight provides a modern documentation UI with built-in navigation, search, and code highlighting.
  • MDX enables interactive components directly inside documentation pages.

What I Built

Repo Structure

/public/               ← static assets (images, gifs)
/scripts/              ← generators for docs + usage content
/src/
  ├─ assets/           ← images referenced in MDX
  ├─ components/       ← reusable UI blocks
  ├─ content/
  │   └─ docs/         ← .md/.mdx docs + API pages
  ├─ fonts/
  └─ styles/           ← global + theme styles
astro.config.mjs
package.json
tsconfig.json

JSON → MDX Pipeline

I wrote Node scripts to convert structured JSON (API definitions, usage specs) into MDX pages with frontmatter and sidebar metadata. This keeps docs data-driven and easy to update.

Key scripts

  • npm run generate-mdx
  • npm run generate-usage-examples-pages

MDX + Components

MDX allows embedding custom UI elements directly in docs:

  • API tables with prop types
  • Interactive code samples
  • Themed callouts and alerts
  • Structured sidebar navigation

Outcomes

  • Performance: ~40% faster loads vs. the legacy Ruby site.
  • Developer Experience: JSON → MDX automation reduces manual updates.
  • Scalability: content is source-controlled and easy to extend as the SDK evolves.