rewrote boilerplate site.js files

docs(rules): enforce User Content Sovereignty and remove specific content bias from guidelines and skills
fix(nav): update gateway navigation label from Gateway 3 to Gateway
2026-09-13 01:50:38 -05:00 · 2026-09-13 01:33:30 -05:00 · 2026-09-13 01:29:47 -05:00 · 2026-09-13 01:27:37 -05:00 · 2026-09-13 01:16:20 -05:00 · 2026-09-13 01:11:28 -05:00
45 changed files with 4891 additions and 7 deletions
@@ -0,0 +1,87 @@
+# Technical Blog System Rules & Architecture Directives
+
+## 1. Core Invariant: User Content Sovereignty (Highest Priority)
+1. **User Edits Are Absolute Ground Truth:**
+   - The user's edits, custom writing, post titles, navigation labels, terminology, and naming choices are the absolute highest level of truth in this codebase.
+   - They strictly take precedence over any background content description, sample design mockup (`sample-designs/*`), skill instructions, or default boilerplate.
+2. **Strict Prohibition on Unsolicited Rewriting or Renaming:**
+   - You must **NEVER** revert, alter, overwrite, or substitute user-authored text, titles, navigation labels, tags, or naming conventions unless the user directly and explicitly requests that specific modification.
+   - Do not reintroduce removed text or names from prior mockups or commits.
+3. **Mandatory Clarification Gate:**
+   - If you notice a potential inconsistency, typo, or naming ambiguity in user-authored content, you must **NOT** unilaterally modify it.
+   - You must ask the user for specific clarification before altering any user-authored writing or naming.
+4. **Sample Designs Are Layout References Only:**
+   - Files in `sample-designs/` serve solely as visual, CSS, and structural layout references.
+   - Never extract or re-inject titles, domain names, service labels, or technical copy from `sample-designs/` into active templates or site data without explicit instruction.
+
+---
+
+## 2. Pedagogical Explanations (Interactive Learning)
+1. **Explain the Code:** Whenever creating or refactoring code (Eleventy configuration, Nunjucks templates, CSS modules, build scripts), provide a clear, educational breakdown.
+2. **Break Down Key Concepts:** Explain *why* a particular Eleventy filter, Nunjucks tag, or CSS variable structure was used so the user learns the foundational concepts.
+3. **No Magic:** Avoid opaque or overly clever abstractions; prioritize readable, idiomatic code with commentary explaining tricky points.
+
+---
+
+## 3. CSS Architecture & Isolation
+1. **Zero Monolithic Inlines:** Do not inject raw `<style>` blocks into HTML templates.
+2. **Modular File Structure:**
+   - Put global tokens in `src/assets/css/tokens.css`.
+   - Put reset and base typography in `src/assets/css/reset.css`.
+   - Put layout structures (tiling layout, split grids) in `src/assets/css/layout.css`.
+   - Put scoped component styles in `src/assets/css/components/<component-name>.css`.
+3. **Design System Token Integrity:** Always use CSS custom properties defined in `tokens.css`:
+   - Canvas: `var(--bg-canvas)` (`#0d0f12`)
+   - Surface: `var(--bg-surface)` (`#121417`)
+   - Elevated: `var(--bg-elevated)` (`#1c1f26`)
+   - Borders: `var(--border-color)` (`#2b303b`)
+   - Text: `var(--text-primary)` (`#e0e6f0`), `var(--text-muted)` (`#8a95a5`)
+   - Accents: `var(--accent-cyan)` (`#00f0ff`), `var(--accent-green)` (`#00e676`), `var(--accent-amber)` (`#ffb700`)
+4. **Hard Aesthetic Constraints:**
+   - No glassmorphism (`backdrop-filter`).
+   - No box-shadows or glows.
+   - No linear/radial gradients.
+   - Border radius strictly bounded between `0px` and `4px`.
+   - Transition durations set to `none` or `0s` for instant snap responses on hover.
+
+---
+
+## 4. Templating Guidelines (Eleventy + Nunjucks)
+1. **Layout Hierarchy:**
+   - Root template: `src/_includes/layouts/base.njk` (contains HTML structure, `<head>`, metadata, scripts, stylesheets).
+   - Content layouts: `src/_includes/layouts/post.njk` (for articles), `src/_includes/layouts/page.njk` (for landing/catalog).
+2. **Component Partials:**
+   - Isolated partials in `src/_includes/partials/` (`global-bar.njk`, `hero-tile.njk`, `post-card.njk`, `stats-sidebar.njk`, `code-box.njk`, `footer.njk`).
+   - Pass dynamic data via Nunjucks macros or contextual variables.
+
+---
+
+## 5. Obsidian Content Pipeline
+1. **Frontmatter Specification:** Every post ingested from Obsidian must adhere to:
+   ```yaml
+   title: "Article Title"
+   date: YYYY-MM-DD
+   tags: ["#tag1", "#tag2"]
+   excerpt: "Single paragraph summary"
+   readingTime: "X MIN READ"
+   draft: false
+   ```
+2. **Obsidian Normalization:**
+   - Wikilinks `[[slug]]` or `[[slug|Label]]` must be transformed into standard web URLs (`/posts/slug/`).
+   - Callout blocks (`> [!NOTE]`, `> [!WARNING]`, etc.) must render as terminal-style alert callouts.
+   - Images must be processed into `src/assets/images/posts/` and linked via standard `<img>` or Markdown image syntax.
+
+---
+
+## 6. Test-Driven Development (TDD) & Adversarial Verification
+1. **Red-Green-Refactor Lifecycle:**
+   - Write tests in `test/*.test.js` using Node's native test runner (`node:test`, `node:assert/strict`).
+   - Test inputs before implementing filters, data loaders, or template macros.
+2. **Adversarial Test Coverage Required:**
+   - **Data & Configuration:** Test that missing required environment variables (e.g. `SITE_DOMAIN`) throw fatal errors.
+   - **Filters:** Test edge cases: empty strings, undefined values, single-word inputs, massive word counts, non-date objects.
+   - **Content Schemas:** Validate all Markdown files in `src/posts/` against frontmatter schemas.
+   - **Design Spec Compliance:** Automate regex/AST assertions on `src/assets/css/` ensuring zero violations of the "Do Not Use" list (`backdrop-filter`, `box-shadow`, `text-shadow`, gradients, floaty transitions).
+   - **Link & Anchor Integrity:** Verify that every compiled page has zero broken internal links and that all Table of Contents anchor links resolve to valid heading IDs.
+3. **Execution Invariant:**
+   - Always run `npm test` before committing. All tests must pass cleanly with 0 failures.
@@ -0,0 +1,112 @@
+---
+name: eleventy-tiling-blog
+description: >-
+  Use this skill when developing, refactoring, or building the Eleventy blog, modularizing CSS into tokens and components, creating Nunjucks layouts and partials from sample designs, or configuring Eleventy build pipelines.
+---
+
+# Eleventy Tiling Blog Development Skill
+
+This skill guides the agent in modularizing templates and CSS from `sample-designs/` into a clean, DRY Eleventy (11ty) static publication site.
+
+> [!IMPORTANT]
+> **User Content Sovereignty:** Files in `sample-designs/` are layout and CSS references ONLY. Never extract or re-inject titles, service names, or text from `sample-designs/` over user-defined or sanitized content. User-authored text and naming conventions are the highest level of truth.
+
+---
+
+## 1. CSS Modularization Workflow
+
+When extracting CSS from `sample-designs/*.html` into `src/assets/css/`:
+
+1. **Tokens (`src/assets/css/tokens.css`):**
+   Extract all `:root` custom properties:
+   ```css
+   :root {
+     --bg-canvas: #0d0f12;
+     --bg-surface: #121417;
+     --bg-elevated: #1c1f26;
+     --border-color: #2b303b;
+     --text-primary: #e0e6f0;
+     --text-muted: #8a95a5;
+     --accent-cyan: #00f0ff;
+     --accent-green: #00e676;
+     --accent-amber: #ffb700;
+     --accent-red: #ff5252;
+     --font-mono: 'IBM Plex Mono', monospace;
+     --font-code: 'JetBrains Mono', monospace;
+     --font-prose: 'Inter', sans-serif;
+   }
+   ```
+
+2. **Reset & Base (`src/assets/css/reset.css`):**
+   - Universal box-sizing reset (`box-sizing: border-box; margin: 0; padding: 0;`).
+   - Body font defaults, base line-height (`1.6`), instant hover transitions (`transition: none;`).
+   - Explicit 1px/2px focus ring styling for keyboard accessibility.
+
+3. **Layout Grid (`src/assets/css/layout.css`):**
+   - `.tiling-layout`: Centered flex column, `max-width: 1120px` to `1160px`.
+   - `.split-grid`: 2-column or multi-tile layout with rigid gaps (`16px`).
+   - `.article-workspace-grid`: Left sticky sidebar (`290px`) + main article reading view (`1fr`).
+
+4. **Component Modules (`src/assets/css/components/`):**
+   - `global-bar.css`: `.global-bar`, `.brand-group`, `.status-indicator`, `.bar-nav`, `.bar-link`.
+   - `tiles.css`: `.tile`, `.tile-header`, `.tile-title`, `.tile-meta`, `.hero-tile`.
+   - `code-box.css`: `.terminal-code-box`, `.code-titlebar`, `.code-content`.
+   - `article.css`: Prose typography capped at `65ch`, inline `<kbd>`, tables, callouts.
+
+---
+
+## 2. Nunjucks (`.njk`) Component Architecture
+
+1. **Layout Inheritance:**
+   - `src/_includes/layouts/base.njk`:
+     ```html
+     <!DOCTYPE html>
+     <html lang="en">
+     <head>
+       <meta charset="UTF-8">
+       <title>{{ title }} | {{ site.title or site.name }}</title>
+       <link rel="stylesheet" href="/assets/css/main.css">
+     </head>
+     <body>
+       <main class="tiling-layout">
+         {% include "partials/global-bar.njk" %}
+         {{ content | safe }}
+         {% include "partials/footer.njk" %}
+       </main>
+     </body>
+     </html>
+     ```
+   - `src/_includes/layouts/post.njk`:
+     Extends `layouts/base.njk`, injecting the `.article-workspace-grid` with the table of contents sidebar and article body.
+
+2. **Reusable Partials:**
+   - `src/_includes/partials/global-bar.njk`
+   - `src/_includes/partials/hero-tile.njk`
+   - `src/_includes/partials/post-card.njk`
+   - `src/_includes/partials/stats-sidebar.njk`
+   - `src/_includes/partials/code-box.njk`
+
+---
+
+## 3. Explaining Changes to the User
+
+When writing or modifying Eleventy files:
+- Explain **how Nunjucks blocks and layout inheritance prevent template duplication**.
+- Explain **how CSS custom properties cascade and ensure dark-mode consistency**.
+- Point out how the resulting build outputs raw static HTML in `_site/` with zero runtime JavaScript overhead.
+
+---
+
+## 4. Validation & Verification
+
+Run these commands to test Eleventy builds:
+```bash
+# Validate Eleventy configuration and build static output
+npx @11ty/eleventy --dryrun
+
+# Build to _site directory
+npx @11ty/eleventy
+
+# Launch local dev server with auto-refresh
+npx @11ty/eleventy --serve
+```
@@ -0,0 +1,102 @@
+---
+name: obsidian-sync
+description: >-
+  Use this skill when designing, building, or troubleshooting the Obsidian vault publishing integration, the server upload API, note normalization (wikilinks, callouts, frontmatter), or the custom Obsidian plugin.
+---
+
+# Obsidian Vault Publishing & Sync Skill
+
+This skill guides the agent in implementing the custom Obsidian plugin and server-side ingestion workflow for publishing blog posts directly from an Obsidian vault.
+
+> [!IMPORTANT]
+> **User Content Sovereignty:** User-authored content, post titles, tags, and formatting are the highest level of truth. The sync and normalization pipelines must preserve user-authored text verbatim and never overwrite or mutate user writing without explicit instruction.
+
+---
+
+## 1. System Architecture
+
+```text
+-------------------+                      +-----------------------+
+|  Obsidian Vault   |                      |     Blog Server       |
+|                   |                      |                       |
+| [Active Markdown] |  POST /api/posts     |  /api/posts Endpoint  |
+|         +         | -------------------> |           +           |
+|  Custom Plugin    | (Payload: JSON/MD)   | Frontmatter Validator |
+-------------------+                      |           +           |
+                                           | Wikilink Normalizer   |
+                                           |           +           |
+-------------------+                      | Write to `src/posts/` |
+| Self-Hosted       |  CouchDB Sync        |           +           |
+| LiveSync Server   | ===================> | 11ty Build Trigger    |
+-------------------+                      +-----------------------+
+```
+
+---
+
+## 2. Ingestion API Specification
+
+### Endpoint: `POST /api/posts`
+- **Headers:**
+  - `Content-Type: application/json`
+  - `Authorization: Bearer <API_SECRET>`
+- **Request Body:**
+  ```json
+  {
+    "slug": "sample-post",
+    "content": "---\ntitle: \"Sample Post Title\"\ndate: 2026-09-12\ntags: [\"#tag1\"]\n---\n\n## Content...",
+    "assets": [
+      {
+        "filename": "diagram.png",
+        "data": "<base64-encoded-image>"
+      }
+    ]
+  }
+  ```
+- **Response:**
+  - `200 OK`: `{"status": "published", "path": "/posts/sample-post/"}`
+  - `400 Bad Request`: `{"error": "Missing required frontmatter: title, date"}`
+
+---
+
+## 3. Obsidian Markdown Normalization Rules
+
+1. **Frontmatter Invariants:**
+   - Must contain `title`, `date`, `tags` (array), and optional `excerpt`, `readingTime`, `draft`.
+2. **Wikilinks Translation:**
+   - `[[article-slug]]` $\rightarrow$ `[article-slug](/posts/article-slug/)`
+   - `[[article-slug|Custom Label]]` $\rightarrow$ `[Custom Label](/posts/article-slug/)`
+3. **Callout Translation:**
+   - Obsidian callouts:
+     ```markdown
+     > [!NOTE]
+     > Informational notice
+     ```
+     Must be rendered with corresponding terminal alert styling.
+4. **Internal Attachments:**
+   - `![[screenshot.png]]` $\rightarrow$ translated to `![screenshot](/assets/images/posts/screenshot.png)` and written to `src/assets/images/posts/`.
+
+---
+
+## 4. Custom Obsidian Plugin Development
+
+The Obsidian plugin runs inside Obsidian desktop/mobile and interacts with the Obsidian API:
+1. Registers a ribbon icon (e.g. `send` or `terminal`) and a command: `Publish Current Note to Blog`.
+2. Reads the active file:
+   ```typescript
+   const activeFile = this.app.workspace.getActiveFile();
+   const content = await this.app.vault.read(activeFile);
+   ```
+3. Parses frontmatter using Obsidian's metadata cache:
+   ```typescript
+   const cache = this.app.metadataCache.getFileCache(activeFile);
+   ```
+4. Sends the HTTP payload to the configured blog server URL with the Bearer token.
+5. Displays an Obsidian `Notice('Published successfully to Blog!')`.
+
+---
+
+## 5. Self-Hosted LiveSync Compatibility
+
+If using CouchDB-based self-hosted LiveSync:
+- A local watcher or CouchDB change listener daemon can be configured to detect updates to notes marked with `published: true` or in a dedicated `Blog/` folder.
+- When an update event fires, the daemon pulls the latest revision from the CouchDB database, runs the normalization pipeline, and saves it to `src/posts/`.
@@ -1,5 +1,7 @@
 .git
 .gitignore
