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
parent c0f67e75a3
commit d8fb8a3699
37 changed files with 4361 additions and 7 deletions
@@ -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="/" 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="/">~/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,62 @@
+{% 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>flashrom_read.sh</span>
+        </span>
+        <span>POSIX sh</span>
+      </div>
+      <div class="code-content">
+        <pre><code class="language-bash"># Probe SPI flash chip and dump 16MB image
+flashrom -p ch341a_spi -r firmware_dump.bin -V
+# Verify checksums across consecutive reads
+sha256sum dump1.bin dump2.bin</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.rooks.dev" 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 "A fast, zero-bloat digital workshop detailing hardware reverse engineering, low-level POSIX environments, self-hosted infrastructure, and kernel security research. Designed for dense information retrieval." }}
+  </p>
+
+  <div class="filter-pills-row" aria-label="Topic Filters">
+    <a href="/" 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>