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
2026-04-02 08:44:56 +02:00 · 2026-03-05 14:21:27 +01:00
parent 91c0816303
commit 14dcfba50a
14 changed files with 1357 additions and 31 deletions
--- a/_includes/layouts/home.njk
+++ b/_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>
--- a/_includes/layouts/page.njk
+++ b/_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 %}
--- a/articles.njk
+++ b/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">
--- a/blog.njk
+++ b/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">
--- a/bookmarks.njk
+++ b/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">
--- a/css/tailwind.css
+++ b/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;
--- a/eleventy.config.js
+++ b/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
--- a/likes.njk
+++ b/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">
--- a/notes.njk
+++ b/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">
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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",
--- a/photos.njk
+++ b/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">
--- a/replies.njk
+++ b/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">
--- a/reposts.njk
+++ b/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">