added content

src/pages/articles/[slug].astro

@@ -1,12 +1,9 @@
 ---
 import { l, t, astroI18n } from "astro-i18n";
-import { log } from "astro/dist/core/logger/core";
-import { literal } from "astro/zod";
 astroI18n.init(Astro);
 
 import { getCollection } from "astro:content";
 import EditorialContent from "../../components/EditorialContent.astro";
-import TOC from "../../components/TOC.astro";
 
 import BaseLayout from "../../layouts/BaseLayout.astro";
 
@@ -15,7 +12,6 @@ export async function getStaticPaths() {
 		return data.lang === astroI18n.langCode;
 	});
 	return articles.map((article) => ({
-		// temp 'split' workaround for i18n
 		params: { slug: article.data.slug },
 		props: { article },
 	}));

src/pages/articles/index.astro

@@ -6,27 +6,39 @@ astroI18n.init(Astro);
 import { getCollection } from "astro:content";
 
 import BaseLayout from "../../layouts/BaseLayout.astro";
-import ContentPost from "../../components/ContentPost.astro";
+import ListCards from "../../components/ListCards.astro";
 
 const localizedPost = await getCollection("articles", ({ data }) => {
 	return data.lang === astroI18n.langCode;
 });
+// sort articles by descending publication date
+const sortedArticles = localizedPost.sort(
+	(a, b) => b.data.createdAt - a.data.createdAt
+);
 
 const pageTitle = t("index.articles.pageName");
 ---
 
 <BaseLayout pageTitle={pageTitle}>
-	<h2>{t("index.articles.pageName")}</h2>
-	<p>{t("index.articles.subtitle")}</p>
-	<ul>
-		{
-			localizedPost.map((post) => (
-				<li>
-					<a href={l("/articles/[slug]", { slug: post.data.slug })}>
-						{post.data.title}
-					</a>
-				</li>
-			))
-		}
-	</ul>
+	<section class="region flow">
+		<h1>{t("index.articles.pageName")}</h1>
+		<h2>{t("index.articles.subtitle")}</h2>
+		<ListCards list={sortedArticles} routeName={t("article.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>

src/pages/en/snippets/[slug].astro

@@ -0,0 +1,9 @@
+---
+import Page from "../../fragments/[slug].astro"
+
+export { getStaticPaths } from "../../fragments/[slug].astro"
+
+const { props } = Astro
+---
+
+<Page {...props} />

src/pages/en/snippets/index.astro

@@ -0,0 +1,7 @@
+---
+import Page from "../../fragments/index.astro"
+
+const { props } = Astro
+---
+
+<Page {...props} />

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>

src/pages/i18n/en.json

@@ -7,5 +7,9 @@
 	"writing": "Oh and I write <a class='u-nice-links' href='/en/articles/'>articles!</a> Articles about design and the web in general.",
 	"latestProjects": "Latest projects",
 	"latestArticles": "Latest articles",
-	"scihub": "schi-hub-unlock"
+	"allProjects": "All projects",
+	"allArticles": "All articles",
+	"latestSnippets": "Latest snippets",
+	"allSnippets": "All snippets",
+	"toc": "table of content"
 }

src/pages/i18n/fr.json

@@ -7,5 +7,9 @@
 	"writing": "Ah et j’écris <a href='/articles/'>des articles</a> aussi&nbsp;! Des articles sur le graphisme et l’informatique.",
 	"latestProjects": "Derniers projets",
 	"latestArticles": "Derniers articles",
-	"scihub": "schi-hub-deblocage"
+	"allProjects": "Tous les projets",
+	"allArticles": "Tous les articles",
+	"latestSnippets": "Derniers fragments",
+	"allSnippets": "Tous les fragments",
+	"toc": "table des matières"
 }

src/pages/index.astro

@@ -17,23 +17,24 @@ const localizedSections = allSections.filter((section) => {
 	return section.frontmatter.lang === astroI18n.langCode;
 });
 
