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

Add caption and style it

Browse source
This commit is contained in:
Alex Selimov 2026-05-11 23:34:26 -04:00
parent 3c48c2bd2d
commit 620121b505
2 changed files with 12 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

2
assets/js/build_heatmap.js
View file

@ -44,7 +44,7 @@ export function render(weeks, counts) {
const svg = document.createElementNS(svgNS, "svg"); const svg = document.createElementNS(svgNS, "svg");
const svgWidth = weeks.length * SHIFT + 30; const svgWidth = weeks.length * SHIFT + 30;
const svgHeight = SHIFT * 7 + 20; const svgHeight = SHIFT * 7;
svg.setAttribute("viewBox", `0 0 ${svgWidth} ${svgHeight}`); svg.setAttribute("viewBox", `0 0 ${svgWidth} ${svgHeight}`);
svg.setAttribute("width", "100%"); svg.setAttribute("width", "100%");

13
layouts/partials/git-heatmap.html
View file

@ -3,13 +3,19 @@
<style> <style>
:root { :root {
--color-empty: {{ $p.color_empty }}; --color-empty: {{ $p.color_empty_dark }};
--color-low: {{ $p.color_low }}; --color-low: {{ $p.color_low }};
--color-mid: {{ $p.color_mid }}; --color-mid: {{ $p.color_mid }};
--color-high: {{ $p.color_high }}; --color-high: {{ $p.color_high }};
} }
@media (prefers-color-scheme: light) {
:root {
--color-empty: {{ $p.color_empty_light }};
}
}
#heatmap { overflow-x: auto; } #heatmap { overflow-x: auto; }
#heatmap text { font-family: inherit; fill: currentColor; } #heatmap text { font-family: inherit; fill: currentColor; }
#heatmap-caption {font-size: 0.8em; text-align: center; margin-top: 0px;}
#tooltip { #tooltip {
position: fixed; position: fixed;
background: #333; background: #333;
@ -33,5 +39,8 @@
document.getElementById("heatmap").appendChild(svg); document.getElementById("heatmap").appendChild(svg);
setupTooltips(svg); setupTooltips(svg);
</script> </script>
{{ with $p.caption }}
<p id="heatmap-caption"> {{ . | safeHTML }} </p>
{{ end }}
<div id="tooltip" class="hidden"></div> <div id="tooltip" class="hidden"></div>
<div id="legend"></div>