PVR/overzeuknup.top
1
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Ajout jauge dans le footer

Browse Source
This commit is contained in:
Gabriel
2025-07-02 10:59:53 +02:00
parent 3ee4ddac0f
commit 47b75eb3bb
2 changed files with 61 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
config.toml
View File

@@ -65,13 +65,14 @@ enableRobotsTXT = true
# You can use this to inject any HTML in the <head> tag.
# Ideal usecase for this is to import custom js/css or add your analytics snippet
customHeadHTML = '''
<script src="https://cdn.jsdelivr.net/npm/gaugeJS/dist/gauge.min.js"></script>
<a rel="me" href="https://mastodon.social/@ozk">Mastodon</a>
<link rel="stylesheet" type="text/css" href="/css/ozk.css">
'''
# License
licenseName = "BeerWare (rev.42) 🍺"
licenseDescription = " N'hésitez pas à nous payer une bière si vous le voulez quand vous nous croisez !"
licenseDescription = "N'hésitez pas à nous payer une bière si vous le voulez quand vous nous croisez ! {{< gauge url="https://cloud.richoux.me/seafhttp/f/2582b44ba453453f8793/?op=view" >}}'"
showPostsOnHomePage = "future"

59
layouts/shortcodes/gauge.html Normal file
View File

@@ -0,0 +1,59 @@
<!-- layouts/shortcodes/gauge.html -->
<div class="gauge-small" style="width:120px; height:60px; position:relative;">
<canvas id="gauge-canvas-small"></canvas>
<div id="gauge-value-small" style="
position:absolute;
bottom:4px; left:50%;
transform:translateX(-50%);
font-size:0.8rem;
background:rgba(255,255,255,0.8);
padding:2px 6px;
border-radius:4px;
pointer-events:none;
">…</div>
</div>
<script>
(function(){
const opts = {
angle: 0.15,
lineWidth: 0.44,
radiusScale: 1,
pointer: { length: 0.6, strokeWidth: 0.035, color: '#000' },
limitMax: false, limitMin: false,
colorStart: '#4caf50', colorStop: '#4caf50',
strokeColor: '#EEEEEE',
generateGradient: false,
highDpiSupport: true
};
const canvas = document.getElementById('gauge-canvas-small');
const container = canvas.parentElement;
const dpr = window.devicePixelRatio || 1;
const { width, height } = container.getBoundingClientRect();
canvas.width = width * dpr;
canvas.height = height * dpr;
canvas.style.width = width + 'px';
canvas.style.height = height + 'px';
const gauge = new Gauge(canvas).setOptions(opts);
gauge.maxValue = 100;
gauge.setMinValue(0);
gauge.animationSpeed = 32;
async function updateSmall(){
try {
const res = await fetch('{{ .Get "url" }}', {cache:'no-store'});
if (!res.ok) throw res.status;
const pct = Math.max(0, Math.min(100, parseFloat(await res.text())));
const color = pct < 20 ? '#f44336' : pct <= 80 ? '#ff9800' : '#4caf50';
opts.colorStart = opts.colorStop = color;
gauge.setOptions(opts);
gauge.set(pct);
document.getElementById('gauge-value-small').textContent = pct.toFixed(0)+'%';
} catch(e) {
document.getElementById('gauge-value-small').textContent = 'err';
console.error(e);
}
}
updateSmall();
setInterval(updateSmall, 30000);
})();
</script>