CREATING CONTENT

STEP-BY-STEP GUIDE

Learn how to create new pages, components, and blog posts using the CLI or manual file creation.

QUICK START

Create content in 3 steps
Workflow:
✅
Step 1: Create content file with CLI
✅
Step 2: Edit YAML file with text editor
✅
Step 3: Validate and preview
BASH
# Create new page
./fyt content add page features

# Edit with your preferred editor
vi content/pages/features.yaml

# Validate
./fyt validate

# Preview
npm run dev

CREATING PAGES

Static pages with CLI
Using CLI:
BASH
# Create new page
./fyt content add page pricing

# Creates: content/pages/pricing.yaml
# URL: /pricing
Generated Template:
YAML
meta:
  title: "Pricing - FYT Design System"
  description: "Page description for SEO"
  keywords: ["pricing", "plans", "FYT"]
  slug: "/pricing"

hero:
  title: "PRICING"
  subtitle: "CHOOSE YOUR PLAN"
  lead_text: "Simple, transparent pricing"
  background_variant: "brutal"

sections:
  - id: "plans"
    type: "content"
    title: "PLANS"
    content: |
      **Free Plan:**

      Perfect for getting started.

      - Unlimited pages
      - All components
      - Community support
    variant: "brutal"

styling:
  letterbox: true
  registration_marks: true
  background: "brutal-white"
  color_scheme: "brutal"
Edit the Template:
BASH
# Open in vi
vi content/pages/pricing.yaml

# Or use your preferred editor
nano content/pages/pricing.yaml
code content/pages/pricing.yaml  # VSCode

CREATING BLOG POSTS

Date-prefixed blog content
Using CLI:
BASH
# Create new blog post
./fyt content add blog "Brutal Design Principles"

# Creates: content/blog/2025-01-20-brutal-design-principles.yaml
# URL: /blog/brutal-design-principles
Blog Post Template:
YAML
meta:
  title: "Brutal Design Principles"
  description: "Exploring the philosophy behind brutal design"
  keywords: ["brutal", "design", "principles"]
  slug: "/blog/brutal-design-principles"
  date: "2025-01-20"
  author: "FYT Team"

hero:
  title: "BRUTAL DESIGN PRINCIPLES"
  subtitle: "DESIGN THAT REFUSES TO BE IGNORED"
  lead_text: "Exploring the philosophy and practice of brutal design"
  background_variant: "brutal"

sections:
  - id: "introduction"
    type: "content"
    title: "INTRODUCTION"
    content: |
      Brutal design is about **clarity**, **impact**, and **honesty**.

      **Core Principles:**

      - **No decoration for decoration's sake**
      - **Maximum contrast**
      - **Functional typography**
      - **Honest materials**
    variant: "brutal"

CREATING COMPONENT DOCS

Document your components
Using CLI:
BASH
# Create component documentation
./fyt content add component brutal-modal

# Creates: content/components/brutal-modal.yaml
# URL: /components (listed in component library)
Component Doc Template:
YAML
meta:
  title: "Brutal Modal Component"
  description: "Modal dialog component with brutal styling"
  keywords: ["modal", "dialog", "component"]

component:
  name: "BrutalModal"
  category: "Overlay"
  status: "stable"

sections:
  - id: "usage"
    type: "content"
    title: "USAGE"
    content: |
      **Import:**
import { BrutalModal } from './components/ui/BrutalModal';
TEXT
**Basic Example:**
<BrutalModal isOpen={isOpen} onClose={() => setIsOpen(false)} title="MODAL TITLE"
Modal content goes here </BrutalModal>
TEXT
variant: "brutal"

  - id: "props"
    type: "content"
    title: "PROPS"
    content: |
      | Prop | Type | Default | Description |
      |------|------|---------|-------------|
      | `isOpen` | boolean | false | Controls modal visibility |
      | `onClose` | function | required | Close handler |
      | `title` | string | required | Modal title |
      | `variant` | string | "brutal" | Style variant |
    variant: "brutal"

MANUAL FILE CREATION

Create files without CLI
Create File Manually:
BASH
# Create directory if needed
mkdir -p content/pages/docs/guides

# Create file
touch content/pages/docs/guides/my-guide.yaml

# Edit file
vi content/pages/docs/guides/my-guide.yaml
Minimum Required Fields:
YAML
meta:
  title: "Page Title"
  description: "Page description"
  slug: "/page-url"

hero:
  title: "HERO TITLE"

sections:
  - id: "section-1"
    content: |
      Content here
Validate After Creation:
BASH
# Check for errors
./fyt validate

# Fix any issues
vi content/pages/docs/guides/my-guide.yaml

NEXT STEPS

Learn More:
← BACK TO DOCUMENTATION INDEX