CONTENT MANAGEMENT

YAML-DRIVEN CONTENT SYSTEM

FYT uses a YAML-based content system that separates content from presentation. Write once, render everywhere: web, print, API responses.

INTRODUCTION

Why YAML for content?
FYT's content management system is built on YAML files that define structured content. This approach provides:
  • Separation of concerns: Content lives separately from code
  • Type safety: Structured data with validation
  • Multi-format rendering: Same content renders to web, print, and APIs
  • Version control friendly: Plain text files work perfectly with Git
  • No database required: Static content, blazing fast builds
Philosophy:
Content should be easy to write, easy to read, and easy to maintain. YAML provides a human-friendly format that's also machine-parseable.

CONTENT DIRECTORY STRUCTURE

Where content lives
TEXT
content/
├── pages/           # Page content
│   ├── home.yaml
│   ├── about.yaml
│   ├── build.yaml
│   └── docs/        # Documentation pages
│       ├── docs.yaml
│       ├── guides/
│       ├── technical/
│       └── audits/
├── components/      # Component documentation
│   ├── button.yaml
│   ├── card.yaml
│   └── typography.yaml
├── blog/            # Blog posts
│   ├── 2025-01-15-welcome.yaml
│   └── 2025-01-20-brutal-design.yaml
├── design-tokens/   # Design system tokens
│   ├── colors.yaml
│   ├── spacing.yaml
│   └── typography.yaml
└── config/          # Site configuration
    └── site.yaml
Directory Purposes:
DirectoryPurposeURL Pattern
`pages/`Static pages`/about`, `/build`
`pages/docs/`Documentation`/docs/*`
`components/`Component docs`/components`
`blog/`Blog posts`/blog/:slug`
`design-tokens/`Design tokens`/design-tokens`
`config/`Site configN/A (internal)

FILE NAMING CONVENTIONS

How files map to URLs
Pages:
File path determines URL:
  • content/pages/about.yaml → /about
  • content/pages/build.yaml → /build
  • content/pages/docs/guides/print-optimization.yaml → /docs/guides/print-optimization
Blog Posts:
Date-prefixed filenames:
  • content/blog/2025-01-15-welcome.yaml → /blog/welcome (slug: welcome)
  • content/blog/2025-01-20-brutal-design.yaml → /blog/brutal-design
Slug Override:
Use meta.slug to override automatic URL generation:
YAML
meta:
  slug: "/custom-url"

YAML TO RENDERED PAGE

How content becomes a page
Content Flow:
  1. Write YAML: Create/edit .yaml file in content/ directory
  2. Validate: Run ./fyt validate to check syntax and structure
  3. Build: esbuild imports YAML at build time via custom plugin
  4. Render: React components render YAML data
  5. Deploy: Static HTML/CSS/JS bundle
Example YAML Structure:
YAML
meta:
  title: "Page Title"
  description: "Page description for SEO"
  slug: "/example"

hero:
  title: "HERO TITLE"
  subtitle: "Hero subtitle"
  lead_text: "Lead paragraph"

sections:
  - id: "section-1"
    type: "content"
    title: "Section Title"
    content: |
      Markdown content here
    variant: "brutal"
Rendering Components:
  • meta → Page metadata, SEO tags
  • hero → Hero section with title/subtitle
  • sections → Array of content sections
  • variant → Styling (brutal, electric, resistance, humanist)

NEXT STEPS

Learn More:
← BACK TO DOCUMENTATION INDEX