feat: Add complete 11ty test project for Ghost migration

WHAT: - Complete 11ty static site generator project structure - Homepage with hero and Fire/Frost path sections - Master layout system (base + head + footer partials) - Fire/Frost/Arcane branding CSS - Critical .eleventy.js config from Gemini - Ready-to-build test for Ghost CMS migration STRUCTURE: - _includes/layouts/base.njk (master template) - _includes/head.njk (Fire/Frost branding, meta tags) - _includes/footer.njk (complete footer from Ghost) - src/css/firefrost.css (minimal responsive styles) - index.njk (homepage with hero + path cards) - .eleventy.js (passthrough config for CSS/images) - package.json (11ty v3.0.0) - README.md (complete test instructions) GEMINI'S CRITICAL CONFIG: eleventyConfig.addPassthroughCopy('src/css'); eleventyConfig.addPassthroughCopy('assets'); This prevents CSS/images from being ignored in build. BUILD COMMANDS: npm install npx @11ty/eleventy npx @11ty/eleventy --serve (local test at :8080) DEPLOY TARGET: Cloudflare Pages with: - Build command: npx @11ty/eleventy - Output directory: _site - NODE_VERSION=20 ABORT CRITERIA: - 15+ min on build errors - CSS rewrite needed - Mobile nav breaks STATUS: Ready for 2-hour test on Ghost VPS Signed-off-by: Chronicler #55 <claude@firefrostgaming.com>
2026-04-02 23:29:57 +00:00
parent 9c7b1559ab
commit c888f3f5e6
8 changed files with 381 additions and 0 deletions
--- a/website-11ty-test/.eleventy.js
+++ b/website-11ty-test/.eleventy.js
@@ -0,0 +1,13 @@
+module.exports = function(eleventyConfig) {
+  // Critical: Tell 11ty to copy CSS and Images directly to the build folder
+  // Without this, your styles and images won't appear in the _site output
+  eleventyConfig.addPassthroughCopy("src/css");
+  eleventyConfig.addPassthroughCopy("assets");
+
+  return {
+    dir: {
+      input: ".",
+      output: "_site"
+    }
+  };
+};
--- a/website-11ty-test/README.md
+++ b/website-11ty-test/README.md
@@ -0,0 +1,150 @@
+# Firefrost Gaming 11ty Website - Test Migration
+
+**Created:** April 2, 2026  
+**Purpose:** 2-hour test of Ghost CMS → 11ty static site migration  
+**Status:** Ready to build and test
+
+---
+
+## 🚀 Quick Start
+
+### On Ghost VPS (as architect):
+
+```bash
+# Navigate to the test directory
+cd /path/to/firefrost-operations-manual/website-11ty-test
+
+# Install dependencies
+npm install
+
+# Build the site
+npx @11ty/eleventy
+
+# Serve locally for testing
+npx @11ty/eleventy --serve
+```
+
+The site will be available at `http://localhost:8080`
+
+---
+
+## 📁 Project Structure
+
+```
+website-11ty-test/
+├── _includes/
+│   ├── layouts/
+│   │   └── base.njk          # Master layout
+│   ├── head.njk               # <head> partial with Fire/Frost branding
+│   └── footer.njk             # Footer with all links
+├── src/
+│   └── css/
+│       └── firefrost.css      # Minimal Fire/Frost/Arcane styles
+├── assets/
+│   └── images/                # (empty for now - add images here)
+├── _site/                     # Build output (created after npm run build)
+├── .eleventy.js               # 11ty config (CRITICAL for CSS/images)
+├── package.json               # Dependencies
+├── index.njk                  # Homepage
+└── README.md                  # This file
+```
+
+---
+
+## 🔧 Configuration
+
+### Critical .eleventy.js Config
+
+The `.eleventy.js` file contains **critical passthrough copy settings** from Gemini:
+
+```javascript
+eleventyConfig.addPassthroughCopy("src/css");
+eleventyConfig.addPassthroughCopy("assets");
+```
+
+**Without this, CSS and images won't copy to the build!**
+
+---
+
+## ✅ What's Included
+
+- ✅ Complete layout system (master + head + footer)
+- ✅ Homepage with hero and path sections
+- ✅ Fire/Frost/Arcane branding colors
+- ✅ Responsive footer grid
+- ✅ All social links from Ghost
+- ✅ Clean URLs (no .html extensions)
+
+---
+
+## 🎯 Test Checklist
+
+### Phase 1: Build (10 min)
+- [ ] npm install runs successfully
+- [ ] npx @11ty/eleventy builds without errors
+- [ ] _site directory created with files
+
+### Phase 2: Local Test (10 min)
+- [ ] Site loads at localhost:8080
+- [ ] Fire/Frost branding visible
+- [ ] Footer displays correctly
+- [ ] All links work
+- [ ] Mobile responsive (test with browser dev tools)
+
+### Phase 3: Deploy Test (20 min)
+- [ ] Push to Git repo
+- [ ] Connect Cloudflare Pages
+- [ ] Set build command: `npx @11ty/eleventy`
+- [ ] Set output directory: `_site`
+- [ ] Set NODE_VERSION environment variable: `20`
+- [ ] Deploy to test.firefrostgaming.com
+
+### Phase 4: Evaluate (20 min)
+- [ ] Compare to Ghost site visually
+- [ ] Test all CTAs and links
+- [ ] Check mobile responsive
+- [ ] Verify Fire/Frost branding intact
+
+---
+
+## 🛑 Abort Criteria (From Gemini)
+
+**Pull the plug if:**
+- 15+ minutes fighting build errors
+- Need to rewrite CSS to match Ghost
+- Mobile navigation breaks and can't fix in 10 minutes
+
+---
+
+## 📋 Next Steps (If Test Succeeds)
+
+1. Port remaining 6 pages:
+   - About
+   - Servers
+   - Subscribe
+   - Contact
+   - Terms
+   - Privacy
+
+2. Download images from Ghost to /assets/images/
+
+3. Set up Formspree for contact form
+
+4. Add basic SEO meta tags
+
+5. Deploy to production
+
+6. Spin down Ghost
+
+---
+
+## 🔗 Resources
+
+- **11ty Docs:** https://www.11ty.dev/docs/
+- **Cloudflare Pages:** https://pages.cloudflare.com/
+- **Formspree:** https://formspree.io/
+- **Gemini Consultation:** docs/planning/gemini-consultations/ghost-vs-static-website-2026-04-02.md
+
+---
+
+**Fire + Frost + Foundation = Where Love Builds Legacy** 🔥❄️⚡
--- a/website-11ty-test/_includes/footer.njk
+++ b/website-11ty-test/_includes/footer.njk
@@ -0,0 +1,51 @@
+<footer class="ffg-footer" style="margin-top: 100px; padding: 80px 60px 50px; background: linear-gradient(135deg, #0a0a1a 0%, #1a1a2e 100%); border-top: 3px solid rgba(78, 205, 196, 0.4);">
+  <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px; margin-bottom: 50px; max-width: 1600px; margin-left: auto; margin-right: auto;">
+    
+    <!-- About Column -->
+    <div>
+      <h4 style="color: #4ecdc4; margin-bottom: 20px; font-weight: 700;">Firefrost Gaming</h4>
+      <p style="color: #a8dadc; line-height: 1.7; margin-bottom: 20px;">Building a gaming refuge where passion meets precision through creative transformation.</p>
+      <p class="tagline" style="color: #FFD700; font-weight: 600;">Fire + Arcane + Frost = Forever 🔥⚡❄️</p>
+    </div>
+    
+    <!-- Links Column -->
+    <div>
+      <h4 style="color: #ff6b35; margin-bottom: 20px; font-weight: 700;">Quick Links</h4>
+      <ul style="list-style: none; padding: 0; margin: 0;">
+        <li style="margin-bottom: 12px;"><a href="/about" style="color: #a8dadc; text-decoration: none;">About Us</a></li>
+        <li style="margin-bottom: 12px;"><a href="/servers" style="color: #a8dadc; text-decoration: none;">Server List</a></li>
+        <li style="margin-bottom: 12px;"><a href="/subscribe" style="color: #a8dadc; text-decoration: none;">Subscribe</a></li>
+        <li style="margin-bottom: 12px;"><a href="https://status.firefrostgaming.com" style="color: #a8dadc; text-decoration: none;">Status Page</a></li>
+      </ul>
+      
+      <h4 style="color: #4ecdc4; margin-bottom: 20px; margin-top: 35px; font-weight: 700;">Legal</h4>
+      <ul style="list-style: none; padding: 0; margin: 0;">
+        <li style="margin-bottom: 12px;"><a href="/privacy" style="color: #a8dadc; text-decoration: none;">Privacy Policy</a></li>
+        <li style="margin-bottom: 12px;"><a href="/terms" style="color: #a8dadc; text-decoration: none;">Terms of Service</a></li>
+        <li style="margin-bottom: 12px;"><a href="/contact" style="color: #a8dadc; text-decoration: none;">Contact</a></li>
+      </ul>
+    </div>
+    
+    <!-- Community Column -->
+    <div>
+      <h4 style="color: #a855f7; margin-bottom: 20px; font-weight: 700;">Community</h4>
+      <ul style="list-style: none; padding: 0; margin: 0;">
+        <li style="margin-bottom: 12px;"><a href="https://linktr.ee/firefrostgaming" style="color: #FFD700; text-decoration: none; font-weight: 600;">🔗 All Our Socials</a></li>
+        <li style="margin-bottom: 12px;"><a href="/discord" style="color: #a8dadc; text-decoration: none;">Discord</a></li>
+        <li style="margin-bottom: 12px;"><a href="https://twitter.com/PlayFirefrost" style="color: #a8dadc; text-decoration: none;">Twitter/X</a></li>
+        <li style="margin-bottom: 12px;"><a href="https://instagram.com/playfirefrost" style="color: #a8dadc; text-decoration: none;">Instagram</a></li>
+        <li style="margin-bottom: 12px;"><a href="https://reddit.com/r/FirefrostGaming" style="color: #a8dadc; text-decoration: none;">Reddit</a></li>
+        <li style="margin-bottom: 12px;"><a href="https://tiktok.com/@playfirefrost" style="color: #a8dadc; text-decoration: none;">TikTok</a></li>
+        <li style="margin-bottom: 12px;"><a href="https://twitch.tv/playfirefrost" style="color: #a8dadc; text-decoration: none;">Twitch</a></li>
+        <li style="margin-bottom: 12px;"><a href="https://www.facebook.com/FirefrostGaming/" style="color: #a8dadc; text-decoration: none;">Facebook</a></li>
+        <li style="margin-bottom: 12px;"><a href="https://bsky.app/profile/playfirefrost.bsky.social" style="color: #a8dadc; text-decoration: none;">BlueSky</a></li>
+      </ul>
+    </div>
+    
+  </div>
+  
+  <div style="text-align: center; padding-top: 40px; border-top: 2px solid rgba(78, 205, 196, 0.3);">
+    <p class="copyright" style="color: #6b7280; margin: 0;">© 2026 Firefrost Gaming. Built for children not yet born.</p>
+    <p class="bottom-tagline" style="color: #4ecdc4; margin-top: 15px;">Minnesota | Fire + Frost + Foundation = Where Love Builds Legacy 💙</p>
+  </div>
+</footer>
--- a/website-11ty-test/_includes/head.njk
+++ b/website-11ty-test/_includes/head.njk
@@ -0,0 +1,18 @@
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{{ title }} | Firefrost Gaming</title>
+  <meta name="description" content="{{ description }}">
+  <link rel="stylesheet" href="/src/css/firefrost.css">
+  
+  <!-- Fire/Frost/Arcane Brand Colors -->
+  <style>
+    :root {
+      --fire: #FF6B35;
+      --frost: #4ECDC4;
+      --arcane: #A855F7;
+      --gold: #FFD700;
+      --dark: #0F0F1E;
+    }
+  </style>
+</head>
--- a/website-11ty-test/_includes/layouts/base.njk
+++ b/website-11ty-test/_includes/layouts/base.njk
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html lang="en">
+{% include "head.njk" %}
+<body>
+  {{ content | safe }}
+  {% include "footer.njk" %}
+</body>
+</html>
--- a/website-11ty-test/index.njk
+++ b/website-11ty-test/index.njk
@@ -0,0 +1,95 @@
+---
+layout: layouts/base.njk
+title: Home
+description: Fire + Frost + Foundation = Where Love Builds Legacy
+---
+
+<!-- Hero Section -->
+<div class="ffg-hero" style="position: relative; min-height: 1000px; display: flex; align-items: center; justify-content: center; margin: 0 0 40px 0; background: linear-gradient(135deg, #0a0a1a 0%, #1a1a2e 100%);">
+  
+  <div style="position: relative; z-index: 2; text-align: center; padding: 100px 40px;">
+    
+    <h1 style="font-weight: 900; margin: 0 0 35px 0; color: #ffffff; text-shadow: 4px 4px 12px rgba(0,0,0,0.9), 0 0 30px rgba(0,0,0,0.7); line-height: 1.2; font-size: 4rem;">Fire + Arcane + Frost = Forever</h1>
+    
+    <p class="subtitle" style="color: #ffffff; margin: 0 0 25px 0; font-weight: 400; text-shadow: 3px 3px 8px rgba(0,0,0,0.9), 0 0 20px rgba(0,0,0,0.7); font-size: 1.5rem;">Where Passion Meets Precision Through Creative Transformation</p>
+    
+    <p class="description" style="color: #e8f4f8; margin: 0 0 60px 0; line-height: 1.8; text-shadow: 2px 2px 6px rgba(0,0,0,0.9), 0 0 15px rgba(0,0,0,0.7); max-width: 900px; margin-left: auto; margin-right: auto;">Premium Minecraft server network built by The Trinity<br>🔥 Fire • ⚡ Arcane • ❄️ Frost | Build your legacy with us</p>
+    
+    <div style="display: flex; gap: 25px; justify-content: center; flex-wrap: wrap;">
+      <a href="#choose-path" class="cta-button" style="background: linear-gradient(135deg, #FF6B35 0%, #A855F7 50%, #4ECDC4 100%); color: white; padding: 22px 55px; text-decoration: none; border-radius: 10px; font-weight: 700; box-shadow: 0 8px 25px rgba(0,0,0,0.6); transition: transform 0.2s; display: inline-block;">Choose Your Path</a>
+      <a href="/discord" class="cta-button" style="background: rgba(0,0,0,0.6); backdrop-filter: blur(10px); color: white; padding: 22px 55px; text-decoration: none; border-radius: 10px; font-weight: 700; border: 2px solid rgba(168,85,247,0.6); box-shadow: 0 8px 25px rgba(0,0,0,0.6); transition: transform 0.2s; display: inline-block;">Join the Community</a>
+    </div>
+  </div>
+  
+  <!-- Trinity gradient overlay -->
+  <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(255,107,53,0.15) 0%, rgba(168,85,247,0.15) 50%, rgba(78,205,196,0.15) 100%); z-index: 1;"></div>
+  
+</div>
+
+<!-- Choose Your Path Section -->
+<div id="choose-path" class="ffg-custom-text" style="padding: 100px 40px; background: linear-gradient(135deg, #0f0f1e 0%, #1a1a2e 100%);">
+  <div style="max-width: 1600px; margin: 0 auto;">
+    <h2 style="text-align: center; font-weight: 800; margin-bottom: 30px; color: #ffffff; text-shadow: 2px 2px 8px rgba(0,0,0,0.7); font-size: 3rem;">Choose Your Destiny</h2>
+    <p style="text-align: center; color: #a8dadc; margin-bottom: 70px; line-height: 1.6; font-size: 1.2rem;">Two paths. One legendary community. Which element calls to you?</p>
+    
+    <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 50px; margin-bottom: 60px;">
+      
+      <!-- Fire Path Card -->
+      <div style="background: linear-gradient(135deg, rgba(255, 107, 53, 0.15) 0%, rgba(255, 107, 53, 0.05) 100%); border: 3px solid #ff6b35; border-radius: 20px; padding: 50px; position: relative; overflow: hidden; box-shadow: 0 10px 40px rgba(255, 107, 53, 0.3);">
+        <div style="position: absolute; top: -50px; right: -50px; font-size: 15rem; opacity: 0.1; pointer-events: none;">🔥</div>
+        <h3 style="font-weight: 800; color: #ff6b35; margin-bottom: 25px; text-shadow: 0 2px 10px rgba(255, 107, 53, 0.5); font-size: 2rem;">🔥 Fire Path</h3>
+        <p style="color: #e8f4f8; line-height: 1.7; margin-bottom: 30px;">For those who burn bright. Build communities, forge friendships, and create worlds that bring people together. Fire is heart, passion, and the warmth of belonging.</p>
+        <h4 style="color: #ff6b35; margin-bottom: 20px; font-weight: 700;">Perfect for:</h4>
+        <ul style="color: #a8dadc; line-height: 2; padding-left: 25px; list-style: none;">
+          <li style="margin-bottom: 12px; position: relative; padding-left: 30px;">
+            <span style="position: absolute; left: 0; color: #ff6b35; font-weight: 800;">→</span>
+            Community builders and social players
+          </li>
+          <li style="margin-bottom: 12px; position: relative; padding-left: 30px;">
+            <span style="position: absolute; left: 0; color: #ff6b35; font-weight: 800;">→</span>
+            Creative storytellers and roleplayers
+          </li>
+          <li style="margin-bottom: 12px; position: relative; padding-left: 30px;">
+            <span style="position: absolute; left: 0; color: #ff6b35; font-weight: 800;">→</span>
+            Event organizers and celebration lovers
+          </li>
+          <li style="position: relative; padding-left: 30px;">
+            <span style="position: absolute; left: 0; color: #ff6b35; font-weight: 800;">→</span>
+            Those who make everyone feel at home
+          </li>
+        </ul>
+      </div>
+      
+      <!-- Frost Path Card -->
+      <div style="background: linear-gradient(135deg, rgba(78, 205, 196, 0.15) 0%, rgba(78, 205, 196, 0.05) 100%); border: 3px solid #4ecdc4; border-radius: 20px; padding: 50px; position: relative; overflow: hidden; box-shadow: 0 10px 40px rgba(78, 205, 196, 0.3);">
+        <div style="position: absolute; top: -50px; right: -50px; font-size: 15rem; opacity: 0.1; pointer-events: none;">❄️</div>
+        <h3 style="font-weight: 800; color: #4ecdc4; margin-bottom: 25px; text-shadow: 0 2px 10px rgba(78, 205, 196, 0.5); font-size: 2rem;">❄️ Frost Path</h3>
+        <p style="color: #e8f4f8; line-height: 1.7; margin-bottom: 30px;">For those who engineer perfection. Master redstone, optimize farms, and build systems that last forever. Frost is precision, elegance, and the beauty of efficiency.</p>
+        <h4 style="color: #4ecdc4; margin-bottom: 20px; font-weight: 700;">Perfect for:</h4>
+        <ul style="color: #a8dadc; line-height: 2; padding-left: 25px; list-style: none;">
+          <li style="margin-bottom: 12px; position: relative; padding-left: 30px;">
+            <span style="position: absolute; left: 0; color: #4ecdc4; font-weight: 800;">→</span>
+            Technical players and redstone engineers
+          </li>
+          <li style="margin-bottom: 12px; position: relative; padding-left: 30px;">
+            <span style="position: absolute; left: 0; color: #4ecdc4; font-weight: 800;">→</span>
+            Optimization enthusiasts and min-maxers
+          </li>
+          <li style="margin-bottom: 12px; position: relative; padding-left: 30px;">
+            <span style="position: absolute; left: 0; color: #4ecdc4; font-weight: 800;">→</span>
+            Infrastructure builders and system architects
+          </li>
+          <li style="position: relative; padding-left: 30px;">
+            <span style="position: absolute; left: 0; color: #4ecdc4; font-weight: 800;">→</span>
+            Those who love elegant solutions
+          </li>
+        </ul>
+      </div>
+      
+    </div>
+    
+    <p style="text-align: center; color: #FFD700; font-weight: 700; font-size: 1.3rem; margin-top: 50px;">
+      All subscribers access ALL servers. Choose based on your heart, not limitations. 💙
+    </p>
+  </div>
+</div>
--- a/website-11ty-test/package.json
+++ b/website-11ty-test/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "firefrost-website",
+  "version": "1.0.0",
+  "description": "Firefrost Gaming static website built with 11ty",
+  "scripts": {
+    "build": "eleventy",
+    "serve": "eleventy --serve"
+  },
+  "keywords": ["firefrost", "gaming", "minecraft", "11ty"],
+  "author": "The Trinity",
+  "license": "ISC",
+  "devDependencies": {
+    "@11ty/eleventy": "^3.0.0"
+  }
+}
--- a/website-11ty-test/src/css/firefrost.css
+++ b/website-11ty-test/src/css/firefrost.css
@@ -0,0 +1,31 @@
+/* Firefrost Gaming CSS - Fire/Frost/Arcane Branding */
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  background: #0a0a1a;
+  color: #e8e8e8;
+  line-height: 1.6;
+}
+
+/* Responsive footer grid */
+@media (max-width: 768px) {
+  footer .ffg-footer > div:first-child {
+    grid-template-columns: 1fr !important;
+    gap: 40px !important;
+  }
+}
+
+/* Link hover effects */
+a {
+  transition: color 0.3s ease;
+}
+
+a:hover {
+  color: #4ecdc4 !important;
+}