From 7b56af73126b67dc8e1da18b30f76518f7a31db5 Mon Sep 17 00:00:00 2001
From: Mat Manna <matmanna@outlook.com>
Date: Thu, 11 Jun 2026 21:53:39 -0400
Subject: [PATCH] feat: fix heatmap

---
 _data/foot.yml        |   2 +-
 _data/nav.yml         |   2 +-
 _layouts/page.html    |  20 +++++++
 index.md              |   8 +--
 scripts/post-build.js | 131 ++++++++++++++++++++++++++++++++++++++++--
 worker/index.js       |  49 ++++++++++------
 worker/wrangler.toml  |   3 +
 7 files changed, 188 insertions(+), 27 deletions(-)
 create mode 100644 _layouts/page.html

diff --git a/_data/foot.yml b/_data/foot.yml
index 2be7fc8..c2c3865 100644
--- a/_data/foot.yml
+++ b/_data/foot.yml
@@ -1,5 +1,5 @@
 title: Mat Manna
-emoji: 🎩
+emoji: 🏰
 pages:
   - title: projects
     url: /projects
diff --git a/_data/nav.yml b/_data/nav.yml
index b266c85..6587f98 100644
--- a/_data/nav.yml
+++ b/_data/nav.yml
@@ -1,5 +1,5 @@
 title: Mat Manna
-emoji: 🎩
+emoji: 🏰
 description: Indie maker, aspiring engineer, & security enthusiast.
 pages:
   - title: projects
diff --git a/_layouts/page.html b/_layouts/page.html
new file mode 100644
index 0000000..c7bf16b
--- /dev/null
+++ b/_layouts/page.html
@@ -0,0 +1,20 @@
+---
+layout: default
+---
+
+<h1 class="mb-3">{{ page.title | default: page.name | replace: '.md', '' | replace: '.html', '' }}</h1>
+
+<div class="mb-6">
+    {% if page.toc == true %}
+    {% include toc-card.html html=content %}
+    {% endif %}
+</div>
+
+<div class="content">
+
+    {{ content }}
+</div>
+
+{% if page.toc == true %}
+{% include scrollspy.html %}
+{% endif %}
diff --git a/index.md b/index.md
index f696557..15523ba 100644
--- a/index.md
+++ b/index.md
@@ -45,12 +45,12 @@ Outside of computing, I’m also a guitarist, competition aficionado, and lingua
 <details><summary>Recently, I've been shipping,<sub> (expand for stats!)</sub> but also: </summary>
   
 </details>
-  <a class="no-external-icon heatmap-link" href="https://heatmap.matmanna.dev?id=U07VA44DNBA&timezone=America%2FNew_York&standalone=true" title="Click to view detailed data for each day!" style="display: inline-block;">
-    <img id="heatmap-image" class="heatmap-image my-0" alt="Hackatime activity heatmap" width="684" height="90.33" fetchpriority="high" src="https://heatmap.matmanna.dev?id=U07VA44DNBA&timezone=America%2FNew_York&theme=light&format=png" data-light-src="https://heatmap.matmanna.dev?id=U07VA44DNBA&timezone=America%2FNew_York&format=png&theme=light" data-dark-src="https://heatmap.matmanna.dev?id=U07VA44DNBA&timezone=America%2FNew_York&theme=dark&format=png">
+  <a class="no-external-icon heatmap-link" href="https://heatmap.shymike.dev?id=U07VA44DNBA&timezone=America%2FNew_York&standalone=true" title="Click to view detailed data for each day!" style="display: inline-block;">
+    <img id="heatmap-image" class="heatmap-image my-0" alt="Hackatime activity heatmap" width="684" height="90" fetchpriority="high" src="https://heatmap.matmanna.dev/light" data-light-src="https://heatmap.matmanna.dev/light" data-dark-src="https://heatmap.matmanna.dev/dark">
   </a>
   <noscript>
