aselimov/hugo-unified-git-activity
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix issues with tooltip position and create partial for laying out

Browse source
This commit is contained in:
Alex Selimov 2026-05-11 22:37:17 -04:00
parent bd9c0d58df
commit 3c48c2bd2d
3 changed files with 45 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

37
layouts/partials/git-heatmap.html Normal file
View file

@ -0,0 +1,37 @@
{{ $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 { overflow-x: auto; }
#heatmap text { font-family: inherit; fill: currentColor; }
#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>

38
layouts/shortcodes/git-heatmap.html
View file

@ -1,37 +1 @@
{{ $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 { display: flex; justify-content: center; }
#heatmap text { font-family: inherit; fill: currentColor; }
#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>
{{ partial "git-heatmap.html" . }}