From c888f3f5e69c0e528cc4478c68252f3b9501f115 Mon Sep 17 00:00:00 2001 From: Chronicler #55 Date: Thu, 2 Apr 2026 23:29:57 +0000 Subject: [PATCH] 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 --- website-11ty-test/.eleventy.js | 13 ++ website-11ty-test/README.md | 150 +++++++++++++++++++ website-11ty-test/_includes/footer.njk | 51 +++++++ website-11ty-test/_includes/head.njk | 18 +++ website-11ty-test/_includes/layouts/base.njk | 8 + website-11ty-test/index.njk | 95 ++++++++++++ website-11ty-test/package.json | 15 ++ website-11ty-test/src/css/firefrost.css | 31 ++++ 8 files changed, 381 insertions(+) create mode 100644 website-11ty-test/.eleventy.js create mode 100644 website-11ty-test/README.md create mode 100644 website-11ty-test/_includes/footer.njk create mode 100644 website-11ty-test/_includes/head.njk create mode 100644 website-11ty-test/_includes/layouts/base.njk create mode 100644 website-11ty-test/index.njk create mode 100644 website-11ty-test/package.json create mode 100644 website-11ty-test/src/css/firefrost.css diff --git a/website-11ty-test/.eleventy.js b/website-11ty-test/.eleventy.js new file mode 100644 index 0000000..5ce0583 --- /dev/null +++ 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" + } + }; +}; diff --git a/website-11ty-test/README.md b/website-11ty-test/README.md new file mode 100644 index 0000000..db42822 --- /dev/null +++ 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 # 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** ๐Ÿ”ฅโ„๏ธโšก diff --git a/website-11ty-test/_includes/footer.njk b/website-11ty-test/_includes/footer.njk new file mode 100644 index 0000000..1e6a430 --- /dev/null +++ b/website-11ty-test/_includes/footer.njk @@ -0,0 +1,51 @@ + diff --git a/website-11ty-test/_includes/head.njk b/website-11ty-test/_includes/head.njk new file mode 100644 index 0000000..a3efa89 --- /dev/null +++ b/website-11ty-test/_includes/head.njk @@ -0,0 +1,18 @@ + + + + {{ title }} | Firefrost Gaming + + + + + + diff --git a/website-11ty-test/_includes/layouts/base.njk b/website-11ty-test/_includes/layouts/base.njk new file mode 100644 index 0000000..2303dee --- /dev/null +++ b/website-11ty-test/_includes/layouts/base.njk @@ -0,0 +1,8 @@ + + +{% include "head.njk" %} + + {{ content | safe }} + {% include "footer.njk" %} + + diff --git a/website-11ty-test/index.njk b/website-11ty-test/index.njk new file mode 100644 index 0000000..e0d245d --- /dev/null +++ b/website-11ty-test/index.njk @@ -0,0 +1,95 @@ +--- +layout: layouts/base.njk +title: Home +description: Fire + Frost + Foundation = Where Love Builds Legacy +--- + + +
+ +
+ +

Fire + Arcane + Frost = Forever

+ +

Where Passion Meets Precision Through Creative Transformation

+ +

Premium Minecraft server network built by The Trinity
๐Ÿ”ฅ Fire โ€ข โšก Arcane โ€ข โ„๏ธ Frost | Build your legacy with us

+ +
+ Choose Your Path + Join the Community +
+
+ + +
+ +
+ + +
+
+

Choose Your Destiny

+

Two paths. One legendary community. Which element calls to you?

+ +
+ + +
+
๐Ÿ”ฅ
+

๐Ÿ”ฅ Fire Path

+

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.

+

Perfect for:

+
    +
  • + โ†’ + Community builders and social players +
    • +
  • + โ†’ + Creative storytellers and roleplayers +
    • +
  • + โ†’ + Event organizers and celebration lovers +
    • +
  • + โ†’ + Those who make everyone feel at home +
    • +
+
+ + +
+
โ„๏ธ
+

โ„๏ธ Frost Path

+

For those who engineer perfection. Master redstone, optimize farms, and build systems that last forever. Frost is precision, elegance, and the beauty of efficiency.

+

Perfect for:

+
    +
  • + โ†’ + Technical players and redstone engineers +
    • +
  • + โ†’ + Optimization enthusiasts and min-maxers +
    • +
  • + โ†’ + Infrastructure builders and system architects +
    • +
  • + โ†’ + Those who love elegant solutions +
    • +
+
+ +
+ +

+ All subscribers access ALL servers. Choose based on your heart, not limitations. ๐Ÿ’™ +

+
+
diff --git a/website-11ty-test/package.json b/website-11ty-test/package.json new file mode 100644 index 0000000..1a08f06 --- /dev/null +++ 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" + } +} diff --git a/website-11ty-test/src/css/firefrost.css b/website-11ty-test/src/css/firefrost.css new file mode 100644 index 0000000..fb12f4c --- /dev/null +++ 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; +}