-    <a class="no-external-icon heatmap-link" href="https://heatmap.matmanna.dev?id=U07VA44DNBA&timezone=America%2FNew_York&standalone=true" title="Click to view detailed data for each day!">
-      <img class="heatmap-image" alt="Hackatime activity heatmap" src="https://heatmap.matmanna.dev?id=U07VA44DNBA&timezone=America%2FNew_York&theme=light" width="684" height="90.33">
+    <a class="no-external-icon heatmap-link" href="https://heatmap.shymike.dev?id=U07VA44DNBA&timezone=America%2FNew_York&standalone=true" title="Click to view detailed data for each day!">
+      <img class="heatmap-image" alt="Hackatime activity heatmap" src="https://heatmap.matmanna.dev/light" width="684" height="90">
     </a>
   </noscript>
   <style>
diff --git a/scripts/post-build.js b/scripts/post-build.js
index 769cab8..c9ee48c 100644
--- a/scripts/post-build.js
+++ b/scripts/post-build.js
@@ -29,25 +29,143 @@ function getVarShortName(num) {
 }
 
 function stripPalette(html) {
-  // Strip duplicate Tailwind base reset blocks from inline palette
-  // These duplicate the same --tw-* vars already in :root
   const before = html.length;
-  html = html.replace(/\*,:after,:before\{--tw-[^}]*\}/g, '');
+
+  // 1. Strip redundant ::backdrop reset (inherits from parent via *, :after, :before)
   html = html.replace(/::backdrop\{--tw-[^}]*\}/g, '');
 
-  // Strip prose rules for elements never used anywhere on the site
-  const deadElements = ['pre', 'blockquote', 'kbd', 'table', 'thead', 'tbody', 'tfoot', 'figure', 'figcaption', 'dl', 'dt', 'dd'];
+  // 2. Strip unused --tw-* variable declarations from base reset
+  // These are empty/whitespace defaults that no utility class references via var()
+  const baseResetMatch = html.match(/\*,?:after,:before\{([^}]*)\}/);
+  if (baseResetMatch) {
+    const block = baseResetMatch[0];
+    const decls = baseResetMatch[1].match(/--tw-[a-z0-9-]+:\s*[^;]+;/g) || [];
+    // Find which --tw-* vars are referenced via var() anywhere in the HTML
+    const restOfHTML = html.replace(block, '');
+    const unused = decls.filter(d => {
+      const varName = d.split(':')[0].trim();
+      return !restOfHTML.includes('var(' + varName + ')');
+    });
+    if (unused.length > 0) {
+      let newBlock = block;
+      unused.forEach(d => { newBlock = newBlock.replace(d, ''); });
+      // Clean up empty declarations and trailing semicolons
+      newBlock = newBlock.replace(/;\s*;/g, ';').replace(/;\}/, '}');
+      html = html.replace(block, newBlock);
+      console.log('Stripped ' + unused.length + ' unused --tw-* variables');
+    }
+  }
+
+  // 2. Strip dead prose rules (elements never used on the site)
+  const deadElements = ['pre', 'blockquote', 'kbd', 'table', 'thead', 'tbody', 'tfoot', 'figure', 'figcaption', 'dl', 'dt', 'dd', 'picture', 'video'];
   deadElements.forEach(el => {
     const regex = new RegExp('\\.prose :where\\([^)]*\\b' + el + '\\b[^)]*\\):not\\(:where\\(\\[class~=not-prose\\],\\[class~=not-prose\\] \\*\\)\\)\\{[^}]*\\}', 'g');
     html = html.replace(regex, '');
   });
 
