Introduction
Welcome to your documentation site. Built with Astro, deployed on Cloudflare Pages, styled with the Digital Architect design system.
Note: This is your starter template. Replace the content in
src/pages/docs/with your own Markdown files.
What’s included
- Dark-mode first design with the Digital Architect tonal system
- Full Markdown + MDX support
- Mermaid diagram rendering
- Syntax-highlighted code blocks via Shiki
- Sticky sidebar navigation
- Auto-generated table of contents
- Fast static build — zero JavaScript required for reading
How it works
Your documentation lives in src/pages/docs/. Every .md or .mdx file becomes a page. Add the layout frontmatter at the top of each file:
---
layout: ../../layouts/BaseLayout.astro
title: My Page Title
description: A short description for SEO.
---
Then write your content in Markdown below the frontmatter.
Mermaid diagrams
Wrap your Mermaid code in a <div class="mermaid"> tag:
<div class="mermaid">
graph TD
A[Write Markdown] --> B[Run astro build]
B --> C[Deploy to Cloudflare]
C --> D[Done!]
</div>
This renders as:
graph TD
A[Write Markdown] --> B[Run astro build]
B --> C[Deploy to Cloudflare Pages]
C --> D[Live documentation!]
Navigation
Edit src/layouts/BaseLayout.astro and update the navSections array to match your site structure:
const navSections = [
{
label: 'Getting Started',
items: [
{ label: 'Introduction', href: '/docs/introduction' },
{ label: 'Quick Start', href: '/docs/quick-start' },
],
},
// Add more sections...
];