Skip to content

CLAUDE.md

Latest commit

 

History

History
162 lines (122 loc) · 6.8 KB

CLAUDE.md

File metadata and controls

162 lines (122 loc) · 6.8 KB
Raw

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Project Overview

Multi-page static website for the Atlanta Professional Fire Foundation (APFF) built with Eleventy and Decap CMS. Non-technical users edit content via /admin/ interface, which stores data as Markdown files in content/. Netlify hosts the site and auto-deploys on Git commits.

Pages: Home (/), Map (/map/), About (/about/), Donate (/donate/), Connect (/connect/)

Development Commands

# Install dependencies
npm install

# Local development server (http://localhost:8080)
npm run dev

# Production build (outputs to _site/)
npm run build

Note: Local CMS editing requires Netlify Identity (production only) or GitHub OAuth setup. For local content changes, edit markdown files in content/ directly.

Architecture

Static Site Generation Flow

  1. Content - Markdown files in content/ with YAML frontmatter
    • content/home.md - Homepage (uses layouts/home.njk)
    • content/pages/*.md - Standard pages (use layouts/page.njk)
  2. Templates - Nunjucks templates in _includes/layouts/
  3. Eleventy - Builds static HTML to _site/
  4. Netlify - Serves _site/ and rebuilds on every Git push

CMS Architecture

  • Decap CMS loads at /admin/ via CDN (no build step required)
  • Schema defined in admin/config.yml with two collections:
    • Homepage - Single file collection for content/home.md
    • Pages - File collection for About, Map, Donate, Connect pages
  • Git Gateway (or GitHub backend) commits CMS changes directly to the repo
  • Editorial Workflow enabled for draft/review/publish flow

Content Structure

Homepage (content/home.md):

  • carousel_images[] - Hero carousel slides with image paths and alt text
  • mission{} - Mission section heading and body text
  • cta_buttons{} - Primary and secondary button labels and links
  • find_station{} - Station finder card content
  • seo{} - Meta tags and social sharing config

Standard Pages (content/pages/*.md):

  • about.md - About page with hero image and markdown body
  • map.md - Station finder with optional map embed
  • donate.md - Donation page with optional external donation URL
  • connect.md - Contact page with email and markdown body

All pages use frontmatter for structured data and markdown body for main content.

Design System (from figma.md)

The template uses CSS custom properties matching Figma design tokens:

Colors:

  • Red: #C31C1D (primary brand), #8C1717 (dark variant)
  • Gray scale: #1F1F1F (900), #404040 (700), #999 (400), #F8F8FA (100), #FFF (50)
  • Outline: #E6E6EB

Spacing: 8px base scale from xs (8px) to xxxl (64px)

Border Radius: xs (6px), sm (12px), md (16px), lg (24px), pill (999px)

Typography: Inter font family, weights: 400 (Regular), 500 (Medium), 700 (Bold), 800 (Extra Bold)

Layout: Max width 1440px, content padding 64px horizontal

Key Implementation Details

Eleventy Configuration

  • Passthrough copy: admin/ and assets/ folders copied as-is to _site/
  • Template engine: Nunjucks for .njk files and Markdown template engine
  • Input: Root directory (.)
  • Output: _site/
  • Ignored files: task.md, figma.md, CLAUDE.md, README.md (documentation files not processed as templates)
  • Permalink: content/home.md has permalink: / to render at site root instead of /content/home/

Decap CMS Configuration

  • Backend: git-gateway (requires Netlify Identity) or github (requires OAuth app)
  • Media folder: assets/ (committed to repo)
  • Collections: Single-file collection for content/home.md
  • Widgets: String, text, image, object, list, boolean

Template Features

  • Responsive carousel with smooth transitions, dot navigation, and 5-second autoplay
    • Flexible: works with any number of images (1+)
    • One full-width image displayed at a time
    • Click dots to navigate manually
    • Pauses on hover
  • Mobile-first CSS with breakpoints at 640px and 1024px
  • Semantic HTML with accessibility considerations
  • No external CSS frameworks - custom styles only
  • Centered mission section with horizontally-aligned CTA buttons

Common Tasks

Adding New Content Fields

  1. Update admin/config.yml to add field definition under collections[0].files[0].fields
  2. Update content/home.md frontmatter with new field and default value
  3. Update _includes/layouts/home.njk to render the new field

Modifying Design Tokens

Edit CSS custom properties in :root selector in _includes/layouts/home.njk (lines ~14-31).

Changing CMS Backend

Edit backend section in admin/config.yml. Options:

  • git-gateway - Netlify Identity + Git Gateway (simpler setup)
  • github - GitHub OAuth app (more control)

Testing Locally

Run npm run dev and edit content/home.md directly. Changes hot-reload. CMS login (/admin/) won't work locally without backend configuration.

Deployment (Netlify)

Build settings:

  • Build command: npm run build
  • Publish directory: _site
  • Branch: main

Post-deploy setup:

  1. Enable Netlify Identity (Site settings → Identity → Enable Identity)
  2. Invite users via email
  3. Enable Git Gateway (Identity → Services → Git Gateway)
  4. Users access CMS at https://yoursite.netlify.app/admin/

File Reference

  • package.json - npm scripts and Eleventy dependency
  • .eleventy.js - Build configuration and passthrough copies
  • netlify.toml - Netlify build command and /admin redirect
  • admin/index.html - Decap CMS loader (just loads CDN script)
  • admin/config.yml - CMS schema defining all editable fields (2 collections)
  • content/home.md - Homepage content with carousel, mission, CTAs
  • content/pages/*.md - About, Map, Donate, Connect pages
  • _includes/layouts/home.njk - Homepage template with carousel and special sections
  • _includes/layouts/page.njk - Standard page template for all other pages
  • assets/ - User-uploaded images (managed by CMS)

Design Considerations

When modifying the template:

  • Maintain the design token system for consistency
  • Keep all styles in the template (no external CSS files for simplicity)
  • Ensure mobile responsiveness (test at 640px, 1024px, 1440px)
  • Match Figma spacing, color, and typography specifications
  • Preserve carousel functionality (scroll-snap, dots, click navigation)

Limitations

  • No build-time image optimization - images served as uploaded (consider Netlify Image CDN if needed)
  • Inline styles - all CSS in templates for simplicity; extract to separate file if it grows significantly
  • No search/filtering - static site with limited content doesn't require search
  • Fixed navigation - all pages show same nav links; conditional navigation removed from homepage for consistency