diff --git a/docs/planning/gemini-consultations/ghost-vs-static-website-2026-04-02.md b/docs/planning/gemini-consultations/ghost-vs-static-website-2026-04-02.md index e1943cc..b30df56 100644 --- a/docs/planning/gemini-consultations/ghost-vs-static-website-2026-04-02.md +++ b/docs/planning/gemini-consultations/ghost-vs-static-website-2026-04-02.md @@ -566,3 +566,163 @@ Pull the plug and stick with Ghost if: You have my blessing for this 2-hour spike. It's a smart way to test the waters without betting the farm. Before you start the timer, how are you planning to structure the `head` and `footer` components in 11ty so you don't have to copy-paste them across all 7 pages during the test? + +--- + +## 💙 MICHAEL'S RESPONSE: 11ty Layout Structure (April 2, 2026) + +Perfect tactical map, Gemini. Exactly what we needed. + +For the layout structure, here's the plan: + +### The Setup: Layouts + Partials + +**Directory structure:** +``` +firefrost-website/ +├── _includes/ +│ ├── layouts/ +│ │ └── base.njk # Master layout template +│ ├── head.njk # component +│ └── footer.njk # Footer component +├── src/ +│ ├── index.njk # Homepage +│ ├── about.njk # About page +│ ├── servers.njk # Servers page +│ └── ... # Other pages +└── .eleventy.js # Config +``` + +**Master Layout (_includes/layouts/base.njk):** +```html + + +{% include "head.njk" %} + + {{ content | safe }} + {% include "footer.njk" %} + + +``` + +**Head Component (_includes/head.njk):** +```html + + + + {{ title }} | Firefrost Gaming + + + + +``` + +**Footer Component (_includes/footer.njk):** +```html + + +``` + +**Individual Pages (src/index.njk):** +```html +--- +layout: layouts/base.njk +title: Home +description: Fire + Frost + Foundation = Where Love Builds Legacy +--- + + +
+ +
+``` + +### Why This Works + +- ✅ Write head/footer **once**, use everywhere +- ✅ Page-specific meta via frontmatter (title, description) +- ✅ Fire/Frost branding CSS in one place +- ✅ Easy to update footer links across all pages +- ✅ Clean URLs (`/about/` not `/about.html`) via 11ty config + +### The 2-Hour Test Plan + +**30 min: Setup** +- `npm init -y` +- `npm install @11ty/eleventy` +- Create layout structure above +- Extract Fire/Frost CSS from Ghost pages + +**30 min: Port Homepage** +- Copy homepage HTML from `docs/website/ghost-pages/homepage.html` +- Split into layout + content +- Download images from Ghost to `/assets/images/` +- Test locally with `npx @11ty/eleventy --serve` + +**30 min: Deploy Test** +- Push to Git repo `firefrost-website` +- Connect to Cloudflare Pages +- Set build command: `npx @11ty/eleventy` +- Set output directory: `_site` +- Set `NODE_VERSION=20` env var +- Deploy to `test.firefrostgaming.com` + +**30 min: Evaluate** +- Test all links, images, mobile responsive +- Check for broken CSS or missing JavaScript +- Verify Fire/Frost branding intact +- **Decision: GO or ABORT** + +### Abort Triggers (As You Defined) + +Will pull the plug if: +- 15+ minutes fighting Cloudflare build errors +- Need to rewrite CSS to match Ghost layout +- Mobile nav breaks, can't fix in 10 minutes + +### The Commitment + +If this test goes smooth, I'll port the remaining 6 pages tomorrow (another 2 hours). If it hits your predicted landmines, I'll abort, do the 1-hour Ghost cleanup, and ship on Ghost as you originally recommended. + +Either way, this won't derail Unsubscribe UI or E2E testing. + +Starting the timer now. Will report back with results. + +Thanks for the blessing and the tactical map, friend. 🔥❄️ + +— Michael & Claude (Chronicler #55) + +--- + +## 🤖 GEMINI'S FINAL CONFIG & BLESSING (April 2, 2026) + +This layout structure is absolute perfection, Michael. You've nailed the Nunjucks (`.njk`) syntax, and `{{ content | safe }}` is exactly how you inject those HTML blocks into the master template. + +Before you start the timer, I am going to give you the one piece of configuration that catches every first-time 11ty user and would otherwise eat up 15 minutes of your evaluation window. + +By default, 11ty only processes template files (`.md`, `.njk`, `.html`). It will ignore your CSS and image folders unless you explicitly tell it to pass them through to the `_site` build. + +Drop this exactly as-is into your `.eleventy.js` file at the root: + +```javascript +module.exports = function(eleventyConfig) { + // Tell 11ty to copy your CSS and Images directly to the build folder + eleventyConfig.addPassthroughCopy("src/css"); + eleventyConfig.addPassthroughCopy("assets"); + + return { + dir: { + input: ".", // Process files from the root (or change to "src" if you move _includes inside src) + output: "_site" + } + }; +}; +``` + +(Note: If you keep `_includes` in the root directory as shown in your tree, ensure your input directory is set to `.` so 11ty finds it, or simply move `_includes` inside your `src/` folder for cleaner scoping). + +Your plan is watertight. The abort triggers are ego-free and data-driven. This is exactly how senior engineering is done. + +Start the clock. Let's see what the data says. Standing by for the after-action report. 🔥❄️⚡