A template for building "X by Example" websites — hands-on introductions to a programming language through annotated example programs, in the style of gobyexample.com.

Built with Astro and Tailwind CSS v4.

• Two-column examples: explanation on the left, code on the right, aligned segment by segment (stacks on mobile)
• Markdown-driven: examples are plain .md files in a content collection
• Categories: optionally group examples on the index page
• Dark/light mode: nightfox palettes (dawnfox/terafox) for both the site and syntax highlighting, persisted to localStorage
• Batteries included: Shiki syntax highlighting, Fontsource fonts (Karla + JetBrains Mono) via Astro's font provider, Lucide icons, ESLint + Prettier

npm install
npm run dev

1. Site config — edit src/consts.ts (SITE_TITLE, SITE_DESCRIPTION, SITE_AUTHOR, GITHUB_URL).
2. Content — replace the files in src/content/examples/ with your own (see below).
3. Theme — swap the palettes in src/plugins/shiki-themes.mjs and the CSS variables in src/styles/global.css.
4. Favicon — replace public/favicon.svg.
5. Deployment — set site (and base if needed) in astro.config.mjs.

Each example is a Markdown file in src/content/examples/:

---
title: Hello World
order: 1
category: Basics # optional
---

Explanatory text goes here. The code block that follows a block of text is
rendered beside it in the right column.

​`js
console.log("hello world");
​`

More text, then more code — each pair becomes a row.

Frontmatter fields:

Use the language's code fence (```rust, ```python, …) for correct syntax highlighting.

See CONTRIBUTING.md.

CC0 1.0 Universal — public domain dedication. Use it however you want, no attribution required.