Aurealibe
8ebc1da9e4
- Astro statique, EN par defaut + /fr/ + /nl/, detection langue navigateur - i18n par fichiers JSON, ajouter une langue = ajouter des traductions - Contenu original porte a l'identique (diff d'inventaire par langue) - Chronologie legislative corrigee sur sources primaires (PE, Conseil, votes) - Timeline 23 precedents + observatoire 35 items + annuaire 66 outils FOSS, chaque affirmation verifiee et sourcee - Zero requete tierce (teste), lisible JS coupe, axe WCAG AA x2 themes - Version offline monofichier par langue a chaque build - Docker multi-stage vers nginx + CSP stricte auto-generee - CI GitHub Actions (SHA-pinnees) + verification hebdo des liens - CONTRIBUTING : divulgation d'affiliation obligatoire, allowlist de domaines testee en CI
43 lines
1.4 KiB
Plaintext
43 lines
1.4 KiB
Plaintext
---
|
|
// A row of filter <button>s for the observatory. A button only flips a data
|
|
// attribute on the section root (script in Observatory.astro) — the hiding
|
|
// itself is pure CSS, so with JS off the bar is inert and all items stay
|
|
// visible (the buttons are enhancement, never a gate on content).
|
|
interface Option {
|
|
value: string
|
|
label: string
|
|
}
|
|
|
|
interface Props {
|
|
group: string // e.g. "region" | "theme" → data-obs-<group> on the section
|
|
label: string // localized group label
|
|
allLabel: string // localized "All" (value "" = attribute removed)
|
|
options: Option[]
|
|
}
|
|
|
|
const { group, label, allLabel, options } = Astro.props
|
|
|
|
const btn =
|
|
'cursor-pointer rounded-dossier border border-rule bg-surface-2 px-2 py-0.5 font-mono text-xs text-ink hover:border-accent aria-pressed:border-accent aria-pressed:bg-accent aria-pressed:text-on-accent'
|
|
---
|
|
|
|
<div class="filterbar my-2 flex flex-wrap items-baseline gap-2" role="group" aria-label={label}>
|
|
<span class="min-w-16 font-mono text-xs tracking-wide text-dim uppercase">{label}</span>
|
|
<button type="button" data-obs-filter={group} data-value="" aria-pressed="true" class={btn}>
|
|
{allLabel}
|
|
</button>
|
|
{
|
|
options.map((o) => (
|
|
<button
|
|
type="button"
|
|
data-obs-filter={group}
|
|
data-value={o.value}
|
|
aria-pressed="false"
|
|
class={btn}
|
|
>
|
|
{o.label}
|
|
</button>
|
|
))
|
|
}
|
|
</div>
|