Add tooltip and create hugo shortcode

This commit is contained in:
Alex Selimov 2026-05-11 22:06:22 -04:00
parent 7b9b9bdcd3
commit 2c1f8b45b3
4 changed files with 64 additions and 11 deletions

View file

@ -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>