From 2c1f8b45b36ccf842695b59bf09bedbb1c3adb42 Mon Sep 17 00:00:00 2001
From: Alex Selimov <alex@alexselimov.com>
Date: Mon, 11 May 2026 22:06:22 -0400
Subject: [PATCH] Add tooltip and create hugo shortcode

---
 assets/css/heatmap.css              | 10 --------
 assets/js/build_heatmap.js          | 23 +++++++++++++++++-
 hugo.toml                           |  6 +++++
 layouts/shortcodes/git-heatmap.html | 36 +++++++++++++++++++++++++++++
 4 files changed, 64 insertions(+), 11 deletions(-)
 delete mode 100644 assets/css/heatmap.css
 create mode 100644 layouts/shortcodes/git-heatmap.html

diff --git a/assets/css/heatmap.css b/assets/css/heatmap.css
deleted file mode 100644
index c00329f..0000000
--- a/assets/css/heatmap.css
+++ /dev/null
@@ -1,10 +0,0 @@
-:root{
-    --color-empty: #F5F5F5;
-    --color-low: #BDD7EE;
-    --color-mid: #2E86C1;
-    --color-high: #1A5276
-}
-
-#heatmap text {
-    font-family: inherit;
-}
diff --git a/assets/js/build_heatmap.js b/assets/js/build_heatmap.js
index 1748238..906cbf2 100644
--- a/assets/js/build_heatmap.js
+++ b/assets/js/build_heatmap.js
@@ -79,7 +79,28 @@ export function render(weeks, counts) {
 
       svg.appendChild(rect);
     });
+  });
+  return svg;
+}
 
-    document.getElementById("heatmap").appendChild(svg);
+export function setupTooltips(svg) {
+  const tooltip = document.getElementById("tooltip");
+
+  svg.addEventListener("mouseover", (e) => {
+    if (e.target.tagName != "rect") return;
+    const date = e.target.dataset.date;
+    const count = e.target.dataset.count;
+
+    tooltip.textContent = `${date} - ${count} commit${count == 1 ? "" : "s"}`;
+    tooltip.classList.remove("hidden");
+  });
+
+  svg.addEventListener("mousemove", (e) => {
+    tooltip.style.left = e.pageX + 12 + "px";
+    tooltip.style.top = e.pageY - 28 + "px";
+  });
+
+  svg.addEventListener("mouseout", (e) => {
+    if (e.target.tagName === "rect") tooltip.classList.add("hidden");
   });
 }
diff --git a/hugo.toml b/hugo.toml
index 19c8846..b283b66 100644
--- a/hugo.toml
+++ b/hugo.toml
@@ -1,3 +1,9 @@
 baseURL = 'https://example.org/'
 locale = 'en-us'
 title = 'My New Hugo Project'
+
+[params.heatmap]
+color_empty = "#F5F5F5"
+color_low   = "#BDD7EE"
+color_mid   = "#2E86C1"
+color_high  = "#1A5276"
diff --git a/layouts/shortcodes/git-heatmap.html b/layouts/shortcodes/git-heatmap.html
new file mode 100644
index 0000000..67af95f
--- /dev/null
+++ b/layouts/shortcodes/git-heatmap.html
@@ -0,0 +1,36 @@
+{{ $js := resources.Get "js/build_heatmap.js" }}
+{{ $p := .Site.Params.heatmap }}
+
+<style>
+:root {
+  --color-empty: {{ $p.color_empty }};
+  --color-low:   {{ $p.color_low }};
+  --color-mid:   {{ $p.color_mid }};
+  --color-high:  {{ $p.color_high }};
+}
+#heatmap text { font-family: inherit; }
+#tooltip {
+  position: fixed;
+  background: #333;
+  color: white;
+  padding: 5px 10px;
+  border-radius: 4px;
+  font-size: 12px;
+  pointer-events: none;
+}
+.hidden { display: none; }
+</style>
+
+<div id="heatmap"></div>
+<script type="module">
+    import {flattenData, constructWeeks, render, setupTooltips} from "{{ $js.RelPermalink }}"
+
+    const data = await fetch("/activity.json").then((r) => r.json());
+    const counts = flattenData(data);
+    const weeks = constructWeeks();
+    const svg = render(weeks, counts);
+    document.getElementById("heatmap").appendChild(svg);
+    setupTooltips(svg);
+</script>
+<div id="tooltip" class="hidden"></div>
+<div id="legend"></div>