-// get all articles
-const allArticles = await Astro.glob("../data/articles/**/*.{md,mdx}");
-// only keep the right locale version
-const localizedArticles = allArticles.filter((article) => {
-	return article.frontmatter.lang === astroI18n.langCode;
+// New astro content collections
+import { getCollection } from "astro:content";
+// Only return posts with correct lang in the frontmatter
+const localizedArticles = await getCollection("articles", ({ data }) => {
+	return data.lang === astroI18n.langCode;
 });
 // sort articles by descending publication date
 const sortedArticles = localizedArticles.sort(
-	(a, b) => b.frontmatter.pubDate - a.frontmatter.pubDate
+	(a, b) => b.data.createdAt - a.data.createdAt
 );
-
-// New astro content collections
-import { getCollection } from "astro:content";
-// Only return posts with `draft: true` in the frontmatter
-const newLocalizedArticles = await getCollection("articles", ({ data }) => {
+// Only return snippets with correct lang in the frontmatter
+const localizedSnippets = await getCollection("fragments", ({ data }) => {
 	return data.lang === astroI18n.langCode;
 });
+// sort articles by descending publication date
+const sortedSnippets = localizedSnippets.sort(
+	(a, b) => b.data.createdAt - a.data.createdAt
+);
 ---
 
 <BaseLayout pageTitle={pageTitle}>
@@ -74,10 +75,16 @@ const newLocalizedArticles = await getCollection("articles", ({ data }) => {
 		))
 	}
 
-	<section class="latest">
-		<div class="latest__work">
+	<section class="region latest">
+		<div class="flow latest__articles">
 			<h2>{t("index.latestArticles")}</h2>
-			<ListCards list={newLocalizedArticles} routeName={t("article.titre")} />
+			<ListCards list={sortedArticles} routeName={t("article.titre")} />
+			<p><a href={l("/articles")}>{t("index.allArticles")}</a></p>
+		</div>
+		<div class="flow latest__snippets">
+			<h2>{t("index.latestSnippets")}</h2>
+			<ListCards list={sortedSnippets} routeName={t("fragments.titre")} />
+			<p><a href={l("/fragments")}>{t("index.allSnippets")}</a></p>
 		</div>
 	</section>
 </BaseLayout>
@@ -92,9 +99,9 @@ const newLocalizedArticles = await getCollection("articles", ({ data }) => {
 		position: absolute;
 		top: -30%;
 		left: -10%;
-		max-width: 100vw;
-		width: 320px;
-		height: 320px;
+		max-inline-size: 100vw;
+		inline-size: 320px;
+		block-size: 320px;
 		z-index: -1;
 		border-radius: 50%;
 		background-color: var(--color-light-blue);
@@ -121,7 +128,7 @@ const newLocalizedArticles = await getCollection("articles", ({ data }) => {
 		color: var(--color-dark-blue);
 	}
 	.quick-access {
-		margin-top: var(--space-xl-2xl);
+		margin-block-start: var(--space-xl-2xl);
 		container-type: inline-size;
 		container-name: intro;
 	}
@@ -171,7 +178,7 @@ const newLocalizedArticles = await getCollection("articles", ({ data }) => {
 		.section__content {
 			order: 2;
 			flex-basis: 0;
-			min-width: 40ch;
+			min-inline-size: 40ch;
 		}
 	}
 </style>

src/pages/tags/[tag].astro

@@ -1,6 +1,5 @@
 ---
 import BaseLayout from "../../layouts/BaseLayout.astro";
-import ContentPost from "../../components/ContentPost.astro";
 
 export async function getStaticPaths({}) {
 	const allPosts = await Astro.glob("../../data/**/*.mdx");
@@ -26,12 +25,6 @@ const { posts } = Astro.props;
 <BaseLayout pageTitle={tag}>
 	<p>Posts tagged with {tag}</p>
 	<ul>
-		{
-			posts.map((post) => (
-				<li>
-					<ContentPost url={post.url} title={post.frontmatter.title} />
-				</li>
-			))
-		}
+		{posts.map((post) => <li>{post.frontmatter.title}</li>)}
 	</ul>
 </BaseLayout>