+  // 3. Strip @font-face (embedded Libertinus Mono — use system monospace instead)
+  html = html.replace(/@font-face\{[^}]*src:url\([^)]*\)[^}]*\}/g, '');
+
+  // 4. Strip unused prose variable declarations
+  // Find the second .prose{ block (the one with --tw-prose-* variables)
+  const proseVarBlock = html.match(/\.prose\{(--tw-prose[^}]*)\}/);
+  if (proseVarBlock) {
+    const block = proseVarBlock[0];
+    const vars = proseVarBlock[1].match(/--[a-z-]+:[^;]+/g) || [];
+    // Check which vars are used in remaining prose rules
+    const restOfHTML = html.replace(block, '');
+    const unused = vars.filter(v => {
+      const varName = v.split(':')[0];
+      return !restOfHTML.includes('var(' + varName + ')');
+    });
+    if (unused.length > 0) {
+      let newBlock = block;
+      unused.forEach(v => { newBlock = newBlock.replace(v + ';', ''); });
+      html = html.replace(block, newBlock);
+    }
+  }
+
+  // 5. Strip unused utility classes from inline CSS
+  // Collect all class names used in HTML
+  const usedClasses = new Set();
+  const classAttrRegex = /class="([^"]*)"/g;
+  let cm;
+  while ((cm = classAttrRegex.exec(html)) !== null) {
+    cm[1].split(/\s+/).filter(Boolean).forEach(c => usedClasses.add(c));
+  }
+
+  // Strip single-class utility rules where the class isn't used
+  // Pattern: .className{...} or .dark\:className{...} or .sm\:className{...}
+  const utilRegex = /\.([a-z][a-z0-9_-]*)\{[^}]*\}/g;
+  let um;
+  const toRemove = [];
+  while ((um = utilRegex.exec(html)) !== null) {
+    const fullMatch = um[0];
+    const className = um[1];
+    const matchStart = um.index;
+    // Skip if it's a minified class (c0-c99) or prose class
+    if (className.match(/^c\d+$/) || className === 'prose') continue;
+    // Skip if it contains complex selectors (spaces, commas, >)
+    if (className.includes(' ') || className.includes(',') || className.includes('>')) continue;
+    // Skip if preceded by a comma (part of combined selector like .overflow-hidden,.truncate{...})
+    if (matchStart > 0 && html[matchStart - 1] === ',') continue;
+    // Check if class is used in HTML
+    if (!usedClasses.has(className)) {
+      // Also check dark: and responsive: variants
+      const darkUsed = usedClasses.has('dark:' + className);
+      const respUsed = ['sm:', 'md:', 'lg:', 'xl:', '2xl:'].some(p => usedClasses.has(p + className));
+      if (!darkUsed && !respUsed) {
+        toRemove.push(fullMatch);
+      }
+    }
+  }
+  // Also strip dark: variant rules
+  const darkUtilRegex = /\.dark\\:([a-z][a-z0-9_-]*)\{[^}]*\}/g;
+  while ((um = darkUtilRegex.exec(html)) !== null) {
+    const fullMatch = um[0];
+    const className = um[1];
+    if (className.match(/^c\d+$/)) continue;
+    if (!usedClasses.has('dark:' + className)) {
+      toRemove.push(fullMatch);
+    }
+  }
+  // Also strip responsive variant rules
+  ['sm', 'md', 'lg', 'xl', '2xl'].forEach(prefix => {
+    const respRegex = new RegExp('\\.' + prefix + '\\\\:([a-z][a-z0-9_-]*)\\{[^}]*\\}', 'g');
+    while ((um = respRegex.exec(html)) !== null) {
+      const fullMatch = um[0];
+      const className = um[1];
+      if (className.match(/^c\d+$/)) continue;
+      if (!usedClasses.has(prefix + ':' + className)) {
+        toRemove.push(fullMatch);
+      }
+    }
+  });
+  // Remove duplicates and strip
+  [...new Set(toRemove)].forEach(rule => {
+    html = html.replace(rule, '');
+  });
+
   if (html.length < before) {
     console.log('Palette optimized: ' + (before - html.length) + ' bytes');
   }
   return html;
 }
 
