Atlanta Professional Fire Foundation Website

A static website for the Atlanta Professional Fire Foundation with a non-technical CMS editor interface.

Overview

• CMS Editor: Edit content at /admin/ using Decap CMS
• Content Storage: Markdown files in content/ directory
• Build System: Eleventy (11ty) generates static HTML
• Deployment: Netlify with automatic builds from Git
• Pages: Home, Map, About, Donate, Connect

Local Development

Setup

npm install

Run Development Server

npm run dev

Visit http://localhost:8080 to view the site.

Note: Local CMS login requires either GitHub backend or Netlify Identity in production. For local content editing without authentication, edit markdown files in content/ directly.

Build for Production

npm run build

Output will be in ./_site directory.

Deploy to Netlify

1. Push to Git Repository

Push this repository to GitHub, GitLab, or Bitbucket.

2. Create Netlify Site

1. In Netlify, click New site from Git
2. Select your repository
3. Configure build settings:
   • Build command: npm run build
   • Publish directory: _site
4. Click Deploy site

3. Enable CMS Login

Option A: Netlify Identity + Git Gateway (Recommended)

This option doesn't require creating a GitHub OAuth app.

1. Go to Site settings → Identity → Click Enable Identity
2. Click Invite users and enter your editors' email addresses
3. Go to Identity → Services → Git Gateway → Click Enable Git Gateway
4. Editors can now visit https://yoursite.netlify.app/admin/ to log in

Option B: GitHub Backend

This option requires more setup but gives you direct GitHub control.

1. In admin/config.yml, change the backend:

   backend:
     name: github
     repo: your-username/your-repo
     branch: main

2. Create a GitHub OAuth app:

   • Go to GitHub → Settings → Developer settings → OAuth Apps → New OAuth App
   • Homepage URL: https://yoursite.netlify.app
   • Authorization callback URL: https://api.netlify.com/auth/done

3. In Netlify:

   • Go to Site settings → Access control → OAuth
   • Click Install provider → GitHub
   • Enter your GitHub OAuth app credentials

4. Editors log in at /admin/

Editing Content

Using the CMS

1. Navigate to https://yoursite.netlify.app/admin/
2. Log in with your credentials
3. Choose a collection:
   • Homepage → Edit carousel, mission, CTAs
   • Pages → Edit About, Map, Donate, or Connect pages
4. Edit any field:
   • Change text content
   • Upload images
   • Modify buttons and links
   • Update page content
5. Click Save → Publish
6. Netlify will automatically rebuild and deploy your changes

Editing Directly

You can also edit markdown files in content/ directly in your repository and push changes to trigger a rebuild.

Content Structure

Homepage (content/home.md)

• Title & Tagline: Main heading and subtitle
• Carousel Images: Hero section image slider
• Mission Section: Organization mission statement
• CTA Buttons: Primary and secondary call-to-action buttons
• Find Station Section: Interactive map promotion card
• SEO: Meta tags and social sharing images

Other Pages (content/pages/*.md)

• About: Mission, history, and impact information
• Map: Station finder with optional map embed
• Donate: Donation information and external payment link
• Connect: Contact information and social media links

All pages include SEO fields for meta titles and descriptions.

File Structure

/
├─ package.json           # Dependencies and scripts
├─ .eleventy.js          # Eleventy configuration
├─ netlify.toml          # Netlify build settings
├─ README.md             # This file
├─ /admin/               # CMS admin interface
│  ├─ index.html         # CMS loader
│  └─ config.yml         # CMS schema (2 collections)
├─ /assets/              # Uploaded images and files
├─ /content/
│  ├─ home.md            # Homepage content
│  └─ /pages/            # Other pages
│     ├─ about.md        # About page
│     ├─ map.md          # Map page
│     ├─ donate.md       # Donate page
│     └─ connect.md      # Connect page
└─ /_includes/
   └─ /layouts/
      ├─ home.njk        # Homepage template
      └─ page.njk        # Standard page template

Design System

The site uses a design system with tokens from the Figma design:

• Colors: Red (#C31C1D), Gray scale, White
• Spacing: 8px base scale (xs to xxxl)
• Border Radius: 6px to 24px + pill shape
• Typography: Inter font family
• Max Width: 1440px

Notes

• Images uploaded via CMS are stored in /assets/ and deployed with the site
• The site is fully responsive and mobile-friendly
• All colors and spacing follow the APFF brand guidelines
• The carousel has automatic scroll functionality with navigation dots

Troubleshooting

CMS won't load

• Ensure you've enabled Netlify Identity or configured GitHub OAuth
• Check that your build has completed successfully

Changes not appearing

• Wait for the Netlify build to complete (check Deploy log)
• Clear your browser cache

Images not showing

• Ensure images are uploaded through the CMS or placed in /assets/
• Check that image paths start with /assets/

Support

For technical issues or questions, contact your web developer.