feat: fix sparkline calculation, redesign with domain colors, add post-graph

- Fix sparkline downward trend by extrapolating partial current month
- Redesign sparkline SVG with gradient fill and responsive sizing
- Apply domain-specific colors (amber/rose/emerald/purple) via currentColor
- Add eleventy-plugin-post-graph for GitHub-style contribution grids
- Homepage: posting activity graph in Tier 2 default layout
- AI page (/ai/): stats dashboard + AI-involved posts graph injected via layout
- New filters: aiPosts (filter by AI level), aiStats (total/count/percentage)

Confab-Link: http://localhost:8080/sessions/956f4251-b4a9-4bc9-b214-53402ad1fe63

_includes/layouts/home.njk

@@ -106,6 +106,14 @@ withSidebar: true
 </section>
 {% endif %}
 
+{# Posting Activity — contribution graph #}
+{% if collections.posts and collections.posts.length %}
+<section class="mb-8 sm:mb-12">
+  <h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4 sm:mb-6">Posting Activity</h2>
+  {% postGraph collections.posts %}
+</section>
+{% endif %}
+
 {# Explore — quick links to key sections #}
 <section class="mb-8 sm:mb-12">
   <h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4 sm:mb-6">Explore</h2>

_includes/layouts/page.njk

@@ -26,6 +26,54 @@ withSidebar: true
     {{ content | safe }}
   </div>
 
+  {# AI post-graph — shown only on the /ai/ page #}
+  {% if page.url == "/ai/" and collections.posts %}
+  {% set stats = collections.posts | aiStats %}
+  {% set aiPostsList = collections.posts | aiPosts %}
+  <section class="mt-8 sm:mt-12 p-6 rounded-xl bg-surface-50 dark:bg-surface-800/50 border border-surface-200 dark:border-surface-700">
+    <h2 class="text-xl font-bold text-surface-900 dark:text-surface-100 mb-4">AI Usage Across Posts</h2>
+    <div class="grid gap-4 sm:grid-cols-4 mb-6">
+      <div class="text-center p-3 rounded-lg bg-white dark:bg-surface-800 border border-surface-200 dark:border-surface-700">
+        <div class="text-2xl font-bold text-surface-900 dark:text-surface-100">{{ stats.total }}</div>
+        <div class="text-xs text-surface-500 dark:text-surface-400">Total posts</div>
+      </div>
+      <div class="text-center p-3 rounded-lg bg-white dark:bg-surface-800 border border-surface-200 dark:border-surface-700">
+        <div class="text-2xl font-bold text-amber-600 dark:text-amber-400">{{ stats.aiCount }}</div>
+        <div class="text-xs text-surface-500 dark:text-surface-400">AI-involved</div>
+      </div>
+      <div class="text-center p-3 rounded-lg bg-white dark:bg-surface-800 border border-surface-200 dark:border-surface-700">
+        <div class="text-2xl font-bold text-emerald-600 dark:text-emerald-400">{{ stats.total - stats.aiCount }}</div>
+        <div class="text-xs text-surface-500 dark:text-surface-400">Human-only</div>
+      </div>
+      <div class="text-center p-3 rounded-lg bg-white dark:bg-surface-800 border border-surface-200 dark:border-surface-700">
+        <div class="text-2xl font-bold text-surface-900 dark:text-surface-100">{{ stats.percentage }}%</div>
+        <div class="text-xs text-surface-500 dark:text-surface-400">AI ratio</div>
+      </div>
+    </div>
+
+    {# Breakdown by level #}
+    <div class="flex flex-wrap gap-3 text-sm mb-6">
+      <span class="px-3 py-1 rounded-full bg-surface-100 dark:bg-surface-700 text-surface-600 dark:text-surface-300">
+        Level 0 (None): {{ stats.byLevel[0] }}
+      </span>
+      <span class="px-3 py-1 rounded-full bg-amber-50 dark:bg-amber-900/20 text-amber-700 dark:text-amber-300">
+        Level 1 (Editorial): {{ stats.byLevel[1] }}
+      </span>
+      <span class="px-3 py-1 rounded-full bg-amber-100 dark:bg-amber-900/40 text-amber-800 dark:text-amber-200">
+        Level 2 (Co-drafted): {{ stats.byLevel[2] }}
+      </span>
+      <span class="px-3 py-1 rounded-full bg-amber-200 dark:bg-amber-900/60 text-amber-900 dark:text-amber-100">
+        Level 3 (AI-generated): {{ stats.byLevel[3] }}
+      </span>
+    </div>
+
+    {# Post graph showing AI posts (highlighted) on the full year grid #}
+    <h3 class="text-lg font-semibold text-surface-900 dark:text-surface-100 mb-3">AI-Involved Posts Over Time</h3>
+    <p class="text-sm text-surface-500 dark:text-surface-400 mb-4">Highlighted days had posts with AI involvement (level 1+). Empty boxes represent days with no AI-involved posts.</p>
+    {% postGraph aiPostsList, { prefix: "ai", highlightColorLight: "#d97706", highlightColorDark: "#fbbf24" } %}
+  </section>
+  {% endif %}
+
   {# AI usage disclosure #}
   {% set aiTextLevel = aiTextLevel or ai_text_level %}
   {% set aiCodeLevel = aiCodeLevel or ai_code_level %}

articles.njk

@@ -14,7 +14,7 @@ permalink: "articles/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNu
     <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100">Articles</h1>
     {% set sparklineSvg = collections.articles | postingFrequency %}
     {% if sparklineSvg %}
-    <span class="opacity-60 dark:opacity-40 text-surface-500 dark:text-surface-400">{{ sparklineSvg | safe }}</span>
+    <span class="text-amber-600 dark:text-amber-400">{{ sparklineSvg | safe }}</span>
     {% endif %}
   </div>
   <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">

blog.njk

@@ -13,7 +13,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
     <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100">Blog</h1>
     {% set sparklineSvg = collections.posts | postingFrequency %}
     {% if sparklineSvg %}
-    <span class="opacity-60 dark:opacity-40 text-surface-500 dark:text-surface-400">{{ sparklineSvg | safe }}</span>
+    <span class="text-amber-600 dark:text-amber-400">{{ sparklineSvg | safe }}</span>
     {% endif %}
   </div>
   <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">

bookmarks.njk

@@ -14,7 +14,7 @@ permalink: "bookmarks/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageN
     <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100">Bookmarks</h1>
     {% set sparklineSvg = collections.bookmarks | postingFrequency %}
     {% if sparklineSvg %}
-    <span class="opacity-60 dark:opacity-40 text-surface-500 dark:text-surface-400">{{ sparklineSvg | safe }}</span>
+    <span class="text-amber-600 dark:text-amber-400">{{ sparklineSvg | safe }}</span>
     {% endif %}
   </div>
   <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">

css/tailwind.css

@@ -863,6 +863,20 @@
   }
 }
 
+/* Sparkline — inline SVG posting frequency chart */
+.sparkline {
+  width: 120px;
+  height: 28px;
+  display: block;
+}
+
+@media (min-width: 640px) {
+  .sparkline {
+    width: 180px;
+    height: 32px;
+  }
+}
+
 /* Save for Later buttons — hidden until auth confirmed */
 .save-later-btn {
   display: none;

eleventy.config.js

@@ -10,11 +10,15 @@ import { minify } from "html-minifier-terser";
 import registerUnfurlShortcode, { getCachedCard, prefetchUrl } from "./lib/unfurl-shortcode.js";
 import matter from "gray-matter";
 import { createHash, createHmac } from "crypto";
+import { createRequire } from "module";
 import { execFileSync } from "child_process";
 import { readFileSync, readdirSync, existsSync, mkdirSync, writeFileSync, copyFileSync } from "fs";
 import { resolve, dirname } from "path";
 import { fileURLToPath } from "url";
 
+const esmRequire = createRequire(import.meta.url);
+const postGraph = esmRequire("@rknightuk/eleventy-plugin-post-graph");
+
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const siteUrl = process.env.SITE_URL || "https://example.com";
 
@@ -125,6 +129,21 @@ export default function (eleventyConfig) {
   // Custom feed templates in feed.njk and feed-json.njk use these filters
   eleventyConfig.addPlugin(pluginRss);
 
+  // Post graph — GitHub-style contribution grid for posting frequency
+  eleventyConfig.addPlugin(postGraph, {
+    sort: "desc",
+    limit: 2,
+    dayBoxTitle: true,
+    selectorLight: ":root",
+    selectorDark: ".dark",
+    boxColorLight: "#e7e5e4",      // surface-200 (warm stone)
+    highlightColorLight: "#d97706", // amber-600 (accent)
+    textColorLight: "#1c1917",      // surface-900
+    boxColorDark: "#292524",        // surface-800
+    highlightColorDark: "#fbbf24",  // amber-400
+    textColorDark: "#fafaf9",       // surface-50
+  });
+
   // JSON encode filter for JSON feed
   eleventyConfig.addFilter("jsonEncode", (value) => {
     return JSON.stringify(value);
@@ -724,7 +743,9 @@ export default function (eleventyConfig) {
       : null;
   });
 
-  // Posting frequency — compute posts-per-month for last 12 months (for sparkline)
+  // Posting frequency — compute posts-per-month for last 12 months (for sparkline).
+  // Returns an inline SVG that uses currentColor for stroke and a semi-transparent
+  // gradient fill. Wrap in a colored span to set the domain color via Tailwind.
   eleventyConfig.addFilter("postingFrequency", (posts) => {
     if (!Array.isArray(posts) || posts.length === 0) return "";
     const now = new Date();
@@ -737,9 +758,18 @@ export default function (eleventyConfig) {
         counts[11 - monthsAgo]++;
       }
     }
+
+    // Extrapolate the current (partial) month to avoid false downward trend.
+    // e.g. 51 posts in 5 days of a 31-day month projects to ~316.
+    const dayOfMonth = now.getDate();
+    const daysInMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate();
+    if (dayOfMonth < daysInMonth && counts[11] > 0) {
+      counts[11] = Math.round(counts[11] / dayOfMonth * daysInMonth);
+    }
+
     const max = Math.max(...counts, 1);
     const w = 200;
-    const h = 30;
+    const h = 32;
     const pad = 2;
     const step = w / (counts.length - 1);
     const points = counts.map((v, i) => {
@@ -747,7 +777,45 @@ export default function (eleventyConfig) {
       const y = h - pad - ((v / max) * (h - pad * 2));
       return `${x.toFixed(1)},${y.toFixed(1)}`;
     }).join(" ");
-    return `<svg viewBox="0 0 ${w} ${h}" width="${w}" height="${h}" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Posting frequency over the last 12 months"><polyline fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" points="${points}"/></svg>`;
+    // Closed polygon for gradient fill (line path + bottom corners)
+    const fillPoints = `${points} ${w},${h} 0,${h}`;
+    return [
+      `<svg viewBox="0 0 ${w} ${h}" class="sparkline" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Posting frequency over the last 12 months">`,
+      `<defs><linearGradient id="spk-fill" x1="0" y1="0" x2="0" y2="1">`,
+      `<stop offset="0%" stop-color="currentColor" stop-opacity="0.25"/>`,
+      `<stop offset="100%" stop-color="currentColor" stop-opacity="0.02"/>`,
+      `</linearGradient></defs>`,
+      `<polygon fill="url(#spk-fill)" points="${fillPoints}"/>`,
+      `<polyline fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" points="${points}"/>`,
+      `</svg>`,
+    ].join("");
+  });
+
+  // Filter AI-involved posts (ai-text-level > "0" or aiTextLevel > "0")
+  eleventyConfig.addFilter("aiPosts", (posts) => {
+    if (!Array.isArray(posts)) return [];
+    return posts.filter((post) => {
+      const level = post.data?.aiTextLevel || post.data?.["ai-text-level"] || "0";
+      return level !== "0" && level !== 0;
+    });
+  });
+
+  // AI stats — returns { total, aiCount, percentage, byLevel }
+  eleventyConfig.addFilter("aiStats", (posts) => {
+    if (!Array.isArray(posts)) return { total: 0, aiCount: 0, percentage: 0, byLevel: {} };
+    const total = posts.length;
+    const byLevel = { 0: 0, 1: 0, 2: 0, 3: 0 };
+    for (const post of posts) {
+      const level = parseInt(post.data?.aiTextLevel || post.data?.["ai-text-level"] || "0", 10);
+      byLevel[level] = (byLevel[level] || 0) + 1;
+    }
+    const aiCount = total - byLevel[0];
+    return {
+      total,
+      aiCount,
+      percentage: total > 0 ? ((aiCount / total) * 100).toFixed(1) : "0",
+      byLevel,
+    };
   });
 
   // Helper: exclude drafts from collections

likes.njk

@@ -14,7 +14,7 @@ permalink: "likes/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumbe
     <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100">Likes</h1>
     {% set sparklineSvg = collections.likes | postingFrequency %}
     {% if sparklineSvg %}
-    <span class="opacity-60 dark:opacity-40 text-surface-500 dark:text-surface-400">{{ sparklineSvg | safe }}</span>
+    <span class="text-rose-600 dark:text-rose-400">{{ sparklineSvg | safe }}</span>
     {% endif %}
   </div>
   <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">

notes.njk

@@ -14,7 +14,7 @@ permalink: "notes/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumbe
     <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100">Notes</h1>
     {% set sparklineSvg = collections.notes | postingFrequency %}
     {% if sparklineSvg %}
-    <span class="opacity-60 dark:opacity-40 text-surface-500 dark:text-surface-400">{{ sparklineSvg | safe }}</span>
+    <span class="text-amber-600 dark:text-amber-400">{{ sparklineSvg | safe }}</span>
     {% endif %}
   </div>
   <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">

package.json

@@ -21,6 +21,7 @@
     "@fontsource/inter": "^5.2.8",
     "@quasibit/eleventy-plugin-sitemap": "^2.2.0",
     "@resvg/resvg-js": "^2.6.2",
+    "@rknightuk/eleventy-plugin-post-graph": "^1.0.8",
     "@zachleat/filter-container": "^4.0.0",
     "@zachleat/table-saw": "^1.0.7",
     "alpinejs": "^3.15.8",

photos.njk

@@ -14,7 +14,7 @@ permalink: "photos/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumb
     <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100">Photos</h1>
     {% set sparklineSvg = collections.photos | postingFrequency %}
     {% if sparklineSvg %}
-    <span class="opacity-60 dark:opacity-40 text-surface-500 dark:text-surface-400">{{ sparklineSvg | safe }}</span>
+    <span class="text-purple-600 dark:text-purple-400">{{ sparklineSvg | safe }}</span>
     {% endif %}
   </div>
   <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">

replies.njk

@@ -14,7 +14,7 @@ permalink: "replies/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNum
     <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100">Replies</h1>
     {% set sparklineSvg = collections.replies | postingFrequency %}
     {% if sparklineSvg %}
-    <span class="opacity-60 dark:opacity-40 text-surface-500 dark:text-surface-400">{{ sparklineSvg | safe }}</span>
+    <span class="text-rose-600 dark:text-rose-400">{{ sparklineSvg | safe }}</span>
     {% endif %}
   </div>
   <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">

reposts.njk

@@ -14,7 +14,7 @@ permalink: "reposts/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNum
     <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100">Reposts</h1>
     {% set sparklineSvg = collections.reposts | postingFrequency %}
     {% if sparklineSvg %}
-    <span class="opacity-60 dark:opacity-40 text-surface-500 dark:text-surface-400">{{ sparklineSvg | safe }}</span>
+    <span class="text-emerald-600 dark:text-emerald-400">{{ sparklineSvg | safe }}</span>
     {% endif %}
   </div>
   <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">