DRKM Blueprint System

Active

Architecture Overview

High-level architecture of the blueprint system

Active·Owner: rafa·2026-04-04

Architecture Philosophy

The DRKM Blueprint System is built on three core principles: determinism, simplicity, and static delivery. It uses Next.js with static export to pre-render all content at build time, eliminating runtime variability and enabling edge deployment.

Core Layers

The system is organized into three distinct layers:

Content Layer

All project content lives as files:

  • MDX files in content/ for human-readable pages with YAML frontmatter
  • JSON files in data/ for structured data (decisions, risks, requirements, milestones, team, changelog, dependencies)
  • gray-matter parses frontmatter and separates metadata from content
  • All content validates against Zod schemas before build completion

Application Layer

The Next.js application processes content and binds it to templates:

  • Template system maps frontmatter template field to React components
  • Navigation generation builds site navigation tree from content frontmatter
  • Zod validation ensures all data conforms to schemas
  • MDX compilation transforms markdown to React components
  • Static export pre-renders all pages at build time

Presentation Layer

React components render the final HTML:

  • Layout shell provides consistent header, navigation, footer across all pages
  • Page templates (7 total) render different content types
  • Component library reusable UI elements built from shadcn/ui primitives
  • Styling Tailwind CSS with custom theme configuration
  • Typography documentation-first hierarchy with stone palette

Data Flow

  • 1. Developer writes MDX content with YAML frontmatter
  • 2. Build process reads content files
  • 3. Zod validates frontmatter and data
  • 4. Navigation generated from frontmatter
  • 5. Templates bind to content
  • 6. All pages rendered to static HTML/CSS/JS
  • 7. Static export deployed to Cloudflare Pages
  • 8. No server runtime needed

Build Pipeline

  • npm ci: Install exact dependencies
  • Type checking: TypeScript validation
  • Content validation: Zod schema checks
  • MDX compilation: Markdown to React
  • Static build: Next.js export
  • Asset optimization: Image and CSS minification
  • Deployment: Upload to Cloudflare Pages

Deployment Model

The system uses serverless edge deployment. Static files are served globally from Cloudflare's edge network with automatic caching and near-instant updates. No server runtime, no database, no complexity.