+function minifyInlineScripts(html) {
+  // Minify inline script blocks (strip comments and excess whitespace)
+  return html.replace(/<script(?:\s[^>]*)?>([\s\S]*?)<\/script>/gi, (match, content) => {
+    if (content.length < 50) return match; // Skip tiny scripts
+    const minified = content
+      .replace(/\/\*[\s\S]*?\*\//g, '') // strip block comments
+      .replace(/\/\/[^\n]*/g, '') // strip line comments
+      .replace(/\s+/g, ' ') // collapse whitespace
+      .replace(/\s*([{}();,])\s*/g, '$1') // remove space around punctuation
+      .trim();
+    return match.replace(content, minified);
+  });
+}
+
 function processFile(filePath) {
   let html = fs.readFileSync(filePath, 'utf8');
   let modified = false;
@@ -55,6 +173,9 @@ function processFile(filePath) {
   // Optimize palette CSS before class renaming (selectors still say .prose)
   html = stripPalette(html);
 
+  // Minify inline scripts
+  html = minifyInlineScripts(html);
+
   const matches = html.match(/class="[^"]+"/g) || [];
 
   // Collect --tw-* variables (first file only, or reset per file - using global map)
diff --git a/worker/index.js b/worker/index.js
index b56c8a7..d641629 100644
--- a/worker/index.js
+++ b/worker/index.js
@@ -1,31 +1,48 @@
 const HEATMAP_ORIGIN = "https://heatmap.shymike.dev";
 const CACHE_TTL = 86400; // 24 hours
 
-export default {
-  async fetch(request, env, ctx) {
-    const url = new URL(request.url);
-    const target = new URL(HEATMAP_ORIGIN + url.pathname + url.search);
+async function fetchHeatmap(theme) {
+  const target = `${HEATMAP_ORIGIN}?id=U07VA44DNBA&timezone=America%2FNew_York&theme=${theme}&format=png`;
+  const response = await fetch(target);
+  return new Response(response.body, {
+    headers: {
+      "Content-Type": "image/png",
+      "Cache-Control": `public, max-age=${CACHE_TTL}, s-maxage=${CACHE_TTL}`,
+      "Access-Control-Allow-Origin": "*",
+    },
+  });
+}
 
+export default {
+  async scheduled(event, env, ctx) {
     const cache = caches.default;
-    const cacheKey = new Request(target.toString(), request);
+    for (const theme of ["light", "dark"]) {
+      const url = `https://heatmap.matmanna.dev/${theme}`;
+      const response = await fetchHeatmap(theme);
+      ctx.waitUntil(cache.put(new Request(url), response));
+    }
+  },
 
-    const cached = await cache.match(cacheKey);
-    if (cached) {
-      return cached;
+  async fetch(request, env, ctx) {
+    const url = new URL(request.url);
+    const theme = url.pathname.replace("/", "") || "light";
+    if (!["light", "dark"].includes(theme)) {
+      return new Response("Not found", { status: 404 });
     }
 
-    const originResponse = await fetch(target.toString(), {
-      headers: request.headers,
-    });
+    // Allow cache bypass with ?refresh=1
+    const skipCache = url.searchParams.get("refresh") === "1";
 
-    const response = new Response(originResponse.body, originResponse);
-    response.headers.set("Cache-Control", `public, max-age=${CACHE_TTL}, s-maxage=${CACHE_TTL}`);
-    response.headers.set("Access-Control-Allow-Origin", "*");
+    const cache = caches.default;
+    const cacheKey = new Request(request.url.split("?")[0], request);
 
-    if (response.ok) {
-      ctx.waitUntil(cache.put(cacheKey, response.clone()));
+    if (!skipCache) {
+      const cached = await cache.match(cacheKey);
+      if (cached) return cached;
     }
 
+    const response = await fetchHeatmap(theme);
+    ctx.waitUntil(cache.put(cacheKey, response.clone()));
     return response;
   },
 };
diff --git a/worker/wrangler.toml b/worker/wrangler.toml
index c6a7c54..50192ea 100644
--- a/worker/wrangler.toml
+++ b/worker/wrangler.toml
@@ -5,3 +5,6 @@ compatibility_date = "2025-01-01"
 routes = [
   { pattern = "heatmap.matmanna.dev/*", zone_name = "matmanna.dev" }
 ]
+
+[triggers]
+crons = ["0 6 * * *"]
-- 
2.51.2