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