docs: Add Gemini's critical .eleventy.js config
WHAT:
- Critical passthrough config for CSS and assets
- Final blessing from Gemini to start the test
- Complete .eleventy.js configuration
GEMINI'S CRITICAL INSIGHT:
By default, 11ty only processes template files (.md, .njk, .html).
CSS and images need explicit passthrough copy config or they'll
be ignored in _site build. This catches every first-time user.
CONFIG SOLUTION:
eleventyConfig.addPassthroughCopy('src/css');
eleventyConfig.addPassthroughCopy('assets');
This saves 15 minutes of evaluation window debugging.
GEMINI'S FINAL VERDICT:
'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.'
STATUS: Complete consultation. Ready to begin 2-hour test.
Signed-off-by: Chronicler #55 <claude@firefrostgaming.com>
This commit is contained in:
Chronicler #55
@@ -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 # <head> 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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
{% include "head.njk" %}
|
||||
<body>
|
||||
{{ content | safe }}
|
||||
{% include "footer.njk" %}
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
**Head Component (_includes/head.njk):**
|
||||
```html
|
||||
<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="/css/firefrost.css">
|
||||
<!-- Fire/Frost/Arcane branding styles -->
|
||||
</head>
|
||||
```
|
||||
|
||||
**Footer Component (_includes/footer.njk):**
|
||||
```html
|
||||
<!-- Complete footer HTML from Ghost pages we documented -->
|
||||
<footer class="ffg-footer">
|
||||
<!-- Links, legal, social, copyright -->
|
||||
</footer>
|
||||
```
|
||||
|
||||
**Individual Pages (src/index.njk):**
|
||||
```html
|
||||
---
|
||||
layout: layouts/base.njk
|
||||
title: Home
|
||||
description: Fire + Frost + Foundation = Where Love Builds Legacy
|
||||
---
|
||||
|
||||
<!-- Homepage content blocks go here -->
|
||||
<div class="ffg-hero">
|
||||
<!-- Hero section HTML -->
|
||||
</div>
|
||||
```
|
||||
|
||||
### 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. 🔥❄️⚡
|
||||
|
||||
Reference in New Issue
Block a user