-Dockerfile
-docker-compose.yml
-*.md
+.agents
+node_modules
+_site
+sample-designs
+*.log
@@ -0,0 +1,4 @@
+# River Rooks Blog Environment Template
+# Copy to .env and adjust variables as needed:
+SITE_DOMAIN=riverrooks.dev
+SITE_URL=https://riverrooks.dev
@@ -0,0 +1,6 @@
+node_modules/
+_site/
+.cache/
+.DS_Store
+*.log
+.env
@@ -0,0 +1,97 @@
+# AGENTS.md: Technical Blog Agent Guidelines
+
+You are the dedicated Senior Pair Architect, Lead Developer, and Pedagogical Coding Mentor for this technical blog.
+
+---
+
+## 1. Core Invariant: User Content Sovereignty (Highest Priority)
+
+1. **User Edits Are Absolute Ground Truth:**
+   - The user's edits, custom writing, post titles, navigation labels, terminology, and naming choices are the absolute highest level of truth in this codebase.
+   - They strictly take precedence over any background content description, sample design mockup (`sample-designs/*`), skill instructions, or default boilerplate.
+
+2. **Strict Prohibition on Unsolicited Rewriting or Renaming:**
+   - You must **NEVER** revert, alter, overwrite, or substitute user-authored text, titles, navigation labels, tags, or naming conventions unless the user directly and explicitly requests that specific modification.
+   - Do not reintroduce removed text or names from prior mockups or commits.
+
+3. **Mandatory Clarification Gate:**
+   - If you notice a potential inconsistency, typo, or naming ambiguity in user-authored content, you must **NOT** unilaterally modify it.
+   - You must ask the user for specific clarification before altering any user-authored writing or naming.
+
+4. **Sample Designs Are Layout References Only:**
+   - Files in `sample-designs/` serve solely as visual, CSS, and structural layout references.
+   - Never extract or re-inject titles, domain names, service labels, or technical copy from `sample-designs/` into active templates or site data without explicit instruction.
+
+---
+
+## 2. Operating Persona & Responsibilities
+
+### 2.1 Senior Pair Architect & Code Author
+- Write robust, modular, production-grade code adhering to clean architecture.
+- Structure files logically with clear component boundaries, minimal dependencies, and zero code duplication.
+- Build static rendering workflows with **Eleventy (11ty)** and **Nunjucks (`.njk`)**.
+
+### 2.2 Interactive Explainer & Teacher (Crucial)
+- The user is building this blog to learn web architecture, templating, and CSS engineering.
+- **Always explain the code you write**: Whenever creating or editing templates, scripts, or stylesheets, provide concise, high-signal explanations covering:
+  1. **How it works:** The mechanical flow, syntax, and internal lifecycle (e.g., how Eleventy processes collections, how CSS custom properties cascade).
+  2. **Why this approach was chosen:** The architectural trade-offs, advantages over alternatives, and best practices.
+  3. **Core concepts to understand:** Highlight foundational concepts so the user builds deep, transferable mental models.
+
+### 2.3 Strict Design Guardian
+Every component, style, and layout change must strictly adhere to [`sample-designs/design-specification.md`](./sample-designs/design-specification.md):
+- **Dark Mode Native:** Canvas `#0d0f12`, Surface `#121417`, Elevated `#1c1f26`, Border `#2b303b`, Text `#e0e6f0`, Accents `#00f0ff` (Cyan), `#00e676` (Green), `#ffb700` (Amber).
+- **Hard Anti-Patterns:**
+  - **NO** glassmorphism (`backdrop-filter: blur()`).
+  - **NO** drop shadows or glows (`box-shadow`, `text-shadow`).
+  - **NO** gradients (linear or radial).
+  - **NO** spring animations or floaty delays.
+  - **NO** rounded bubbles (border-radius capped at 0px to 4px).
+- **Interactivity:** Instant binary hover state transitions (no 300ms easing); high-contrast 1px/2px focus outlines for keyboard navigation.
+- **Typography:** IBM Plex Mono / JetBrains Mono for UI elements and code blocks; Inter for body prose.
+
+### 2.4 Strict Test-Driven Development (TDD) & Adversarial Verification Mandate
+- **Test-First Development:** For all new features, custom filters, template helpers, frontmatter schemas, or configuration changes, write automated tests asserting expected behaviors and edge cases *before* or alongside implementing the code.
+- **Adversarial Mindset:** Actively design tests to break assumptions:
+  - Missing environment variables (e.g. unset `SITE_DOMAIN` must throw).
+  - Malformed frontmatter (missing titles, invalid dates, empty tags).
+  - Edge-case inputs to filters (empty strings, giant numbers, special characters).
+  - Design rule violations (asserting 0 instances of `backdrop-filter`, `box-shadow`, gradients, or floaty animations).
+  - Broken internal links and missing anchor tags in generated HTML.
+- **Verification Gate:** Every code change must be verified by running `npm test`. No feature or commit is considered complete unless 100% of the test suite passes.
+
+---
+
+## 3. Code Modularity & Isolation Guidelines
+
+### 3.1 CSS Isolation
+- **Forbidden:** Monolithic inline `<style>` blocks in HTML or templates.
+- **Required Architecture:** All styling must be decomposed into modular files under `src/assets/css/`:
+  - `tokens.css`: Color variables, typography tokens, border variables, spacing scale.
+  - `reset.css`: CSS reset, typography baseline, instant transition overrides.
+  - `layout.css`: `.tiling-layout`, `.split-grid`, `.article-workspace-grid`.
+  - `components/*.css`: Isolated per-component stylesheets (`global-bar.css`, `tiles.css`, `code-box.css`, `article.css`).
+
+### 3.2 Template Isolation (Nunjucks)
+- Use layout inheritance: `base.njk` defines the outer shell and head assets; specialized layouts (`post.njk`, `page.njk`) extend `base.njk`.
+- Reusable UI chunks must live in `src/_includes/partials/` (`global-bar.njk`, `hero-tile.njk`, `post-card.njk`, `code-box.njk`, `stats-sidebar.njk`).
+- Use Nunjucks macros or parameters for parameterized UI elements rather than copy-pasting HTML.
+
+---
+
+## 4. Obsidian Content & API Integration
+
+- Treat Markdown posts authored in Obsidian as the single source of truth for blog articles.
+- Ingestion pipeline must validate frontmatter schemas:
+  ```yaml
+  title: "Title of Post"
+  date: 2026-09-12
+  tags: ["#tag1", "#tag2"]
+  excerpt: "Short synopsis of article."
+  readingTime: "8 MIN READ"
+  draft: false
+  ```
+- Support Obsidian syntax conversion:
+  - Wikilinks `[[my-note|Custom Text]]` $\rightarrow$ `/posts/my-note/`.
+  - Obsidian callouts `> [!NOTE]` $\rightarrow$ semantic HTML alerts.
+  - Media/attachments $\rightarrow$ routed to static asset directories.
@@ -1,15 +1,35 @@
+# Stage 1: Build static site with Node
+FROM node:22-alpine AS builder
+
+WORKDIR /app
+
+# Dynamic build arguments for domain & full URL (required, no fallback)
+ARG SITE_DOMAIN
+ARG SITE_URL
+ENV SITE_DOMAIN=$SITE_DOMAIN
+ENV SITE_URL=$SITE_URL
+
+# Copy dependency definitions and install
+COPY package*.json ./
+RUN npm ci
+
+# Copy source files and compile static output via Eleventy
+COPY . .
+RUN npm run build
+
+# Stage 2: Serve static output via lightweight Alpine Nginx
 FROM nginx:1.25-alpine

 # Remove default Nginx configuration
 RUN rm /etc/nginx/conf.d/default.conf

-# Copy custom Nginx security & performance config
+# Copy custom Nginx security & clean-URL configuration
 COPY nginx.conf /etc/nginx/conf.d/default.conf

-# Copy static website files into Nginx server root
-COPY . /usr/share/nginx/html
+# Copy compiled static website files from builder stage
+COPY --from=builder /app/_site /usr/share/nginx/html

-# Expose standard HTTP port
+# Expose HTTP port
 EXPOSE 80

 CMD ["nginx", "-g", "daemon off;"]
@@ -0,0 +1,115 @@
+# River Rooks | Technical Publication & Systems Architecture Blog
+
+> Developer-centric, high-signal, low-noise personal technical blog and homelab documentation site.
+
+Inspired by native terminal environments, modal text editors (Zed, Ghostty), and tiling window managers, this site prioritizes raw performance, keyboard navigability, information density, and structured craftsmanship over generic marketing aesthetics.
+
+---
+
+## 1. Architectural Vision & Pillars
+
+### 1.1 Static Generation via Eleventy (11ty)
+- **Engine:** Fast, pre-rendered static HTML and minimal client-side runtime using **Eleventy** and **Nunjucks (`.njk`)** templates.
+- **Performance:** Instant time-to-first-byte (TTFB), zero client-side framework bloat, and pure static asset delivery via Alpine Nginx.
+- **Syntax Highlighting & Code Blocks:** Terminal-styled code blocks with title bars displaying filenames, language tags, and high-contrast monospace code.
+
+### 1.2 Dynamic Obsidian Publishing Pipeline
+- **Seamless Authoring:** Author and edit technical dispatches, CTF write-ups, and homelab notes directly inside an **Obsidian** vault.
+- **Custom Ingestion API:** A dedicated server-side endpoint (`POST /api/posts`) accepting markdown payloads and assets, paired with a custom Obsidian plugin for one-click publishing.
+- **LiveSync Integration:** Architectural support for syncing notes from a self-hosted Obsidian LiveSync (CouchDB) instance.
+- **Content Normalization:** Translates Obsidian wikilinks (`[[slug|Title]]`), callouts (`> [!NOTE]`), and asset references into standard web formats during ingestion and build time.
+
+### 1.3 Strict CSS Isolation & Reusable Templating
+- **No Monolithic Inlines:** Replaces repetitive inline `<style>` tags with a modular CSS token and component architecture.
+- **Design Tokens:** Centralized CSS custom properties (`--bg-canvas`, `--bg-surface`, `--border-color`, `--accent-cyan`, etc.) for consistent dark-mode native styling.
+- **DRY Layouts & Partials:** Reusable Nunjucks components for global navigation (`global-bar`), hero tiles (`hero-tile`), split cards, and article workspace layouts (`article-workspace-grid`).
+
+### 1.4 AI Pair Architect & Pedagogical Explainer
+- **Interactive Learning:** The workspace includes customized Antigravity agent configurations (`.agents/` and `AGENTS.md`) that pair-program with the author, architecting solutions while clearly explaining *how* and *why* code is built.
+
+---
+
+## 2. Strict Design Specification
+
+Adhering to the principles in [`sample-designs/design-specification.md`](./sample-designs/design-specification.md):
+
+| Rule | Constraint |
+| :--- | :--- |
+| **Color Scheme** | Dark-mode native only. Canvas: `#0d0f12`, Surface: `#121417`, Elevated: `#1c1f26`, Borders: `#2b303b`. |
+| **Accents** | High-signal terminal accents used sparingly: Cyan (`#00f0ff`), Green (`#00e676`), Amber (`#ffb700`). |
+| **Borders & Radius** | Crisp 1px solid borders. Zero to 4px maximum border-radius (sharp corners preferred). |
+| **Strict Anti-Patterns** | **NO** glassmorphism (`backdrop-filter`), **NO** drop shadows or glows, **NO** gradients, **NO** spring animations. |
+| **Typography** | Monospace for UI & code (`IBM Plex Mono`, `JetBrains Mono`); clean sans-serif for body prose (`Inter`). |
+| **Interactivity** | Instant binary hover snaps (no slow fade transitions); high-contrast focus outlines for keyboard navigation. |
+
+---
+
+## 3. Project Directory Map
+
+```text
+.
+├── .agents/                        # Antigravity agent configurations & customizations
+│   ├── rules/
+│   │   └── blog-system.md          # Architectural constraints, CSS/template isolation & explainer mode
+│   └── skills/
+│       ├── eleventy-tiling-blog/   # Runbook & recipes for Eleventy builds and component extraction
+│       └── obsidian-sync/          # Runbook & API contracts for Obsidian publishing & plugin sync
+├── sample-designs/                 # Canonical HTML/CSS prototypes & design specification
+│   ├── article-tiling-firmware.html
+│   ├── blog-tiling-lead.html
+│   ├── design-specification.md
+│   └── service-gateway-tiling.html
+├── src/                            # Eleventy source directory (scaffolded in Phase 2)
+│   ├── _data/                      # Global site metadata, navigation, telemetry data
+│   ├── _includes/
+│   │   ├── layouts/                # Base, post, and page templates
+│   │   └── partials/               # Global bar, hero tile, card, code box, sidebar
+│   ├── assets/
+│   │   ├── css/                    # Modular CSS (tokens, reset, layout, components)
+│   │   └── fonts/                  # Self-hosted monospace & prose webfonts
+│   └── posts/                      # Markdown content ingested from Obsidian
+├── .eleventy.js                    # Eleventy configuration, markdown-it plugins, and shortcodes
+├── package.json                    # Project dependencies & build scripts
+├── Dockerfile                      # Alpine Nginx container definition
+├── docker-compose.yml              # Multi-container orchestration (web + ingestion API)
+└── AGENTS.md                       # Project-level agent instructions & pair programming guide
+```
+
+---
+
+## 4. Development & Build Roadmap
+
+- [x] **Phase 1: Foundation & Agent Customizations**
+  - Establish `README.md` architectural blueprint.
+  - Setup `.agents/` workspace rules, skills, and root `AGENTS.md`.
+- [ ] **Phase 2: Eleventy Scaffolding & Modularization**
+  - Initialize Node/npm environment and configure `.eleventy.js`.
+  - Extract design tokens, layout styles, and components into `src/assets/css/`.
+  - Build reusable Nunjucks layouts and partials modeled on `sample-designs/`.
+- [ ] **Phase 3: Dynamic Obsidian Ingestion & Plugin**
+  - Implement the server-side note ingestion endpoint (`POST /api/posts`).
+  - Develop the custom Obsidian plugin for publishing notes and frontmatter.
+  - Integrate wikilink and callout transformation filters.
+- [ ] **Phase 4: Containerization & Deployment**
+  - Verify static build outputs in `_site/`.
+  - Update Dockerfile and `docker-compose.yml` for unified production serving.
+
+---
+
+## 5. Development Setup
+
+*(To be initialized during Phase 2)*
+
+```bash
+# Install dependencies
+npm install
+
+# Start Eleventy local development server with hot-reload
+npm run dev
+
+# Compile static assets for production
+npm run build
+
+# Run via Docker Compose
+docker compose up --build
+```
@@ -5,9 +5,15 @@ services:
    build:
      context: .
      dockerfile: Dockerfile
