gong.gp/src/routes/histoire/+page.svelte

<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>