added content

src/pages/fragments/[slug].astro

@@ -0,0 +1,25 @@
+---
+import { l, t, astroI18n } from "astro-i18n";
+astroI18n.init(Astro);
+
+import { getCollection } from "astro:content";
+import EditorialContent from "../../components/EditorialContent.astro";
+
+import BaseLayout from "../../layouts/BaseLayout.astro";
+
+export async function getStaticPaths() {
+	const snippets = await getCollection("fragments", ({ data }) => {
+		return data.lang === astroI18n.langCode;
+	});
+	return snippets.map((snippet) => ({
+		params: { slug: snippet.data.slug },
+		props: { snippet },
+	}));
+}
+
+const { snippet } = Astro.props;
+---
+
+<BaseLayout pageTitle={snippet.data.title}>
+	<EditorialContent content={snippet} />
+</BaseLayout>

src/pages/fragments/i18n/en.json

@@ -0,0 +1,4 @@
+{
+	"pageName": "Snippets",
+	"subtitle": "School with Nicool."
+}

src/pages/fragments/i18n/fr.json

@@ -0,0 +1,4 @@
+{
+	"pageName": "Fragments",
+	"subtitle": "Les tutos de Nico mdr."
+}

src/pages/fragments/index.astro

@@ -0,0 +1,44 @@
+---
+import { l, t, astroI18n } from "astro-i18n";
+astroI18n.init(Astro);
+
+// New astro content collections
+import { getCollection } from "astro:content";
+
+import BaseLayout from "../../layouts/BaseLayout.astro";
+import ListCards from "../../components/ListCards.astro";
+
+const localizedPost = await getCollection("fragments", ({ data }) => {
+	return data.lang === astroI18n.langCode;
+});
+// sort snippets by descending publication date
+const sortedPosts = localizedPost.sort(
+	(a, b) => b.data.createdAt - a.data.createdAt
+);
+
+const pageTitle = t("index.fragments.pageName");
+---
+
+<BaseLayout pageTitle={pageTitle}>
+	<section class="region flow">
+		<h1>{t("index.fragments.pageName")}</h1>
+		<h2>{t("index.fragments.subtitle")}</h2>
+		<ListCards list={sortedPosts} routeName={t("fragments.titre")} />
+	</section>
+</BaseLayout>
+
+<style>
+	.flow h2 + :global(*) {
+		margin-block-start: var(--space-m-l);
+	}
+	h1 {
+		text-transform: capitalize;
+	}
+	h1,
+	h2 {
+		padding-inline-start: var(--space-xs-s);
+	}
+	h2 {
+		color: var(--color-brique);
+	}
+</style>