feat(soutenir): barre d'objectif de don (nom de domaine dédié, 10 €)
All checks were successful
Deploy info-canicule / deploy (push) Successful in 1m29s

Affiche un goal concret en haut de /soutenir. Valeurs en dur dans le
frontmatter (goalRaised / goalTarget) à éditer à la main quand un don
arrive — pas de branchement Ko-fi.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Florian 2026-05-27 01:55:53 +02:00
parent 95340c1228
commit 6315793c90

View file

@ -2,6 +2,12 @@
import Base from '../layouts/Base.astro'; import Base from '../layouts/Base.astro';
export const prerender = false; export const prerender = false;
const goalLabel = "Location d'un nom de domaine dédié";
const goalTarget = 10;
const goalRaised = 0;
const goalCurrency = '€';
const goalPercent = Math.min(100, Math.round((goalRaised / goalTarget) * 100));
--- ---
<Base <Base
@ -18,6 +24,41 @@ export const prerender = false;
</div> </div>
</section> </section>
<section class="container-tight pt-6">
<div class="rounded-xl border border-canicule-200 bg-white p-5 shadow-sm">
<div class="flex items-baseline justify-between gap-3">
<div>
<p class="text-xs font-semibold uppercase tracking-wide text-canicule-700">
Objectif de don en cours
</p>
<p class="mt-1 text-base font-semibold text-slate-900">{goalLabel}</p>
</div>
<p class="shrink-0 text-sm tabular-nums text-slate-600">
<span class="font-bold text-slate-900">{goalRaised} {goalCurrency}</span>
<span class="text-slate-400"> / {goalTarget} {goalCurrency}</span>
</p>
</div>
<div class="mt-3 h-3 w-full overflow-hidden rounded-full bg-slate-100">
<div
class="h-full rounded-full bg-canicule-500 transition-all"
style={`width: ${goalPercent}%`}
role="progressbar"
aria-valuenow={goalPercent}
aria-valuemin="0"
aria-valuemax="100"
aria-label={`${goalPercent}% de l'objectif atteint`}
>
</div>
</div>
<p class="mt-2 text-xs text-slate-500">
{goalPercent}% atteint — une fois l'objectif rempli, le nom de domaine dédié sera réservé
pour un an.
</p>
</div>
</section>
<section class="container-tight py-8 prose prose-slate max-w-none"> <section class="container-tight py-8 prose prose-slate max-w-none">
<h2>Don libre via Ko-fi</h2> <h2>Don libre via Ko-fi</h2>
<p> <p>