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

	let { data } = $props();

	const crumbs = [
		{ name: 'Accueil', path: '/' },
		{ name: 'Archives', path: '/archives/' }
	];
</script>

<Seo
	title="Archives — Gong-Information"
	description="Les numéros numérisés du journal Gong-Information (« Journal du patriote guadeloupéen »), organe du GONG : n° 16 (1966), n° spécial (1967) et n° 19 (1967). Transcriptions et scans PDF."
	path="/archives/"
	graph={[webPage('/archives/', 'Archives — Gong-Information', 'Numéros numérisés du journal du GONG.')]}
	breadcrumb={crumbs}
/>

<main id="contenu" class="section">
	<div class="container">
		<Breadcrumb items={crumbs} />
		<h1>Archives — Gong-Information</h1>

		<div class="lecture">
			<Resume
				lead="« Gong-Information — Journal du patriote guadeloupéen » était l'organe politique et théorique du GONG. Imprimé clandestinement en Belgique et diffusé de 1964 à 1967, il portait les analyses et mots d'ordre du mouvement. Voici les numéros numérisés, transcription et scan à l'appui."
				points={[
					'Sources primaires : les numéros mêmes du journal.',
					'Transcription intégrale + scan PDF téléchargeable de chaque numéro.',
					'« Un peuple qui décide de se gouverner est un peuple qui entreprend de se critiquer et de s’organiser. »'
				]}
			/>
		</div>

		<ul class="grille">
			{#each data.archives as a, i (a.slug)}
				<li>
					<a class="card card--link" href="/archives/{a.slug}/" use:reveal={i}>
						<img class="cover" src={a.couverture} alt="Couverture de {a.titre}" width="800" height="612" loading="lazy" decoding="async" />
						<span class="num">{a.numero} · {a.date}</span>
						<h2>{a.titre}</h2>
						<p>{a.chapeau}</p>
						<span class="more">Lire le numéro <Icon name="arrow-right" size="1em" /></span>
					</a>
				</li>
			{/each}
		</ul>

		<section class="section--tight lecture">
			<h2 class="ext-titre"><span class="flag-chip" aria-hidden="true"></span> Consulter les fonds institutionnels</h2>
			<p class="muted">
				D'autres exemplaires et documents du GONG sont conservés dans des archives publiques et
				universitaires (consultation soumise à leurs conditions) :
			</p>
			<ul class="ext">
				<li>
					<a href="https://agorha.inha.fr/ark:/54721/561eba6d-23cf-48c3-8b78-4890c0e80b70" rel="external noopener noreferrer" target="_blank">
						INHA — AGORHA <Icon name="external" size="0.8em" /></a> : notice de la revue Gong Information (1964-1967).
				</li>
				<li>
					<a href="https://sismo.inha.fr/s/fr/journal/259761" rel="external noopener noreferrer" target="_blank">
						INHA — SISMO <Icon name="external" size="0.8em" /></a> : base des périodiques militants.
				</li>
				<li>
					<a href="https://pandor.u-bourgogne.fr/archives-en-ligne/ark:/62246/r42561znt7jqck/f1?context=ead::FRMSH021_00012_PK-3-2-4-27" rel="external noopener noreferrer" target="_blank">
						Pandor — MSH Dijon <Icon name="external" size="0.8em" /></a> : Gong Information n° 19 numérisé.
				</li>
				<li>
					<a href="https://journals.openedition.org/slaveries/3788" rel="external noopener noreferrer" target="_blank">
						Sylvain Mary (2021) <Icon name="external" size="0.8em" /></a> : analyse iconographique de la propagande du GONG (affiche « Briser les urnes colonialistes », Archives nationales 5W/728).
				</li>
			</ul>
		</section>

		<p class="lecture note">
			Documents issus du fonds du GONG, numérisés et transcrits. Voir aussi la présentation des
			<a href="/publications/">publications du mouvement</a> et les
			<a href="/sources/">sources</a>.
		</p>
	</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: 800 / 612;
		object-fit: cover;
		object-position: top;
		background: var(--noir-profond);
	}
	.num {
		font-family: var(--font-display);
		font-weight: 700;
		text-transform: uppercase;
		font-size: 0.8rem;
		letter-spacing: 0.04em;
		color: var(--accent);
	}
	.grille h2 {
		font-size: 1.15rem;
		text-transform: none;
		margin: 0.3rem 0;
	}
	.grille p {
		color: var(--muted);
		margin: 0;
		font-size: 0.94rem;
	}
	.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);
	}
	.ext-titre {
		font-size: 1.3rem;
		margin-top: var(--space-5);
	}
	.ext-titre .flag-chip {
		display: inline-block;
		width: 40px;
		margin-right: 0.5rem;
		vertical-align: middle;
	}
	.muted {
		color: var(--muted);
	}
	.ext {
		display: grid;
		gap: 0.5rem;
		padding-left: 1.1rem;
		color: var(--muted);
		font-size: 0.94rem;
	}
	.note {
		margin-top: var(--space-4);
		color: var(--muted-fort);
		font-size: 0.88rem;
	}
</style>
