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
2026-07-24 23:57:37 -04:00
co-authored by Claude Opus 4.8
parent b89c1a80b7
commit cd9b9b093c
104 changed files with 14569 additions and 1383 deletions
+12
View File
@@ -0,0 +1,12 @@
// See https://svelte.dev/docs/kit/types#app.d.ts
declare global {
namespace App {
// interface Error {}
// interface Locals {}
// interface PageData {}
// interface PageState {}
// interface Platform {}
}
}
export {};
+21
View File
@@ -0,0 +1,21 @@
<!doctype html>
<html lang="%lang%" class="has-no-js">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="%sveltekit.assets%/favicon.ico" sizes="32x32" />
<link rel="icon" href="%sveltekit.assets%/icon.png" type="image/png" sizes="192x192" />
<link rel="apple-touch-icon" href="%sveltekit.assets%/apple-icon.png" />
<link rel="manifest" href="%sveltekit.assets%/manifest.webmanifest" />
<meta name="theme-color" content="#0D0D0D" />
<link rel="preload" href="%sveltekit.assets%/fonts/archivo-latin-700-normal.woff2" as="font" type="font/woff2" crossorigin />
<link rel="stylesheet" href="%sveltekit.assets%/fonts/fonts.css" />
<!-- Anti-FOUC thème : pose .js / .light-theme avant le premier paint (CSP script-src 'self') -->
<script src="%sveltekit.assets%/theme.js"></script>
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
<script src="%sveltekit.assets%/registerSW.js"></script>
</body>
</html>
+10
View File
@@ -0,0 +1,10 @@
import type { Handle } from '@sveltejs/kit';
import { localeFromPath } from '$lib/i18n';
// Injecte l'attribut lang correct dans app.html selon la locale de la route.
export const handle: Handle = async ({ event, resolve }) => {
const lang = localeFromPath(event.url.pathname);
return resolve(event, {
transformPageChunk: ({ html }) => html.replace('%lang%', lang)
});
};
+15
View File
@@ -0,0 +1,15 @@
// Déclarations vite-imagetools. Ce fichier NE DOIT PAS être un module
// (aucun import/export au niveau racine) pour que les `declare module` soient globaux.
declare module '*&as=picture' {
const value: {
sources: Record<string, string>;
img: { src: string; w: number; h: number };
};
export default value;
}
declare module '*&as=metadata' {
const value: { src: string; width: number; height: number; format: string };
export default value;
}
+54
View File
@@ -0,0 +1,54 @@
<script lang="ts">
// Fil d'Ariane visible. Le JSON-LD BreadcrumbList est émis en parallèle par <Seo>.
interface Props {
items: { name: string; path: string }[];
}
let { items }: Props = $props();
</script>
<nav class="fil" aria-label="Fil d'Ariane">
<ol>
{#each items as item, i (item.path)}
<li>
{#if i < items.length - 1}
<a href={item.path} class="no-underline">{item.name}</a>
<span class="fil__sep" aria-hidden="true">/</span>
{:else}
<span aria-current="page">{item.name}</span>
{/if}
</li>
{/each}
</ol>
</nav>
<style>
.fil {
font-size: 0.82rem;
color: var(--muted);
}
.fil ol {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin: 0 0 var(--space-3);
padding: 0;
}
.fil li {
display: inline-flex;
gap: 0.4rem;
align-items: center;
}
.fil a {
color: var(--muted);
}
.fil a:hover {
color: var(--accent);
}
.fil [aria-current='page'] {
color: var(--creme);
}
.fil__sep {
color: var(--muted-fort);
}
</style>
+188
View File
@@ -0,0 +1,188 @@
<script lang="ts">
import Icon from './Icon.svelte';
import { contact } from '$lib/data/gong';
const sections = [
{
titre: 'Le mouvement',
liens: [
{ href: '/histoire/', label: 'Histoire' },
{ href: '/me-67/', label: 'Mé 67 (1967)' },
{ href: '/proces-1968/', label: 'Procès de 1968' },
{ href: '/militants/', label: 'Militants & fondateurs' },
{ href: '/ideologie/', label: 'Idéologie' },
{ href: '/heritage/', label: 'Héritage' }
]
},
{
titre: 'Documents',
liens: [
{ href: '/charte/', label: 'Charte de 1963' },
{ href: '/orientation/', label: 'Orientation & stratégie' },
{ href: '/publications/', label: 'Publications' },
{ href: '/sources/', label: 'Sources & bibliographie' },
{ href: '/faq/', label: "Qu'est-ce que le GONG ?" }
]
},
{
titre: 'Le site',
liens: [
{ href: '/actualites/', label: 'Actualités' },
{ href: '/contact/', label: 'Contact' },
{ href: '/mentions-legales/', label: 'Mentions légales' }
]
}
];
const annee = new Date().getFullYear();
</script>
<footer class="site-footer">
<div class="flag-bar" aria-hidden="true"></div>
<div class="container site-footer__inner">
<blockquote class="site-footer__cite">
<p lang="fr">
« Les générations futures se doivent de continuer le combat, avec les moyens qu'elles ont
maintenant à leur disposition, et le mener à son terme, de telle sorte qu'un jour notre pays
et les Guadeloupéens soient libérés des ventouses tentaculaires et séculaires qu'est le
colonialisme français. »
</p>
<cite>Serge Glaude — co-fondateur du GONG</cite>
</blockquote>
<nav class="site-footer__grid" aria-label="Plan du site">
{#each sections as s (s.titre)}
<div>
<h2 class="site-footer__title">{s.titre}</h2>
<ul>
{#each s.liens as l (l.href)}
<li><a href={l.href} class="no-underline">{l.label}</a></li>
{/each}
</ul>
</div>
{/each}
<div>
<h2 class="site-footer__title">Nous suivre</h2>
<div class="site-footer__social">
<a href="mailto:{contact.email}" class="no-underline" aria-label="E-mail (ProtonMail)">
<Icon name="mail" /> <span>{contact.email}</span>
</a>
<a
href={contact.bokantaj}
rel="external noopener noreferrer"
target="_blank"
class="no-underline"
aria-label="Bokantaj (réseau social)"
>
<Icon name="globe" /> <span>Bokantaj</span>
</a>
<a
href={contact.gade}
rel="external noopener noreferrer"
target="_blank"
class="no-underline"
aria-label="Gade (vidéos PeerTube)"
>
<Icon name="video" /> <span>Gade — vidéos</span>
</a>
</div>
</div>
</nav>
<div class="site-footer__federe">
<p>
<img src="/img/gong.png" alt="" width="28" height="28" />
Un site opéré par
<a href="https://o-k-i.net" rel="external noopener noreferrer" target="_blank">ORGANISATION KA INTERNATIONALE</a>
· <span lang="gcf">An mémwè a tout sé moun-la ki goumé.</span>
</p>
<p class="site-footer__legal">
© {annee} GONG — Contenu sous licence
<a href="https://www.gnu.org/licenses/agpl-3.0.html" rel="external noopener noreferrer" target="_blank">AGPL-3.0</a>.
<a href="/mentions-legales/" class="no-underline">Mentions légales</a>
</p>
</div>
</div>
</footer>
<style>
.site-footer {
margin-top: var(--space-6);
background: var(--noir-profond);
border-top: 1px solid var(--line);
}
.site-footer__inner {
padding-block: var(--space-4);
display: grid;
gap: var(--space-4);
}
.site-footer__cite {
margin: 0;
max-width: 62ch;
border-left: 4px solid var(--accent);
padding-left: var(--space-2);
}
.site-footer__cite p {
font-style: italic;
color: var(--muted);
}
.site-footer__cite cite {
font-style: normal;
font-weight: 600;
color: var(--creme);
font-size: 0.9rem;
}
.site-footer__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--space-3);
}
.site-footer__title {
font-size: 0.78rem;
letter-spacing: 0.08em;
color: var(--muted-fort);
margin-bottom: 0.6rem;
}
.site-footer__grid ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.4rem;
}
.site-footer__grid a {
color: var(--muted);
font-size: 0.92rem;
}
.site-footer__grid a:hover {
color: var(--accent);
}
.site-footer__social {
display: grid;
gap: 0.55rem;
}
.site-footer__social a {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--muted);
font-size: 0.9rem;
}
.site-footer__social a:hover {
color: var(--accent);
}
.site-footer__federe {
border-top: 1px solid var(--line);
padding-top: var(--space-3);
font-size: 0.85rem;
color: var(--muted);
}
.site-footer__federe img {
display: inline;
vertical-align: middle;
margin-right: 0.3rem;
}
.site-footer__legal {
margin: 0.4rem 0 0;
font-size: 0.8rem;
}
</style>
+24
View File
@@ -0,0 +1,24 @@
<script lang="ts">
// Icône du sprite GONG. <Icon name="ka" /> → <use href="/icons.svg#ka">.
// Décoratif par défaut (aria-hidden) ; passer `label` pour une icône signifiante.
import { asset } from '$app/paths';
interface Props {
name: string;
label?: string;
size?: string;
class?: string;
}
let { name, label, size = '1.25em', class: cls = '' }: Props = $props();
</script>
<svg
class="icon {cls}"
style:width={size}
style:height={size}
role={label ? 'img' : undefined}
aria-label={label}
aria-hidden={label ? undefined : 'true'}
>
<use href={asset(`/icons.svg#${name}`)} />
</svg>
+67
View File
@@ -0,0 +1,67 @@
<script lang="ts">
// Titre cinétique : révélation mot à mot au scroll, cadence syncopée gwoka.
// Split par MOTS (jamais par caractères — apostrophes). Le texte reste intégral
// pour les lecteurs d'écran ; l'animation ne s'active que sous html.has-js + no-preference.
import { syncopatedDelay } from '$lib/motion/tokens';
import type { Action } from 'svelte/action';
interface Props {
text: string;
as?: 'h1' | 'h2' | 'h3';
id?: string;
class?: string;
}
let { text, as = 'h2', id, class: cls = '' }: Props = $props();
const mots = $derived(text.split(' '));
const kinetic: Action = (node) => {
const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (reduce) {
node.classList.add('is-in');
return;
}
const io = new IntersectionObserver(
(entries) => {
for (const e of entries) {
if (e.isIntersecting) {
node.classList.add('is-in');
io.unobserve(node);
}
}
},
{ threshold: 0.4 }
);
io.observe(node);
return { destroy: () => io.disconnect() };
};
</script>
<svelte:element this={as} {id} class="kinetic {cls}" use:kinetic>
{#each mots as mot, i (i)}
<span class="kinetic__w"><span class="kinetic__i" style:--d="{syncopatedDelay(i)}ms">{mot}</span></span>{' '}
{/each}
</svelte:element>
<style>
.kinetic__w {
display: inline-block;
overflow: hidden;
vertical-align: top;
}
.kinetic__i {
display: inline-block;
}
:global(html.has-js) .kinetic:not(.is-in) .kinetic__i {
transform: translateY(105%);
}
.kinetic.is-in .kinetic__i {
transform: translateY(0);
transition: transform var(--dur-mesure) var(--ease-ka);
transition-delay: var(--d, 0ms);
}
@media (prefers-reduced-motion: reduce) {
:global(html.has-js) .kinetic .kinetic__i {
transform: none;
}
}
</style>
+268
View File
@@ -0,0 +1,268 @@
<script lang="ts">
import { page } from '$app/state';
import Icon from './Icon.svelte';
const primaires = [
{ href: '/histoire/', label: 'Histoire' },
{ href: '/me-67/', label: 'Mé 67' },
{ href: '/militants/', label: 'Militants' },
{ href: '/ideologie/', label: 'Idéologie' },
{ href: '/heritage/', label: 'Héritage' },
{ href: '/actualites/', label: 'Actualités' }
];
const secondaires = [
{ href: '/proces-1968/', label: 'Procès de 1968' },
{ href: '/publications/', label: 'Publications' },
{ href: '/charte/', label: 'Charte de 1963' },
{ href: '/orientation/', label: 'Orientation & stratégie' },
{ href: '/sources/', label: 'Sources' },
{ href: '/faq/', label: "Qu'est-ce que le GONG ?" },
{ href: '/contact/', label: 'Contact' }
];
let menuOuvert = $state(false);
let theme = $state<'dark' | 'light'>('dark');
const chemin = $derived(page.url.pathname);
function actif(href: string): boolean {
return href === '/' ? chemin === '/' : chemin.startsWith(href);
}
$effect(() => {
theme = document.documentElement.classList.contains('light-theme') ? 'light' : 'dark';
});
function basculerTheme() {
const el = document.documentElement;
const clair = el.classList.toggle('light-theme');
theme = clair ? 'light' : 'dark';
try {
localStorage.setItem('gong-theme', clair ? 'light' : 'dark');
} catch {
/* localStorage indisponible */
}
}
// Ferme le menu à chaque changement de route.
$effect(() => {
void chemin;
menuOuvert = false;
});
</script>
<svelte:window
onkeydown={(e) => {
if (e.key === 'Escape') menuOuvert = false;
}}
/>
<header class="nav">
<div class="nav__bar container">
<a href="/" class="nav__brand no-underline" aria-label="GONG — accueil">
<img src="/img/gong.png" alt="" width="40" height="40" class="nav__logo" />
<span class="nav__name">GONG</span>
</a>
<nav class="nav__primary" aria-label="Navigation principale">
{#each primaires as l (l.href)}
<a href={l.href} class="nav__link no-underline" aria-current={actif(l.href) ? 'page' : undefined}>
{l.label}
</a>
{/each}
</nav>
<div class="nav__actions">
<button
class="nav__icon-btn"
onclick={basculerTheme}
aria-label={theme === 'light' ? 'Passer au thème sombre' : 'Passer au thème clair'}
>
<Icon name={theme === 'light' ? 'moon' : 'sun'} />
</button>
<button
class="nav__icon-btn nav__menu-btn"
onclick={() => (menuOuvert = !menuOuvert)}
aria-expanded={menuOuvert}
aria-controls="menu-panneau"
aria-label="Menu"
>
<Icon name={menuOuvert ? 'close' : 'menu'} />
</button>
</div>
</div>
<div class="flag-bar" aria-hidden="true"></div>
</header>
{#if menuOuvert}
<button
class="nav__scrim"
aria-label="Fermer le menu"
onclick={() => (menuOuvert = false)}
tabindex="-1"
></button>
{/if}
<div id="menu-panneau" class="nav__panel" class:open={menuOuvert} aria-hidden={!menuOuvert}>
<nav aria-label="Toutes les sections">
<p class="nav__group-title">Le mouvement</p>
{#each primaires as l (l.href)}
<a href={l.href} class="nav__panel-link no-underline" aria-current={actif(l.href) ? 'page' : undefined}>
{l.label}
</a>
{/each}
<p class="nav__group-title">Documents & mémoire</p>
{#each secondaires as l (l.href)}
<a href={l.href} class="nav__panel-link no-underline" aria-current={actif(l.href) ? 'page' : undefined}>
{l.label}
</a>
{/each}
</nav>
</div>
<style>
.nav {
position: sticky;
top: 0;
z-index: 100;
background: color-mix(in srgb, var(--noir) 92%, transparent);
backdrop-filter: blur(8px);
border-bottom: 1px solid var(--line);
}
.nav__bar {
display: flex;
align-items: center;
gap: var(--space-3);
height: var(--nav-h);
}
.nav__brand {
display: inline-flex;
align-items: center;
gap: 0.6rem;
color: var(--creme);
flex: none;
}
.nav__logo {
width: 40px;
height: 40px;
}
.nav__name {
font-family: var(--font-display);
font-weight: 900;
font-size: 1.4rem;
letter-spacing: 0.02em;
}
.nav__primary {
display: none;
align-items: center;
gap: 0.35rem;
margin-left: auto;
}
.nav__link {
font-family: var(--font-display);
font-weight: 700;
font-size: 0.82rem;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--muted);
padding: 0.45rem 0.6rem;
border-radius: var(--radius-sm);
transition: color var(--dur-tanbou) var(--ease-ka);
}
.nav__link:hover,
.nav__link[aria-current='page'] {
color: var(--creme);
}
.nav__link[aria-current='page'] {
box-shadow: inset 0 -2px 0 var(--accent);
}
.nav__actions {
display: flex;
align-items: center;
gap: 0.25rem;
margin-left: auto;
}
.nav__primary + .nav__actions {
margin-left: 0;
}
.nav__icon-btn {
display: inline-grid;
place-items: center;
width: 42px;
height: 42px;
background: transparent;
border: 1px solid transparent;
border-radius: var(--radius-sm);
color: var(--creme);
cursor: pointer;
transition:
border-color var(--dur-tanbou) var(--ease-ka),
color var(--dur-tanbou) var(--ease-ka);
}
.nav__icon-btn:hover {
border-color: var(--line);
color: var(--accent);
}
.nav__scrim {
position: fixed;
inset: 0;
z-index: 98;
background: rgba(0, 0, 0, 0.55);
border: 0;
cursor: pointer;
}
.nav__panel {
position: fixed;
top: 0;
right: 0;
z-index: 99;
width: min(88vw, 340px);
height: 100dvh;
overflow-y: auto;
padding: calc(var(--nav-h) + var(--space-3)) var(--space-3) var(--space-4);
background: var(--noir-profond);
border-left: 1px solid var(--line);
transform: translateX(100%);
transition: transform var(--dur-mesure) var(--ease-ka);
}
.nav__panel.open {
transform: translateX(0);
}
.nav__group-title {
font-family: var(--font-display);
text-transform: uppercase;
font-size: 0.72rem;
letter-spacing: 0.08em;
color: var(--muted-fort);
margin: var(--space-3) 0 0.5rem;
}
.nav__panel-link {
display: block;
font-family: var(--font-display);
font-weight: 700;
text-transform: uppercase;
font-size: 0.95rem;
color: var(--creme);
padding: 0.65rem 0.5rem;
border-bottom: 1px solid var(--line);
}
.nav__panel-link:hover,
.nav__panel-link[aria-current='page'] {
color: var(--accent);
}
@media (min-width: 960px) {
.nav__primary {
display: flex;
}
.nav__actions {
margin-left: 0;
}
.nav__menu-btn {
display: none;
}
.nav__panel,
.nav__scrim {
display: none;
}
}
</style>
+59
View File
@@ -0,0 +1,59 @@
<script lang="ts">
// Zone A « Résumé immédiat » — critique pour Google AI Overview.
// Réponse directe en tête (lead) + points essentiels. Rendu en <aside> sémantique.
interface Props {
lead: string;
points?: string[];
titre?: string;
}
let { lead, points = [], titre = 'En résumé' }: Props = $props();
</script>
<aside class="resume" aria-label={titre}>
<p class="resume__titre"><span class="flag-chip" aria-hidden="true"></span> {titre}</p>
<p class="resume__lead">{lead}</p>
{#if points.length}
<ul class="resume__points">
{#each points as p (p)}
<li>{p}</li>
{/each}
</ul>
{/if}
</aside>
<style>
.resume {
background: var(--card-bg);
border: 1px solid var(--line);
border-left: 4px solid var(--vert-gong);
border-radius: var(--radius-md);
padding: var(--space-3);
margin-block: var(--space-3);
}
.resume__titre {
display: flex;
align-items: center;
gap: 0.6rem;
font-family: var(--font-display);
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 0.8rem;
color: var(--muted-fort);
margin-bottom: 0.6rem;
}
.resume__lead {
font-size: 1.12rem;
line-height: 1.5;
color: var(--creme);
margin-bottom: 0.6rem;
}
.resume__points {
margin: 0;
padding-left: 1.1rem;
display: grid;
gap: 0.3rem;
}
.resume__points li {
color: var(--muted);
}
</style>
@@ -0,0 +1,58 @@
<script lang="ts">
// Barre de progression de lecture. rAF + écriture DOM directe (jamais d'état réactif par frame).
// Gradient drapeau vert→rouge. role=progressbar. Coupée en reduced-motion via la gate CSS.
import { onMount } from 'svelte';
let bar: HTMLDivElement;
onMount(() => {
let raf = 0;
let ticking = false;
const update = () => {
const h = document.documentElement.scrollHeight - window.innerHeight;
const p = h > 0 ? Math.min(1, Math.max(0, window.scrollY / h)) : 0;
bar.style.transform = `scaleX(${p})`;
bar.setAttribute('aria-valuenow', String(Math.round(p * 100)));
ticking = false;
};
const onScroll = () => {
if (!ticking) {
ticking = true;
raf = requestAnimationFrame(update);
}
};
update();
window.addEventListener('scroll', onScroll, { passive: true });
window.addEventListener('resize', onScroll, { passive: true });
return () => {
cancelAnimationFrame(raf);
window.removeEventListener('scroll', onScroll);
window.removeEventListener('resize', onScroll);
};
});
</script>
<div
bind:this={bar}
class="progress"
role="progressbar"
aria-label="Progression de lecture"
aria-valuemin="0"
aria-valuemax="100"
aria-valuenow="0"
></div>
<style>
.progress {
position: fixed;
top: 0;
left: 0;
z-index: 101;
height: 3px;
width: 100%;
transform: scaleX(0);
transform-origin: left;
background: linear-gradient(to right, var(--vert-gong), var(--jaune-sable), var(--rouge-gong));
pointer-events: none;
}
</style>
+30
View File
@@ -0,0 +1,30 @@
<script lang="ts">
// Titre de section avec ornement flag-chip + révélation cinétique (mot à mot).
import KineticText from './KineticText.svelte';
interface Props {
title: string;
as?: 'h2' | 'h3';
id?: string;
class?: string;
}
let { title, as = 'h2', id, class: cls = '' }: Props = $props();
</script>
<div class="section-title {cls}">
<span class="flag-chip" aria-hidden="true"></span>
<KineticText text={title} {as} {id} />
</div>
<style>
.section-title {
margin-bottom: var(--space-3);
}
.section-title .flag-chip {
margin-bottom: 0.7rem;
}
.section-title :global(h2),
.section-title :global(h3) {
margin: 0;
}
</style>
+122
View File
@@ -0,0 +1,122 @@
<script lang="ts">
// SEO / AI-Overview : meta + OpenGraph + Twitter + hreflang + JSON-LD @graph.
// Organization + WebSite sont toujours présents ; les pages ajoutent leurs nœuds
// (WebPage, BreadcrumbList, Person, Event, Article, FAQPage…) via `graph`.
import { SITE } from '$lib/data/gong';
interface Props {
title: string;
description: string;
path: string; // chemin canonique, ex. '/me-67/'
type?: string; // og:type
image?: string; // chemin absolu ou relatif au site
imageAlt?: string;
publishedTime?: string;
modifiedTime?: string;
/** Nœuds schema.org additionnels, fusionnés dans @graph. */
graph?: Record<string, unknown>[];
/** Fil d'Ariane : [{name, path}]. Génère un BreadcrumbList. */
breadcrumb?: { name: string; path: string }[];
}
let {
title,
description,
path,
type = 'website',
image = '/gong-logo.png',
imageAlt = 'Logo du GONG',
publishedTime,
modifiedTime,
graph = [],
breadcrumb
}: Props = $props();
const base = SITE.url;
const canonical = $derived(base + path);
const imageAbs = $derived(image.startsWith('http') ? image : base + image);
const fullTitle = $derived(path === '/' ? title : `${title} | ${SITE.nom}`);
const orgNode = {
'@type': ['Organization', 'PoliticalParty'],
'@id': `${base}/#organization`,
name: SITE.nomComplet,
alternateName: 'GONG',
url: base,
slogan: SITE.slogan,
foundingDate: '1963-06-23',
dissolutionDate: '1968',
foundingLocation: 'Paris, France',
areaServed: 'Guadeloupe',
logo: { '@type': 'ImageObject', url: `${base}/gong-logo.png`, width: 512, height: 512 },
founder: [
{ '@type': 'Person', name: 'Pierre Sainton' },
{ '@type': 'Person', name: 'Serge Glaude' }
],
sameAs: ['https://fr.wikipedia.org/wiki/Groupe_d%27organisation_nationale_de_la_Guadeloupe']
};
const siteNode = {
'@type': 'WebSite',
'@id': `${base}/#website`,
url: base,
name: SITE.nom,
description: SITE.description,
inLanguage: 'fr-FR',
publisher: { '@id': `${base}/#organization` }
};
const breadcrumbNode = $derived(
breadcrumb && breadcrumb.length
? [
{
'@type': 'BreadcrumbList',
'@id': `${canonical}#breadcrumb`,
itemListElement: breadcrumb.map((b, i) => ({
'@type': 'ListItem',
position: i + 1,
name: b.name,
...(i < breadcrumb.length - 1 ? { item: base + b.path } : {})
}))
}
]
: []
);
const jsonLd = $derived(
JSON.stringify({ '@context': 'https://schema.org', '@graph': [orgNode, siteNode, ...breadcrumbNode, ...graph] })
);
</script>
<svelte:head>
<title>{fullTitle}</title>
<meta name="description" content={description} />
<meta name="author" content={SITE.nomComplet} />
<meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />
<link rel="canonical" href={canonical} />
<link rel="alternate" hreflang="fr" href={canonical} />
<link rel="alternate" hreflang="x-default" href={canonical} />
<meta property="og:title" content={fullTitle} />
<meta property="og:description" content={description} />
<meta property="og:type" content={type} />
<meta property="og:url" content={canonical} />
<meta property="og:site_name" content={SITE.nomComplet} />
<meta property="og:locale" content="fr_FR" />
<meta property="og:image" content={imageAbs} />
<meta property="og:image:alt" content={imageAlt} />
<meta property="og:image:width" content="512" />
<meta property="og:image:height" content="512" />
{#if publishedTime}<meta property="article:published_time" content={publishedTime} />{/if}
{#if modifiedTime}<meta property="article:modified_time" content={modifiedTime} />{/if}
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content={SITE.twitter} />
<meta name="twitter:creator" content={SITE.twitter} />
<meta name="twitter:title" content={fullTitle} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content={imageAbs} />
<meta name="twitter:image:alt" content={imageAlt} />
<!-- eslint-disable-next-line svelte/no-at-html-tags — JSON-LD first-party -->
{@html `<script type="application/ld+json">${jsonLd.replace(/<\//g, '<\\/')}</` + `script>`}
</svelte:head>
+86
View File
@@ -0,0 +1,86 @@
<script lang="ts">
// Chronologie verticale accessible (liste ordonnée). Jalons majeurs mis en exergue.
// Révélation au scroll en cascade gwoka ; contenu complet sans JS.
import { reveal } from '$lib/motion/reveal';
import type { EvenementChrono } from '$lib/data/types';
interface Props {
evenements: EvenementChrono[];
}
let { evenements }: Props = $props();
</script>
<ol class="timeline">
{#each evenements as e, i (e.date + e.evenement)}
<li class="timeline__item" class:is-major={e.majeur} use:reveal={i}>
<span class="timeline__dot" aria-hidden="true"></span>
<div class="timeline__body">
<p class="timeline__date">{e.date}</p>
<h3 class="timeline__event">{e.evenement}</h3>
<p class="timeline__ctx">{e.contexte}</p>
</div>
</li>
{/each}
</ol>
<style>
.timeline {
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
.timeline::before {
content: '';
position: absolute;
left: 7px;
top: 6px;
bottom: 6px;
width: 2px;
background: var(--line);
}
.timeline__item {
position: relative;
padding: 0 0 var(--space-3) var(--space-4);
}
.timeline__dot {
position: absolute;
left: 0;
top: 6px;
width: 16px;
height: 16px;
border-radius: 2px;
background: var(--noir);
border: 2px solid var(--muted-fort);
transform: rotate(45deg);
}
.is-major .timeline__dot {
border-color: var(--accent);
background: var(--accent);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}
.timeline__date {
font-family: var(--font-display);
font-weight: 700;
text-transform: uppercase;
font-size: 0.82rem;
letter-spacing: 0.05em;
color: var(--accent);
margin: 0 0 0.2rem;
}
.timeline__event {
font-size: 1.05rem;
text-transform: none;
letter-spacing: 0;
margin: 0 0 0.3rem;
}
.is-major .timeline__event {
font-size: 1.25rem;
text-transform: uppercase;
}
.timeline__ctx {
color: var(--muted);
margin: 0;
font-size: 0.96rem;
}
</style>
+753
View File
@@ -0,0 +1,753 @@
// ============================================================================
// DOSSIER DOCUMENTAIRE GONG — source unique de vérité (contenu figé, sourcé).
// Repris à l'identique de doc2sveltekit-transition/gong.py (compilation 2026-07-24).
// « Données compilées à partir de sources académiques, journalistiques et archivistiques. »
// ============================================================================
import type {
Membre,
EvenementChrono,
Influence,
EvolutionMotOrdre,
Publication,
MouvementHeritage,
OeuvreCulturelle,
Source,
Responsable
} from './types';
export const metadata = {
titre: "Le GONG — Groupe d'Organisation Nationale de la Guadeloupe",
sousTitre: 'Dossier documentaire complet',
dateCompilation: '2026-07-24',
avertissement:
'Données compilées à partir de sources académiques, journalistiques et archivistiques. Toutes les informations sont sourcées.',
sourcesPrincipales: [
"Wikipedia FR/EN — Groupe d'organisation nationale de la Guadeloupe",
"Sylvain Mary, « Briser les urnes colonialistes. Conquérir l'indépendance nationale » (OpenEdition, 2021)",
"Michelle Zancarini-Fournel, « Pierre Sainton : disparition d'une figure emblématique » (Contretemps, 2018)",
"Lutte Ouvrière, « À propos du procès devant la cour de sécurité : qu'est-ce que le GONG ? » (1968)",
'LDH France, « Guadeloupe, Mai 1967, un drame français »',
'Hypothèses.org, « Mé 1967 en Guadeloupe : un massacre colonial longtemps occulté »',
'France Archives — Opération GONG du 4 juin 1967',
'Serge Glaude, « Le GONG c quoi ? » (2017)',
"Pierre Sainton, « Vie et survie d'un fils de Guadeloupe » (Éditions Nestor, 2008)",
"Archives nationales, 5W/734, arrêt n°838 de la Cour de sûreté de l'État"
]
};
export const presentation = {
nomComplet: "Groupe d'Organisation Nationale de la Guadeloupe",
sigle: 'GONG',
nature: 'Organisation politique indépendantiste et anticolonialiste',
dateFondation: '23 juin 1963',
lieuFondation: 'Paris, France',
dateDissolution: '1968 (de facto, suite au procès et à la répression)',
territoire: 'Guadeloupe (et diaspora guadeloupéenne en métropole)',
slogan: "Briser les urnes colonialistes. Conquérir l'indépendance nationale",
contexteFondation:
"Fondé dans la clandestinité après la dissolution du Front antillo-guyanais pour l'autonomie et après la mort « accidentelle » d'Abert Béville dans le crash de l'avion qui le conduisait en Guadeloupe en juin 1962. Les fondateurs sont d'anciens militants de l'Association générale des étudiants guadeloupéens (AGEG/AGEEG) résidant en métropole.",
installationGuadeloupe:
"Le GONG s'installe légalement en Guadeloupe le 30 mai 1964, lors d'un discours de Pierre Sainton sur la stèle de Delgrès au Matouba (Saint-Claude).",
effectifs: "Quelques dizaines de membres actifs",
soutiensInternationaux: [
'Front de Libération Nationale algérien (FLN)',
"Parti communiste belge prochinois (dirigé par Jacques Grippa) — soutien logistique pour l'impression du journal",
'Mouvement de la Tricontinentale',
"OLAS (Organisation de solidarité des peuples d'Asie, d'Afrique et d'Amérique latine)"
]
};
export const ideologie = {
courantPrincipal: 'Marxisme-léninisme (tendance maoïste), tiers-mondisme, anticolonialisme',
influences: [
{ penseur: 'Karl Marx / Lénine', apport: "Théorie marxiste comme guide de l'action révolutionnaire" },
{ penseur: 'Frantz Fanon', apport: 'Analyse du colonialisme, violence libératrice, décolonisation' },
{ penseur: 'Kwame Nkrumah', apport: 'Panafricanisme, unité des peuples colonisés' },
{ penseur: 'Che Guevara', apport: 'Théorie de la guérilla, révolution continentale' },
{ penseur: 'Fidel Castro', apport: 'Révolution cubaine comme modèle caribéen' },
{ penseur: 'Mao Zedong', apport: 'Révolution paysanne, guerre populaire prolongée' },
{ penseur: 'Théories de la dépendance', apport: 'Analyse néocoloniale des économies périphériques' }
] satisfies Influence[],
objectifs: [
"Indépendance nationale de la Guadeloupe (rupture totale avec la France)",
'Révolution socialiste (transformation des structures économiques)',
'Réforme agraire (redistribution des terres)',
"Industrialisation (développement d'une économie autonome)",
'Unité antillaise (rapprochement avec les autres îles de la Caraïbe)',
'Solidarité tiers-mondiste (intégration dans le mouvement des non-alignés)'
],
evolutionMotsOrdre: [
{ periode: '1960-1963', motOrdre: 'Autogestion, puis Autonomie', contexte: 'Période étudiante (AGEG)' },
{
periode: '1963-1966',
motOrdre: 'Abolition du statut colonial, Libération nationale',
contexte: 'Fondation du GONG'
},
{
periode: '1966-1967',
motOrdre: 'Indépendance nationale',
contexte: "Après la Tricontinentale et l'éclatement du Front antillo-guyanais"
},
{
periode: '1967',
motOrdre: "Briser les urnes colonialistes, Conquérir l'indépendance nationale",
contexte: 'Campagne électorale législative de mars 1967'
}
] satisfies EvolutionMotOrdre[],
autoDefinition:
"Le GONG se définit comme « le pilote du peuple guadeloupéen » incarnant « l'idéologie marxiste-léniniste ». Il se prétend « parti des ouvriers, des paysans et des intellectuels révolutionnaires ».",
programmeExtrait:
"Le n°5 de Gong-Information publie un extrait de programme affirmant que « le Marxisme est la théorie qui guide le GONG » et que la Révolution comprend une « étape démocratique nationale et populaire » et « une étape socialiste », et qu'il fallait dès la première préparer la seconde.",
source: 'Lutte Ouvrière (1968), Wikipedia FR, Sylvain Mary (2021)'
};
export const membres: Membre[] = [
{
slug: 'pierre-sainton',
nom: 'Pierre Sainton',
role: 'Fondateur principal, dirigeant, idéologue',
profession: 'Médecin généraliste à Capesterre-Belle-Eau',
biographie:
"Né vers 1924. Reprit des études de médecine à près de 30 ans. Secrétaire du Comité de Liaison des étudiants coloniaux de Paris. Responsable aux affaires extérieures de l'AGEG. Fonde le GONG en juin 1963 à Paris. Prononce le discours fondateur du GONG en Guadeloupe le 30 mai 1964 sur la stèle de Delgrès au Matouba. Arrêté en juin 1967, incarcéré à la prison de la Santé. Condamné à une peine avec sursis au procès de 1968. Reprend ses activités de médecin. Décédé le 9 décembre 2018 à l'âge de 94 ans.",
citation:
"J'ai commencé par saluer la mémoire de Delgrès [...] Je déclare solennellement, sur la stèle de Delgrès que le GONG, entame dès aujourd'hui 30 mai 1964, en Guadeloupe, sur le sol national, la lutte de Libération.",
oeuvre: "Vie et survie d'un fils de Guadeloupe (Éditions Nestor, 2008)",
source: 'Contretemps (Zancarini-Fournel, 2018), RCI Guadeloupe, France-Antilles'
},
{
slug: 'jacques-nestor',
nom: 'Jacques Nestor',
role: 'Membre fondateur, théoricien, leader de masse',
profession: 'Pêcheur, ouvrier, syndicaliste',
biographie:
"Né le 11 mars 1941. Fils d'un Guadeloupéen et d'une Alsacienne. Militant très populaire du GONG, leader de masse parmi les jeunes souvent sans-emploi. Activement surveillé par la police depuis des mois. Première victime des émeutes de mai 1967 : abattu de deux balles dans le ventre le 26 mai 1967 vers 15h30 sur la place de la Victoire à Pointe-à-Pitre. Décède à l'Hôpital général. Il avait 26 ans.",
dateDeces: '26 mai 1967',
lieuDeces: 'Place de la Victoire, Pointe-à-Pitre',
circonstances:
"Premier mort des tueries de mai 1967. Abattu par les forces de l'ordre lors de la manifestation.",
source: 'LDH France, Hypothèses.org, La1ère, Europe-Solidaire'
},
{
slug: 'marcel-manville',
nom: 'Marcel Manville',
role: 'Membre fondateur',
profession: 'Avocat, militant anticolonialiste',
biographie: 'Avocat et militant anticolonialiste. Co-fondateur du GONG en 1963.',
source: 'Wikipedia FR (GONG)'
},
{
slug: 'henri-bangou',
nom: 'Henri Bangou',
role: 'Membre fondateur',
profession: 'Historien, homme politique',
biographie:
'Historien et homme politique guadeloupéen. Co-fondateur du GONG en 1963. Futur maire de Pointe-à-Pitre (1965-2008) et sénateur.',
source: 'Wikipedia FR (GONG)'
},
{
slug: 'serge-glaude',
nom: 'Serge Glaude',
role: 'Co-fondateur, membre dirigeant',
profession: 'Militant politique, auteur',
biographie:
"Co-fondateur du GONG. Accusé au procès de 1968. Auteur de « Le GONG c quoi ? » (2017), ouvrage retraçant l'histoire du mouvement de sa création en 1963 à sa disparition en 1968.",
oeuvre: 'Le GONG c quoi ? (2017)',
source: 'France-Antilles, La1ère'
},
{
slug: 'claude-makouke',
nom: 'Claude Makouke',
role: 'Membre du GONG',
profession: 'Militant',
biographie:
'Membre du GONG. Témoin des événements de mai 1967. Ses témoignages sont cités dans plusieurs travaux universitaires.',
citations: [
"La grève des ouvriers du bâtiment de mai 1967 était une occasion rêvée pour sévir. Et c'est vrai qu'ils ont frappé fort, aveuglément mais tout en ayant en tête que l'essentiel des gens qu'ils devaient tuer étaient des militants du GONG.",
"Sans le GONG, [les évènements de mai] n'auraient pas eu lieu. Il y aurait eu une grève qui aurait tenu un certain temps [...] Mais en fait, ce n'était pas ça l'objectif du colonialisme : c'était de faire traîner le mouvement de grève de manière à ce que les ouvriers et le peuple même se soulèvent, que le GONG vienne apporter son soutien et on en aurait profité pour l'éliminer."
],
source: 'Hypothèses.org (Mé 1967)'
},
{
slug: 'louis-theodore',
nom: 'Louis Théodore',
role: 'Membre du GONG',
profession: 'Militant',
biographie: 'Membre du GONG. Accusé au procès de 1968 aux côtés de Serge Glaude.',
source: 'La1ère'
},
{
slug: 'yvon-coudrieu',
nom: 'Yvon Coudrieu',
role: 'Sympathisant / victime',
profession: 'Enseignant',
biographie:
"Blessé par balle lors des événements de mai 1967, il perdit une jambe. Son cas est cité comme exemple de la violence de la répression.",
source: 'LDH France'
},
{
slug: 'abert-beville',
nom: 'Abert Béville',
role: 'Précurseur (mort avant la fondation du GONG)',
profession: 'Militant anticolonialiste',
biographie:
"Militant anticolonialiste. Mort « accidentellement » dans le crash de l'avion qui le conduisait en Guadeloupe en juin 1962. Sa mort est un des éléments déclencheurs de la fondation du GONG.",
source: 'LDH France'
}
];
export const accusesProces1968 = {
description: "18 Guadeloupéens accusés d'atteinte à l'intégrité du territoire français",
nomsIdentifies: [
'Pierre Sainton (Dr, fondateur du GONG)',
'Serge Glaude (co-fondateur du GONG)',
'Louis Théodore (membre du GONG)',
'Kelly',
'Gérard Lauriette',
'Antoine Marguerite',
'Roland Minatchy',
'Saturnin Nicolo',
'Michel-Théodore'
],
note: "La liste complète des 18 accusés n'est pas entièrement documentée dans les sources accessibles. Les noms ci-dessus sont ceux identifiés dans les sources consultées.",
source: 'Europe-Solidaire, La1ère, France-Antilles'
};
export const chronologie: EvenementChrono[] = [
{
date: '1946',
evenement: 'La Guadeloupe devient département français (loi du 19 mars 1946)',
contexte: "Promesses d'égalité non tenues, persistance des structures coloniales"
},
{
date: '1948',
evenement: "Érection de la stèle de Delgrès au Matouba (Saint-Claude) pour le centenaire de l'abolition",
contexte: 'Lieu de mémoire qui deviendra symbolique pour le GONG'
},
{
date: 'Décembre 1959',
evenement: 'Émeutes de décembre 1959 en Martinique',
contexte: 'Premières révoltes anticoloniales aux Antilles françaises'
},
{
date: '1960',
evenement: "Première Conférence de la Jeunesse guadeloupéenne organisée par l'AGEG",
contexte:
'Mobilisation de la jeunesse. On trouve déjà dans les rangs ceux qui seront les militants du GONG en 1963.'
},
{
date: '1961',
evenement: "Création du Front antillo-guyanais pour l'autonomie",
contexte: 'Première organisation nationaliste antillaise'
},
{
date: 'Juin 1962',
evenement: "Dissolution du Front antillo-guyanais. Mort d'Abert Béville dans un crash d'avion.",
contexte: 'Éléments déclencheurs de la fondation du GONG'
},
{
date: '23 juin 1963',
evenement: 'FONDATION DU GONG à Paris',
contexte:
"Fondé par d'anciens militants de l'AGEG (Pierre Sainton, Jacques Nestor, Marcel Manville, Henri Bangou, Serge Glaude et d'autres). Naît dans la clandestinité.",
majeur: true
},
{
date: '1964',
evenement:
'Publication clandestine de Gong-Information (imprimé en Belgique avec le soutien du PC belge prochinois de Jacques Grippa)',
contexte: 'Diffusion en Guadeloupe et dans la diaspora'
},
{
date: '30 mai 1964',
evenement: 'Installation légale du GONG en Guadeloupe',
contexte:
"Discours de Pierre Sainton sur la stèle de Delgrès au Matouba (Saint-Claude). « Je déclare solennellement [...] que le GONG entame dès aujourd'hui 30 mai 1964, en Guadeloupe, sur le sol national, la lutte de Libération. »",
majeur: true
},
{
date: '1964-1967',
evenement: 'Activité du GONG en Guadeloupe',
contexte:
"Propagande (graffitis, tracts clandestins), cercles d'études marxistes, conférences dans les quartiers populaires, distribution du journal. Soutien du FLN algérien."
},
{
date: '1966',
evenement: 'Conférence tricontinentale de La Havane',
contexte:
"Le GONG prend un « nouveau virage à gauche » et adopte le mot d'ordre d'indépendance nationale (abandonnant l'autonomie)."
},
{
date: 'Mars 1967',
evenement:
"Campagne électorale législative. Affiches du GONG : « Briser les urnes colonialistes » / « Conquérir l'indépendance nationale »",
contexte:
'Les affiches sont saisies par la police sur le port de Pointe-à-Pitre. Révolte urbaine à Basse-Terre consécutive à une agression raciste.'
},
{
date: '1er mai 1967',
evenement: "Manifestation pour l'indépendance organisée par Pierre Sainton à Capesterre-Belle-Eau",
contexte: 'Surprend les autorités'
},
{
date: '26 mai 1967',
evenement: 'ÉMEUTES DE MAI 1967 — Jour 1',
contexte:
"Grève des ouvriers du bâtiment (revendication : +2,5 % de salaire). Agression raciste d'un ouvrier guadeloupéen par un patron béké (responsable local de l'UNR). Manifestation à Pointe-à-Pitre. Les forces de l'ordre tirent à balles réelles. Jacques Nestor (membre du GONG) est la première victime, abattu vers 15h30.",
majeur: true
},
{
date: '27 mai 1967',
evenement: 'ÉMEUTES — Jour 2',
contexte: "Les émeutes s'étendent. Nouveaux morts. Répression généralisée."
},
{
date: '28 mai 1967',
evenement: 'ÉMEUTES — Jour 3',
contexte:
'Poursuite de la répression. Bilan officiel : 7 à 8 morts. Estimations des historiens : 80 à 200 victimes. Nombreux blessés et disparus.'
},
{
date: '4 juin 1967',
evenement: "Opération « GONG » — Arrestations massives",
contexte:
"Le préfet Pierre Bolotte fait déférer 14 membres du GONG devant la Cour de sûreté de l'État à Paris. Transfert aux prisons de Fresnes et de la Santé.",
majeur: true
},
{
date: '17 avril / 17 juin 1967',
evenement: 'Rapports du commissaire Honoré Gévaudan',
contexte:
"Deux rapports policiers démontrent l'absence de responsabilité du GONG dans les événements. Le rapport d'avril 1967 ne sera déclassifié qu'en avril 2016."
},
{
date: '19 février - 1er mars 1968',
evenement: "PROCÈS DES 18 GUADELOUPÉENS devant la Cour de sûreté de l'État (Paris)",
contexte:
"18 accusés d'atteinte à l'intégrité du territoire français. Témoins à la barre : Jean-Paul Sartre, Aimé Césaire, représentant de la LDH. Avocats : Me Henri Leclerc et d'autres. Verdict : 13 acquittés, 6 condamnés à des peines avec sursis (dont Pierre Sainton). Jugement considéré comme une victoire politique par les militants.",
majeur: true
},
{
date: '17 avril 1968',
evenement: 'Libération des 19 Guadeloupéens détenus',
contexte: "La Cour de Sûreté de l'État libère les accusés. 13 acquittés, 6 condamnés avec sursis."
},
{
date: '1968',
evenement: 'DISSOLUTION DE FACTO DU GONG',
contexte:
'Décapitation du mouvement indépendantiste. Passage à la clandestinité pour certains. Exil de nombreux militants. Divisions parmi les nationalistes.',
majeur: true
},
{
date: '1978',
evenement: "Création de l'UPLG (Union Populaire pour la Libération de la Guadeloupe)",
contexte: "Fondée par d'anciens membres du GONG. Premier parti politique indépendantiste structuré issu du GONG."
},
{
date: '2008',
evenement: "Publication de l'autobiographie de Pierre Sainton : « Vie et survie d'un fils de Guadeloupe »",
contexte: 'Éditions Nestor, Gourbeyre'
},
{
date: '2017',
evenement: "Publication de « Le GONG c quoi ? » par Serge Glaude",
contexte: "50 ans après les événements de mai 1967. Co-fondateur du GONG retrace l'histoire du mouvement."
},
{
date: '9 décembre 2018',
evenement: 'Décès de Pierre Sainton à l’âge de 94 ans',
contexte: 'Fondateur du GONG. Médecin généraliste à Capesterre-Belle-Eau.'
},
{
date: '2021',
evenement: "Publication de l'article de Sylvain Mary : « Briser les urnes colonialistes » (OpenEdition)",
contexte: 'Analyse iconographique de la propagande du GONG en 1967'
}
];
export const evenementsMai1967 = {
titre: "Les émeutes de mai 1967 en Guadeloupe (« Mé 67 »)",
contexte: {
social:
"Grève des ouvriers du bâtiment pour une augmentation de salaire de 2,5 %. Chômage croissant, émigration massive.",
racial:
"Agression raciste d'un ouvrier guadeloupéen par un patron béké (responsable local de l'UNR gaulliste) qui demande à son chien « Dis bonjour au nègre ! »",
politique:
'Élections législatives de mars 1967 marquées par des fraudes. Le préfet Pierre Bolotte (venant dAlgérie) accuse le GONG et les communistes.',
international:
"Contexte de décolonisation. Indépendance de l'Algérie (1962). Mouvements de libération en Afrique. Révolution cubaine."
},
deroulement: {
'26 mai':
"Manifestation à Pointe-à-Pitre. Les forces de l'ordre (deux escadrons de gendarmerie déployés par le préfet Bolotte) tirent à balles réelles. Jacques Nestor (GONG) est la première victime, abattu vers 15h30.",
'27 mai': "Les émeutes s'étendent. Nouveaux morts.",
'28 mai': 'Répression généralisée. Terreur dans la population.'
},
bilan: {
officiel: '7 à 8 morts',
estimationsHistoriens: '80 à 200 victimes (morts, blessés, disparus)',
blesses: 'Plus de 30 blessés',
note: 'Des blessés transportés dans les hôpitaux en Martinique ne sont jamais revenus. Les gens enterrèrent leurs morts en catimini. La terreur allait perdurer quarante années.'
},
roleDuGONG: {
actions: [
'Soutien actif aux revendications ouvrières',
'Distribution de tracts appelant à la mobilisation',
'Participation de militants à la manifestation du 26 mai',
'Tentative de politisation du mouvement social'
],
controverse:
"Les autorités françaises ont initialement pensé que l'insurrection avait été fomentée par le GONG, mais il est apparu après enquête que les émeutes étaient spontanées.",
rapportsPolice:
"Le commissaire divisionnaire Gévaudan conclut : « les investigations qui ont été menées à Pointe-à-Pitre n'ont pu apporter la preuve de la responsabilité directe du GONG dans la préparation, l'organisation et l'exécution des manifestations de rues des 26 et 27 mai 1967. »",
analyse:
"Selon Claude Makouke (membre du GONG), le gouvernement a utilisé la grève comme prétexte pour éliminer le GONG : « ce n'était pas ça l'objectif du colonialisme : c'était de faire traîner le mouvement de grève de manière à ce que les ouvriers et le peuple même se soulèvent, que le GONG vienne apporter son soutien et on en aurait profité pour l'éliminer. »"
},
source: 'Wikipedia FR (Émeutes de mai 1967), LDH France, Hypothèses.org, Contretemps'
};
export const proces1968 = {
nom: 'Procès des 18 Guadeloupéens',
juridiction: "Cour de sûreté de l'État (Paris)",
noteJuridiction:
"Tribunal d'exception créé en 1963 pour juger les responsables de l'OAS. Dissous en 1981. Dans la seconde moitié des années 1960, se réoriente vers la répression du gauchisme et de l'indépendantisme.",
dates: '19 février - 1er mars 1968',
accusation: "Atteinte à l'intégrité du territoire français, complot contre l'État et l'unité de la nation",
nombreAccuses: 18,
temoinsDefense: [
'Jean-Paul Sartre (philosophe, écrivain)',
'Aimé Césaire (poète, homme politique martiniquais)',
"Représentant de la Ligue des Droits de l'Homme"
],
avocats: ['Me Henri Leclerc (barreau de Paris)', 'Autres avocats du barreau de Paris', 'Avocats guadeloupéens'],
verdict: {
acquittes: 13,
condamnes: 6,
peines: 'Prison avec sursis pour les 6 condamnés (dont Pierre Sainton)',
interpretation:
"Jugement considéré comme une victoire politique par les militants, l'accusation n'ayant pas réussi à réunir de preuves."
},
elementsCles: [
"L'absence de responsabilité du GONG dans les événements est démontrée par deux rapports policiers (17 avril et 17 juin 1967) du commissaire Gévaudan.",
"Le rapport d'avril 1967 n'a été déclassifié qu'en avril 2016.",
"L'inculpation est due à l'obstination du préfet Pierre Bolotte et des services de Jacques Foccart.",
"Un dirigeant du GONG montre à la barre que la charte de l'organisation ne contenait ni appel au séparatisme ni appel à la violence."
],
source: 'Contretemps (Zancarini-Fournel), Europe-Solidaire, La1ère, Critical-Stages, Archives nationales 5W/734'
};
export const publications: Publication[] = [
{
titre: 'Gong-Information',
sousTitre: 'Journal du Patriote Guadeloupéen',
type: 'Journal / Organe politique et théorique du GONG',
periode: '1964-1967',
lieuImpression: 'Belgique (avec le soutien du Parti communiste belge prochinois de Jacques Grippa)',
lieuDiffusion: 'France (clandestinement) et Guadeloupe',
contenu: 'Propagande indépendantiste, analyses marxistes, mots dordre révolutionnaires',
extraitProgramme:
"Le n°5 publie un extrait de programme : « le Marxisme est la théorie qui guide le GONG » et la Révolution comprend une « étape démocratique nationale et populaire » et « une étape socialiste ».",
source: 'Lutte Ouvrière (1968), INHA/Agorha, SISMO'
},
{
titre: 'Révolution Caraïbe',
type: 'Journal',
periode: 'Non documentée précisément',
contenu: 'Distribution dans les quartiers populaires',
source: 'Wikipedia FR (GONG)'
},
{
titre: 'Tracts et brochures clandestins',
type: 'Propagande',
periode: '1963-1967',
contenu: 'Appels à la mobilisation, dénonciation du colonialisme, mots dordre indépendantistes',
source: 'LDH France, Contretemps'
},
{
titre: 'Affiches électorales (mars 1967)',
type: 'Propagande électorale',
periode: 'Mars 1967',
contenu: "« Briser les urnes colonialistes » / « Conquérir l'indépendance nationale »",
note: 'Saisies par la police sur le port de Pointe-à-Pitre',
source: 'Contretemps, Sylvain Mary (2021)'
}
];
export const repression = {
arrestations:
"Plus de 70 arrestations entre la Guadeloupe et la France. Des étudiants de l'AGEG, des ouvriers de Fraternité ouvrière, des employés, des journalistes du Progrès social et de La Vérité, des médecins, des avocats.",
incarceration: 'Prisons de Fresnes et de la Santé (Paris)',
perquisitions: 'Saisies de matériel de propagande',
dissolution: 'Le GONG est dissous par les pouvoirs publics suite à la révolte urbaine des 25-26 mai 1967',
consequences: [
'Décapitation du mouvement indépendantiste',
'Passage à la clandestinité totale pour certains militants',
'Exil de nombreux militants',
'Démantèlement du GONG',
'Répression des journaux progressistes (La Vérité, Le Progrès social des frères Rodes)',
'Terreur durable dans la population (40 ans selon la LDH)'
],
responsables: [
{
nom: 'Pierre Bolotte',
role: 'Préfet de Guadeloupe',
note: "Venant d'Algérie. Accuse le GONG dès le début des événements."
},
{
nom: 'Jacques Foccart',
role: "Secrétaire général de l'Élysée aux affaires africaines et malgaches",
note: "Ses services sont impliqués dans l'inculpation des membres du GONG."
},
{
nom: 'Hersant',
role: 'Directeur de France-Antilles',
note: "Le seul quotidien en place, gaulliste, participe à la propagande d'État contre le GONG."
}
] satisfies Responsable[],
source: 'LDH France, Contretemps, Hypothèses.org'
};
export const heritage = {
mouvements: [
{
nom: 'UPLG (Union Populaire pour la Libération de la Guadeloupe)',
dateCreation: '1978',
description:
"Premier parti politique indépendantiste structuré. Créé par d'anciens membres du GONG. Toujours actif en 2026.",
source: 'Wikipedia FR, Sylvain Mary (2021), Union-Communiste'
},
{
nom: 'ARC (Alliance Révolutionnaire Caraïbe)',
dateCreation: 'Non documentée précisément',
description: 'Mouvement révolutionnaire caribéen influencé par le GONG.',
source: 'Wikipedia FR (GONG)'
},
{
nom: 'MPGI (Mouvement Populaire pour une Guadeloupe Indépendante)',
dateCreation: 'Non documentée précisément',
description: 'Mouvement indépendantiste issu de la mouvance du GONG.',
source: 'Wikipedia FR (GONG)'
},
{
nom: 'UTA (Union des Travailleurs Antillais)',
dateCreation: 'Post-1968',
description:
"Syndicat de type nouveau, non affilié aux centrales françaises. Créé par d'anciens membres du GONG et de l'AGEG.",
source: 'LDH France'
},
{
nom: 'UGTG (Union Générale des Travailleurs de Guadeloupe)',
dateCreation: '1973',
description: 'Syndicat de type nouveau préconisant la lutte de masses. Issu de la mouvance GONG/AGEG.',
source: 'LDH France'
}
] satisfies MouvementHeritage[],
influenceCulturelle: [
{
oeuvre: 'La Chasse au racoon',
auteur: 'Max Jeanne',
type: 'Roman',
date: '1980',
sujet: 'Évoque les événements de mai 1967'
},
{
oeuvre: "L'Impossible Procès des Guadeloupéens",
auteur: 'Collectif',
type: 'Pièce de théâtre / reconstitution',
date: '2018-2019',
sujet:
'Reconstitution du procès des 18 Guadeloupéens. Jouée au Théâtre Aimé-Césaire (Martinique) et en Guadeloupe.'
},
{
oeuvre: "Vie et survie d'un fils de Guadeloupe",
auteur: 'Pierre Sainton',
type: 'Autobiographie',
date: '2008',
sujet: 'Mémoires du fondateur du GONG'
},
{
oeuvre: 'Le GONG c quoi ?',
auteur: 'Serge Glaude',
type: 'Essai historique',
date: '2017',
sujet: "Histoire du GONG de 1963 à 1968 par son co-fondateur"
}
] satisfies OeuvreCulturelle[],
memoire: [
'Le 26 mai est devenu une date de commémoration en Guadeloupe (Mé 67)',
'La stèle de Delgrès au Matouba (Saint-Claude) reste un lieu de mémoire lié au GONG',
"Les événements de mai 1967 ont été officiellement reconnus et une commission d'information a été créée",
"Le rapport Gévaudan d'avril 1967 a été déclassifié en avril 2016",
"L'UPLG reste active en 2026 et se réclame de l'héritage du GONG"
],
source: 'Wikipedia FR, LDH France, Sylvain Mary (2021), CaraibCreoleNews'
};
export const contexteHistorique = {
guadeloupeAvantGONG: {
statut: 'Département français depuis 1946',
economie:
'Économie de plantation (canne à sucre, banane). Dominée par les békés (grands planteurs blancs descendants de colons).',
social:
'Chômage massif, émigration vers la métropole (BUMIDOM), inégalités raciales et sociales persistantes.',
politique: "PCG (Parti Communiste Guadeloupéen) comme principale force d'opposition. Revendication d'autonomie."
},
contexteInternational: {
decolonisation: "Indépendance de l'Algérie (1962), mouvements de libération en Afrique",
guerreFroide: 'Influence du marxisme-léninisme, du maoïsme',
revolutionCubaine: '1959 — Modèle caribéen de révolution',
tricontinentale: '1966 — Conférence de La Havane, solidarité des peuples du Tiers-Monde',
guerreVietnam: 'Mobilisation anti-impérialiste mondiale'
},
precurseurs: [
"Louis Delgrès (1766-1802) — Résistance à l'esclavage. Figure tutélaire du GONG.",
"Front antillo-guyanais pour l'autonomie (1961-1962)",
'Association générale des étudiants guadeloupéens (AGEG/AGEEG)',
'Abert Béville (mort en 1962)'
]
};
export const sources: Source[] = [
{
auteur: 'Pierre Sainton',
titre: "Vie et survie d'un fils de Guadeloupe",
editeur: 'Éditions Nestor, Gourbeyre',
annee: '2008',
type: 'Autobiographie'
},
{
auteur: 'Serge Glaude',
titre: 'Le GONG c quoi ?',
editeur: 'Éditions Nestor',
annee: '2017',
type: 'Essai historique'
},
{
auteur: 'Sylvain Mary',
titre:
"Briser les urnes colonialistes. Conquérir l'indépendance nationale. Une analyse iconographique de la propagande du GONG en 1967",
editeur: 'OpenEdition / Esclavages',
annee: '2021',
type: 'Article académique',
url: 'https://journals.openedition.org/slaveries/3788'
},
{
auteur: 'Michelle Zancarini-Fournel',
titre: "Pierre Sainton : disparition d'une figure emblématique de la lutte anticolonialiste",
editeur: 'Contretemps',
annee: '2018',
type: 'Article',
url: 'https://www.contretemps.eu/pierre-sainton-figure-anticolonialiste/'
},
{
auteur: 'Lutte Ouvrière',
titre: "À propos du procès devant la cour de sécurité : qu'est-ce que le GONG ?",
editeur: 'Lutte de Classe (série 1967-1968)',
annee: '1968',
type: 'Article politique',
url: 'https://www.lutte-ouvriere.org/mensuel/article/documents-archives-la-revue-lutte-de-classe-serie-1967-1968-article-a-propos-du-proces-devant-la-cour.html'
},
{
auteur: 'LDH France',
titre: 'Guadeloupe, Mai 1967, un drame français',
editeur: "Ligue des Droits de l'Homme",
annee: 'Non daté',
type: 'Article',
url: 'https://www.ldh-france.org/Guadeloupe-Mai-1967-un-drame/'
},
{
auteur: 'Hypothèses.org',
titre: 'Mé 1967 en Guadeloupe : un massacre colonial longtemps occulté',
editeur: 'Hypothèses (blog académique)',
annee: 'Non daté',
type: 'Article académique',
url: 'https://decolonial.hypotheses.org/2102'
},
{
auteur: 'Collectif',
titre: "L'Impossible Procès des Guadeloupéens",
editeur: 'Critical Stages',
annee: 'Non daté',
type: 'Article / Pièce de théâtre',
url: 'https://www.critical-stages.org/19/limpossible-proces-des-guadeloupeens-une-dialectique-fragile-simpose/'
},
{
auteur: 'France Archives',
titre: 'Opération GONG du 4 juin 1967, organisation et déroulement',
editeur: 'Archives nationales',
annee: '1967',
type: "Document d'archives",
url: 'https://francearchives.gouv.fr/fr/facomponent/f18dd4215dcdf3cb8dd82c4d40d705358c5bd67e'
},
{
auteur: 'Wikipedia',
titre: "Groupe d'organisation nationale de la Guadeloupe",
editeur: 'Wikipedia FR/EN',
annee: '2026',
type: 'Encyclopédie',
url: 'https://fr.wikipedia.org/wiki/Groupe_d%27organisation_nationale_de_la_Guadeloupe'
},
{
auteur: 'Wikipedia',
titre: 'Émeutes de mai 1967 en Guadeloupe',
editeur: 'Wikipedia FR',
annee: '2026',
type: 'Encyclopédie',
url: 'https://fr.wikipedia.org/wiki/%C3%89meutes_de_mai_1967_en_Guadeloupe'
},
{
auteur: 'Europe-Solidaire',
titre: 'Guadeloupe : un an après les massacres de Mé 67, dix-neuf Guadeloupéens sont libérés',
editeur: 'Europe-Solidaire',
annee: 'Non daté',
type: 'Article',
url: 'https://www.europe-solidaire.org/spip.php?article44927'
},
{
auteur: 'La1ère / Franceinfo',
titre: 'Février-mars-avril 1968 : les procès qui ont marqué la Guadeloupe',
editeur: 'La1ère',
annee: 'Non daté',
type: 'Article journalistique',
url: 'https://la1ere.franceinfo.fr/guadeloupe/fevrier-mars-avril-1968-proces-qui-ont-marque-guadeloupe-564093.html'
},
{
auteur: 'Max Jeanne',
titre: 'La Chasse au racoon',
editeur: 'Non documenté',
annee: '1980',
type: 'Roman'
},
{
auteur: 'Archives nationales',
titre: "5W/734, arrêt n°838 de la Cour de sûreté de l'État",
editeur: 'Archives nationales',
annee: '1968',
type: 'Document judiciaire'
}
];
// ── Helpers ──
export function getMembre(slug: string): Membre | undefined {
return membres.find((m) => m.slug === slug);
}
/** Contact & écosystème (repris de l'index.html actuel). */
export const contact = {
email: 'gong971@proton.me',
emailOKI: 'kontak@o-k-i.net',
bokantaj: 'https://bokantaj.o-k-i.net/@GONG',
gade: 'https://gade.o-k-i.net/c/gong_tv',
forge: 'https://labola.o-k-i.net/ORGANISATION-KA-INTERNATIONALE/gong.gp'
};
export const SITE = {
url: 'https://gong.gp',
nom: 'GONG',
nomComplet: "Groupe d'Organisation Nationale de la Guadeloupe",
slogan: "Briser les urnes colonialistes. Conquérir l'indépendance nationale",
description:
"Le GONG (Groupe d'Organisation Nationale de la Guadeloupe) est une organisation indépendantiste et anticolonialiste guadeloupéenne fondée le 23 juin 1963 et dissoute en 1968.",
twitter: '@OrganisationKA'
};
+78
View File
@@ -0,0 +1,78 @@
// Types du dossier documentaire GONG. Contenu repris à l'identique de la source
// (doc2sveltekit-transition/gong.py) — structuré, jamais réécrit. Toutes les données sont sourcées.
export interface Membre {
slug: string;
nom: string;
role: string;
profession: string;
biographie: string;
citation?: string;
citations?: string[];
oeuvre?: string;
dateDeces?: string;
lieuDeces?: string;
circonstances?: string;
source: string;
}
export interface EvenementChrono {
date: string;
evenement: string;
contexte: string;
majeur?: boolean; // jalon fort (mise en exergue)
}
export interface Influence {
penseur: string;
apport: string;
}
export interface EvolutionMotOrdre {
periode: string;
motOrdre: string;
contexte: string;
}
export interface Publication {
titre: string;
sousTitre?: string;
type: string;
periode: string;
lieuImpression?: string;
lieuDiffusion?: string;
contenu: string;
extraitProgramme?: string;
note?: string;
source: string;
}
export interface MouvementHeritage {
nom: string;
dateCreation: string;
description: string;
source: string;
}
export interface OeuvreCulturelle {
oeuvre: string;
auteur: string;
type: string;
date: string;
sujet: string;
}
export interface Source {
auteur: string;
titre: string;
editeur: string;
annee: string;
type: string;
url?: string;
}
export interface Responsable {
nom: string;
role: string;
note: string;
}
+23
View File
@@ -0,0 +1,23 @@
// i18n minimal, statique-friendly (routage par dossier). FR par défaut ; EN prévu sur /en/.
// Le contenu éditorial FR reste dans les composants ; ce module gère locale + microcopy.
export type Locale = 'fr' | 'en';
export const LOCALES: Locale[] = ['fr', 'en'];
export const DEFAULT_LOCALE: Locale = 'fr';
/** Déduit la locale depuis le premier segment du chemin (/en/… → 'en', sinon 'fr'). */
export function localeFromPath(pathname: string): Locale {
const seg = pathname.replace(/^\/+/, '').split('/')[0];
return seg === 'en' ? 'en' : 'fr';
}
/** Retourne le chemin équivalent dans l'autre locale (paires FR ↔ EN). */
export function alternatePath(pathname: string, target: Locale): string {
const current = localeFromPath(pathname);
if (current === target) return pathname;
if (target === 'en') return '/en' + (pathname === '/' ? '' : pathname);
return pathname.replace(/^\/en/, '') || '/';
}
/** Code lang HTML (BCP-47). 'gcf' = créole guadeloupéen pour la microcopy. */
export const HTML_LANG: Record<Locale, string> = { fr: 'fr', en: 'en' };
+31
View File
@@ -0,0 +1,31 @@
import type { Action } from 'svelte/action';
import { syncopatedDelay } from './tokens';
// use:reveal={index} — révèle l'élément à l'entrée dans le viewport avec cascade gwoka.
// L'état caché est posé en CSS uniquement sous html.has-js + prefers-reduced-motion: no-preference,
// donc le contenu reste lisible sans JS et sans animation.
export const reveal: Action<HTMLElement, number | undefined> = (node, index = 0) => {
const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (reduce) {
node.classList.add('is-visible');
return;
}
node.style.setProperty('--d', `${syncopatedDelay(index)}ms`);
const io = new IntersectionObserver(
(entries) => {
for (const e of entries) {
if (e.isIntersecting) {
node.classList.add('is-visible');
io.unobserve(node);
}
}
},
{ threshold: 0.12, rootMargin: '0px 0px -8% 0px' }
);
io.observe(node);
return {
destroy() {
io.disconnect();
}
};
};
+31
View File
@@ -0,0 +1,31 @@
// Smooth scroll Lenis — import dynamique, une seule instance, gate reduced-motion.
import { prefersReducedMotion } from './tokens';
type Lenis = { raf: (t: number) => void; destroy: () => void; scrollTo: (t: unknown, o?: unknown) => void };
let lenis: Lenis | null = null;
let rafId = 0;
export async function initSmoothScroll(): Promise<() => void> {
if (prefersReducedMotion() || typeof window === 'undefined') return () => {};
const { default: Lenis } = await import('lenis');
lenis = new Lenis({ lerp: 0.11, wheelMultiplier: 1, smoothWheel: true }) as unknown as Lenis;
const loop = (t: number) => {
lenis?.raf(t);
rafId = requestAnimationFrame(loop);
};
rafId = requestAnimationFrame(loop);
return () => {
cancelAnimationFrame(rafId);
lenis?.destroy();
lenis = null;
};
}
/** Défilement vers une ancre (#id) en respectant Lenis si actif. */
export function scrollToAnchor(hash: string): void {
const el = document.querySelector(hash);
if (!el) return;
if (lenis) lenis.scrollTo(el, { offset: -80 });
else el.scrollIntoView({ behavior: 'smooth' });
}
+14
View File
@@ -0,0 +1,14 @@
// Cadences gwoka en TS (miroir des tokens CSS). Le stagger de marque est syncopé (3+3+2).
export function prefersReducedMotion(): boolean {
if (typeof window === 'undefined') return true;
return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
}
const SYNCOPE = [0, 120, 300, 360, 600, 660, 900, 960];
/** Délai syncopé pour l'élément i (ms). Cycle de +1200 ms au-delà de 8 éléments. */
export function syncopatedDelay(i: number): number {
const cycle = Math.floor(i / SYNCOPE.length);
return SYNCOPE[i % SYNCOPE.length] + cycle * 1200;
}
+30
View File
@@ -0,0 +1,30 @@
import { SITE } from './data/gong';
/** Nœud WebPage standard pour une page interne. */
export function webPage(path: string, name: string, description: string) {
const url = SITE.url + path;
return {
'@type': 'WebPage',
'@id': `${url}#webpage`,
url,
name,
description,
isPartOf: { '@id': `${SITE.url}/#website` },
about: { '@id': `${SITE.url}/#organization` },
inLanguage: 'fr-FR'
};
}
/** Nœud Person (fiche militant). */
export function personNode(path: string, name: string, description: string, extra: Record<string, unknown> = {}) {
const url = SITE.url + path;
return {
'@type': 'Person',
'@id': `${url}#person`,
name,
description,
url,
memberOf: { '@id': `${SITE.url}/#organization` },
...extra
};
}
+86
View File
@@ -0,0 +1,86 @@
// Chargement des actualités depuis content/actualites/*.md (éditées via Sveltia CMS).
// $lib/server → garanti côté serveur : `marked` ne part jamais dans le bundle client.
// Le site étant prérendu, ce code s'exécute au build ; les pages sont ensuite 100 % statiques.
import { marked } from 'marked';
const files = import.meta.glob('/content/actualites/*.md', {
query: '?raw',
import: 'default',
eager: true
}) as Record<string, string>;
export interface Actualite {
slug: string;
titre: string;
date: string; // affichage libre (ex. « 26 mai 2026 »)
iso: string; // ISO pour <time datetime> / schema
chapeau: string;
couverture?: string;
couvertureAlt?: string;
top: boolean;
html: string; // corps rendu (first-party, Sveltia)
texte: string; // corps brut (pour description/estimation de lecture)
}
/** Parse un front-matter YAML simple (clés scalaires, valeurs entre guillemets optionnelles). */
function parseFrontmatter(raw: string): { data: Record<string, string>; body: string } {
const m = raw.match(/^---\r?\n([\s\S]*?)\r?\n---\r?\n?([\s\S]*)$/);
if (!m) return { data: {}, body: raw };
const data: Record<string, string> = {};
for (const line of m[1].split(/\r?\n/)) {
const kv = line.match(/^([A-Za-z0-9_]+)\s*:\s*(.*)$/);
if (!kv) continue;
let val = kv[2].trim();
if (
(val.startsWith('"') && val.endsWith('"')) ||
(val.startsWith("'") && val.endsWith("'"))
) {
val = val.slice(1, -1);
}
data[kv[1]] = val;
}
return { data, body: m[2] };
}
function frToIso(date: string): string {
// Accepte déjà l'ISO ; sinon renvoie tel quel (Sveltia écrit du YYYY-MM-DD).
return /^\d{4}-\d{2}-\d{2}/.test(date) ? date : date;
}
function frDisplay(iso: string): string {
const d = new Date(iso);
if (Number.isNaN(d.getTime())) return iso;
return d.toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' });
}
let cache: Actualite[] | null = null;
export function getActualites(): Actualite[] {
if (cache) return cache;
const out: Actualite[] = [];
for (const [path, raw] of Object.entries(files)) {
const slug = path.split('/').pop()!.replace(/\.md$/, '');
const { data, body } = parseFrontmatter(raw);
if (!data.titre) continue;
const iso = frToIso(data.date ?? '');
out.push({
slug,
titre: data.titre,
iso,
date: data.date ? frDisplay(iso) : '',
chapeau: data.chapeau ?? '',
couverture: data.couverture || undefined,
couvertureAlt: data.couvertureAlt || data.titre,
top: data.top === 'true',
html: marked.parse(body.trim(), { async: false }) as string,
texte: body.trim()
});
}
out.sort((a, b) => (a.iso < b.iso ? 1 : a.iso > b.iso ? -1 : 0));
cache = out;
return out;
}
export function getActualite(slug: string): Actualite | undefined {
return getActualites().find((a) => a.slug === slug);
}
+16
View File
@@ -0,0 +1,16 @@
// Rendu des documents historiques longs (charte, orientation) en HTML.
// $lib/server → marked reste côté serveur ; pages prérendues, zéro coût client.
import { marked } from 'marked';
const files = import.meta.glob('/content/documents/*.md', {
query: '?raw',
import: 'default',
eager: true
}) as Record<string, string>;
export function getDocument(nom: string): string {
const key = `/content/documents/${nom}.md`;
const raw = files[key];
if (!raw) throw new Error(`Document introuvable : ${nom}`);
return marked.parse(raw.trim(), { async: false }) as string;
}
+356
View File
@@ -0,0 +1,356 @@
/* ============================================================================
BASE GONG — reset, primitives, gate reduced-motion.
Importé après gong-tokens.css dans +layout.svelte.
============================================================================ */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
margin: 0;
min-height: 100dvh;
background: var(--noir);
color: var(--creme);
font-family: var(--font-body);
font-weight: 400;
line-height: 1.6;
font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img,
picture,
svg,
video {
max-width: 100%;
height: auto;
display: block;
}
/* ── Titres — Archivo, MAJUSCULES ── */
h1,
h2,
h3,
h4 {
font-family: var(--font-display);
font-weight: 800;
line-height: 1.08;
letter-spacing: -0.01em;
text-transform: uppercase;
margin: 0 0 var(--space-2);
text-wrap: balance;
}
h1 {
font-size: clamp(2.2rem, 1.6rem + 3vw, 4rem);
font-weight: 900;
}
h2 {
font-size: clamp(1.6rem, 1.3rem + 1.6vw, 2.5rem);
}
h3 {
font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.6rem);
font-weight: 700;
}
h4 {
font-size: 1.1rem;
font-weight: 700;
}
p {
margin: 0 0 var(--space-2);
}
strong,
b {
font-weight: 700;
color: var(--creme);
}
/* ── Liens : soulignés uniquement dans le contenu (main), pas dans nav/footer ── */
a {
color: var(--accent);
text-decoration: none;
transition: color var(--dur-tanbou) var(--ease-ka);
}
a:hover {
color: var(--accent-hover);
}
main a:not(.btn):not(.card):not(.tag):not(.no-underline) {
text-decoration: underline;
text-underline-offset: 0.15em;
text-decoration-thickness: 1px;
}
/* ── Focus visible (marque) ── */
:focus-visible {
outline: 3px solid var(--focus);
outline-offset: 2px;
border-radius: 2px;
}
/* ── Layout ── */
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--space-3);
}
.container.lecture {
max-width: var(--container-lecture);
}
.section {
padding-block: var(--space-5);
}
.section--tight {
padding-block: var(--space-4);
}
/* ── Bouton canonique — balayage d'accent au survol ── */
.btn {
--btn-fill: var(--accent);
position: relative;
display: inline-flex;
align-items: center;
gap: 0.5em;
font-family: var(--font-display);
font-weight: 700;
font-size: 0.95rem;
text-transform: uppercase;
letter-spacing: 0.03em;
line-height: 1;
padding: 0.85em 1.4em;
border: 2px solid var(--btn-fill);
border-radius: var(--radius-sm);
background: transparent;
color: var(--creme);
cursor: pointer;
overflow: hidden;
isolation: isolate;
transition: color var(--dur-tanbou) var(--ease-ka);
}
.btn::after {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: var(--btn-fill);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--dur-mesure) var(--ease-syncope);
}
.btn:hover,
.btn:focus-visible {
color: #0d0d0d;
}
.btn:hover::after,
.btn:focus-visible::after {
transform: scaleX(1);
}
.btn--fill {
background: var(--btn-fill);
color: #0d0d0d;
}
.btn--fill::after {
background: var(--accent-hover);
}
.btn--vert {
--btn-fill: var(--vert-gong);
}
.btn--ghost {
border-color: var(--line);
}
.btn--ghost:hover {
--btn-fill: var(--accent);
}
/* ── Carte canonique — liseré gauche d'accent, lift au survol ── */
.card {
position: relative;
display: flex;
flex-direction: column;
background: var(--card-bg);
border: var(--border-card);
border-left: 4px solid var(--accent);
border-radius: var(--radius-md);
padding: var(--space-3);
transition:
transform var(--dur-mesure) var(--ease-ka),
border-color var(--dur-mesure) var(--ease-ka),
background var(--dur-mesure) var(--ease-ka);
}
.card--vert {
border-left-color: var(--vert-gong);
}
a.card,
.card--link {
cursor: pointer;
color: inherit;
}
a.card:hover,
.card--link:hover {
transform: translateY(-4px);
background: var(--card-bg-hover);
border-color: var(--accent);
}
/* ── Tag canonique ── */
.tag {
display: inline-flex;
align-items: center;
gap: 0.35em;
font-family: var(--font-body);
font-size: 0.8rem;
font-weight: 600;
line-height: 1;
padding: 0.4em 0.7em;
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--accent) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
color: var(--creme);
text-transform: none;
letter-spacing: 0;
}
.tag--vert {
background: color-mix(in srgb, var(--vert-gong) 12%, transparent);
border-color: color-mix(in srgb, var(--vert-gong) 45%, transparent);
}
/* ── Flag-bar GONG — signature (vert · blanc · rouge, segments francs) ── */
.flag-bar {
height: 6px;
width: 100%;
background: linear-gradient(
to right,
var(--vert-gong) 0 40%,
var(--blanc-drapeau) 40% 60%,
var(--rouge-gong) 60% 100%
);
}
html.light-theme .flag-bar {
background: linear-gradient(
to right,
var(--vert-gong) 0 40%,
#0d0d0d 40% 60%,
var(--rouge-gong) 60% 100%
);
}
/* Flag-chip : mini signature d'ornement de titre (56 × 6 px) */
.flag-chip {
display: inline-block;
width: 56px;
height: 6px;
border-radius: 1px;
background: linear-gradient(
to right,
var(--vert-gong) 0 40%,
var(--blanc-drapeau) 40% 60%,
var(--rouge-gong) 60% 100%
);
}
/* ── Icônes (sprite SVG) ── */
.icon {
width: 1.25em;
height: 1.25em;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
flex: none;
vertical-align: middle;
}
/* ── Accessibilité ── */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.skip-link {
position: absolute;
left: 0.5rem;
top: -3rem;
z-index: 200;
background: var(--accent);
color: #0d0d0d;
font-family: var(--font-display);
font-weight: 700;
text-transform: uppercase;
padding: 0.6em 1em;
border-radius: var(--radius-sm);
transition: top var(--dur-tanbou) var(--ease-ka);
}
.skip-link:focus {
top: 0.5rem;
color: #0d0d0d;
}
/* ── Reveal — état caché seulement si JS actif ET mouvement autorisé ── */
html.has-js .reveal {
opacity: 0;
transform: translateY(18px);
}
html.has-js .reveal.is-visible {
opacity: 1;
transform: none;
transition:
opacity var(--dur-mesure) var(--ease-ka),
transform var(--dur-mesure) var(--ease-ka);
transition-delay: var(--d, 0ms);
}
/* Prose (textes historiques longs) */
.prose {
max-width: var(--container-lecture);
}
.prose p,
.prose li {
color: color-mix(in srgb, var(--creme) 90%, transparent);
}
.prose h2 {
margin-top: var(--space-4);
}
.prose h3 {
margin-top: var(--space-3);
}
.prose blockquote {
margin: var(--space-3) 0;
padding-left: var(--space-2);
border-left: 3px solid var(--accent);
color: var(--muted);
font-style: italic;
}
/* ── Gate globale prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
html.has-js .reveal {
opacity: 1;
transform: none;
}
}
+87
View File
@@ -0,0 +1,87 @@
/* ============================================================================
TOKENS GONG — identité propre (drapeau guadeloupéen vert/blanc/rouge)
Méthode OKI appliquée : thème sombre par défaut, clair opt-in WCAG AA,
cadences gwoka. Le GONG garde SES couleurs (rouge d'action, vert drapeau).
Un seul fichier de vérité — jamais de valeur recopiée à la main ailleurs.
============================================================================ */
:root {
/* ── Noyau (thème sombre = défaut) ── */
--noir: #0d0d0d; /* background */
--noir-profond: #171210; /* surface (chaud, presque noir) */
--creme: #faf6ef; /* foreground — blanc chaud */
--line: rgba(255, 255, 255, 0.1); /* filets — jamais de gris plein */
/* ── Drapeau GONG : rouge = agir/signaler · vert = valider/secondaire · blanc ── */
--rouge-gong: #e11419; /* accent : couleur d'action principale */
--rouge-vif: #ff2a30; /* survol du rouge */
--vert-gong: #00a651; /* vert drapeau : validation, mémoire, second accent */
--vert-vif: #12c766; /* survol du vert */
--blanc-drapeau: #ffffff;
/* ── Étendue (parcimonie : décorations, sémantique) ── */
--jaune-sable: #f0c419; /* rappel, mise en exergue rare */
--gris-sombre: #241c19;
/* ── Sémantique dérivée ── */
--muted: color-mix(in srgb, var(--creme) 68%, transparent);
--muted-fort: color-mix(in srgb, var(--creme) 50%, transparent);
--card-bg: rgba(255, 255, 255, 0.03);
--card-bg-hover: rgba(255, 255, 255, 0.055);
--accent: var(--rouge-gong);
--accent-hover: var(--rouge-vif);
--focus: var(--jaune-sable);
/* ── Typographie ── */
--font-display: 'Archivo', 'Arial Black', system-ui, sans-serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
/* ── Formes (angles nets, ≤ 6 px) ── */
--radius-sm: 3px; /* boutons, tags, badges */
--radius-md: 6px; /* cartes — jamais plus */
--border-card: 1px solid var(--line);
--border-btn: 2px solid var(--accent);
/* ── Espacements ── */
--space-1: 0.75rem;
--space-2: 1rem;
--space-3: 1.5rem;
--space-4: 2rem;
--space-5: 4rem;
--space-6: 6rem;
--container: 1200px;
--container-lecture: 68ch; /* colonne de lecture (textes historiques longs) */
/* ── Motion — cadences gwoka (rythme du ka) ── */
--ease-ka: cubic-bezier(0.22, 1, 0.36, 1); /* temps fort : attaque franche, longue tenue */
--ease-syncope: cubic-bezier(0.65, 0, 0.35, 1); /* contretemps : symétrique, urgent */
--dur-tanbou: 120ms; /* double-croche — micro-interactions */
--dur-mesure: 480ms; /* une mesure — entrées de section */
--dur-phrase: 960ms; /* deux mesures — transitions de page */
/* ── Divers ── */
--nav-h: 4rem;
--shadow-1: 0 2px 8px rgba(0, 0, 0, 0.35);
--shadow-2: 0 8px 28px rgba(0, 0, 0, 0.45);
color-scheme: dark;
}
/* ── Thème clair — opt-in, accents assombris pour WCAG AA ── */
html.light-theme {
--noir: #faf6ef;
--noir-profond: #f2ebdf;
--creme: #14100e;
--line: rgba(0, 0, 0, 0.12);
--rouge-gong: #b3060c;
--rouge-vif: #900409;
--vert-gong: #007a3d;
--vert-vif: #005e2f;
--jaune-sable: #9a7b00;
--gris-sombre: #e6dccb;
--muted: color-mix(in srgb, var(--creme) 72%, transparent);
--muted-fort: color-mix(in srgb, var(--creme) 55%, transparent);
--card-bg: rgba(0, 0, 0, 0.03);
--card-bg-hover: rgba(0, 0, 0, 0.055);
--focus: #9a7b00;
color-scheme: light;
}
+60
View File
@@ -0,0 +1,60 @@
<script lang="ts">
import { page } from '$app/state';
import Icon from '$lib/components/Icon.svelte';
const is404 = $derived(page.status === 404);
</script>
<svelte:head>
<title>{page.status} — GONG</title>
<meta name="robots" content="noindex" />
</svelte:head>
<main id="contenu" class="erreur container">
<Icon name="ka" size="4.5rem" />
<p class="code">{page.status}</p>
{#if is404}
<h1 lang="gcf">Paj-la pa la</h1>
<p class="lead">
Cette page n'existe pas ou a été déplacée. Mais l'histoire du GONG, elle, est toujours là.
</p>
{:else}
<h1>Erreur {page.status}</h1>
<p class="lead">{page.error?.message ?? 'Une erreur est survenue.'}</p>
{/if}
<div class="liens">
<a class="btn btn--fill" href="/">Retour à l'accueil</a>
<a class="btn" href="/histoire/">L'histoire du GONG</a>
</div>
</main>
<style>
.erreur {
min-height: 68dvh;
display: grid;
place-content: center;
justify-items: center;
text-align: center;
gap: 0.6rem;
padding-block: var(--space-5);
}
.code {
font-family: var(--font-display);
font-weight: 900;
font-size: clamp(3rem, 2rem + 6vw, 6rem);
line-height: 1;
color: var(--accent);
margin: 0;
}
.lead {
max-width: 46ch;
color: var(--muted);
}
.liens {
display: flex;
gap: 0.6rem;
flex-wrap: wrap;
justify-content: center;
margin-top: var(--space-2);
}
</style>
+52
View File
@@ -0,0 +1,52 @@
<script lang="ts">
import '$lib/styles/gong-tokens.css';
import '$lib/styles/base.css';
import { onMount } from 'svelte';
import { onNavigate, afterNavigate } from '$app/navigation';
import Nav from '$lib/components/Nav.svelte';
import Footer from '$lib/components/Footer.svelte';
import ScrollProgressBar from '$lib/components/ScrollProgressBar.svelte';
import { initSmoothScroll } from '$lib/motion/scroll';
let { children } = $props();
// Smooth scroll Lenis — une seule instance, gate reduced-motion interne.
onMount(() => {
let cleanup: (() => void) | undefined;
initSmoothScroll().then((c) => (cleanup = c));
return () => cleanup?.();
});
// Transitions de page — View Transitions API, fallback = navigation instantanée.
onNavigate((navigation) => {
if (!document.startViewTransition) return;
return new Promise((resolve) => {
document.startViewTransition(async () => {
resolve();
await navigation.complete;
});
});
});
// Accessibilité : après un changement de route, déplacer le focus sur le contenu.
afterNavigate(() => {
const main = document.getElementById('contenu');
if (main) {
main.setAttribute('tabindex', '-1');
main.focus({ preventScroll: true });
}
});
</script>
<a class="skip-link" href="#contenu">Aller au contenu</a>
<ScrollProgressBar />
<Nav />
{@render children()}
<Footer />
<style>
:global(::view-transition-old(root)),
:global(::view-transition-new(root)) {
animation-duration: var(--dur-mesure);
}
</style>
+3
View File
@@ -0,0 +1,3 @@
// Site 100 % pré-rendu, statique (adapter-static), URLs historiques avec slash final.
export const prerender = true;
export const trailingSlash = 'always';
+16
View File
@@ -0,0 +1,16 @@
import { getActualites } from '$lib/server/actualites';
export function load() {
const actualites = getActualites()
.slice(0, 3)
.map(({ slug, titre, date, iso, chapeau, couverture, couvertureAlt }) => ({
slug,
titre,
date,
iso,
chapeau,
couverture,
couvertureAlt
}));
return { actualites };
}
+329
View File
@@ -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 danciens étudiants de lAGEG (dont Pierre Sainton).',
'Objectif : lindé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">80200</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>
+14
View File
@@ -0,0 +1,14 @@
import { getActualites } from '$lib/server/actualites';
export function load() {
const actualites = getActualites().map(({ slug, titre, date, iso, chapeau, couverture, couvertureAlt }) => ({
slug,
titre,
date,
iso,
chapeau,
couverture,
couvertureAlt
}));
return { actualites };
}
+83
View File
@@ -0,0 +1,83 @@
<script lang="ts">
import Seo from '$lib/components/Seo.svelte';
import Breadcrumb from '$lib/components/Breadcrumb.svelte';
import { reveal } from '$lib/motion/reveal';
import { webPage } from '$lib/seo';
let { data } = $props();
const crumbs = [
{ name: 'Accueil', path: '/' },
{ name: 'Actualités', path: '/actualites/' }
];
</script>
<Seo
title="Actualités"
description="Communiqués, commémorations et annonces du GONG et de sa mémoire en Guadeloupe."
path="/actualites/"
graph={[webPage('/actualites/', 'Actualités du GONG', 'Communiqués et commémorations.')]}
breadcrumb={crumbs}
/>
<main id="contenu" class="section">
<div class="container">
<Breadcrumb items={crumbs} />
<h1>Actualités</h1>
{#if data.actualites.length}
<ul class="grille">
{#each data.actualites as a, i (a.slug)}
<li>
<a class="card card--link" href="/actualites/{a.slug}/" use:reveal={i}>
{#if a.couverture}
<img class="cover" src={a.couverture} alt={a.couvertureAlt} loading="lazy" decoding="async" />
{/if}
<time datetime={a.iso} class="date">{a.date}</time>
<h2>{a.titre}</h2>
<p>{a.chapeau}</p>
</a>
</li>
{/each}
</ul>
{:else}
<p class="lecture muted">Aucune actualité pour le moment.</p>
{/if}
</div>
</main>
<style>
.grille {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--space-3);
}
.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;
}
.date {
font-size: 0.8rem;
color: var(--muted-fort);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.grille h2 {
font-size: 1.2rem;
text-transform: none;
margin: 0.3rem 0;
}
.grille p {
color: var(--muted);
margin: 0;
}
.muted {
color: var(--muted);
}
</style>
@@ -0,0 +1,11 @@
import { error } from '@sveltejs/kit';
import { getActualites, getActualite } from '$lib/server/actualites';
import type { EntryGenerator } from './$types';
export const entries: EntryGenerator = () => getActualites().map((a) => ({ slug: a.slug }));
export function load({ params }) {
const article = getActualite(params.slug);
if (!article) error(404, 'Actualité introuvable');
return { article };
}
+93
View File
@@ -0,0 +1,93 @@
<script lang="ts">
import Seo from '$lib/components/Seo.svelte';
import Breadcrumb from '$lib/components/Breadcrumb.svelte';
import { SITE } from '$lib/data/gong';
let { data } = $props();
const a = $derived(data.article);
const crumbs = $derived([
{ name: 'Accueil', path: '/' },
{ name: 'Actualités', path: '/actualites/' },
{ name: a.titre, path: `/actualites/${a.slug}/` }
]);
const articleNode = $derived({
'@type': 'Article',
'@id': `${SITE.url}/actualites/${a.slug}/#article`,
headline: a.titre,
description: a.chapeau,
datePublished: a.iso,
dateModified: a.iso,
inLanguage: 'fr-FR',
...(a.couverture ? { image: SITE.url + a.couverture } : {}),
author: { '@id': `${SITE.url}/#organization` },
publisher: { '@id': `${SITE.url}/#organization` },
isPartOf: { '@id': `${SITE.url}/#website` },
mainEntityOfPage: `${SITE.url}/actualites/${a.slug}/`
});
</script>
<Seo
title={a.titre}
description={a.chapeau}
path={`/actualites/${a.slug}/`}
type="article"
image={a.couverture ?? '/gong-logo.png'}
imageAlt={a.couvertureAlt ?? a.titre}
publishedTime={a.iso}
modifiedTime={a.iso}
graph={[articleNode]}
breadcrumb={crumbs}
/>
<main id="contenu" class="section">
<div class="container">
<Breadcrumb items={crumbs} />
<article>
<header class="art-head">
<time datetime={a.iso} class="date">{a.date}</time>
<h1>{a.titre}</h1>
<p class="chapeau">{a.chapeau}</p>
</header>
{#if a.couverture}
<figure class="art-cover">
<img src={a.couverture} alt={a.couvertureAlt} width="1200" height="800" />
</figure>
{/if}
<!-- Contenu first-party (Sveltia CMS, rendu markdown côté serveur). -->
<div class="prose art-body">{@html a.html}</div>
</article>
<p><a class="btn btn--ghost" href="/actualites/">← Toutes les actualités</a></p>
</div>
</main>
<style>
.art-head {
max-width: var(--container-lecture);
}
.date {
font-size: 0.85rem;
color: var(--muted-fort);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.chapeau {
font-size: 1.2rem;
color: var(--muted);
font-style: italic;
}
.art-cover {
margin: var(--space-3) 0;
max-width: 900px;
}
.art-cover img {
width: 100%;
border-radius: var(--radius-md);
border: 1px solid var(--line);
}
.art-body {
margin-top: var(--space-3);
}
</style>
+5
View File
@@ -0,0 +1,5 @@
import { getDocument } from '$lib/server/documents';
export function load() {
return { html: getDocument('charte-1963') };
}
+83
View File
@@ -0,0 +1,83 @@
<script lang="ts">
import Seo from '$lib/components/Seo.svelte';
import Breadcrumb from '$lib/components/Breadcrumb.svelte';
import Icon from '$lib/components/Icon.svelte';
import { webPage } from '$lib/seo';
let { data } = $props();
const crumbs = [
{ name: 'Accueil', path: '/' },
{ name: 'Charte de 1963', path: '/charte/' }
];
</script>
<Seo
title="La Charte du GONG (juin 1963)"
description="Le texte intégral de la Charte du GONG adoptée en assemblée générale en juin 1963 : le droit du peuple guadeloupéen à disposer de lui-même, la souveraineté nationale et les objectifs de la révolution."
path="/charte/"
type="article"
graph={[webPage('/charte/', 'Charte du GONG (1963)', 'Texte fondateur du GONG adopté en juin 1963.')]}
breadcrumb={crumbs}
/>
<main id="contenu" class="section">
<div class="container">
<Breadcrumb items={crumbs} />
<header class="doc-head">
<p class="doc-kicker"><span class="flag-chip" aria-hidden="true"></span> Texte fondateur · Juin 1963</p>
<h1>La Charte du GONG</h1>
<a class="btn btn--ghost" href="/assets/charte-du-gong-1963.pdf" rel="external noopener noreferrer" target="_blank">
Voir l'original (PDF) <Icon name="download" size="1em" />
</a>
</header>
<article class="prose doc">
<!-- Contenu first-party (transcription du document de 1963, rendu markdown côté serveur). -->
{@html data.html}
</article>
<nav class="suite" aria-label="Poursuivre la lecture">
<a class="btn btn--ghost" href="/orientation/">Orientation & stratégie →</a>
<a class="btn btn--ghost" href="/ideologie/">L'idéologie du GONG →</a>
</nav>
</div>
</main>
<style>
.doc-head {
margin-bottom: var(--space-4);
}
.doc-kicker {
display: inline-flex;
flex-direction: column;
gap: 0.5rem;
font-family: var(--font-display);
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.85rem;
color: var(--muted);
}
.doc-head .btn {
margin-top: var(--space-2);
}
.doc :global(h2) {
margin-top: var(--space-4);
padding-top: var(--space-2);
border-top: 1px solid var(--line);
font-size: 1.35rem;
}
.doc :global(h3) {
color: var(--accent);
font-size: 1.1rem;
}
.doc :global(blockquote) {
font-size: 1.05rem;
}
.suite {
display: flex;
gap: 0.6rem;
flex-wrap: wrap;
margin-top: var(--space-4);
}
</style>
+107
View File
@@ -0,0 +1,107 @@
<script lang="ts">
import Seo from '$lib/components/Seo.svelte';
import Breadcrumb from '$lib/components/Breadcrumb.svelte';
import Icon from '$lib/components/Icon.svelte';
import { SITE, contact } from '$lib/data/gong';
import { webPage } from '$lib/seo';
const crumbs = [
{ name: 'Accueil', path: '/' },
{ name: 'Contact', path: '/contact/' }
];
const contactNode = {
'@type': 'ContactPage',
'@id': `${SITE.url}/contact/#contactpage`,
url: `${SITE.url}/contact/`,
name: 'Contact — GONG',
isPartOf: { '@id': `${SITE.url}/#website` },
about: { '@id': `${SITE.url}/#organization` },
inLanguage: 'fr-FR'
};
const canaux = [
{ icon: 'mail', label: 'E-mail (ProtonMail)', valeur: contact.email, href: `mailto:${contact.email}`, ext: false },
{ icon: 'globe', label: 'Bokantaj — réseau social', valeur: '@GONG', href: contact.bokantaj, ext: true },
{ icon: 'video', label: 'Gade — chaîne vidéo (PeerTube)', valeur: 'gong_tv', href: contact.gade, ext: true },
{ icon: 'book', label: 'Code source du site (forge)', valeur: 'labola.o-k-i.net', href: contact.forge, ext: true }
];
</script>
<Seo
title="Contact"
description="Contacter le GONG et l'équipe éditoriale du site : e-mail ProtonMail, réseau social Bokantaj, chaîne vidéo Gade et code source sur la forge de l'écosystème OKI."
path="/contact/"
graph={[webPage('/contact/', 'Contact — GONG', 'Nous contacter.'), contactNode]}
breadcrumb={crumbs}
/>
<main id="contenu" class="section">
<div class="container">
<Breadcrumb items={crumbs} />
<h1>Contact</h1>
<p class="lecture intro">
Une question, une correction, un témoignage ou une archive à partager ? Écrivez-nous. Ce site
est un travail de mémoire ouvert et évolutif.
</p>
<ul class="canaux">
{#each canaux as c (c.href)}
<li>
<a
class="card card--link"
href={c.href}
rel={c.ext ? 'external noopener noreferrer' : undefined}
target={c.ext ? '_blank' : undefined}
>
<Icon name={c.icon} size="1.6rem" />
<h2>{c.label}</h2>
<p>{c.valeur}</p>
</a>
</li>
{/each}
</ul>
<address class="adresse lecture">
<h2>Éditeur</h2>
<p>
ORGANISATION KA INTERNATIONALE<br />
36 rue Lethière, 97100 Basse-Terre, Guadeloupe<br />
<a href="mailto:{contact.emailOKI}">{contact.emailOKI}</a>
</p>
</address>
</div>
</main>
<style>
.intro {
color: var(--muted);
margin-bottom: var(--space-4);
}
.canaux {
list-style: none;
margin: 0 0 var(--space-5);
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--space-3);
}
.canaux h2 {
font-size: 1.05rem;
text-transform: none;
margin: 0.6rem 0 0.2rem;
}
.canaux p {
color: var(--muted);
margin: 0;
}
.adresse {
font-style: normal;
}
.adresse h2 {
font-size: 1.1rem;
}
.adresse p {
color: var(--muted);
}
</style>
+154
View File
@@ -0,0 +1,154 @@
<script lang="ts">
import Seo from '$lib/components/Seo.svelte';
import Breadcrumb from '$lib/components/Breadcrumb.svelte';
import SectionTitle from '$lib/components/SectionTitle.svelte';
import { SITE } from '$lib/data/gong';
import { webPage } from '$lib/seo';
const crumbs = [
{ name: 'Accueil', path: '/' },
{ name: 'Questions fréquentes', path: '/faq/' }
];
// Le texte des réponses est IDENTIQUE à celui du schema (aucun contenu caché).
const faq = [
{
q: "Qu'est-ce que le GONG ?",
r: "Le GONG (Groupe d'Organisation Nationale de la Guadeloupe) était une organisation politique indépendantiste et anticolonialiste guadeloupéenne. Fondé le 23 juin 1963 à Paris, il militait pour l'indépendance de la Guadeloupe et fut dissous de fait en 1968."
},
{
q: 'Que signifie le sigle GONG ?',
r: "GONG signifie « Groupe d'Organisation Nationale de la Guadeloupe ». On l'écrit aussi G.O.N.G. Le mouvement se réclamait du marxisme-léninisme et de la lutte de libération nationale."
},
{
q: 'Quand et par qui le GONG a-t-il été fondé ?',
r: "Le GONG a été fondé le 23 juin 1963 à Paris, dans la clandestinité, par d'anciens militants de l'Association générale des étudiants guadeloupéens (AGEG), parmi lesquels Pierre Sainton, Jacques Nestor, Marcel Manville, Henri Bangou et Serge Glaude."
},
{
q: "Quel était l'objectif du GONG ?",
r: "L'objectif principal du GONG était l'indépendance nationale de la Guadeloupe, suivie d'une révolution socialiste. Son programme incluait la réforme agraire, l'industrialisation, l'unité antillaise et la solidarité tiers-mondiste."
},
{
q: "Qu'est-ce que « Mé 67 » ?",
r: "« Mé 67 » désigne les émeutes de mai 1967 en Guadeloupe. Du 26 au 28 mai 1967, la répression d'une grève ouvrière à Pointe-à-Pitre a fait, selon les historiens, entre 80 et 200 victimes, contre 7 à 8 morts selon le bilan officiel."
},
{
q: 'Le GONG était-il responsable des émeutes de mai 1967 ?',
r: "Non. Deux rapports de police de 1967 (commissaire Gévaudan) ont conclu à l'absence de responsabilité directe du GONG : les émeutes étaient spontanées. Le mouvement a néanmoins servi de prétexte à la répression et à l'arrestation de ses militants."
},
{
q: "Qu'est-il arrivé aux militants du GONG ?",
r: "Plus de 70 personnes ont été arrêtées. Dix-huit Guadeloupéens ont été jugés à Paris en février-mars 1968 devant la Cour de sûreté de l'État. Le verdict — 13 acquittements et 6 peines avec sursis — a été vécu comme une victoire politique."
},
{
q: 'Que signifie « Briser les urnes colonialistes » ?',
r: "« Briser les urnes colonialistes. Conquérir l'indépendance nationale » était le mot d'ordre du GONG lors des législatives de mars 1967. Il dénonçait des élections jugées frauduleuses et appelait au boycott des scrutins organisés par le pouvoir colonial."
},
{
q: 'Le GONG existe-t-il encore aujourdhui ?',
r: "Non, le GONG a été dissous de fait en 1968. Mais son héritage perdure : plusieurs mouvements en sont issus, notamment l'UPLG (1978), toujours active en 2026, ainsi que le syndicat UGTG. Le 26 mai reste une date de commémoration."
},
{
q: 'Qui était Pierre Sainton ?',
r: 'Pierre Sainton (vers 1924 - 2018) était le fondateur principal et lidéologue du GONG. Médecin généraliste à Capesterre-Belle-Eau, il prononça le discours fondateur du mouvement en Guadeloupe le 30 mai 1964 sur la stèle de Delgrès.'
}
];
const faqNode = {
'@type': 'FAQPage',
'@id': `${SITE.url}/faq/#faq`,
mainEntity: faq.map((f) => ({
'@type': 'Question',
name: f.q,
acceptedAnswer: { '@type': 'Answer', text: f.r }
}))
};
</script>
<Seo
title="Qu'est-ce que le GONG ? Questions fréquentes"
description="Réponses aux questions les plus fréquentes sur le GONG : définition, fondation, objectifs, Mé 67, procès de 1968 et héritage. L'essentiel sur le mouvement indépendantiste guadeloupéen."
path="/faq/"
graph={[webPage('/faq/', 'Questions fréquentes sur le GONG', 'FAQ sur le GONG.'), faqNode]}
breadcrumb={crumbs}
/>
<main id="contenu" class="section">
<div class="container">
<Breadcrumb items={crumbs} />
<h1>Qu'est-ce que le GONG ?</h1>
<p class="lecture intro">Les réponses essentielles, en quelques phrases.</p>
<div class="faq lecture">
{#each faq as f (f.q)}
<details>
<summary>{f.q}</summary>
<p>{f.r}</p>
</details>
{/each}
</div>
<div class="apres lecture">
<SectionTitle title="Aller plus loin" as="h2" />
<div class="liens">
<a class="btn btn--ghost" href="/histoire/">Histoire complète</a>
<a class="btn btn--ghost" href="/me-67/">Mé 67</a>
<a class="btn btn--ghost" href="/sources/">Sources</a>
</div>
</div>
</div>
</main>
<style>
.intro {
color: var(--muted);
margin-bottom: var(--space-3);
}
.faq {
display: grid;
gap: 0.6rem;
}
details {
background: var(--card-bg);
border: 1px solid var(--line);
border-left: 4px solid var(--accent);
border-radius: var(--radius-md);
padding: 0 var(--space-3);
}
summary {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.05rem;
cursor: pointer;
padding: var(--space-2) 0;
list-style: none;
display: flex;
justify-content: space-between;
gap: 1rem;
align-items: center;
}
summary::-webkit-details-marker {
display: none;
}
summary::after {
content: '+';
font-size: 1.5rem;
color: var(--accent);
flex: none;
}
details[open] summary::after {
content: '';
}
details p {
margin: 0 0 var(--space-2);
color: var(--muted);
}
.apres {
margin-top: var(--space-5);
}
.liens {
display: flex;
gap: 0.6rem;
flex-wrap: wrap;
}
</style>
+174
View File
@@ -0,0 +1,174 @@
<script lang="ts">
import Seo from '$lib/components/Seo.svelte';
import Breadcrumb from '$lib/components/Breadcrumb.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 { webPage } from '$lib/seo';
import { heritage as h, repression as r } from '$lib/data/gong';
const crumbs = [
{ name: 'Accueil', path: '/' },
{ name: 'Héritage', path: '/heritage/' }
];
</script>
<Seo
title="L'héritage du GONG"
description="Répression, dissolution puis postérité : l'UPLG, l'UGTG, l'UTA et le mouvement indépendantiste guadeloupéen sont nés dans le sillage du GONG. Œuvres, mémoire et commémorations de Mé 67."
path="/heritage/"
type="article"
graph={[webPage('/heritage/', 'Héritage du GONG', 'Répression, mouvements issus, mémoire et postérité culturelle.')]}
breadcrumb={crumbs}
/>
<main id="contenu" class="section">
<div class="container">
<Breadcrumb items={crumbs} />
<h1>Héritage</h1>
<div class="lecture">
<Resume
lead="Décapité par la répression de 1967-1968, le GONG n'a pas disparu sans laisser de traces. Il a ensemencé tout le mouvement indépendantiste et syndical guadeloupéen : l'UPLG, l'UGTG, l'UTA et d'autres en sont directement issus."
points={[
'70+ arrestations, dissolution du mouvement en 1968.',
'LUPLG (1978) : premier parti indépendantiste structuré, toujours actif.',
'LUGTG (1973) : syndicat de masse issu de la mouvance GONG/AGEG.',
'Mé 67 est aujourdhui une date de commémoration en Guadeloupe.'
]}
/>
</div>
<!-- RÉPRESSION -->
<section class="section--tight">
<SectionTitle title="La répression et la dissolution" as="h2" id="repression" />
<div class="lecture prose">
<p><strong>Arrestations.</strong> {r.arrestations}</p>
<p><strong>Incarcération.</strong> {r.incarceration}. {r.dissolution}.</p>
<h3>Conséquences</h3>
<ul>
{#each r.consequences as c (c)}
<li>{c}</li>
{/each}
</ul>
<h3>Les responsables de la répression</h3>
<ul>
{#each r.responsables as resp (resp.nom)}
<li><strong>{resp.nom}</strong>{resp.role}. {resp.note}</li>
{/each}
</ul>
</div>
</section>
<!-- MOUVEMENTS ISSUS -->
<section class="section--tight">
<SectionTitle title="Les mouvements héritiers" as="h2" id="mouvements" />
<ul class="grille">
{#each h.mouvements as m, i (m.nom)}
<li class="card card--vert" use:reveal={i}>
<span class="date">{m.dateCreation}</span>
<h3>{m.nom}</h3>
<p>{m.description}</p>
</li>
{/each}
</ul>
</section>
<!-- INFLUENCE CULTURELLE -->
<section class="section--tight">
<SectionTitle title="Dans la culture" as="h2" id="culture" />
<ul class="oeuvres">
{#each h.influenceCulturelle as o, i (o.oeuvre)}
<li class="oeuvre" use:reveal={i}>
<Icon name="book" size="1.4rem" />
<div>
<h3>{o.oeuvre} <span class="an">· {o.date}</span></h3>
<p class="auteur">{o.auteur}{o.type}</p>
<p class="sujet">{o.sujet}</p>
</div>
</li>
{/each}
</ul>
</section>
<!-- MÉMOIRE -->
<section class="section--tight">
<SectionTitle title="La mémoire" as="h2" id="memoire" />
<ul class="lecture prose">
{#each h.memoire as mem (mem)}
<li>{mem}</li>
{/each}
</ul>
</section>
<p class="src lecture">Sources : {h.source}.</p>
</div>
</main>
<style>
.grille {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--space-2);
}
.date {
font-family: var(--font-display);
font-weight: 700;
color: var(--vert-gong);
font-size: 0.85rem;
}
.grille h3 {
font-size: 1.05rem;
text-transform: none;
margin: 0.3rem 0;
}
.grille p {
color: var(--muted);
margin: 0;
font-size: 0.94rem;
}
.oeuvres {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--space-2);
max-width: var(--container-lecture);
}
.oeuvre {
display: flex;
gap: var(--space-2);
background: var(--card-bg);
border: 1px solid var(--line);
border-radius: var(--radius-md);
padding: var(--space-3);
}
.oeuvre h3 {
margin: 0 0 0.2rem;
font-size: 1.05rem;
text-transform: none;
}
.oeuvre .an {
color: var(--muted-fort);
font-weight: 400;
}
.auteur {
color: var(--accent);
font-size: 0.88rem;
margin: 0 0 0.3rem;
}
.sujet {
color: var(--muted);
margin: 0;
font-size: 0.94rem;
}
.src {
color: var(--muted-fort);
font-size: 0.85rem;
margin-top: var(--space-3);
}
</style>
+115
View File
@@ -0,0 +1,115 @@
<script lang="ts">
import Seo from '$lib/components/Seo.svelte';
import Breadcrumb from '$lib/components/Breadcrumb.svelte';
import Resume from '$lib/components/Resume.svelte';
import SectionTitle from '$lib/components/SectionTitle.svelte';
import Timeline from '$lib/components/Timeline.svelte';
import { webPage } from '$lib/seo';
import { presentation, contexteHistorique, chronologie } from '$lib/data/gong';
const crumbs = [
{ name: 'Accueil', path: '/' },
{ name: 'Histoire', path: '/histoire/' }
];
const ctx = contexteHistorique;
</script>
<Seo
title="Histoire du GONG (1963-1968)"
description="L'histoire du Groupe d'Organisation Nationale de la Guadeloupe : contexte colonial, fondation en 1963, activité clandestine, Mé 67, procès de 1968 et dissolution. Chronologie complète."
path="/histoire/"
type="article"
graph={[webPage('/histoire/', 'Histoire du GONG (1963-1968)', "Contexte, fondation, activité, répression et dissolution du GONG.")]}
breadcrumb={crumbs}
/>
<main id="contenu" class="section">
<div class="container">
<Breadcrumb items={crumbs} />
<h1>Histoire du GONG</h1>
<div class="lecture">
<Resume
lead="Fondé le 23 juin 1963 à Paris par d'anciens étudiants guadeloupéens, le GONG mène pendant quatre ans une lutte clandestine pour l'indépendance de la Guadeloupe. Les émeutes de mai 1967 et le procès de 1968 précipitent sa dissolution de fait."
points={[
'Contexte : la Guadeloupe, département français depuis 1946, sous économie de plantation.',
'Fondation dans la clandestinité après la dissolution du Front antillo-guyanais.',
'Installation légale en Guadeloupe le 30 mai 1964, sur la stèle de Delgrès.',
'Décapité par la répression de 1967-1968.'
]}
/>
</div>
<!-- CONTEXTE -->
<section class="section--tight">
<SectionTitle title="Le contexte : une colonie qui ne dit pas son nom" as="h2" id="contexte" />
<div class="lecture prose">
<h3>La Guadeloupe avant le GONG</h3>
<p><strong>Statut.</strong> {ctx.guadeloupeAvantGONG.statut}</p>
<p><strong>Économie.</strong> {ctx.guadeloupeAvantGONG.economie}</p>
<p><strong>Société.</strong> {ctx.guadeloupeAvantGONG.social}</p>
<p><strong>Politique.</strong> {ctx.guadeloupeAvantGONG.politique}</p>
<h3>Un monde en décolonisation</h3>
<p>
La fondation du GONG s'inscrit dans un contexte international bouillonnant :
l'indépendance de l'Algérie (1962), la révolution cubaine (1959), la Conférence
tricontinentale de La Havane (1966) et la mobilisation contre la guerre du Vietnam.
</p>
<ul>
<li><strong>Décolonisation :</strong> {ctx.contexteInternational.decolonisation}</li>
<li><strong>Guerre froide :</strong> {ctx.contexteInternational.guerreFroide}</li>
<li><strong>Révolution cubaine :</strong> {ctx.contexteInternational.revolutionCubaine}</li>
<li><strong>Tricontinentale :</strong> {ctx.contexteInternational.tricontinentale}</li>
<li><strong>Guerre du Vietnam :</strong> {ctx.contexteInternational.guerreVietnam}</li>
</ul>
<h3>Les précurseurs</h3>
<ul>
{#each ctx.precurseurs as p (p)}
<li>{p}</li>
{/each}
</ul>
</div>
</section>
<!-- FONDATION -->
<section class="section--tight">
<SectionTitle title="La fondation" as="h2" id="fondation" />
<div class="lecture prose">
<p>{presentation.contexteFondation}</p>
<p>{presentation.installationGuadeloupe}</p>
<p>
<strong>Soutiens internationaux.</strong>
Le mouvement bénéficie de l'appui du FLN algérien, du Parti communiste belge prochinois de
Jacques Grippa (qui imprime son journal), de la Tricontinentale et de l'OLAS.
</p>
</div>
</section>
<!-- CHRONOLOGIE -->
<section class="section--tight">
<SectionTitle title="Chronologie" as="h2" id="chronologie" />
<p class="lecture muted">De la départementalisation (1946) à la reconnaissance mémorielle (2016-2021).</p>
<Timeline evenements={chronologie} />
</section>
<nav class="suite" aria-label="Poursuivre la lecture">
<a class="btn btn--ghost" href="/me-67/">Mé 67 →</a>
<a class="btn btn--ghost" href="/proces-1968/">Le procès de 1968 →</a>
<a class="btn btn--ghost" href="/militants/">Les militants →</a>
</nav>
</div>
</main>
<style>
.muted {
color: var(--muted);
}
.suite {
display: flex;
gap: 0.6rem;
flex-wrap: wrap;
margin-top: var(--space-4);
}
</style>
+184
View File
@@ -0,0 +1,184 @@
<script lang="ts">
import Seo from '$lib/components/Seo.svelte';
import Breadcrumb from '$lib/components/Breadcrumb.svelte';
import Resume from '$lib/components/Resume.svelte';
import SectionTitle from '$lib/components/SectionTitle.svelte';
import { reveal } from '$lib/motion/reveal';
import { webPage } from '$lib/seo';
import { ideologie as id } from '$lib/data/gong';
const crumbs = [
{ name: 'Accueil', path: '/' },
{ name: 'Idéologie', path: '/ideologie/' }
];
</script>
<Seo
title="L'idéologie du GONG"
description="Marxisme-léninisme d'inspiration maoïste, tiers-mondisme et anticolonialisme : les influences (Fanon, Guevara, Nkrumah, Mao…), les objectifs et l'évolution des mots d'ordre du GONG de 1960 à 1967."
path="/ideologie/"
type="article"
graph={[webPage('/ideologie/', 'Idéologie du GONG', 'Marxisme-léninisme, tiers-mondisme et lutte de libération nationale.')]}
breadcrumb={crumbs}
/>
<main id="contenu" class="section">
<div class="container">
<Breadcrumb items={crumbs} />
<h1>Idéologie</h1>
<div class="lecture">
<Resume
lead="Le GONG se réclamait du marxisme-léninisme d'inspiration maoïste, du tiers-mondisme et de l'anticolonialisme. Il voulait conduire la Guadeloupe à l'indépendance nationale puis à une révolution socialiste."
points={[
'Courant : marxisme-léninisme (tendance maoïste), tiers-mondisme.',
'Influences : Marx, Lénine, Fanon, Guevara, Nkrumah, Castro, Mao.',
'Objectif central : lindépendance nationale de la Guadeloupe.',
'Mot dordre de 1967 : « Briser les urnes colonialistes ».'
]}
/>
</div>
<section class="section--tight">
<SectionTitle title="Un courant révolutionnaire" as="h2" id="courant" />
<div class="lecture prose">
<p><strong>{id.courantPrincipal}.</strong></p>
<p>{id.autoDefinition}</p>
<p>{id.programmeExtrait}</p>
</div>
</section>
<section class="section--tight">
<SectionTitle title="Les influences" as="h2" id="influences" />
<ul class="influences">
{#each id.influences as inf, i (inf.penseur)}
<li class="card" use:reveal={i}>
<h3>{inf.penseur}</h3>
<p>{inf.apport}</p>
</li>
{/each}
</ul>
</section>
<section class="section--tight">
<SectionTitle title="Les objectifs" as="h2" id="objectifs" />
<ol class="objectifs lecture">
{#each id.objectifs as o (o)}
<li>{o}</li>
{/each}
</ol>
</section>
<section class="section--tight">
<SectionTitle title="L'évolution des mots d'ordre (1960-1967)" as="h2" id="mots-ordre" />
<p class="lecture muted">
En sept ans, le mot d'ordre passe de l'autonomie à l'indépendance, puis à l'appel
révolutionnaire de 1967.
</p>
<ol class="evolution">
{#each id.evolutionMotsOrdre as e, i (e.periode)}
<li class="evo" use:reveal={i}>
<span class="evo__periode">{e.periode}</span>
<span class="evo__mot">« {e.motOrdre} »</span>
<span class="evo__ctx">{e.contexte}</span>
</li>
{/each}
</ol>
</section>
<p class="src lecture">Sources : {id.source}.</p>
<nav class="suite" aria-label="Poursuivre la lecture">
<a class="btn btn--ghost" href="/charte/">La charte de 1963 →</a>
<a class="btn btn--ghost" href="/orientation/">Orientation & stratégie →</a>
<a class="btn btn--ghost" href="/publications/">Les publications →</a>
</nav>
</div>
</main>
<style>
.influences {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--space-2);
}
.influences h3 {
font-size: 1.05rem;
text-transform: none;
margin: 0 0 0.3rem;
}
.influences p {
color: var(--muted);
margin: 0;
font-size: 0.95rem;
}
.objectifs {
max-width: var(--container-lecture);
display: grid;
gap: 0.5rem;
padding-left: 1.2rem;
}
.objectifs li {
color: var(--creme);
}
.evolution {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--space-2);
}
.evo {
display: grid;
grid-template-columns: 140px 1fr;
gap: 0.4rem var(--space-2);
background: var(--card-bg);
border: 1px solid var(--line);
border-left: 4px solid var(--accent);
border-radius: var(--radius-md);
padding: var(--space-2) var(--space-3);
}
.evo__periode {
font-family: var(--font-display);
font-weight: 800;
color: var(--accent);
grid-row: span 2;
}
.evo__mot {
font-weight: 700;
color: var(--creme);
}
.evo__ctx {
grid-column: 2;
color: var(--muted);
font-size: 0.92rem;
}
.muted {
color: var(--muted);
}
.src {
color: var(--muted-fort);
font-size: 0.85rem;
margin-top: var(--space-3);
}
.suite {
display: flex;
gap: 0.6rem;
flex-wrap: wrap;
margin-top: var(--space-4);
}
@media (max-width: 560px) {
.evo {
grid-template-columns: 1fr;
}
.evo__periode {
grid-row: auto;
}
.evo__ctx {
grid-column: 1;
}
}
</style>
+208
View File
@@ -0,0 +1,208 @@
<script lang="ts">
import Seo from '$lib/components/Seo.svelte';
import Breadcrumb from '$lib/components/Breadcrumb.svelte';
import Resume from '$lib/components/Resume.svelte';
import SectionTitle from '$lib/components/SectionTitle.svelte';
import { webPage } from '$lib/seo';
import { SITE, evenementsMai1967 as m } from '$lib/data/gong';
const crumbs = [
{ name: 'Accueil', path: '/' },
{ name: 'Mé 67', path: '/me-67/' }
];
const eventNode = {
'@type': 'Event',
'@id': `${SITE.url}/me-67/#event`,
name: 'Émeutes de mai 1967 en Guadeloupe (Mé 67)',
description:
"Répression sanglante d'une grève ouvrière à Pointe-à-Pitre les 26-28 mai 1967. Bilan estimé par les historiens : 80 à 200 victimes.",
startDate: '1967-05-26',
endDate: '1967-05-28',
eventStatus: 'https://schema.org/EventScheduled',
location: {
'@type': 'Place',
name: 'Pointe-à-Pitre, Guadeloupe',
address: { '@type': 'PostalAddress', addressLocality: 'Pointe-à-Pitre', addressRegion: 'Guadeloupe', addressCountry: 'FR' }
},
about: { '@id': `${SITE.url}/#organization` }
};
</script>
<Seo
title="Mé 67 — les émeutes de mai 1967 en Guadeloupe"
description="Les 26-28 mai 1967, la répression d'une grève ouvrière à Pointe-à-Pitre fait de 8 (bilan officiel) à 200 morts (estimations des historiens). Récit, bilan et rôle du GONG."
path="/me-67/"
type="article"
graph={[webPage('/me-67/', 'Mé 67 — émeutes de mai 1967', 'Récit et bilan des tueries de mai 1967 à Pointe-à-Pitre.'), eventNode]}
breadcrumb={crumbs}
/>
<main id="contenu" class="section">
<div class="container">
<Breadcrumb items={crumbs} />
<p class="surtitre"><span class="flag-chip" aria-hidden="true"></span> 26 — 28 mai 1967 · Pointe-à-Pitre</p>
<h1>Mé 67</h1>
<div class="lecture">
<Resume
lead="« Mé 67 » désigne la répression sanglante des 26, 27 et 28 mai 1967 à Pointe-à-Pitre, en Guadeloupe. Partie d'une grève des ouvriers du bâtiment, elle a fait, selon les historiens, entre 80 et 200 victimes — un massacre colonial longtemps occulté."
points={[
'Déclencheur : une grève pour +2,5 % de salaire, sur fond dagression raciste.',
'Le 26 mai, les forces de lordre tirent à balles réelles.',
'Jacques Nestor, militant du GONG (26 ans), est la première victime.',
'Bilan officiel : 7-8 morts. Estimations des historiens : 80 à 200 victimes.'
]}
/>
</div>
<!-- CONTEXTE -->
<section class="section--tight">
<SectionTitle title="Comment tout a commencé" as="h2" id="contexte" />
<div class="lecture prose">
<p><strong>Le contexte social.</strong> {m.contexte.social}</p>
<p><strong>L'étincelle raciste.</strong> {m.contexte.racial}</p>
<p><strong>Le contexte politique.</strong> {m.contexte.politique}</p>
<p><strong>L'arrière-plan international.</strong> {m.contexte.international}</p>
</div>
</section>
<!-- DÉROULEMENT -->
<section class="section--tight">
<SectionTitle title="Trois jours de répression" as="h2" id="deroulement" />
<ol class="jours">
{#each Object.entries(m.deroulement) as [jour, recit] (jour)}
<li class="jour">
<p class="jour__date">{jour}</p>
<p class="jour__txt">{recit}</p>
</li>
{/each}
</ol>
</section>
<!-- BILAN -->
<section class="section--tight">
<SectionTitle title="Le bilan" as="h2" id="bilan" />
<div class="bilan">
<div class="bilan__stat"><span class="bilan__num">78</span><span>morts (bilan officiel)</span></div>
<div class="bilan__stat is-strong"><span class="bilan__num">80200</span><span>victimes (estimations des historiens)</span></div>
<div class="bilan__stat"><span class="bilan__num">30+</span><span>blessés</span></div>
</div>
<p class="lecture prose note">{m.bilan.note}</p>
</section>
<!-- RÔLE DU GONG -->
<section class="section--tight">
<SectionTitle title="Quel a été le rôle du GONG ?" as="h2" id="role-gong" />
<div class="lecture prose">
<p>
Le GONG a soutenu les revendications ouvrières et participé à la mobilisation. Mais
l'enquête a établi que les émeutes étaient <strong>spontanées</strong>.
</p>
<ul>
{#each m.roleDuGONG.actions as a (a)}
<li>{a}</li>
{/each}
</ul>
<p><strong>La controverse.</strong> {m.roleDuGONG.controverse}</p>
<blockquote>
{m.roleDuGONG.rapportsPolice}
<footer>— Commissaire divisionnaire Honoré Gévaudan, rapport de 1967</footer>
</blockquote>
<p><strong>Une élimination préméditée ?</strong> {m.roleDuGONG.analyse}</p>
</div>
</section>
<p class="src lecture">Sources : {m.source}.</p>
<nav class="suite" aria-label="Poursuivre la lecture">
<a class="btn btn--ghost" href="/proces-1968/">Le procès de 1968 →</a>
<a class="btn btn--ghost" href="/militants/jacques-nestor/">Jacques Nestor →</a>
</nav>
</div>
</main>
<style>
.surtitre {
display: inline-flex;
flex-direction: column;
gap: 0.5rem;
font-family: var(--font-display);
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.85rem;
color: var(--muted);
}
.jours {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--space-2);
}
.jour {
background: var(--card-bg);
border: 1px solid var(--line);
border-left: 4px solid var(--accent);
border-radius: var(--radius-md);
padding: var(--space-3);
}
.jour__date {
font-family: var(--font-display);
text-transform: uppercase;
font-weight: 800;
color: var(--accent);
margin: 0 0 0.3rem;
}
.jour__txt {
margin: 0;
color: var(--muted);
}
.bilan {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--space-2);
margin-bottom: var(--space-3);
}
.bilan__stat {
background: var(--card-bg);
border: 1px solid var(--line);
border-radius: var(--radius-md);
padding: var(--space-3);
display: flex;
flex-direction: column;
gap: 0.3rem;
color: var(--muted);
}
.bilan__stat.is-strong {
border-color: var(--accent);
border-width: 2px;
}
.bilan__num {
font-family: var(--font-display);
font-weight: 900;
font-size: 2rem;
color: var(--creme);
line-height: 1;
}
.note {
font-style: italic;
color: var(--muted);
}
.src {
color: var(--muted-fort);
font-size: 0.85rem;
margin-top: var(--space-3);
}
.suite {
display: flex;
gap: 0.6rem;
flex-wrap: wrap;
margin-top: var(--space-4);
}
blockquote footer {
margin-top: 0.4rem;
font-size: 0.85rem;
color: var(--muted-fort);
}
</style>
@@ -0,0 +1,5 @@
import { getDocument } from '$lib/server/documents';
export function load() {
return { html: getDocument('mentions-legales') };
}
+47
View File
@@ -0,0 +1,47 @@
<script lang="ts">
import Seo from '$lib/components/Seo.svelte';
import Breadcrumb from '$lib/components/Breadcrumb.svelte';
import { SITE } from '$lib/data/gong';
import { webPage } from '$lib/seo';
let { data } = $props();
const crumbs = [
{ name: 'Accueil', path: '/' },
{ name: 'Mentions légales', path: '/mentions-legales/' }
];
const aboutNode = {
'@type': 'AboutPage',
'@id': `${SITE.url}/mentions-legales/#aboutpage`,
url: `${SITE.url}/mentions-legales/`,
name: 'Mentions légales — GONG',
isPartOf: { '@id': `${SITE.url}/#website` },
about: { '@id': `${SITE.url}/#organization` },
inLanguage: 'fr-FR'
};
</script>
<Seo
title="Mentions légales"
description="Mentions légales du site gong.gp : éditeur (Organisation Ka Internationale), hébergeur, propriété intellectuelle (licence AGPL-3.0), gestion des données personnelles et droit applicable."
path="/mentions-legales/"
graph={[webPage('/mentions-legales/', 'Mentions légales — GONG', 'Mentions légales du site.'), aboutNode]}
breadcrumb={crumbs}
/>
<main id="contenu" class="section">
<div class="container">
<Breadcrumb items={crumbs} />
<h1>Mentions légales</h1>
<!-- Contenu first-party (rendu markdown côté serveur). -->
<div class="prose doc">{@html data.html}</div>
</div>
</main>
<style>
.doc :global(h2) {
margin-top: var(--space-4);
font-size: 1.25rem;
}
</style>
+93
View File
@@ -0,0 +1,93 @@
<script lang="ts">
import Seo from '$lib/components/Seo.svelte';
import Breadcrumb from '$lib/components/Breadcrumb.svelte';
import Resume from '$lib/components/Resume.svelte';
import Icon from '$lib/components/Icon.svelte';
import { reveal } from '$lib/motion/reveal';
import { webPage } from '$lib/seo';
import { membres } from '$lib/data/gong';
const crumbs = [
{ name: 'Accueil', path: '/' },
{ name: 'Militants', path: '/militants/' }
];
</script>
<Seo
title="Les militants et fondateurs du GONG"
description="Pierre Sainton, Jacques Nestor, Marcel Manville, Henri Bangou, Serge Glaude… Portraits des femmes et des hommes qui ont fait le Groupe d'Organisation Nationale de la Guadeloupe."
path="/militants/"
graph={[webPage('/militants/', 'Militants et fondateurs du GONG', 'Portraits des militants du GONG.')]}
breadcrumb={crumbs}
/>
<main id="contenu" class="section">
<div class="container">
<Breadcrumb items={crumbs} />
<h1>Militants & fondateurs</h1>
<div class="lecture">
<Resume
lead="Le GONG a été porté par quelques dizaines de militants — étudiants, ouvriers, médecins, avocats. Voici les figures documentées : ses fondateurs, ses théoriciens, ses martyrs."
points={[
'Pierre Sainton : fondateur principal et idéologue.',
'Jacques Nestor : leader de masse, première victime de Mé 67.',
'Serge Glaude : co-fondateur, auteur de « Le GONG c quoi ? ».',
'Abert Béville : précurseur, mort avant la fondation.'
]}
/>
</div>
<ul class="grille">
{#each membres as m, i (m.slug)}
<li>
<a class="card card--link" href="/militants/{m.slug}/" use:reveal={i}>
<Icon name="users" size="1.5rem" />
<h2 class="nom">{m.nom}</h2>
<p class="role">{m.role}</p>
<p class="prof">{m.profession}</p>
<span class="more">Voir la fiche <Icon name="arrow-right" size="1em" /></span>
</a>
</li>
{/each}
</ul>
</div>
</main>
<style>
.grille {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: var(--space-3);
}
.nom {
font-size: 1.2rem;
margin: 0.6rem 0 0.2rem;
text-transform: none;
}
.role {
color: var(--accent);
font-weight: 600;
font-size: 0.9rem;
margin: 0 0 0.2rem;
}
.prof {
color: var(--muted);
font-size: 0.9rem;
margin: 0;
}
.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.75rem;
letter-spacing: 0.05em;
color: var(--accent);
}
</style>
+110
View File
@@ -0,0 +1,110 @@
<script lang="ts">
import Seo from '$lib/components/Seo.svelte';
import Breadcrumb from '$lib/components/Breadcrumb.svelte';
import Icon from '$lib/components/Icon.svelte';
import { personNode } from '$lib/seo';
let { data } = $props();
const m = $derived(data.membre);
const crumbs = $derived([
{ name: 'Accueil', path: '/' },
{ name: 'Militants', path: '/militants/' },
{ name: m.nom, path: `/militants/${m.slug}/` }
]);
const graph = $derived([
personNode(`/militants/${m.slug}/`, m.nom, `${m.role}${m.profession}. ${m.biographie}`, {
jobTitle: m.profession,
...(m.dateDeces ? { deathDate: m.dateDeces } : {})
})
]);
</script>
<Seo
title={m.nom}
description={`${m.nom}${m.role}. ${m.biographie.slice(0, 155)}`}
path={`/militants/${m.slug}/`}
type="profile"
graph={graph}
breadcrumb={crumbs}
/>
<main id="contenu" class="section">
<div class="container">
<Breadcrumb items={crumbs} />
<article class="fiche">
<header class="fiche__head">
<Icon name="users" size="2.4rem" />
<div>
<h1>{m.nom}</h1>
<p class="fiche__role">{m.role}</p>
<p class="fiche__prof">{m.profession}</p>
</div>
</header>
<div class="lecture prose">
<h2 class="sr-only">Biographie</h2>
<p>{m.biographie}</p>
{#if m.citation}
<blockquote>{m.citation}</blockquote>
{/if}
{#if m.citations}
{#each m.citations as c (c)}
<blockquote>{c}</blockquote>
{/each}
{/if}
{#if m.dateDeces || m.lieuDeces || m.circonstances}
<h2>Circonstances</h2>
{#if m.dateDeces}<p><strong>Date :</strong> {m.dateDeces}</p>{/if}
{#if m.lieuDeces}<p><strong>Lieu :</strong> {m.lieuDeces}</p>{/if}
{#if m.circonstances}<p>{m.circonstances}</p>{/if}
{/if}
{#if m.oeuvre}
<h2>Œuvre</h2>
<p class="tag"><Icon name="book" size="1em" /> {m.oeuvre}</p>
{/if}
</div>
<footer class="fiche__src">Sources : {m.source}.</footer>
</article>
<p><a class="btn btn--ghost" href="/militants/">← Tous les militants</a></p>
</div>
</main>
<style>
.fiche__head {
display: flex;
gap: var(--space-2);
align-items: flex-start;
padding-bottom: var(--space-3);
border-bottom: 1px solid var(--line);
margin-bottom: var(--space-3);
}
.fiche__head h1 {
margin: 0;
text-transform: none;
}
.fiche__role {
color: var(--accent);
font-weight: 600;
margin: 0.3rem 0 0.2rem;
}
.fiche__prof {
color: var(--muted);
margin: 0;
}
.fiche__src {
margin-top: var(--space-3);
color: var(--muted-fort);
font-size: 0.85rem;
}
.prose .tag {
display: inline-flex;
}
</style>
+11
View File
@@ -0,0 +1,11 @@
import { error } from '@sveltejs/kit';
import { membres, getMembre } from '$lib/data/gong';
import type { EntryGenerator } from './$types';
export const entries: EntryGenerator = () => membres.map((m) => ({ slug: m.slug }));
export function load({ params }) {
const membre = getMembre(params.slug);
if (!membre) error(404, 'Militant introuvable');
return { membre };
}
+13
View File
@@ -0,0 +1,13 @@
<script lang="ts">
import Icon from '$lib/components/Icon.svelte';
</script>
<main id="contenu" class="container section" style="text-align:center; min-height:70dvh; display:grid; place-content:center; gap:1rem;">
<Icon name="ka" size="4rem" />
<h1>Pa ni koneksyon</h1>
<p class="prose" style="margin-inline:auto;">
<span lang="gcf">Ou dékoné.</span> Vous êtes hors-ligne. Les pages déjà consultées restent
disponibles ; reconnectez-vous pour lire le reste du site du GONG.
</p>
<p><a class="btn" href="/">Rèvin an akèy — Retour à l'accueil</a></p>
</main>
+5
View File
@@ -0,0 +1,5 @@
import { getDocument } from '$lib/server/documents';
export function load() {
return { html: getDocument('orientation-strategie') };
}
+86
View File
@@ -0,0 +1,86 @@
<script lang="ts">
import Seo from '$lib/components/Seo.svelte';
import Breadcrumb from '$lib/components/Breadcrumb.svelte';
import Icon from '$lib/components/Icon.svelte';
import { webPage } from '$lib/seo';
let { data } = $props();
const crumbs = [
{ name: 'Accueil', path: '/' },
{ name: 'Orientation & stratégie', path: '/orientation/' }
];
</script>
<Seo
title="Orientation et stratégie de la lutte révolutionnaire"
description="Le rapport d'orientation et de stratégie du GONG (1963) : lutte de masse et lutte de classe, suffrage universel, violence libératrice, voie révolutionnaire de la Guadeloupe. Texte intégral."
path="/orientation/"
type="article"
graph={[webPage('/orientation/', 'Orientation et stratégie du GONG', 'Rapport stratégique du GONG (1963).')]}
breadcrumb={crumbs}
/>
<main id="contenu" class="section">
<div class="container">
<Breadcrumb items={crumbs} />
<header class="doc-head">
<p class="doc-kicker"><span class="flag-chip" aria-hidden="true"></span> Document stratégique · 1963</p>
<h1>Orientation & stratégie de la lutte révolutionnaire du peuple guadeloupéen</h1>
<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">
Voir l'original (PDF) <Icon name="download" size="1em" />
</a>
</header>
<article class="prose doc">
<!-- Contenu first-party (transcription du document de 1963, rendu markdown côté serveur). -->
{@html data.html}
</article>
<nav class="suite" aria-label="Poursuivre la lecture">
<a class="btn btn--ghost" href="/charte/">La charte de 1963 →</a>
<a class="btn btn--ghost" href="/histoire/">L'histoire du GONG →</a>
</nav>
</div>
</main>
<style>
.doc-head {
margin-bottom: var(--space-4);
}
.doc-head h1 {
font-size: clamp(1.6rem, 1.2rem + 2vw, 2.6rem);
}
.doc-kicker {
display: inline-flex;
flex-direction: column;
gap: 0.5rem;
font-family: var(--font-display);
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.85rem;
color: var(--muted);
}
.doc-head .btn {
margin-top: var(--space-2);
}
.doc :global(h2) {
margin-top: var(--space-4);
padding-top: var(--space-2);
border-top: 1px solid var(--line);
font-size: 1.35rem;
}
.doc :global(h3) {
color: var(--accent);
font-size: 1.1rem;
}
.doc :global(blockquote) {
font-size: 1.05rem;
}
.suite {
display: flex;
gap: 0.6rem;
flex-wrap: wrap;
margin-top: var(--space-4);
}
</style>
+177
View File
@@ -0,0 +1,177 @@
<script lang="ts">
import Seo from '$lib/components/Seo.svelte';
import Breadcrumb from '$lib/components/Breadcrumb.svelte';
import Resume from '$lib/components/Resume.svelte';
import SectionTitle from '$lib/components/SectionTitle.svelte';
import { webPage } from '$lib/seo';
import { SITE, proces1968 as p, accusesProces1968 as acc } from '$lib/data/gong';
const crumbs = [
{ name: 'Accueil', path: '/' },
{ name: 'Procès de 1968', path: '/proces-1968/' }
];
const eventNode = {
'@type': 'Event',
'@id': `${SITE.url}/proces-1968/#event`,
name: 'Procès des 18 Guadeloupéens',
description: p.accusation,
startDate: '1968-02-19',
endDate: '1968-03-01',
eventStatus: 'https://schema.org/EventScheduled',
location: { '@type': 'Place', name: "Cour de sûreté de l'État, Paris", address: { '@type': 'PostalAddress', addressLocality: 'Paris', addressCountry: 'FR' } },
about: { '@id': `${SITE.url}/#organization` }
};
</script>
<Seo
title="Le procès des 18 Guadeloupéens (1968)"
description="Du 19 février au 1er mars 1968, 18 membres du GONG sont jugés à Paris pour « atteinte à l'intégrité du territoire ». Sartre et Césaire témoignent. Verdict : 13 acquittés, 6 condamnés avec sursis."
path="/proces-1968/"
type="article"
graph={[webPage('/proces-1968/', 'Procès des 18 Guadeloupéens (1968)', 'Le procès du GONG devant la Cour de sûreté de l’État.'), eventNode]}
breadcrumb={crumbs}
/>
<main id="contenu" class="section">
<div class="container">
<Breadcrumb items={crumbs} />
<p class="surtitre"><span class="flag-chip" aria-hidden="true"></span> 19 février — 1er mars 1968 · Paris</p>
<h1>Le procès des 18</h1>
<div class="lecture">
<Resume
lead="Du 19 février au 1er mars 1968, dix-huit Guadeloupéens, dont les dirigeants du GONG, sont jugés à Paris devant la Cour de sûreté de l'État pour « atteinte à l'intégrité du territoire français ». Jean-Paul Sartre et Aimé Césaire témoignent en leur faveur. Le verdict — 13 acquittements, 6 peines avec sursis — est vécu comme une victoire politique."
points={[
'Juridiction dexception : la Cour de sûreté de l’État (créée en 1963 pour lOAS).',
'Accusation : atteinte à lintégrité du territoire, complot contre l’État.',
'Témoins de la défense : Jean-Paul Sartre, Aimé Césaire, la LDH.',
'Verdict : 13 acquittés, 6 condamnés avec sursis (dont Pierre Sainton).'
]}
/>
</div>
<section class="section--tight">
<SectionTitle title="Un tribunal d'exception" as="h2" id="juridiction" />
<div class="lecture prose">
<p><strong>{p.juridiction}.</strong> {p.noteJuridiction}</p>
<p><strong>L'accusation :</strong> {p.accusation}.</p>
</div>
</section>
<section class="section--tight">
<SectionTitle title="Les accusés" as="h2" id="accuses" />
<p class="lecture muted">{acc.description}. Noms identifiés dans les sources :</p>
<ul class="chips lecture">
{#each acc.nomsIdentifies as nom (nom)}
<li class="tag">{nom}</li>
{/each}
</ul>
<p class="lecture note">{acc.note}</p>
</section>
<section class="section--tight">
<SectionTitle title="Sartre et Césaire à la barre" as="h2" id="temoins" />
<div class="lecture prose">
<p>La défense fait citer des figures majeures de la pensée anticolonialiste :</p>
<ul>
{#each p.temoinsDefense as t (t)}
<li>{t}</li>
{/each}
</ul>
<p><strong>Avocats :</strong> {p.avocats.join(', ')}.</p>
</div>
</section>
<section class="section--tight">
<SectionTitle title="Le verdict" as="h2" id="verdict" />
<div class="verdict">
<div class="verdict__stat is-ok"><span class="verdict__num">{p.verdict.acquittes}</span><span>acquittés</span></div>
<div class="verdict__stat"><span class="verdict__num">{p.verdict.condamnes}</span><span>condamnés avec sursis</span></div>
</div>
<p class="lecture prose">{p.verdict.interpretation}</p>
</section>
<section class="section--tight">
<SectionTitle title="Ce que le procès a révélé" as="h2" id="elements-cles" />
<ul class="lecture prose">
{#each p.elementsCles as e (e)}
<li>{e}</li>
{/each}
</ul>
</section>
<p class="src lecture">Sources : {p.source}.</p>
<nav class="suite" aria-label="Poursuivre la lecture">
<a class="btn btn--ghost" href="/heritage/">L'héritage du GONG →</a>
<a class="btn btn--ghost" href="/militants/pierre-sainton/">Pierre Sainton →</a>
</nav>
</div>
</main>
<style>
.surtitre {
display: inline-flex;
flex-direction: column;
gap: 0.5rem;
font-family: var(--font-display);
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.85rem;
color: var(--muted);
}
.chips {
list-style: none;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0 0 var(--space-2);
}
.muted {
color: var(--muted);
}
.note {
font-style: italic;
color: var(--muted-fort);
font-size: 0.9rem;
}
.verdict {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--space-2);
margin-bottom: var(--space-3);
}
.verdict__stat {
background: var(--card-bg);
border: 1px solid var(--line);
border-radius: var(--radius-md);
padding: var(--space-3);
display: flex;
flex-direction: column;
gap: 0.3rem;
color: var(--muted);
}
.verdict__stat.is-ok {
border-left: 4px solid var(--vert-gong);
}
.verdict__num {
font-family: var(--font-display);
font-weight: 900;
font-size: 2.2rem;
color: var(--creme);
line-height: 1;
}
.src {
color: var(--muted-fort);
font-size: 0.85rem;
margin-top: var(--space-3);
}
.suite {
display: flex;
gap: 0.6rem;
flex-wrap: wrap;
margin-top: var(--space-4);
}
</style>
+104
View File
@@ -0,0 +1,104 @@
<script lang="ts">
import Seo from '$lib/components/Seo.svelte';
import Breadcrumb from '$lib/components/Breadcrumb.svelte';
import Resume from '$lib/components/Resume.svelte';
import Icon from '$lib/components/Icon.svelte';
import { reveal } from '$lib/motion/reveal';
import { webPage } from '$lib/seo';
import { publications as pubs } from '$lib/data/gong';
const crumbs = [
{ name: 'Accueil', path: '/' },
{ name: 'Publications', path: '/publications/' }
];
</script>
<Seo
title="Les publications du GONG"
description="Gong-Information (« Journal du Patriote Guadeloupéen »), Révolution Caraïbe, tracts clandestins et affiches électorales de 1967 : les organes de propagande et de théorie du GONG."
path="/publications/"
type="article"
graph={[webPage('/publications/', 'Publications du GONG', 'Journaux, tracts et affiches du GONG.')]}
breadcrumb={crumbs}
/>
<main id="contenu" class="section">
<div class="container">
<Breadcrumb items={crumbs} />
<h1>Publications</h1>
<div class="lecture">
<Resume
lead="Le GONG diffusait ses idées par un journal clandestin, Gong-Information, imprimé en Belgique avec l'appui du Parti communiste belge prochinois, ainsi que par des tracts et des affiches électorales — dont les célèbres « Briser les urnes colonialistes » de 1967."
points={[
'Gong-Information : organe politique et théorique (1964-1967).',
'Imprimé en Belgique, diffusé clandestinement en France et en Guadeloupe.',
'Affiches de 1967 saisies par la police sur le port de Pointe-à-Pitre.'
]}
/>
</div>
<ul class="pubs">
{#each pubs as p, i (p.titre)}
<li class="card" use:reveal={i}>
<Icon name="book" size="1.6rem" />
<h2>{p.titre}</h2>
{#if p.sousTitre}<p class="sous">« {p.sousTitre} »</p>{/if}
<p class="meta"><span class="tag">{p.type}</span> <span class="tag tag--vert">{p.periode}</span></p>
<p class="contenu">{p.contenu}</p>
{#if p.lieuImpression}<p class="detail"><strong>Impression :</strong> {p.lieuImpression}</p>{/if}
{#if p.lieuDiffusion}<p class="detail"><strong>Diffusion :</strong> {p.lieuDiffusion}</p>{/if}
{#if p.extraitProgramme}<blockquote>{p.extraitProgramme}</blockquote>{/if}
{#if p.note}<p class="note">{p.note}</p>{/if}
<p class="src">Source : {p.source}.</p>
</li>
{/each}
</ul>
</div>
</main>
<style>
.pubs {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--space-3);
max-width: var(--container-lecture);
}
.pubs h2 {
font-size: 1.3rem;
margin: 0.5rem 0 0.2rem;
text-transform: none;
}
.sous {
color: var(--accent);
font-style: italic;
margin: 0 0 0.5rem;
}
.meta {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin: 0 0 0.6rem;
}
.contenu {
color: var(--creme);
margin: 0 0 0.6rem;
}
.detail {
color: var(--muted);
font-size: 0.92rem;
margin: 0 0 0.3rem;
}
.note {
color: var(--muted);
font-style: italic;
font-size: 0.92rem;
}
.src {
color: var(--muted-fort);
font-size: 0.82rem;
margin: 0.5rem 0 0;
}
</style>
+48
View File
@@ -0,0 +1,48 @@
import { SITE, membres } from '$lib/data/gong';
import { getActualites } from '$lib/server/actualites';
export const prerender = true;
const statiques: { path: string; priority: string; changefreq: string }[] = [
{ path: '/', priority: '1.0', changefreq: 'monthly' },
{ path: '/histoire/', priority: '0.9', changefreq: 'yearly' },
{ path: '/me-67/', priority: '0.9', changefreq: 'yearly' },
{ path: '/proces-1968/', priority: '0.8', changefreq: 'yearly' },
{ path: '/militants/', priority: '0.8', changefreq: 'yearly' },
{ path: '/ideologie/', priority: '0.7', changefreq: 'yearly' },
{ path: '/heritage/', priority: '0.7', changefreq: 'yearly' },
{ path: '/publications/', priority: '0.6', changefreq: 'yearly' },
{ path: '/charte/', priority: '0.7', changefreq: 'yearly' },
{ path: '/orientation/', priority: '0.7', changefreq: 'yearly' },
{ path: '/sources/', priority: '0.6', changefreq: 'yearly' },
{ path: '/faq/', priority: '0.8', changefreq: 'monthly' },
{ path: '/actualites/', priority: '0.6', changefreq: 'weekly' },
{ path: '/contact/', priority: '0.4', changefreq: 'yearly' },
{ path: '/mentions-legales/', priority: '0.2', changefreq: 'yearly' }
];
export function GET() {
const today = new Date().toISOString().slice(0, 10);
const urls: string[] = [];
for (const s of statiques) {
urls.push(
`<url><loc>${SITE.url}${s.path}</loc><lastmod>${today}</lastmod><changefreq>${s.changefreq}</changefreq><priority>${s.priority}</priority></url>`
);
}
for (const m of membres) {
urls.push(`<url><loc>${SITE.url}/militants/${m.slug}/</loc><lastmod>${today}</lastmod><changefreq>yearly</changefreq><priority>0.6</priority></url>`);
}
for (const a of getActualites()) {
urls.push(`<url><loc>${SITE.url}/actualites/${a.slug}/</loc><lastmod>${a.iso}</lastmod><changefreq>monthly</changefreq><priority>0.5</priority></url>`);
}
const xml = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
${urls.join('\n')}
</urlset>`;
return new Response(xml, {
headers: { 'Content-Type': 'application/xml', 'Cache-Control': 'max-age=3600' }
});
}
+103
View File
@@ -0,0 +1,103 @@
<script lang="ts">
import Seo from '$lib/components/Seo.svelte';
import Breadcrumb from '$lib/components/Breadcrumb.svelte';
import Icon from '$lib/components/Icon.svelte';
import { webPage } from '$lib/seo';
import { sources, metadata } from '$lib/data/gong';
const crumbs = [
{ name: 'Accueil', path: '/' },
{ name: 'Sources', path: '/sources/' }
];
</script>
<Seo
title="Sources & bibliographie"
description="Les 15 sources académiques, journalistiques et archivistiques du dossier documentaire sur le GONG : Sylvain Mary, Contretemps, LDH, Lutte Ouvrière, Archives nationales, Wikipédia, etc."
path="/sources/"
graph={[webPage('/sources/', 'Sources et bibliographie', 'Sources du dossier documentaire sur le GONG.')]}
breadcrumb={crumbs}
/>
<main id="contenu" class="section">
<div class="container">
<Breadcrumb items={crumbs} />
<h1>Sources & bibliographie</h1>
<p class="lecture intro">{metadata.avertissement}</p>
<ol class="biblio">
{#each sources as s, i (s.titre)}
<li class="ref">
<Icon name="book" size="1.2rem" />
<div>
<p class="ref__titre">
{#if s.url}
<a href={s.url} rel="external noopener noreferrer" target="_blank">{s.titre}</a>
<Icon name="external" size="0.85em" />
{:else}
{s.titre}
{/if}
</p>
<p class="ref__meta">
<strong>{s.auteur}</strong> · {s.editeur}{s.annee !== 'Non daté' ? `, ${s.annee}` : ''} · <span class="ref__type">{s.type}</span>
</p>
</div>
</li>
{/each}
</ol>
<p class="lecture note">
Ce site est un travail de documentation à but non lucratif et pédagogique. Les extraits de
textes historiques sont reproduits à des fins de mémoire et de recherche, avec mention de leur
provenance.
</p>
</div>
</main>
<style>
.intro {
color: var(--muted);
margin-bottom: var(--space-4);
}
.biblio {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--space-2);
counter-reset: ref;
}
.ref {
display: flex;
gap: var(--space-2);
background: var(--card-bg);
border: 1px solid var(--line);
border-left: 4px solid var(--accent);
border-radius: var(--radius-md);
padding: var(--space-2) var(--space-3);
}
.ref__titre {
margin: 0 0 0.2rem;
font-weight: 600;
color: var(--creme);
}
.ref__titre a {
color: var(--creme);
}
.ref__titre a:hover {
color: var(--accent);
}
.ref__meta {
margin: 0;
color: var(--muted);
font-size: 0.9rem;
}
.ref__type {
font-style: italic;
}
.note {
margin-top: var(--space-4);
color: var(--muted-fort);
font-size: 0.88rem;
}
</style>