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!]

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...
];