Refonte complète en SvelteKit (méthode OKI, AI-Overview ready)
Reconstruit le site statique mono-page (Bulma + htmx + Strapi) en SvelteKit 2 + Svelte 5 (runes) + TypeScript, 100 % statique (adapter-static), auto-hébergé. - Contenu enrichi à partir du dossier documentaire sourcé : 28 pages (histoire, Mé 67, procès 1968, 9 fiches militants, idéologie, héritage, publications, charte, orientation, sources, FAQ, actualités, contact, mentions légales). - Souveraineté : retrait de Bulma/htmx/mustache/ionicons/Plausible/Google Fonts et de l'API Strapi. Polices Archivo/Inter et sprite SVG auto-hébergés (zéro emoji). - Identité GONG (drapeau vert/blanc/rouge), thème sombre par défaut + clair AA, cadences motion gwoka, KineticText, timeline, 404 kréyòl, PWA hors-ligne. - SEO/AI-Overview : HTML sémantique, JSON-LD (Organization, Person, Event, FAQPage, Article...), hreflang, sitemap dynamique, robots/humans.txt. - Sécurité : CSP hachée + en-têtes (.htaccess o2switch + _headers Cloudflare), HSTS. - Actualités éditées via Sveltia CMS (git-based) ; Strapi retiré. npm run build : vert · npm run check : 0 erreur / 0 warning · JS 97 Ko gzip. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
sucupira
co-authored by
Claude Opus 4.8
Claude Opus 4.8
parent
b89c1a80b7
commit
cd9b9b093c
@@ -0,0 +1,329 @@
|
||||
<script lang="ts">
|
||||
import Seo from '$lib/components/Seo.svelte';
|
||||
import Resume from '$lib/components/Resume.svelte';
|
||||
import SectionTitle from '$lib/components/SectionTitle.svelte';
|
||||
import Icon from '$lib/components/Icon.svelte';
|
||||
import { reveal } from '$lib/motion/reveal';
|
||||
import { SITE, presentation } from '$lib/data/gong';
|
||||
|
||||
let { data } = $props();
|
||||
|
||||
const parcours = [
|
||||
{ href: '/histoire/', icon: 'clock', titre: 'Histoire', desc: 'De la fondation en 1963 à la dissolution en 1968 : la chronologie complète.' },
|
||||
{ href: '/me-67/', icon: 'flag', titre: 'Mé 67', desc: "Les tueries de mai 1967 à Pointe-à-Pitre, longtemps occultées." },
|
||||
{ href: '/proces-1968/', icon: 'scale', titre: 'Procès de 1968', desc: '18 Guadeloupéens jugés à Paris ; Sartre et Césaire témoignent.' },
|
||||
{ href: '/militants/', icon: 'users', titre: 'Militants', desc: 'Sainton, Nestor, Manville, Bangou, Glaude… les femmes et les hommes du GONG.' },
|
||||
{ href: '/ideologie/', icon: 'glo', titre: 'Idéologie', desc: "Marxisme-léninisme, tiers-mondisme et lutte de libération nationale." },
|
||||
{ href: '/heritage/', icon: 'memory', titre: 'Héritage', desc: 'UPLG, UGTG, mémoire de Mé 67 : ce que le GONG a laissé.' }
|
||||
];
|
||||
|
||||
const webPage = [
|
||||
{
|
||||
'@type': 'WebPage',
|
||||
'@id': `${SITE.url}/#webpage`,
|
||||
url: `${SITE.url}/`,
|
||||
name: `${SITE.nomComplet} — GONG`,
|
||||
description: SITE.description,
|
||||
isPartOf: { '@id': `${SITE.url}/#website` },
|
||||
about: { '@id': `${SITE.url}/#organization` },
|
||||
inLanguage: 'fr-FR'
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<Seo
|
||||
title="GONG — Groupe d'Organisation Nationale de la Guadeloupe"
|
||||
description="Le GONG, organisation indépendantiste guadeloupéenne (1963-1968) : histoire, Mé 67, procès de 1968, militants et héritage. Un dossier documentaire sourcé."
|
||||
path="/"
|
||||
graph={webPage}
|
||||
/>
|
||||
|
||||
<main id="contenu">
|
||||
<!-- HERO -->
|
||||
<section class="hero">
|
||||
<div class="container hero__inner">
|
||||
<img class="hero__logo" src="/img/gong.png" alt="Logo du GONG" width="132" height="132" />
|
||||
<p class="hero__kicker"><span class="flag-chip" aria-hidden="true"></span> 1963 — 1968</p>
|
||||
<h1 class="hero__title">GONG</h1>
|
||||
<p class="hero__full">{presentation.nomComplet}</p>
|
||||
<p class="hero__slogan">« Briser les urnes colonialistes.<br />Conquérir l'indépendance nationale. »</p>
|
||||
<p class="hero__creole" lang="gcf">Listwa a on pèp ki goumé pou libèté a-y.</p>
|
||||
<div class="hero__cta">
|
||||
<a class="btn btn--fill" href="/histoire/">Découvrir l'histoire</a>
|
||||
<a class="btn" href="/me-67/">Comprendre Mé 67</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- RÉSUMÉ (zone A AI-Overview) -->
|
||||
<section class="section--tight">
|
||||
<div class="container lecture">
|
||||
<Resume
|
||||
titre="Qu'est-ce que le GONG ?"
|
||||
lead="Le GONG (Groupe d'Organisation Nationale de la Guadeloupe) était une organisation politique indépendantiste et anticolonialiste guadeloupéenne, fondée le 23 juin 1963 à Paris et dissoute de facto en 1968 après la répression des émeutes de mai 1967 et le procès de ses militants."
|
||||
points={[
|
||||
'Fondé le 23 juin 1963 par d’anciens étudiants de l’AGEG (dont Pierre Sainton).',
|
||||
'Objectif : l’indépendance nationale de la Guadeloupe et une révolution socialiste.',
|
||||
'Impliqué dans les événements de « Mé 67 » (26-28 mai 1967).',
|
||||
'18 de ses membres jugés à Paris en 1968 : 13 acquittés, 6 condamnés avec sursis.'
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CHIFFRES CLÉS -->
|
||||
<section class="section--tight">
|
||||
<div class="container">
|
||||
<div class="stats">
|
||||
<div class="stat" use:reveal={0}>
|
||||
<span class="stat__num">1963</span><span class="stat__lab">Fondation, à Paris</span>
|
||||
</div>
|
||||
<div class="stat" use:reveal={1}>
|
||||
<span class="stat__num">26 mai 1967</span><span class="stat__lab">Première victime : Jacques Nestor</span>
|
||||
</div>
|
||||
<div class="stat" use:reveal={2}>
|
||||
<span class="stat__num">80–200</span><span class="stat__lab">Victimes estimées de Mé 67</span>
|
||||
</div>
|
||||
<div class="stat" use:reveal={3}>
|
||||
<span class="stat__num">18</span><span class="stat__lab">Accusés au procès de 1968</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- PARCOURS -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<SectionTitle title="Parcourir le dossier" />
|
||||
<div class="grid-cards">
|
||||
{#each parcours as p, i (p.href)}
|
||||
<a class="card card--link" href={p.href} use:reveal={i}>
|
||||
<Icon name={p.icon} size="1.8rem" />
|
||||
<h3>{p.titre}</h3>
|
||||
<p>{p.desc}</p>
|
||||
<span class="card__more">Lire <Icon name="arrow-right" size="1em" /></span>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- DOCUMENTS FONDATEURS -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<SectionTitle title="Les textes fondateurs" />
|
||||
<div class="grid-cards grid-cards--2">
|
||||
<article class="card card--vert" use:reveal={0}>
|
||||
<Icon name="document" size="1.6rem" />
|
||||
<h3>La Charte du GONG</h3>
|
||||
<p class="muted">Juin 1963 — le texte adopté en assemblée générale qui pose le droit du peuple guadeloupéen à disposer de lui-même.</p>
|
||||
<div class="card__actions">
|
||||
<a class="btn btn--ghost" href="/charte/">Lire la charte</a>
|
||||
<a class="btn btn--ghost" href="/assets/charte-du-gong-1963.pdf" rel="external noopener noreferrer" target="_blank">
|
||||
PDF <Icon name="download" size="1em" />
|
||||
</a>
|
||||
</div>
|
||||
</article>
|
||||
<article class="card card--vert" use:reveal={1}>
|
||||
<Icon name="document" size="1.6rem" />
|
||||
<h3>Orientation & stratégie</h3>
|
||||
<p class="muted">Le rapport sur la lutte révolutionnaire du peuple guadeloupéen : lutte de masse, suffrage universel, voie révolutionnaire.</p>
|
||||
<div class="card__actions">
|
||||
<a class="btn btn--ghost" href="/orientation/">Lire le document</a>
|
||||
<a class="btn btn--ghost" href="/assets/orientation-et-strategie-de-la-lutte-revolutionnaire-du-peuple-guadeloupeen-1963.pdf" rel="external noopener noreferrer" target="_blank">
|
||||
PDF <Icon name="download" size="1em" />
|
||||
</a>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ACTUALITÉS -->
|
||||
{#if data.actualites.length}
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<SectionTitle title="Actualités & mémoire" />
|
||||
<div class="grid-cards">
|
||||
{#each data.actualites as a, i (a.slug)}
|
||||
<a class="card card--link" href="/actualites/{a.slug}/" use:reveal={i}>
|
||||
{#if a.couverture}
|
||||
<img class="card__cover" src={a.couverture} alt={a.couvertureAlt} loading="lazy" decoding="async" />
|
||||
{/if}
|
||||
<time datetime={a.iso} class="card__date">{a.date}</time>
|
||||
<h3>{a.titre}</h3>
|
||||
<p class="muted">{a.chapeau}</p>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
<p class="center"><a class="btn btn--ghost" href="/actualites/">Toutes les actualités</a></p>
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
<!-- CTA FINAL -->
|
||||
<section class="section cta-final">
|
||||
<div class="container lecture center">
|
||||
<SectionTitle title="Se souvenir, transmettre" />
|
||||
<p>
|
||||
Le GONG a été effacé des mémoires officielles pendant des décennies. Ce site rassemble des
|
||||
sources académiques, journalistiques et archivistiques pour rendre son histoire accessible à
|
||||
tous.
|
||||
</p>
|
||||
<div class="hero__cta center-cta">
|
||||
<a class="btn btn--fill" href="/faq/">Questions fréquentes</a>
|
||||
<a class="btn" href="/sources/">Voir les sources</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
.hero {
|
||||
text-align: center;
|
||||
padding-top: var(--space-5);
|
||||
background: radial-gradient(ellipse at 50% -10%, color-mix(in srgb, var(--rouge-gong) 12%, transparent), transparent 60%);
|
||||
}
|
||||
.hero__inner {
|
||||
padding-bottom: var(--space-5);
|
||||
}
|
||||
.hero__logo {
|
||||
width: 132px;
|
||||
height: 132px;
|
||||
margin: 0 auto var(--space-2);
|
||||
}
|
||||
.hero__kicker {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-family: var(--font-display);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.15em;
|
||||
font-size: 0.85rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
.hero__title {
|
||||
font-size: clamp(3.5rem, 2rem + 9vw, 8rem);
|
||||
margin: 0.25rem 0 0;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
.hero__full {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
font-size: clamp(1rem, 0.9rem + 0.6vw, 1.3rem);
|
||||
color: var(--creme);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.hero__slogan {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
font-size: clamp(1.3rem, 1rem + 1.6vw, 2rem);
|
||||
line-height: 1.15;
|
||||
color: var(--accent);
|
||||
margin-bottom: 0.6rem;
|
||||
}
|
||||
.hero__creole {
|
||||
color: var(--muted);
|
||||
font-style: italic;
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.hero__cta {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.center-cta {
|
||||
margin-top: var(--space-3);
|
||||
}
|
||||
|
||||
.stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: var(--space-2);
|
||||
}
|
||||
.stat {
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--line);
|
||||
border-top: 3px solid var(--accent);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-3);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
.stat__num {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 900;
|
||||
font-size: 1.7rem;
|
||||
color: var(--creme);
|
||||
line-height: 1;
|
||||
}
|
||||
.stat__lab {
|
||||
font-size: 0.88rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.grid-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: var(--space-3);
|
||||
}
|
||||
.grid-cards--2 {
|
||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||
}
|
||||
.card h3 {
|
||||
margin: 0.6rem 0 0.4rem;
|
||||
}
|
||||
.card p {
|
||||
color: var(--muted);
|
||||
margin: 0;
|
||||
}
|
||||
.card .muted {
|
||||
color: var(--muted);
|
||||
}
|
||||
.card__more {
|
||||
margin-top: 0.8rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
font-family: var(--font-display);
|
||||
text-transform: uppercase;
|
||||
font-size: 0.78rem;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--accent);
|
||||
}
|
||||
.card__cover {
|
||||
width: calc(100% + 2 * var(--space-3));
|
||||
margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) var(--space-2);
|
||||
border-radius: var(--radius-md) var(--radius-md) 0 0;
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
.card__date {
|
||||
font-size: 0.8rem;
|
||||
color: var(--muted-fort);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.card__actions {
|
||||
display: flex;
|
||||
gap: 0.6rem;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 0.8rem;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
.center .btn {
|
||||
margin-inline: auto;
|
||||
}
|
||||
.cta-final {
|
||||
background: var(--noir-profond);
|
||||
border-block: 1px solid var(--line);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user