Add tooltip and create hugo shortcode

assets/css/heatmap.css

@@ -1,10 +0,0 @@
-:root{
-    --color-empty: #F5F5F5;
-    --color-low: #BDD7EE;
-    --color-mid: #2E86C1;
-    --color-high: #1A5276
-}
-
-#heatmap text {
-    font-family: inherit;
-}

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");
   });
 }

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"

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>