+      args:
+        SITE_DOMAIN: ${SITE_DOMAIN:?Error: SITE_DOMAIN is not set. Please define SITE_DOMAIN in .env}
+        SITE_URL: ${SITE_URL:-https://${SITE_DOMAIN}}
    image: river-rooks-blog:latest
    container_name: river_rooks_web
    restart: unless-stopped
+    environment:
+      - SITE_DOMAIN=${SITE_DOMAIN:?Error: SITE_DOMAIN is not set. Please define SITE_DOMAIN in .env}
+      - SITE_URL=${SITE_URL:-https://${SITE_DOMAIN}}
    ports:
      - "8080:80"
    healthcheck:
@@ -0,0 +1,76 @@
+import syntaxHighlight from "@11ty/eleventy-plugin-syntaxhighlight";
+import markdownIt from "markdown-it";
+import markdownItAnchor from "markdown-it-anchor";
+import { filters } from "./src/_filters/index.js";
+
+export default function (eleventyConfig) {
+  // 1. Static Asset Passthrough Copy
+  eleventyConfig.addPassthroughCopy({ "src/assets": "assets" });
+
+  // 2. Syntax Highlighting Plugin
+  eleventyConfig.addPlugin(syntaxHighlight);
+
+  // 3. Markdown-It Library Customization
+  const markdownOptions = {
+    html: true,
+    breaks: false,
+    linkify: true
+  };
+
+  const markdownLib = markdownIt(markdownOptions).use(markdownItAnchor, {
+    permalink: markdownItAnchor.permalink.headerLink({
+      safariReaderFix: true
+    }),
+    slugify: (s) =>
+      s
+        .trim()
+        .toLowerCase()
+        .replace(/[^a-z0-9 -]/g, "")
+        .replace(/\s+/g, "-")
+        .replace(/-+/g, "-")
+  });
+
+  eleventyConfig.setLibrary("md", markdownLib);
+
+  // 4. Custom Filters (imported from modular src/_filters/index.js)
+  for (const [name, fn] of Object.entries(filters)) {
+    eleventyConfig.addFilter(name, fn);
+  }
+
+  // 5. Custom Collections
+  // Chronological blog posts collection
+  eleventyConfig.addCollection("posts", (collectionApi) => {
+    return collectionApi
+      .getFilteredByGlob("src/posts/*.md")
+      .filter((post) => !post.data.draft)
+      .sort((a, b) => b.date - a.date);
+  });
+
+  // Dynamic Tag List Collection across all posts
+  eleventyConfig.addCollection("tagList", (collectionApi) => {
+    const tagSet = new Set();
+    collectionApi.getFilteredByGlob("src/posts/*.md").forEach((item) => {
+      if ("tags" in item.data) {
+        let tags = item.data.tags;
+        if (typeof tags === "string") tags = [tags];
+        for (const tag of tags) {
+          const cleanTag = tag.replace(/^#/, "");
+          tagSet.add(cleanTag);
+        }
+      }
+    });
+    return [...tagSet].sort();
+  });
+
+  return {
+    dir: {
+      input: "src",
+      includes: "_includes",
+      data: "_data",
+      output: "_site"
+    },
+    templateFormats: ["njk", "md", "html"],
+    htmlTemplateEngine: "njk",
+    markdownTemplateEngine: "njk"
+  };
+}
@@ -0,0 +1,30 @@
+server {
+    listen 80;
+    server_name localhost;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # Gzip Compression
+    gzip on;
+    gzip_vary on;
+    gzip_min_length 1024;
+    gzip_proxied any;
+    gzip_types text/plain text/css text/xml application/json application/javascript application/rss+xml image/svg+xml;
+
+    # Security Headers
+    add_header X-Content-Type-Options "nosniff" always;
+    add_header X-Frame-Options "DENY" always;
+    add_header X-XSS-Protection "1; mode=block" always;
+    add_header Referrer-Policy "strict-origin-when-cross-origin" always;
+
+    # Clean URL Routing
+    location / {
+        try_files $uri $uri/ $uri.html =404;
+    }
+
+    # Static Assets Caching
+    location /assets/ {
+        expires 30d;
+        add_header Cache-Control "public, max-age=2592000, immutable";
+    }
+}
@@ -0,0 +1,30 @@
+{
+  "name": "river-rooks-blog",
+  "version": "1.0.0",
+  "description": "Developer-centric personal technical publication and systems architecture blog",
+  "type": "module",
+  "main": "eleventy.config.js",
+  "scripts": {
+    "dev": "eleventy --serve --watch",
+    "build": "eleventy",
+    "test": "node --test 'test/**/*.test.js'",
+    "clean": "rm -rf _site",
+    "start": "npm run dev"
+  },
+  "keywords": [
+    "eleventy",
+    "blog",
+    "tiling",
+    "nunjucks",
+    "obsidian"
+  ],
+  "author": "River Rooks",
+  "license": "MIT",
+  "devDependencies": {
+    "@11ty/eleventy": "^3.1.6",
+    "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.2",
+    "luxon": "^3.5.0",
+    "markdown-it": "^14.1.0",
+    "markdown-it-anchor": "^9.2.0"
+  }
+}
@@ -0,0 +1,118 @@
+import fs from "node:fs";
+import path from "node:path";
+
+// Load .env variables into process.env if SITE_DOMAIN is not already defined
+if (!process.env.SITE_DOMAIN) {
+  try {
+    const envPath = path.resolve(process.cwd(), ".env");
+    if (fs.existsSync(envPath)) {
+      const envContent = fs.readFileSync(envPath, "utf-8");
+      for (const line of envContent.split("\n")) {
+        const trimmed = line.trim();
+        if (trimmed && !trimmed.startsWith("#") && trimmed.includes("=")) {
+          const [key, ...vals] = trimmed.split("=");
+          const value = vals.join("=").trim().replace(/^["']|["']$/g, "");
+          if (!process.env[key.trim()]) {
+            process.env[key.trim()] = value;
+          }
+        }
+      }
+    }
+  } catch (e) {
+    // Silent fallback
+  }
+}
+
+const siteDomain = process.env.SITE_DOMAIN;
+if (!siteDomain) {
+  throw new Error(
+    "\n=======================================================================\n" +
+    "FATAL CONFIGURATION ERROR: SITE_DOMAIN environment variable is not set.\n" +
+    "The site domain must be explicitly defined in your .env file or environment.\n" +
+    "Example in .env:\n" +
+    "  SITE_DOMAIN=riverrooks.dev\n" +
+    "=======================================================================\n"
+  );
+}
+const siteUrl = process.env.SITE_URL || `https://${siteDomain}`;
+
+export default {
+  domain: siteDomain,
+  url: siteUrl,
+  name: "River Rooks",
+  title: "River Rooks | Homelab Gateway",
+  description: "CTF Writeups, Techincal Publucations, Homelab Journey, and Development Projects.",
+  status: "SYSTEMS NOMINAL",
+  author: "River Rooks",
+  nav: [
+    {
+      label: "Home",
+      url: "/"
+    },
+    {
+      label: "Dispatches",
+      url: "/dispatches/"
+    },
+    {
+      label: "Gitea",
+      url: `https://git.${siteDomain}`,
+      external: true
+    },
+    {
+      label: "RSS Feed",
+      url: "/feed.xml"
+    }
+  ],
+  services: [
+    {
+      name: "Gitea",
+      url: `https://git.${siteDomain}`,
+      tag: `git.${siteDomain}:2222`,
+      desc: "Self-hosted Git code repositories."
+    },
+    {
+      name: "CyberChef",
+      url: `https://chef.${siteDomain}`,
+      tag: `chef.${siteDomain}:443`,
+      desc: "Industry tool for analyzing and decoding data."
+    },
+    {
+      name: "Aperisolve",
+      url: `https://aperisolve.${siteDomain}`,
+      tag: `aperisolve.${siteDomain}:443`,
+      desc: "Basic image steganography suite."
+    },
+    {
+      name: "Streams",
+      url: `https://streams.${siteDomain}`,
+      tag: `streams.${siteDomain}:443`,
+      desc: "Self-hosted Steam aggregator for wathing live sports."
+    },
+    {
+      name: "Calibre",
+      url: `https://library.${siteDomain}`,
+      tag: `books.${siteDomain}:443`,
+      desc: `Calibre web frontend for managing and reading eBooks.`
+    }
+  ],
+  topics: [
+    {
+      title: "Systems Engineering",
+      slug: "systems",
+      desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+      badge: "TRACK: SYSTEMS"
+    },
+    {
+      title: "Security Research",
+      slug: "security",
+      desc: "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+      badge: "TRACK: SECURITY"
+    },
+    {
+      title: "Homelab Infrastructure",
+      slug: "homelab",
+      desc: "Ut enim ad minim veniam, quis nostrud exercitation ullamco.",
+      badge: "TRACK: INFRA"
+    }
+  ]
+};
@@ -0,0 +1,74 @@
+import { DateTime } from "luxon";
+
+/**
+ * Custom Eleventy Filters for River Rooks Blog
+ */
+
+export const postDate = (dateObj) => {
+  if (!dateObj) return "";
+  const date = typeof dateObj === "string" ? new Date(dateObj) : dateObj;
+  const dt = DateTime.fromJSDate(date, { zone: "utc" });
+  if (!dt.isValid) return "";
+  return dt.toFormat("LLL dd, yyyy").toUpperCase();
+};
+
+export const isoDate = (dateObj) => {
+  if (!dateObj) return "";
+  const date = typeof dateObj === "string" ? new Date(dateObj) : dateObj;
+  const dt = DateTime.fromJSDate(date, { zone: "utc" });
+  if (!dt.isValid) return "";
+  return dt.toISODate() || "";
+};
+
+export const limit = (arr, count) => {
+  if (!Array.isArray(arr)) return [];
+  if (count <= 0) return [];
+  return arr.slice(0, count);
+};
+
+export const filterTagList = (tags) => {
+  const internalTags = ["all", "nav", "post", "posts"];
+  if (!tags) return [];
+  const tagArray = Array.isArray(tags) ? tags : [tags];
+  return tagArray.filter((tag) => {
+    if (typeof tag !== "string") return false;
+    const clean = tag.replace(/^#/, "").toLowerCase();
+    return !internalTags.includes(clean);
+  });
+};
+
+export const readingTime = (text, frontmatterTime) => {
+  if (frontmatterTime) return frontmatterTime;
+  if (!text || typeof text !== "string") return "1 MIN READ";
+  const clean = text.replace(/<[^>]+>/g, "").trim();
+  if (!clean) return "1 MIN READ";
+  const words = clean.split(/\s+/).filter(Boolean).length;
+  const minutes = Math.max(1, Math.ceil(words / 200));
+  return `${minutes} MIN READ`;
+};
+
+export const extractHeadings = (htmlContent) => {
+  if (!htmlContent || typeof htmlContent !== "string") return [];
+  const headingRegex = /<h([23])\s+id="([^"]+)"[^>]*>(.*?)<\/h\1>/gis;
+  const headings = [];
+  let match;
+  while ((match = headingRegex.exec(htmlContent)) !== null) {
+    headings.push({
+      level: parseInt(match[1], 10),
+      id: match[2],
+      title: match[3].replace(/<[^>]+>/g, "").trim()
+    });
+  }
+  return headings;
+};
+
+export const filters = {
+  postDate,
+  isoDate,
+  limit,
+  filterTagList,
+  readingTime,
+  extractHeadings
+};
+
+export default filters;
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{{ title | default(site.title) }}</title>
+  <meta name="description" content="{{ excerpt | default(site.description) }}">
+  
+  <!-- Webfonts: IBM Plex Mono, JetBrains Mono, Inter -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,700;1,400&family=Inter:ital,wght@0,400;0,500;0,700;1,400&family=JetBrains+Mono:ital,wght@0,400;0,500;1,400&display=swap" rel="stylesheet">
+  
+  <!-- Modular Bundled Stylesheet -->
+  <link rel="stylesheet" href="/assets/css/main.css">
+  
+  {% block head %}{% endblock %}
+</head>
+<body>
+  <div class="tiling-layout">
+    {% include "partials/global-bar.njk" %}
+
+    <main id="main-content">
+      {% block content %}
+        {{ content | safe }}
+      {% endblock %}
+    </main>
+
+    {% include "partials/footer.njk" %}
+  </div>
+
+  {% block scripts %}{% endblock %}
+</body>
+</html>
@@ -0,0 +1,7 @@
+{% extends "layouts/base.njk" %}
+
+{% block content %}
+<div class="page-container">
+  {{ content | safe }}
+</div>
+{% endblock %}
@@ -0,0 +1,93 @@
+{% extends "layouts/base.njk" %}
+
+{% block content %}
+<div class="article-workspace-grid">
+  <!-- Left Sticky Sidebar: Document Outline & Telemetry -->
+  <aside class="article-sidebar" aria-label="Article Sidebar">
+    <!-- Dynamic Table of Contents -->
+    {% set headings = content | extractHeadings %}
+    {% if headings.length > 0 %}
+      <div class="sidebar-tile">
+        <div class="sidebar-heading">
+          <span>DOCUMENT OUTLINE</span>
+          <span style="color: var(--accent-cyan);">[{{ headings.length }}]</span>
+        </div>
+        <nav class="toc-nav" aria-label="Table of Contents">
+          {% for h in headings %}
+            <a href="#{{ h.id }}" class="toc-link {% if h.level == 3 %}toc-sub{% endif %}">
+              {{ h.title }}
+            </a>
+          {% endfor %}
+        </nav>
+      </div>
+    {% endif %}
+
+    <!-- Article Telemetry Tile -->
+    <div class="sidebar-tile">
+      <div class="sidebar-heading">DISPATCH TELEMETRY</div>
+      <div class="sidebar-stats-box" style="padding: 0; background: transparent; border: none;">
+        <div class="stat-row">
+          <span>PUBLISHED:</span>
+          <span class="stat-val">{{ date | postDate }}</span>
+        </div>
+        <div class="stat-row">
+          <span>DURATION:</span>
+          <span class="stat-val">{{ content | readingTime(readingTime) }}</span>
+        </div>
+        {% if difficulty %}
+          <div class="stat-row">
+            <span>DIFFICULTY:</span>
+            <span class="stat-val" style="color: var(--accent-amber);">{{ difficulty }}</span>
+          </div>
+        {% endif %}
+      </div>
+
+      <div style="padding-top: 10px; border-top: var(--border-width) solid var(--border-color);">
+        <div style="font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); margin-bottom: 6px;">TOPIC TAGS:</div>
+        <div class="tag-cluster">
+          {% for tag in tags | filterTagList %}
+            <span class="tag-chip">#{{ tag }}</span>
+          {% endfor %}
+        </div>
+      </div>
+
+      <div style="padding-top: 10px; border-top: var(--border-width) solid var(--border-color);">
+        <a href="/dispatches/" class="filter-tag-btn" style="width: 100%; justify-content: center;">
+          &larr; Return to Dispatches
+        </a>
+      </div>
+    </div>
+  </aside>
+
+  <!-- Right Main Article Workspace -->
+  <article class="article-tile" aria-labelledby="article-title">
+    <header class="article-header-block">
+      <nav class="article-breadcrumbs" aria-label="Breadcrumb">
+        <a href="/dispatches/">~/NOTES</a>
+        <span>/</span>
+        <span>{{ (tags | filterTagList)[0] | default('DISPATCHES') | upper }}</span>
+        <span>/</span>
+        <span style="color: var(--accent-cyan);">{{ page.fileSlug | upper }}.MD</span>
+      </nav>
+
+      <h1 id="article-title" class="article-main-title">{{ title }}</h1>
+
+      <div class="article-meta-row">
+        <span class="meta-item">
+          <time datetime="{{ date | isoDate }}">{{ date | postDate }}</time>
+        </span>
+        <span>&bull;</span>
+        <span class="meta-item">{{ content | readingTime(readingTime) }}</span>
+        {% if difficulty %}
+          <span>&bull;</span>
+          <span class="meta-item" style="color: var(--accent-amber);">DIFFICULTY: {{ difficulty }}</span>
+        {% endif %}
+      </div>
+    </header>
+
+    <div class="markdown-prose">
+      {{ content | safe }}
+    </div>
+  </article>
+</div>
+{% endblock %}
@@ -0,0 +1,30 @@
+{# 
+  Reusable Tile Container Macro (macros/tile.njk)
+  Renders a terminal pane with header, title, meta pill, and custom body slot.
+  Usage:
+    {% import "macros/tile.njk" as ui %}
+    {% call ui.tile(title="STATISTICS", meta="STATIC HTML") %}
+      <p>Inside tile</p>
+    {% endcall %}
+#}
+
+{% macro tile(title="", meta="", class="", id="") %}
+<section class="tile {{ class }}" {% if id %}id="{{ id }}"{% endif %}>
+  {% if title or meta %}
+  <header class="tile-header">
+    {% if title %}
+    <div class="tile-title">
+      <span class="status-indicator"></span>
+      {{ title }}
+    </div>
+    {% endif %}
+    {% if meta %}
+    <span class="tile-meta">{{ meta }}</span>
+    {% endif %}
+  </header>
+  {% endif %}
+  <div class="tile-content">
+    {{ caller() }}
+  </div>
+</section>
+{% endmacro %}
@@ -0,0 +1,61 @@
+{% set featured = null %}
+{% for p in collections.posts %}
+  {% if p.data.featured and not featured %}
+    {% set featured = p %}
+  {% endif %}
+{% endfor %}
+{% if not featured and collections.posts.length > 0 %}
+  {% set featured = collections.posts[0] %}
+{% endif %}
+
+{% if featured %}
+<section class="tile" aria-label="Featured Technical Dispatch">
+  <header class="tile-header">
+    <div class="tile-title">
+      <span class="status-indicator"></span>
+      FEATURED DISPATCH
+    </div>
+    <span class="tile-meta">{{ (featured.data.tags | filterTagList)[0] | default('SYSTEMS') | upper }} &bull; {{ featured.templateContent | readingTime(featured.data.readingTime) }}</span>
+  </header>
+
+  <div class="featured-card-body">
+    <div class="featured-badge-row">
+      <span class="badge-pinned">[FEATURED DEEP DIVE]</span>
+      <time datetime="{{ featured.date | isoDate }}">{{ featured.date | postDate }}</time>
+    </div>
+
+    <h2 style="margin: 0; font-size: inherit;">
+      <a href="{{ featured.url }}" class="featured-article-title">{{ featured.data.title }}</a>
+    </h2>
+
+    <p class="featured-prose">
+      {{ featured.data.excerpt }}
+    </p>
+
+    <!-- Terminal Code Preview Snippet -->
+    <div class="terminal-code-box">
+      <div class="code-titlebar">
+        <span class="code-title">
+          <span style="color: var(--accent-cyan);">&gt;</span>
+          <span>init_cluster.sh</span>
+        </span>
+        <span>POSIX sh</span>
+      </div>
+      <div class="code-content">
+        <pre><code class="language-bash"># System initialization and node health check
+./cluster.sh --verify-nodes
+curl -s https://api.local/healthz | jq .status</code></pre>
+      </div>
+    </div>
+
+    <div class="featured-cta-row">
+      <div class="tag-cluster">
+        {% for tag in featured.data.tags | filterTagList %}
+          <span class="tag-chip">#{{ tag }}</span>
+        {% endfor %}
+      </div>
+      <a href="{{ featured.url }}" class="cta-button">READ FULL WRITEUP &rarr;</a>
+    </div>
+  </div>
+</section>
+{% endif %}
@@ -0,0 +1,13 @@
+<footer class="footer-tile" aria-label="Global Footer">
+  <div class="footer-left">
+    <span class="status-indicator"></span>
+    <span>RUNTIME: ELEVENTY 3.x STATIC</span>
+    <span>&bull;</span>
+    <span>THEME: NATIVE TERMINAL DARK</span>
+  </div>
+
+  <div class="footer-right">
+    <span>&copy; {{ currentYear or "2026" }} {{ site.author }}</span>
+    <a href="https://git.{{ site.domain }}" target="_blank" rel="noopener noreferrer" class="footer-link">Source Forge ↗</a>
+  </div>
+</footer>
@@ -0,0 +1,16 @@
+<header class="global-bar">
+  <a href="/" class="brand-group" aria-label="{{ site.name }} Home">
+    <span class="status-indicator"></span>
+    <span>{{ site.name }}</span>
+  </a>
+
+  <nav class="bar-nav" aria-label="Quick Navigation">
+    {% for item in site.nav %}
+      <a href="{{ item.url }}" 
+         class="bar-link {% if item.external %}external{% endif %} {% if page.url == item.url or (item.url != '/' and page.url.startsWith(item.url)) %}active{% endif %}"
+         {% if item.external %}target="_blank" rel="noopener noreferrer"{% endif %}>
+        {% if page.url == item.url %}&gt; {% endif %}{{ item.label }}
+      </a>
+    {% endfor %}
+  </nav>
+</header>
@@ -0,0 +1,24 @@
+<section class="hero-tile" aria-label="Blog Mission & Overview">
+  <div class="hero-pretitle">TECHNICAL PUBLICATION REPOSITORY &bull; ~/NOTES/INDEX.MD</div>
+  <h1 class="hero-main-title">{{ heroTitle or site.description }}</h1>
+  <p class="hero-landing-text">
+    {{ heroText or "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation." }}
+  </p>
+
+  <div class="filter-pills-row" aria-label="Topic Filters">
+    <a href="/dispatches/" class="filter-tag-btn {% if not currentTag %}active{% endif %}">
+      [All Dispatches ({{ collections.posts.length }})]
+    </a>
+    {% for tag in collections.tagList %}
+      {% set tagCount = 0 %}
+      {% for post in collections.posts %}
+        {% if tag in (post.data.tags or []) %}
+          {% set tagCount = tagCount + 1 %}
+        {% endif %}
+      {% endfor %}
+      <span class="filter-tag-btn {% if currentTag == tag %}active{% endif %}">
+        [#{{ tag }}{% if tagCount > 0 %} ({{ tagCount }}){% endif %}]
+      </span>
+    {% endfor %}
+  </div>
+</section>
@@ -0,0 +1,27 @@
+<article class="feed-card" aria-labelledby="post-title-{{ post.fileSlug }}">
+  <div class="feed-meta-row">
+    <time class="feed-date" datetime="{{ post.date | isoDate }}">
+      {{ post.date | postDate }}
+    </time>
+    <span>{{ post.templateContent | readingTime(post.data.readingTime) }}</span>
+  </div>
+
+  <h3 id="post-title-{{ post.fileSlug }}">
+    <a href="{{ post.url }}" class="feed-heading">{{ post.data.title }}</a>
+  </h3>
+
+  {% if post.data.excerpt %}
+    <p class="feed-excerpt">{{ post.data.excerpt }}</p>
+  {% endif %}
+
+  <div class="feed-tags-row">
+    <div class="tag-cluster">
+      {% for tag in post.data.tags | filterTagList %}
+        <span class="tag-chip">#{{ tag }}</span>
+      {% endfor %}
+    </div>
+    {% if post.data.difficulty %}
+      <span>DIFFICULTY: {{ post.data.difficulty }}</span>
+    {% endif %}
+  </div>
+</article>
@@ -0,0 +1,54 @@
+<aside aria-label="Archive Statistics & Topics" style="display: flex; flex-direction: column; gap: var(--tile-gap);">
+  <!-- Archive Statistics Tile -->
+  <section class="tile" aria-label="Archive Telemetry">
+    <header class="tile-header">
+      <div class="tile-title">
+        <span class="status-indicator"></span>
+        ARCHIVE TELEMETRY
+      </div>
+      <span class="tile-meta">STATIC HTML</span>
+    </header>
+
+    <div class="sidebar-stats-box">
+      <div class="stat-row">
+        <span>TOTAL DISPATCHES:</span>
+        <span class="stat-val">{{ collections.posts.length }} PUBLISHED</span>
+      </div>
+      <div class="stat-row">
+        <span>TOPIC DOMAINS:</span>
+        <span class="stat-val">{{ collections.tagList.length }} CATEGORIES</span>
+      </div>
+      <div class="stat-row">
+        <span>CORE SPECIFICATION:</span>
+        <span class="stat-val">{{ site.systemSpec }}</span>
+      </div>
+      <div class="stat-row">
+        <span>OPERATIONAL STATUS:</span>
+        <span class="stat-val" style="color: var(--accent-green);">{{ site.status }}</span>
+      </div>
+    </div>
+  </section>
+
+  <!-- Curated Topic Tracks Tile -->
+  <section class="tile" aria-label="Curated Topic Tracks">
+    <header class="tile-header">
+      <div class="tile-title">
+        <span class="status-indicator"></span>
+        TOPIC TRACKS
+      </div>
+      <span class="tile-meta">CURATED PATHS</span>
+    </header>
+
+    <div class="tile-content">
+      {% for topic in site.topics %}
+        <div class="topic-track-item">
+          <div style="display: flex; justify-content: space-between; align-items: baseline;">
+            <span class="topic-track-title">{{ topic.title }}</span>
+            <span style="font-family: var(--font-mono); font-size: 0.68rem; color: var(--accent-cyan);">{{ topic.badge }}</span>
+          </div>
+          <p class="topic-track-desc">{{ topic.desc }}</p>
+        </div>
+      {% endfor %}
+    </div>
+  </section>
+</aside>
@@ -0,0 +1,298 @@
+/* ==========================================================================
+   Article Workspace & Markdown Prose (components/article.css)
+   ========================================================================== */
+
+/* Left Sticky Sidebar */
+.article-sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: var(--tile-gap);
+  position: sticky;
+  top: 16px;
+}
+
+.sidebar-tile {
+  background-color: var(--bg-surface);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--border-radius);
+  padding: 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.sidebar-heading {
+  font-family: var(--font-mono);
+  font-size: 0.82rem;
+  font-weight: 700;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  border-bottom: var(--border-width) solid var(--border-color);
+  padding-bottom: 8px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+/* Document Table of Contents */
+.toc-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-family: var(--font-mono);
+  font-size: 0.78rem;
+}
+
+.toc-link {
+  color: var(--text-muted);
+  text-decoration: none;
+  padding: 4px 6px;
+  border-radius: var(--border-radius-sm);
+  line-height: 1.4;
+  display: block;
+}
+
+.toc-link:hover {
+  background-color: var(--bg-elevated);
+  color: var(--accent-cyan);
+}
+
+.toc-link.active {
+  color: var(--accent-cyan);
+  background-color: var(--bg-canvas);
+  border-left: 2px solid var(--accent-cyan);
+  font-weight: 700;
+}
+
+.toc-sub {
+  padding-left: 16px;
+  color: var(--text-muted);
+  font-size: 0.74rem;
+}
+
+/* Main Article Reading Container */
+.article-tile {
+  background-color: var(--bg-surface);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--border-radius);
+  padding: 36px 40px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+@media (max-width: 600px) {
+  .article-tile {
+    padding: 24px 18px;
+  }
+}
+
+/* Article Header */
+.article-header-block {
+  border-bottom: var(--border-width) solid var(--border-color);
+  padding-bottom: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.article-breadcrumbs {
+  font-family: var(--font-mono);
+  font-size: 0.78rem;
+  color: var(--text-muted);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.article-breadcrumbs a {
+  color: var(--text-muted);
+  text-decoration: none;
+}
+
+.article-breadcrumbs a:hover {
+  color: var(--accent-cyan);
+}
+
+.article-main-title {
+  font-family: var(--font-mono);
+  font-size: 2.2rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  letter-spacing: -0.02em;
+  line-height: 1.25;
+}
+
+@media (max-width: 768px) {
+  .article-main-title {
+    font-size: 1.7rem;
+  }
+}
+
+.article-meta-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 14px;
+  font-family: var(--font-mono);
+  font-size: 0.8rem;
+  color: var(--text-muted);
+}
+
+.meta-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+/* Markdown Prose Hierarchy */
+.markdown-prose {
+  max-width: var(--prose-max-width);
+  font-size: 1.02rem;
+  color: var(--text-primary);
+  line-height: 1.7;
+}
+
+.markdown-prose p {
+  margin-bottom: 18px;
+}
+
+.markdown-prose h2 {
+  font-family: var(--font-mono);
+  font-size: 1.45rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 36px 0 16px 0;
+  padding-bottom: 8px;
+  border-bottom: var(--border-width) solid var(--border-color);
+  letter-spacing: -0.01em;
+}
+
+.markdown-prose h3 {
+  font-family: var(--font-mono);
+  font-size: 1.15rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 28px 0 12px 0;
+}
+
+.markdown-prose a {
+  color: var(--accent-cyan);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.markdown-prose a:hover {
+  background-color: var(--accent-cyan);
+  color: var(--bg-canvas);
+  text-decoration: none;
+}
+
+/* Inline Code */
+.markdown-prose code:not(pre code) {
+  font-family: var(--font-code);
+  font-size: 0.88rem;
+  background-color: var(--bg-canvas);
+  border: var(--border-width) solid var(--border-color);
+  padding: 2px 6px;
+  border-radius: var(--border-radius-xs);
+  color: var(--accent-cyan);
+}
+
+/* Keyboard Shortcut Hints */
+kbd {
+  font-family: var(--font-mono);
+  font-size: 0.78rem;
+  background-color: var(--bg-surface);
+  border: var(--border-width) solid var(--border-color);
+  padding: 2px 6px;
+  border-radius: var(--border-radius-xs);
+  color: var(--text-primary);
+  box-shadow: none;
+}
+
+/* Markdown Callouts */
+.markdown-callout {
+  margin: 20px 0;
+  padding: 14px 18px;
+  border-radius: var(--border-radius-sm);
+  border: var(--border-width) solid var(--border-color);
+  background-color: var(--bg-canvas);
+  font-size: 0.94rem;
+  line-height: 1.6;
+}
+
+.callout-note {
+  border-left: 4px solid var(--accent-cyan);
+}
+
+.callout-warning {
+  border-left: 4px solid var(--accent-amber);
+}
+
+.callout-title {
+  font-family: var(--font-mono);
+  font-weight: 700;
+  font-size: 0.82rem;
+  margin-bottom: 6px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.callout-note .callout-title {
+  color: var(--accent-cyan);
+}
+
+.callout-warning .callout-title {
+  color: var(--accent-amber);
+}
+
+/* Monospace Tables */
+.table-container {
+  width: 100%;
+  overflow-x: auto;
+  margin: 22px 0;
+}
+
+.markdown-prose table,
+.markdown-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.86rem;
+  font-family: var(--font-mono);
+  text-align: left;
+  margin: 20px 0;
+  border: var(--border-width) solid var(--border-color);
+}
+
+.markdown-prose th,
+.markdown-table th {
+  background-color: var(--bg-canvas);
+  border: var(--border-width) solid var(--border-color);
+  padding: 8px 12px;
+  color: var(--text-muted);
+  font-weight: 700;
+}
+
+.markdown-prose td,
+.markdown-table td {
+  border: var(--border-width) solid var(--border-color);
+  padding: 8px 12px;
+  color: var(--text-primary);
+}
+
+.markdown-prose tr:hover,
+.markdown-table tr:hover {
+  background-color: var(--bg-elevated);
+}
+
+/* Lists */
+.markdown-prose ul, .markdown-prose ol {
+  margin: 16px 0 18px 24px;
+}
+
+.markdown-prose li {
+  margin-bottom: 6px;
+}
@@ -0,0 +1,366 @@
+/* ==========================================================================
+   Cards & Feeds (components/cards.css)
+   ========================================================================== */
+
+/* Featured Lead Article Card (Inside Tile) */
+.featured-card-body {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.featured-badge-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-family: var(--font-mono);
+  font-size: 0.76rem;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.badge-pinned {
+  color: var(--accent-amber);
+  font-weight: 700;
+}
+
+.featured-article-title {
+  font-family: var(--font-mono);
+  font-size: 1.35rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  text-decoration: none;
+  line-height: 1.3;
+}
+
+.featured-article-title:hover {
+  color: var(--accent-cyan);
+}
+
+.featured-prose {
+  font-size: 0.92rem;
+  color: var(--text-primary);
+  line-height: 1.6;
+}
+
+.featured-cta-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 10px;
+  border-top: var(--border-width) solid var(--border-color);
+  flex-wrap: wrap;
+  gap: 10px;
+  font-family: var(--font-mono);
+}
+
+.cta-button {
+  background-color: var(--accent-cyan);
+  color: var(--bg-canvas);
+  padding: 6px 14px;
+  font-weight: 700;
+  font-size: 0.8rem;
+  text-decoration: none;
+  border-radius: var(--border-radius-sm);
+  border: var(--border-width) solid var(--accent-cyan);
+  display: inline-block;
+}
+
+.cta-button:hover {
+  background-color: transparent;
+  color: var(--accent-cyan);
+}
+
+/* Sidebar Stats / Telemetry Box */
+.sidebar-stats-box {
+  background-color: var(--bg-canvas);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--border-radius-sm);
+  padding: 12px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  font-family: var(--font-mono);
+  font-size: 0.78rem;
+  color: var(--text-muted);
+}
+
+.stat-row {
+  display: flex;
+  justify-content: space-between;
+}
+
+.stat-val {
+  color: var(--text-primary);
+  font-weight: 700;
+}
+
+/* Curated Topic Track Item */
+.topic-track-item {
+  background-color: var(--bg-canvas);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--border-radius-sm);
+  padding: 10px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  text-decoration: none;
+}
+
+.topic-track-item:hover {
+  border-color: var(--accent-cyan);
+  background-color: var(--bg-elevated);
+}
+
+.topic-track-title {
+  font-family: var(--font-mono);
+  font-size: 0.84rem;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+.topic-track-item:hover .topic-track-title {
+  color: var(--accent-cyan);
+}
+
+.topic-track-desc {
+  font-size: 0.78rem;
+  color: var(--text-muted);
+  line-height: 1.4;
+}
+
+/* Full-Width Chronological Article Feed */
+.feed-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.feed-card {
+  background-color: var(--bg-canvas);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--border-radius-sm);
+  padding: 16px 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  text-decoration: none;
+}
+
+.feed-card:hover {
+  border-color: var(--accent-cyan);
+  background-color: var(--bg-elevated);
+}
+
+.feed-meta-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-family: var(--font-mono);
+  font-size: 0.76rem;
+  color: var(--text-muted);
+}
+
+.feed-date {
+  color: var(--accent-cyan);
+}
+
+.feed-heading {
+  font-family: var(--font-mono);
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  text-decoration: none;
+  line-height: 1.35;
+}
+
+.feed-card:hover .feed-heading {
+  color: var(--accent-cyan);
+}
+
+.feed-excerpt {
+  font-size: 0.9rem;
+  color: var(--text-primary);
+  line-height: 1.6;
+}
+
+.feed-tags-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 6px;
+  border-top: var(--border-width) solid var(--border-color);
+  font-family: var(--font-mono);
+  font-size: 0.74rem;
+  color: var(--text-muted);
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.tag-cluster {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.tag-chip {
+  background-color: var(--bg-surface);
+  border: var(--border-width) solid var(--border-color);
+  padding: 2px 6px;
+  border-radius: var(--border-radius-sm);
+  color: var(--text-muted);
+  text-decoration: none;
+  font-family: var(--font-mono);
+  font-size: 0.74rem;
+}
+
+.tag-chip:hover {
+  border-color: var(--accent-cyan);
+  color: var(--accent-cyan);
+}
+
+/* Featured Service Card (Homelab Gateway) */
+.blog-service-feature {
+  background-color: var(--bg-canvas);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--border-radius-sm);
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.blog-feature-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-family: var(--font-mono);
+  font-size: 0.78rem;
+}
+
+.badge-core {
+  background-color: var(--accent-cyan);
+  color: var(--bg-canvas);
+  padding: 2px 6px;
+  font-weight: 700;
+  border-radius: var(--border-radius-sm);
+}
+
+.blog-feature-title {
+  font-family: var(--font-mono);
+  font-size: 1.15rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  text-decoration: none;
+  display: inline-block;
+}
+
+.blog-feature-title:hover {
+  color: var(--accent-cyan);
+}
+
+.blog-feature-desc {
+  font-size: 0.9rem;
+  color: var(--text-primary);
+  line-height: 1.5;
+}
+
+.blog-sublinks {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-top: 4px;
+  border-top: var(--border-width) solid var(--border-color);
+  padding-top: 10px;
+}
+
+.blog-sublink-item {
+  display: flex;
+  justify-content: space-between;
+  font-family: var(--font-mono);
+  font-size: 0.8rem;
+  color: var(--text-primary);
+  text-decoration: none;
+  padding: 4px 6px;
+  border-radius: var(--border-radius-sm);
+}
+
+.blog-sublink-item:hover {
+  background-color: var(--bg-elevated);
+  color: var(--accent-cyan);
+}
+
+/* Homelab Services Mini-Grid */
+.services-mini-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 10px;
+}
+
+@media (max-width: 540px) {
+  .services-mini-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.service-tile-item {
+  background-color: var(--bg-canvas);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--border-radius-sm);
+  padding: 12px;
+  text-decoration: none;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 6px;
+}
+
+.service-tile-item:hover {
+  border-color: var(--accent-cyan);
+  background-color: var(--bg-elevated);
+}
+
+.service-item-title {
+  font-family: var(--font-mono);
+  font-size: 0.88rem;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+.service-tile-item:hover .service-item-title {
+  color: var(--accent-cyan);
+}
+
+.service-item-tag {
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  color: var(--text-muted);
+}
+
+.service-item-desc {
+  font-size: 0.8rem;
+  color: var(--text-muted);
+  line-height: 1.4;
+}
+
+/* Infrastructure Node Telemetry */
+.node-stat-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 10px;
+  background-color: var(--bg-canvas);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--border-radius-sm);
+  font-family: var(--font-mono);
+  font-size: 0.78rem;
+}
+
+.node-name {
+  color: var(--text-primary);
+  font-weight: 700;
+}
+
+.node-load {
+  color: var(--accent-green);
+}
@@ -0,0 +1,123 @@
+/* ==========================================================================
+   Terminal Code Blocks & Syntax Highlighting (components/code-box.css)
+   ========================================================================== */
+
+/* Terminal Code Box Component */
+.terminal-code-box,
+.code-block-container {
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--border-radius-sm);
+  background-color: var(--bg-canvas);
+  overflow: hidden;
+  font-family: var(--font-code);
+  margin: 18px 0;
+}
+
+.code-titlebar,
+.code-block-header {
+  background-color: var(--bg-surface);
+  border-bottom: var(--border-width) solid var(--border-color);
+  padding: 6px 14px;
+  font-size: 0.74rem;
+  font-family: var(--font-mono);
+  color: var(--text-muted);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.code-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--text-primary);
+  font-weight: 500;
+}
+
+.copy-code-btn {
+  background: transparent;
+  border: var(--border-width) solid var(--border-color);
+  color: var(--text-muted);
+  padding: 2px 8px;
+  font-family: inherit;
+  font-size: 0.72rem;
+  cursor: pointer;
+  border-radius: var(--border-radius-sm);
+}
+
+.copy-code-btn:hover {
+  border-color: var(--accent-cyan);
+  color: var(--accent-cyan);
+}
+
+.code-content,
+.code-block-container pre,
+.markdown-prose pre {
+  padding: 14px 16px;
+  font-size: 0.82rem;
+  overflow-x: auto;
+  color: var(--text-primary);
+  line-height: 1.55;
+  margin: 18px 0;
+  background-color: var(--bg-canvas);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--border-radius-sm);
+  font-family: var(--font-code);
+}
+
+/* Syntax Highlighting Tokens (Prism / 11ty Syntax Highlight) */
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: #5c6370;
+  font-style: italic;
+}
+
+.token.punctuation {
+  color: #abb2bf;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: var(--accent-amber);
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: var(--accent-green);
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: var(--accent-cyan);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #c678dd;
+}
+
+.token.function,
+.token.class-name {
+  color: #61afef;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: var(--accent-amber);
+}
@@ -0,0 +1,39 @@
+/* ==========================================================================
+   Footer Tile (components/footer.css)
+   ========================================================================== */
+
+.footer-tile {
+  background-color: var(--bg-surface);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--border-radius);
+  padding: 14px 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-family: var(--font-mono);
+  font-size: 0.74rem;
+  color: var(--text-muted);
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.footer-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.footer-right {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+}
+
+.footer-link {
+  color: var(--text-muted);
+  text-decoration: none;
+}
+
+.footer-link:hover {
+  color: var(--accent-cyan);
+}
@@ -0,0 +1,63 @@
+/* ==========================================================================
+   Global Status Header Bar (components/global-bar.css)
+   ========================================================================== */
+
+.global-bar {
+  background-color: var(--bg-surface);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--border-radius);
+  padding: 10px 18px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-family: var(--font-mono);
+  font-size: 0.8rem;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.brand-group {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: var(--text-primary);
+  font-weight: 700;
+  text-decoration: none;
+}
+
+.brand-group:hover {
+  color: var(--accent-cyan);
+}
+
+.status-indicator {
+  width: 8px;
+  height: 8px;
+  background-color: var(--accent-green);
+  display: inline-block;
+}
+
+.bar-nav {
+  display: flex;
+  gap: 14px;
+  align-items: center;
+}
+
+.bar-link {
+  color: var(--text-muted);
+  text-decoration: none;
+}
+
+.bar-link:hover {
+  color: var(--accent-cyan);
+}
+
+.bar-link.active {
+  color: var(--text-primary);
+  border-bottom: 1px solid var(--accent-cyan);
+}
+
+.bar-link.external::after {
+  content: " ↗";
+  font-size: 0.75em;
+  color: var(--text-muted);
+}
@@ -0,0 +1,140 @@
+/* ==========================================================================
+   Tile Containers & Hero Tile (components/tiles.css)
+   ========================================================================== */
+
+/* Standard Tile Container */
+.tile {
+  background-color: var(--bg-surface);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--border-radius);
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.tile-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  border-bottom: var(--border-width) solid var(--border-color);
+  padding-bottom: 10px;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.tile-title {
+  font-family: var(--font-mono);
+  font-size: 0.92rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.tile-meta {
+  font-family: var(--font-mono);
+  font-size: 0.74rem;
+  color: var(--text-muted);
+}
+
+.tile-content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+/* Hero Lander Tile */
+.hero-tile {
+  background-color: var(--bg-surface);
+  border: var(--border-width) solid var(--border-color);
+  border-left: 3px solid var(--accent-cyan);
+  border-radius: var(--border-radius);
+  padding: 24px 28px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.hero-pretitle {
+  font-family: var(--font-mono);
+  font-size: 0.8rem;
+  color: var(--accent-cyan);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.hero-main-title {
+  font-family: var(--font-mono);
+  font-size: 2.1rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  letter-spacing: -0.02em;
+  line-height: 1.2;
+}
+
+@media (max-width: 600px) {
+  .hero-main-title {
+    font-size: 1.6rem;
+  }
+}
+
+.hero-landing-text {
+  font-size: 0.98rem;
+  color: var(--text-primary);
+  line-height: 1.65;
+  max-width: 82ch;
+}
+
+/* Filter Pills Row in Hero Tile */
+.filter-pills-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  margin-top: 4px;
+  font-family: var(--font-mono);
+  font-size: 0.78rem;
+}
+
+.filter-tag-btn {
+  background-color: var(--bg-canvas);
+  border: var(--border-width) solid var(--border-color);
+  color: var(--text-muted);
+  padding: 3px 8px;
+  border-radius: var(--border-radius-sm);
+  cursor: pointer;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+}
+
+.filter-tag-btn:hover {
+  border-color: var(--accent-cyan);
+  color: var(--text-primary);
+  background-color: var(--bg-elevated);
+}
+
+.filter-tag-btn.active {
+  background-color: var(--accent-cyan);
+  color: var(--bg-canvas);
+  border-color: var(--accent-cyan);
+  font-weight: 700;
+}
+
+/* Directive Callout Box inside Hero */
+.hero-directive-box {
+  background-color: var(--bg-canvas);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--border-radius-sm);
+  padding: 12px 16px;
+  font-family: var(--font-mono);
+  font-size: 0.82rem;
+  color: var(--text-muted);
+  line-height: 1.6;
+}
+
+.hero-directive-box strong {
+  color: var(--text-primary);
+}
@@ -0,0 +1,53 @@
+/* ==========================================================================
+   Tiling Window Manager Grids & Layout (layout.css)
+   ========================================================================== */
+
+/* Outer Shell Container */
+.tiling-layout {
+  width: 100%;
+  max-width: var(--site-max-width);
+  display: flex;
+  flex-direction: column;
+  gap: var(--tile-gap);
+}
+
+/* Asymmetric 2-Column Split Grid (Lander: Lead Article + Telemetry Sidebar) */
+.split-grid {
+  display: grid;
+  grid-template-columns: 1.25fr 0.75fr;
+  gap: var(--tile-gap);
+  align-items: start;
+}
+
+@media (max-width: 880px) {
+  .split-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Article Workspace Grid (Left Sidebar TOC + Main Reading Workspace) */
+.article-workspace-grid {
+  display: grid;
+  grid-template-columns: 290px 1fr;
+  gap: var(--tile-gap);
+  align-items: start;
+}
+
+@media (max-width: 960px) {
+  .article-workspace-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Generic Symmetrical Grids */
+.grid-2col {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--tile-gap);
+}
+
+@media (max-width: 768px) {
+  .grid-2col {
+    grid-template-columns: 1fr;
+  }
+}
@@ -0,0 +1,21 @@
+/* ==========================================================================
+   Main Stylesheet (main.css)
+   River Rooks Blog - Modular CSS Architecture
+   ========================================================================== */
+
+/* 1. Design Tokens & CSS Custom Properties */
+@import "./tokens.css";
+
+/* 2. Global Reset & Baseline Typography */
+@import "./reset.css";
+
+/* 3. Tiling Window Manager Grids */
+@import "./layout.css";
+
+/* 4. Component Styles */
+@import "./components/global-bar.css";
+@import "./components/tiles.css";
+@import "./components/cards.css";
+@import "./components/code-box.css";
+@import "./components/article.css";
+@import "./components/footer.css";
@@ -0,0 +1,52 @@
+/* ==========================================================================
+   CSS Reset & Baseline (reset.css)
+   Strict adherence to developer-centric minimalism & instant transitions
+   ========================================================================== */
+
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-size: 16px;
+  -webkit-text-size-adjust: 100%;
+  text-rendering: optimizeLegibility;
+  scroll-behavior: smooth;
+}
+
+body {
+  background-color: var(--bg-canvas);
+  color: var(--text-primary);
+  font-family: var(--font-prose);
+  line-height: 1.6;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 24px 16px 48px 16px;
+  overflow-x: hidden;
+}
+
+/* Hard anti-pattern enforcement: instant transitions across UI elements */
+a, button, input, select, textarea {
+  transition: none !important;
+}
+
+/* High-contrast keyboard accessibility outline */
+:focus-visible {
+  outline: 2px solid var(--accent-cyan);
+  outline-offset: 2px;
+}
+
+img, svg, video {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+/* Monospace font assignment for code & structural elements */
+code, pre, kbd, samp {
+  font-family: var(--font-code);
+}
@@ -0,0 +1,38 @@
+/* ==========================================================================
+   Design Tokens (tokens.css)
+   River Rooks Blog - Native Dark Mode Architecture
+   ========================================================================== */
+
+:root {
+  /* Surface & Canvas Colors */
+  --bg-canvas: #0d0f12;      /* Deep slate/charcoal canvas */
+  --bg-surface: #121417;     /* Tile & card surface */
+  --bg-elevated: #1c1f26;    /* Hovered surface */
+  
+  /* Borders & Dividers */
+  --border-color: #2b303b;   /* Crisp 1px border */
+  --border-width: 1px;
+  --border-radius: 4px;      /* Strictly capped at 4px */
+  --border-radius-sm: 2px;
+  --border-radius-xs: 1px;
+
+  /* Typography */
+  --font-mono: 'IBM Plex Mono', 'JetBrains Mono', monospace;
+  --font-code: 'JetBrains Mono', 'Fira Code', monospace;
+  --font-prose: 'Inter', system-ui, -apple-system, sans-serif;
+
+  /* Text Colors */
+  --text-primary: #e0e6f0;   /* Light off-white prose */
+  --text-muted: #8a95a5;     /* Monospace metadata */
+
+  /* High-Signal Terminal Accents */
+  --accent-cyan: #00f0ff;    /* Primary active accent */
+  --accent-green: #00e676;   /* Success / online indicator */
+  --accent-amber: #ffb700;   /* Warning / highlight accent */
+  --accent-red: #ff5252;     /* Danger / caution accent */
+
+  /* Structural Dimensions */
+  --site-max-width: 1140px;
+  --tile-gap: 16px;
+  --prose-max-width: 68ch;
+}
@@ -0,0 +1,39 @@
+---
+layout: layouts/base.njk
+title: "River Rooks | Engineering Notes & Systems Architecture"
+---
+
+<!-- 1. Lander Hero Tile with Dynamic Filter Tag Buttons -->
+{% include "partials/hero-tile.njk" %}
+
+<!-- 2. Asymmetric Split Grid: Featured Lead Post (Left) & Telemetry Sidebar (Right) -->
+<div class="split-grid">
+  <div class="split-lead-col">
+    {% include "partials/featured-card.njk" %}
+  </div>
+
+  <div class="split-sidebar-col">
+    {% include "partials/stats-sidebar.njk" %}
+  </div>
+</div>
+
+<!-- 3. Full-Width Chronological Dispatches Feed Tile -->
+<section class="tile" aria-label="Dispatches Feed Catalog">
+  <header class="tile-header">
+    <div class="tile-title">
+      <span class="status-indicator"></span>
+      RECENT DISPATCHES
+    </div>
+    <span class="tile-meta">ORDER: CHRONOLOGICAL DESC &bull; TOTAL: {{ collections.posts.length }}</span>
+  </header>
+
+  <div class="feed-list">
+    {% for post in collections.posts %}
+      {% include "partials/post-card.njk" %}
+    {% else %}
+      <p style="color: var(--text-muted); font-family: var(--font-mono); font-size: 0.85rem; padding: 16px;">
+        No published dispatches found in repository.
+      </p>
+    {% endfor %}
+  </div>
+</section>
@@ -0,0 +1,115 @@
+---
+layout: layouts/base.njk
+title: "River Rooks | Homelab Gateway"
+---
+
+<!-- Main Hero Landing Tile -->
+<section class="hero-tile" aria-label="Gateway Declaration">
+  <div class="hero-pretitle">SYSTEM DECLARATION &bull; NODE GATEWAY</div>
+  <h1 class="hero-main-title">Engineering Sovereign Infrastructure &amp; Technical Notes</h1>
+
+  <div class="hero-landing-text">
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.
+    </p>
+    <p>
+      Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
+    </p>
+  </div>
+
+  <div class="hero-directive-box">
+    <strong>PRIMARY DESTINATIONS:</strong>
+    <a href="/dispatches/" style="color: var(--accent-cyan); text-decoration: none; margin-left: 8px;">[1] Technical Blog ({{ collections.posts.length }} Articles)</a> &bull;
+    <a href="https://git.{{ site.domain }}" target="_blank" rel="noopener noreferrer" style="color: inherit; text-decoration: none;">[2] Gitea Repos</a> &bull;
+    <span>[3] Public Tools</span> &bull;
+    <span>[4] Cluster Telemetry</span>
+  </div>
+</section>
+
+<!-- Split Tiling Columns -->
+<div class="split-grid">
+  <!-- Left Column: Featured Service (Blog) + Dynamic Recent Articles -->
+  <div style="display: flex; flex-direction: column; gap: var(--tile-gap);">
+    <section class="tile" aria-label="Featured Service: Technical Blog">
+      <header class="tile-header">
+        <div class="tile-title">
+          <span class="status-indicator"></span>
+          // PRIMARY SERVICE: THE TECHNICAL BLOG
+        </div>
+        <span class="tile-meta">~/notes/ &bull; {{ collections.posts.length }} ARTICLES</span>
+      </header>
+
+      <div class="blog-service-feature">
+        <div class="blog-feature-top">
+          <span class="badge-core">[CORE PUBLICATION SERVICE]</span>
+          <span style="color: var(--text-muted);">{{ collections.posts[0].date | postDate }} LAST SYNC</span>
+        </div>
+
+        <a href="/dispatches/" class="blog-feature-title">&gt; Technical Notes &amp; Engineering Dispatches</a>
+        <p class="blog-feature-desc">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
+        </p>
+
+        <div class="blog-sublinks">
+          {% for post in collections.posts | limit(4) %}
+            <a href="{{ post.url }}" class="blog-sublink-item">
+              <span>{{ loop.index }}. {{ post.data.title }}</span>
+              <span style="color: var(--accent-cyan);">[{{ post.templateContent | readingTime(post.data.readingTime) }}] &rarr;</span>
+            </a>
+          {% endfor %}
+        </div>
+      </div>
+    </section>
+  </div>
+
+  <!-- Right Column: Homelab Hosted Services & Node Telemetry -->
+  <div style="display: flex; flex-direction: column; gap: var(--tile-gap);">
+    <section class="tile" aria-label="Homelab Services Directory">
+      <header class="tile-header">
+        <div class="tile-title">
+          <span class="status-indicator"></span>
+          // HOMELAB SERVICES ROUTER
+        </div>
+        <span class="tile-meta">{{ site.services.length }} PUBLIC TOOLS</span>
+      </header>
+
+      <div class="services-mini-grid">
+        {% for svc in site.services %}
+          <a href="{{ svc.url }}" target="_blank" rel="noopener noreferrer" class="service-tile-item">
+            <div>
+              <div class="service-item-title">{{ svc.name }}</div>
+              <div class="service-item-tag">{{ svc.tag }}</div>
+            </div>
+            <p class="service-item-desc">{{ svc.desc }}</p>
+          </a>
+        {% endfor %}
+      </div>
+    </section>
+
+    <!-- Infrastructure Telemetry Tile -->
+    <section class="tile" aria-label="Infrastructure Nodes Telemetry">
+      <header class="tile-header">
+        <div class="tile-title">
+          <span class="status-indicator"></span>
+          // CLUSTER TELEMETRY
+        </div>
+        <span class="tile-meta">3 NODES ONLINE</span>
+      </header>
+
+      <div style="display: flex; flex-direction: column; gap: 8px;">
+        <div class="node-stat-row">
+          <span class="node-name">NODE-01 (Primary Cluster)</span>
+          <span class="node-load">ONLINE &bull; LOAD: 0.18</span>
+        </div>
+        <div class="node-stat-row">
+          <span class="node-name">NODE-02 (Storage Array)</span>
+          <span class="node-load">ONLINE &bull; POOL: 98% HEALTH</span>
+        </div>
+        <div class="node-stat-row">
+          <span class="node-name">GATEWAY-01 (Edge Ingress)</span>
+          <span class="node-load">ONLINE &bull; ROUTING ACTIVE</span>
+        </div>
+      </div>
+    </section>
+  </div>
+</div>
@@ -0,0 +1,52 @@
+---
+layout: layouts/post.njk
+title: "Infrastructure Notes & Systems Deployment Guide"
+date: 2026-07-15
+tags:
+  - homelab
+  - networking
+  - templates
+excerpt: "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident."
+readingTime: "4 MIN READ"
+featured: false
+difficulty: "BEGINNER"
+---
+
+## 1.0 Topology Overview
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua:
+
+```text
+[Gateway Ingress]
+        |
+   [Edge Router]
+        |
+  +-----+-----+
+  |           |
+[Node 01]   [Node 02]
+```
+
+## 2.0 Deployment Configuration
+
+Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat:
+
+```yaml
+version: '3.8'
+
+services:
+  app:
+    image: service:latest
+    restart: unless-stopped
+    ports:
+      - "8080:80"
+```
+
+## 3.0 Verification Testing
+
+Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur:
+
+```sh
+curl -s http://localhost:8080/health
+```
+
+Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
@@ -0,0 +1,78 @@
+---
+layout: layouts/post.njk
+title: "Sample Technical Dispatch: Systems Architecture & Implementation"
+date: 2026-07-20
+tags:
+  - systems
+  - architecture
+  - templates
+excerpt: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam."
+readingTime: "6 MIN READ"
+featured: true
+difficulty: "INTERMEDIATE"
+---
+
+## 1.0 Executive Summary
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.
+
+Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa.
+
+<div class="markdown-callout callout-note">
+  <div class="callout-title">[!NOTE] Operational Directives</div>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
+</div>
+
+## 2.0 System Parameters & Specifications
+
+Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis:
+
+### 2.1 Interface Configuration Matrix
+
+| Parameter ID | Signal Name | Protocol Bus | Expected Value |
+| :--- | :--- | :--- | :--- |
+| **0x01** | `SYS_CLOCK` | SPI Primary | 100 MHz |
+| **0x02** | `DATA_IN` | Serial Bus | Bidirectional |
+| **0x03** | `CONTROL_REG` | I2C Header | 0x3F Active |
+| **0x04** | `GROUND_REF` | Chassis GND | 0.0V Nominal |
+
+<div class="markdown-callout callout-warning">
+  <div class="callout-title">[!WARNING] Configuration Voltage Boundary</div>
+  <p>Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.</p>
+</div>
+
+## 3.0 Execution Workflow
+
+Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta:
+
+```sh
+#!/bin/sh
+# Sample deployment and verification routine
+set -eu
+
+echo "[+] Initializing subsystem..."
+check_environment() {
+  test -f /etc/config.json && echo "Config verified."
+}
+
+check_environment
+```
+
+Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to interrupt operations safely at any point.
+
+## 4.0 Telemetry & Verification
+
+Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla:
+
+- **Metric A:** `1,048,576 ops/sec`
+- **Metric B:** `SHA256:e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855`
+- **Latency:** `< 2.5ms` nominal
+
+## 5.0 Audit Checklist
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit:
+
+- [x] Baseline architectural parameters verified
+- [x] Initial configuration and unit tests passed
+- [x] System telemetry within expected boundaries
+- [ ] Production deployment and final review
@@ -0,0 +1,83 @@
+import test from "node:test";
+import assert from "node:assert/strict";
+import fs from "node:fs";
+import path from "node:path";
+import { execSync } from "node:child_process";
+
+const siteDir = path.resolve("_site");
+
+function getAllHtmlFiles(dir) {
+  let results = [];
+  const list = fs.readdirSync(dir);
+  for (const file of list) {
+    const filePath = path.join(dir, file);
+    const stat = fs.statSync(filePath);
+    if (stat && stat.isDirectory()) {
+      results = results.concat(getAllHtmlFiles(filePath));
+    } else if (file.endsWith(".html")) {
+      results.push(filePath);
+    }
+  }
+  return results;
+}
+
+test("Build & Link Integrity: Output inspection and link verification", () => {
+  // Ensure fresh build exists
+  if (!fs.existsSync(siteDir)) {
+    execSync("npm run build", { stdio: "pipe" });
+  }
+
+  // 1. Core Pages Exist
+  assert.ok(fs.existsSync(path.join(siteDir, "index.html")), "Root _site/index.html must exist");
+  assert.ok(fs.existsSync(path.join(siteDir, "dispatches/index.html")), "_site/dispatches/index.html must exist");
+  assert.ok(fs.existsSync(path.join(siteDir, "assets/css/main.css")), "_site/assets/css/main.css must exist");
+
+  const htmlFiles = getAllHtmlFiles(siteDir);
+  assert.ok(htmlFiles.length >= 4, "Must compile all core pages and articles");
+
+  for (const htmlFile of htmlFiles) {
+    const relHtml = path.relative(siteDir, htmlFile);
+    const content = fs.readFileSync(htmlFile, "utf-8");
+
+    // 2. HTML Boilerplate Invariants
+    assert.match(content, /<!DOCTYPE html>/i, `${relHtml} must contain <!DOCTYPE html>`);
+    assert.match(content, /<meta\s+name="viewport"/i, `${relHtml} must have viewport meta tag`);
+    assert.match(content, /<link\s+rel="stylesheet"\s+href="\/assets\/css\/main\.css">/i, `${relHtml} must link to main.css`);
+
+    // 3. Internal Link Integrity (No 404s!)
+    const internalLinks = [...content.matchAll(/href="(\/[^"#?]*)"/g)].map((m) => m[1]);
+    for (const link of internalLinks) {
+      if (link.startsWith("/feed.xml")) continue; // dynamic RSS route
+      // Normalize link to file on disk: /dispatches/ -> _site/dispatches/index.html or _site/dispatches.html
+      let targetPath;
+      if (link.endsWith("/")) {
+        targetPath = path.join(siteDir, link, "index.html");
+      } else if (path.extname(link)) {
+        targetPath = path.join(siteDir, link);
+      } else {
+        targetPath = path.join(siteDir, `${link}.html`);
+        if (!fs.existsSync(targetPath)) {
+          targetPath = path.join(siteDir, link, "index.html");
+        }
+      }
+
+      assert.ok(
+        fs.existsSync(targetPath),
+        `Broken internal link in ${relHtml}: href="${link}" resolves to missing file: ${targetPath}`
+      );
+    }
+
+    // 4. Anchor Link Integrity (TOC anchor links match actual heading IDs)
+    const anchorLinks = [...content.matchAll(/href="#([^"]+)"/g)].map((m) => m[1]);
+    for (const anchor of anchorLinks) {
+      // Ignore skip-to-content or standard body anchors
+      if (anchor === "main-content") continue;
+      const expectedIdRegex = new RegExp(`id="${anchor}"`, "i");
+      assert.match(
+        content,
+        expectedIdRegex,
+        `Broken TOC anchor link in ${relHtml}: href="#${anchor}" has no corresponding id="${anchor}"`
+      );
+    }
+  }
+});
@@ -0,0 +1,86 @@
+import test from "node:test";
+import assert from "node:assert/strict";
+import fs from "node:fs";
+import path from "node:path";
+
+const cssDir = path.resolve("src/assets/css");
+
+function getAllCssFiles(dir) {
+  let results = [];
+  const list = fs.readdirSync(dir);
+  for (const file of list) {
+    const filePath = path.join(dir, file);
+    const stat = fs.statSync(filePath);
+    if (stat && stat.isDirectory()) {
+      results = results.concat(getAllCssFiles(filePath));
+    } else if (file.endsWith(".css")) {
+      results.push(filePath);
+    }
+  }
+  return results;
+}
+
+test("Design Specification: Strict Anti-Pattern Regression Testing", () => {
+  const cssFiles = getAllCssFiles(cssDir);
+  assert.ok(cssFiles.length >= 5, "Must inspect all modular CSS files");
+
+  for (const file of cssFiles) {
+    const relPath = path.relative(process.cwd(), file);
+    const content = fs.readFileSync(file, "utf-8");
+
+    // 1. Anti-Pattern: NO Glassmorphism (backdrop-filter)
+    assert.doesNotMatch(
+      content,
+      /backdrop-filter\s*:/i,
+      `Violation in ${relPath}: Glassmorphism (backdrop-filter) is strictly forbidden`
+    );
+
+    // 2. Anti-Pattern: NO Drop Shadows or Glows (box-shadow, text-shadow)
+    // Allowed: box-shadow: none; or text-shadow: none;
+    const shadowMatches = content.match(/(box-shadow|text-shadow)\s*:\s*([^;]+);/gi) || [];
+    for (const match of shadowMatches) {
+      assert.match(
+        match,
+        /(box-shadow|text-shadow)\s*:\s*none\s*;/i,
+        `Violation in ${relPath}: Drop shadows and glows are forbidden (found: '${match}')`
+      );
+    }
+
+    // 3. Anti-Pattern: NO Gradients (linear, radial, conic)
+    assert.doesNotMatch(
+      content,
+      /(linear-gradient|radial-gradient|conic-gradient)/i,
+      `Violation in ${relPath}: Gradients are strictly forbidden`
+    );
+
+    // 4. Anti-Pattern: NO Rounded Bubbles (border-radius capped at 4px max)
+    const radiusMatches = content.match(/border-radius\s*:\s*([^;]+);/gi) || [];
+    for (const match of radiusMatches) {
+      // Check for pixel values > 4px (e.g. 5px, 6px, 8px, 12px, 20px)
+      const pxMatch = match.match(/(\d+)\s*px/i);
+      if (pxMatch) {
+        const px = parseInt(pxMatch[1], 10);
+        assert.ok(
+          px <= 4,
+          `Violation in ${relPath}: Border radius must be 0px to 4px max, found: ${px}px in '${match}'`
+        );
+      }
+      // Check for percentages (e.g. 50%)
+      assert.doesNotMatch(
+        match,
+        /\d+%/,
+        `Violation in ${relPath}: Rounded pill/circular percentages forbidden in '${match}'`
+      );
+    }
+
+    // 5. Anti-Pattern: NO Float/Spring Transitions (Must be instant snaps)
+    const transitionMatches = content.match(/transition\s*:\s*([^;]+);/gi) || [];
+    for (const match of transitionMatches) {
+      assert.match(
+        match,
+        /transition\s*:\s*(none(\s*!important)?|0s\s*);/i,
+        `Violation in ${relPath}: Transitions must be instant (none or 0s), found: '${match}'`
+      );
+    }
+  }
+});
@@ -0,0 +1,107 @@
+import test from "node:test";
+import assert from "node:assert/strict";
+import {
+  postDate,
+  isoDate,
+  limit,
+  filterTagList,
+  readingTime,
+  extractHeadings
+} from "../src/_filters/index.js";
+
+test("Filters - postDate: formats valid dates", () => {
+  assert.equal(postDate("2026-07-20"), "JUL 20, 2026");
+  assert.equal(postDate(new Date("2026-12-31T00:00:00Z")), "DEC 31, 2026");
+});
+
+test("Filters - postDate: handles adversarial / invalid inputs gracefully", () => {
+  assert.equal(postDate(null), "");
+  assert.equal(postDate(undefined), "");
+  assert.equal(postDate("invalid-date-string"), "");
+  assert.equal(postDate(""), "");
+});
+
+test("Filters - isoDate: formats ISO strings", () => {
+  assert.equal(isoDate("2026-07-20"), "2026-07-20");
+  assert.equal(isoDate(new Date("2026-05-15T00:00:00Z")), "2026-05-15");
+});
+
+test("Filters - isoDate: handles adversarial / invalid inputs gracefully", () => {
+  assert.equal(isoDate(null), "");
+  assert.equal(isoDate(undefined), "");
+  assert.equal(isoDate("not-a-date"), "");
+});
+
+test("Filters - limit: slices arrays correctly", () => {
+  assert.deepEqual(limit([1, 2, 3, 4, 5], 3), [1, 2, 3]);
+  assert.deepEqual(limit([1, 2], 5), [1, 2]);
+});
+
+test("Filters - limit: handles adversarial inputs (negative, 0, non-array)", () => {
+  assert.deepEqual(limit([1, 2, 3], 0), []);
+  assert.deepEqual(limit([1, 2, 3], -5), []);
+  assert.deepEqual(limit(null, 3), []);
+  assert.deepEqual(limit("not-an-array", 3), []);
+});
+
+test("Filters - filterTagList: removes internal system tags", () => {
+  const input = ["firmware", "posts", "security", "all", "nav", "post"];
+  assert.deepEqual(filterTagList(input), ["firmware", "security"]);
+});
+
+test("Filters - filterTagList: handles adversarial inputs (# prefix, casing, non-string)", () => {
+  const input = ["#firmware", "#POSTS", "ALL", "#homelab", 42, null, undefined];
+  assert.deepEqual(filterTagList(input), ["#firmware", "#homelab"]);
+  assert.deepEqual(filterTagList(null), []);
+  assert.deepEqual(filterTagList(undefined), []);
+});
+
+test("Filters - readingTime: calculates reading time from word count", () => {
+  // 199 words -> 1 min
+  const shortText = "word ".repeat(199);
+  assert.equal(readingTime(shortText), "1 MIN READ");
+
+  // 201 words -> 2 min
+  const mediumText = "word ".repeat(201);
+  assert.equal(readingTime(mediumText), "2 MIN READ");
+
+  // 1000 words -> 5 min
+  const longText = "word ".repeat(1000);
+  assert.equal(readingTime(longText), "5 MIN READ");
+});
+
+test("Filters - readingTime: respects explicit frontmatter override", () => {
+  assert.equal(readingTime("any text", "15 MIN READ"), "15 MIN READ");
+});
+
+test("Filters - readingTime: handles adversarial HTML tags without inflating word count", () => {
+  // HTML tags should be stripped before counting words
+  const htmlText = "<div><span>word</span> <p>another</p></div>";
+  assert.equal(readingTime(htmlText), "1 MIN READ");
+  assert.equal(readingTime(""), "1 MIN READ");
+  assert.equal(readingTime(null), "1 MIN READ");
+});
+
+test("Filters - extractHeadings: extracts H2 and H3 with IDs and titles", () => {
+  const html = `
+    <h1>Title To Ignore</h1>
+    <h2 id="section-1">1.0 First Section</h2>
+    <p>Some text</p>
+    <h3 id="sub-1">1.1 Sub Section</h3>
+    <h4 id="h4-ignore">Ignore H4</h4>
+    <h2 id="section-2">2.0 Second Section with <code>code</code> and <span class="tag">span</span></h2>
+  `;
+
+  const headings = extractHeadings(html);
+  assert.equal(headings.length, 3);
+  assert.deepEqual(headings[0], { level: 2, id: "section-1", title: "1.0 First Section" });
+  assert.deepEqual(headings[1], { level: 3, id: "sub-1", title: "1.1 Sub Section" });
+  assert.deepEqual(headings[2], { level: 2, id: "section-2", title: "2.0 Second Section with code and span" });
+});
+
+test("Filters - extractHeadings: handles adversarial HTML inputs gracefully", () => {
+  assert.deepEqual(extractHeadings(""), []);
+  assert.deepEqual(extractHeadings(null), []);
+  assert.deepEqual(extractHeadings(undefined), []);
+  assert.deepEqual(extractHeadings("<p>No headings here</p>"), []);
+});
@@ -0,0 +1,71 @@
+import test from "node:test";
+import assert from "node:assert/strict";
+import fs from "node:fs";
+import path from "node:path";
+
+const postsDir = path.resolve("src/posts");
+
+test("Content Contract: All posts in src/posts/ satisfy frontmatter schema", () => {
+  assert.ok(fs.existsSync(postsDir), "src/posts directory must exist");
+  const postFiles = fs.readdirSync(postsDir).filter((f) => f.endsWith(".md"));
+
+  assert.ok(postFiles.length > 0, "There must be at least one published post");
+
+  for (const file of postFiles) {
+    const filePath = path.join(postsDir, file);
+    const content = fs.readFileSync(filePath, "utf-8");
+
+    // 1. Filename Convention: YYYY-MM-DD-slug.md
+    assert.match(
+      file,
+      /^\d{4}-\d{2}-\d{2}-[a-z0-9-]+\.md$/,
+      `Post filename '${file}' must follow 'YYYY-MM-DD-slug.md' naming standard`
+    );
+
+    // 2. YAML Frontmatter Boundary check
+    assert.match(
+      content,
+      /^---\n([\s\S]*?)\n---/,
+      `Post '${file}' must start with valid YAML frontmatter delimiters`
+    );
+
+    // Extract frontmatter block
+    const fmMatch = content.match(/^---\n([\s\S]*?)\n---/);
+    const fmText = fmMatch[1];
+
+    // 3. Title Invariant
+    assert.match(
+      fmText,
+      /title:\s*"[^"]{5,}"/,
+      `Post '${file}' must contain a valid title of at least 5 characters`
+    );
+
+    // 4. Date Invariant (ISO Format)
+    assert.match(
+      fmText,
+      /date:\s*\d{4}-\d{2}-\d{2}/,
+      `Post '${file}' must define an ISO date (YYYY-MM-DD)`
+    );
+
+    // 5. Layout Invariant
+    assert.match(
+      fmText,
+      /layout:\s*layouts\/post\.njk/,
+      `Post '${file}' must specify 'layout: layouts/post.njk'`
+    );
+
+    // 6. Tags Invariant
+    assert.match(
+      fmText,
+      /tags:\s*\n(\s+-\s+[a-z0-9-]+\n)+/,
+      `Post '${file}' must specify a non-empty YAML tags list`
+    );
+
+    // 7. Excerpt Invariant
+    assert.match(
+      fmText,
+      /excerpt:\s*"[^"]{20,}"/,
+      `Post '${file}' must provide a substantive excerpt of at least 20 characters`
+    );
+  }
+});
@@ -0,0 +1,68 @@
+import test from "node:test";
+import assert from "node:assert/strict";
+import { execSync } from "node:child_process";
+
+test("Site Config: throws explicit error when SITE_DOMAIN is unset", () => {
+  // Run isolated Node process with empty environment to verify error throw
+  const cmd = `node -e '
+    process.env.SITE_DOMAIN = "";
+    delete process.env.SITE_DOMAIN;
+    // mock empty cwd without .env
+    process.chdir("/tmp");
+    import("${process.cwd()}/src/_data/site.js")
+      .then(() => process.exit(0))
+      .catch(err => {
+        if (err.message.includes("FATAL CONFIGURATION ERROR: SITE_DOMAIN")) {
+          process.exit(42);
+        }
+        process.exit(1);
+      });
+  '`;
+
+  try {
+    execSync(cmd, { stdio: "pipe" });
+    assert.fail("Should have thrown error when SITE_DOMAIN is missing");
+  } catch (err) {
+    assert.equal(err.status, 42, "Process exited with status 42 (expected error caught)");
+  }
+});
+
+test("Site Config: correctly parses SITE_DOMAIN and derives service subdomains", async () => {
+  process.env.SITE_DOMAIN = "testcluster.internal";
+  delete process.env.SITE_URL;
+
+  // Import site configuration dynamically
+  const { default: site } = await import(`../src/_data/site.js?t=${Date.now()}`);
+
+  assert.equal(site.domain, "testcluster.internal");
+  assert.equal(site.url, "https://testcluster.internal");
+
+  // Verify dynamic subdomains
+  const gitService = site.services.find((s) => s.name === "Gitea");
+  assert.ok(gitService, "Gitea service exists");
+  assert.equal(gitService.url, "https://git.testcluster.internal");
+  assert.equal(gitService.tag, "git.testcluster.internal:2222");
+
+  const chefService = site.services.find((s) => s.name === "CyberChef");
+  assert.ok(chefService, "CyberChef service exists");
+  assert.equal(chefService.url, "https://chef.testcluster.internal");
+
+  // Verify navigation links
+  const navGateway = site.nav.find((n) => n.label === "Gateway");
+  assert.ok(navGateway, "Nav Gateway link exists");
+  assert.equal(navGateway.url, "/");
+
+  const navGit = site.nav.find((n) => n.label === "Gitea");
+  assert.ok(navGit, "Nav Gitea link exists");
+  assert.equal(navGit.url, "https://git.testcluster.internal");
+});
+
+test("Site Config: respects explicit SITE_URL override", async () => {
+  process.env.SITE_DOMAIN = "riverrooks.dev";
+  process.env.SITE_URL = "http://localhost:8080";
+
+  const { default: site } = await import(`../src/_data/site.js?t=${Date.now()}`);
+
+  assert.equal(site.domain, "riverrooks.dev");
+  assert.equal(site.url, "http://localhost:8080");
+});
Author	SHA1	Message	Date
venus	e733f479dd	rewrote boilerplate site.js files	2026-09-13 01:50:38 -05:00
venus	1079b956d3	docs(rules): enforce User Content Sovereignty and remove specific content bias from guidelines and skills	2026-09-13 01:33:30 -05:00
venus	125b3e8839	fix(nav): update gateway navigation label from Gateway 3 to Gateway	2026-09-13 01:29:47 -05:00
venus	cedd8194f6	feat: replace Forgejo references with Gitea and generalize content with Lorem Ipsum templates	2026-09-13 01:27:37 -05:00
venus	e4601dbbcb	feat: adopt strict TDD framework and add adversarial test suite - Update AGENTS.md and .agents/rules/blog-system.md with strict TDD mandate - Extract Eleventy custom filters into modular src/_filters/index.js for unit testing - Add npm test script using Node.js native test runner (node:test) - Create test/site-config.test.js for environment validation and fatal error assertions - Create test/filters.test.js for adversarial filter edge cases (dates, limits, reading time, headings) - Create test/frontmatter-schema.test.js enforcing post metadata contracts - Create test/design-rules.test.js enforcing strict anti-patterns (no glassmorphism, no shadows, max 4px radius) - Create test/build-integrity.test.js checking static output, zero 404 links, and TOC anchor targets	2026-09-13 01:16:20 -05:00
venus	fc6c17b541	feat: throw explicit error when SITE_DOMAIN is unset - Throw fatal configuration error in src/_data/site.js if SITE_DOMAIN is missing - Require SITE_DOMAIN in docker-compose.yml without default fallback - Require SITE_DOMAIN ARG in Dockerfile with no default fallback	2026-09-13 01:11:28 -05:00
venus	1491d3fa5c	feat: make SITE_URL and SITE_DOMAIN dynamic via .env and docker compose - Create .env and .env.example with SITE_DOMAIN=riverrooks.dev and SITE_URL=https://riverrooks.dev - Migrate src/_data/site.json to src/_data/site.js reading environment variables dynamically - Update subdomains across Forgejo, CyberChef, Stirling PDF, and Uptime Kuma to inherit site.domain - Update docker-compose.yml and Dockerfile to accept dynamic SITE_URL and SITE_DOMAIN build args - Add .env to .gitignore	2026-09-13 01:10:20 -05:00
venus	b13a50ccee	feat: set Gateway 3 as root index and move dispatches to /dispatches/ - Update src/index.njk with Gateway 3 homelab services router and cluster telemetry - Create src/dispatches.njk for the full-width technical dispatches feed and tag filters - Update src/_data/site.json navigation hierarchy to reflect root Gateway and /dispatches/ - Update breadcrumbs and return links in post.njk and hero-tile.njk	2026-09-13 01:08:42 -05:00
venus	d8fb8a3699	feat: implement dynamic Eleventy tiling blog, modular CSS, and agent customizations - Add project foundation README.md and root AGENTS.md for pair programming - Configure .agents/ rules and skills for Eleventy tiling and Obsidian publishing - Decompose monolithic styles into modular tokens, reset, layout, and component CSS - Implement Nunjucks layout inheritance (base.njk, post.njk, page.njk) and reusable partials - Configure Eleventy 3 with markdown-it-anchor, syntax highlighting, and dynamic collections - Migrate sample prototypes into dynamic dispatches lander, gateway, and Markdown posts - Add multi-stage Dockerfile and clean-URL nginx.conf for production serving	2026-09-13 00:49:27 -05:00