cleanup and refactor i18n + code

.astro/content-modules.mjs

@@ -4,11 +4,11 @@ export default new Map([
 ["src/content/articles/en/sci-hub-blocage.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Farticles%2Fen%2Fsci-hub-blocage.mdx&astroContentModuleFlag=true")],
 ["src/content/articles/en/the-day-I-jamd.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Farticles%2Fen%2Fthe-day-I-jamd.mdx&astroContentModuleFlag=true")],
 ["src/content/articles/en/video-compression.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Farticles%2Fen%2Fvideo-compression.mdx&astroContentModuleFlag=true")],
-["src/content/fragments/en/image-full.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Ffragments%2Fen%2Fimage-full.mdx&astroContentModuleFlag=true")],
-["src/content/fragments/en/super-cookies.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Ffragments%2Fen%2Fsuper-cookies.mdx&astroContentModuleFlag=true")],
-["src/content/articles/fr/sci-hub-blocage.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Farticles%2Ffr%2Fsci-hub-blocage.mdx&astroContentModuleFlag=true")],
 ["src/content/fragments/fr/buttons.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Ffragments%2Ffr%2Fbuttons.mdx&astroContentModuleFlag=true")],
 ["src/content/fragments/fr/image-full.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Ffragments%2Ffr%2Fimage-full.mdx&astroContentModuleFlag=true")],
-["src/content/articles/fr/the-day-I-jamd.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Farticles%2Ffr%2Fthe-day-I-jamd.mdx&astroContentModuleFlag=true")],
+["src/content/fragments/fr/super-cookies.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Ffragments%2Ffr%2Fsuper-cookies.mdx&astroContentModuleFlag=true")],
-["src/content/fragments/fr/super-cookies.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Ffragments%2Ffr%2Fsuper-cookies.mdx&astroContentModuleFlag=true")]]);
+["src/content/articles/fr/sci-hub-blocage.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Farticles%2Ffr%2Fsci-hub-blocage.mdx&astroContentModuleFlag=true")],
+["src/content/fragments/en/image-full.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Ffragments%2Fen%2Fimage-full.mdx&astroContentModuleFlag=true")],
+["src/content/fragments/en/super-cookies.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Ffragments%2Fen%2Fsuper-cookies.mdx&astroContentModuleFlag=true")],
+["src/content/articles/fr/the-day-I-jamd.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Farticles%2Ffr%2Fthe-day-I-jamd.mdx&astroContentModuleFlag=true")]]);
 		

astro.config.mjs

@@ -1,25 +1,30 @@
-import { defineConfig } from "astro/config";
+import { defineConfig } from 'astro/config'
+
+import { transformerMetaHighlight } from '@shikijs/transformers'
 
 // https://astro.build/config
-import mdx from "@astrojs/mdx";
+import mdx from '@astrojs/mdx'
-import sitemap from "@astrojs/sitemap";
+import sitemap from '@astrojs/sitemap'
 
 // https://astro.build/config
 export default defineConfig({
-	site: "https://www.nardu.in",
+	site: 'https://www.nardu.in',
-		build: {
+	build: {
-    format: "directory",
+		format: 'directory'
-  },
-	i18n: {
-    locales: ["fr", "en"],
-    defaultLocale: "fr",
-  },
-	image: {
-		domains: ["assets.nardu.in"],
-		remotePatterns: [{ protocol: "https" }],
 	},
-	integrations: [
+	i18n: {
-		mdx(),
+		locales: ['fr', 'en'],
-    sitemap(),
+		defaultLocale: 'fr'
-	],
+	},
-});
+	image: {
+		domains: ['assets.nardu.in'],
+		remotePatterns: [{ protocol: 'https' }]
+	},
+	integrations: [mdx(), sitemap()],
+	markdown: {
+		shikiConfig: {
+			theme: 'one-dark-pro',
+			transformers: [transformerMetaHighlight()]
+		}
+	}
+})

package.json

@@ -18,6 +18,7 @@
 		"sharp": "^0.33.5"
 	},
 	"devDependencies": {
+		"@shikijs/transformers": "^1.24.4",
 		"autoprefixer": "^10.4.20",
 		"postcss": "^8.4.49",
 		"prettier": "^3.4.2",

src/components/EditorialContent.astro

@@ -10,8 +10,6 @@ const { Content, headings } = await render(content)
 const toc = headings.map((heading) => {
 	return heading
 })
-
-import '../styles/vendor/one-dark-pro.css'
 ---
 
 <div class='sidebar region'>

src/components/MetaDate.astro

@@ -1,6 +1,12 @@
 ---
+import type { ArticleFrontmatter, FragmentFrontmatter } from '../content.config'
+
+type Props = {
+	item: ArticleFrontmatter | FragmentFrontmatter
+}
+
 const { item } = Astro.props
-const locale: 'fr' | 'en' = item.frontmatter.lang
+const locale: 'fr' | 'en' = item.lang
 
 let ui = {
 	published: 'Publié le',
@@ -43,9 +49,9 @@ function rawDate(date: Date) {
 		)
 	}
 	{
-		formatDate(item.createdAt) != formatDate(item.updatedAt) &&
+		!!item.createdAt &&
-			!!item.createdAt &&
+			!!item.updatedAt &&
-			!!item.updatedAt && (
+			formatDate(item.createdAt) != formatDate(item.updatedAt) && (
 				<p class='meta__date'>
 					{ui.updated}&nbsp;:
 					<time datetime={rawDate(item.updatedAt)}>

src/content/fragments/fr/visited-links.md

@@ -45,7 +45,7 @@ J'ai personnellement choisi de faire différemment. J'ai décidé d'utiliser un
 
 ### Le code
 
-```css
+```css {1,4-6}
 a {
 	position: relative;
 	text-decoration: none;

src/i18n/en.json

@@ -1,68 +0,0 @@
-{
-	"accueil": "home",
-	"tagline": "Freelance web developer specialized in accessibility.",
-	"copyright": "(re)Made with Astro",
-	"contact": {
-		"title": "contact",
-		"email": "Send me an email (open in application).",
-		"tel": "Call or text me (open in application).",
-		"contenuVide": "Soon: really nice content."
-	},
-	"header": {
-		"skipLink": "Skip to content",
-		"mainNav": "Main menu",
-		"homeLink": "Back to homepage"
-	},
-	"sitemap": "Site map",
-	"prevNext": {
-		"contenus": "Similar content",
-		"precedent": "Previous",
-		"suivant": "Next"
-	},
-	"article": {
-		"titre": "articles",
-		"tagline": "I blog, sometimes.",
-		"published": "Published on {datetime|date(options)}"
-	},
-	"meta": {
-		"publication": "Published on",
-		"modification": "Last updated on",
-		"credit": "Image by"
-	},
-	"fragments": {
-		"titre": "snippets",
-		"tagline": "School with Nicool."
-	},
-	"references": {
-		"titre": "work",
-		"slug": "work",
-		"cta": "Visit website",
-		"tagline": "Some work."
-	},
-	"veille": {
-		"titre": "Around the web",
-		"tagline": "Some links that interested me."
-	},
-	"erreur": {
-		"introuvable": "Sorry, page not found.",
-		"autre": "Oups… sorry about that.",
-		"lienRetour": "Back to the home page"
-	},
-	"seo": {
-		"meta": {
-			"description": "Web developer specialized in accessibility and eco-design in Toulouse, France. Development of custom websites, RGAA compliance, maintenance, etc."
-		},
-		"article": {
-			"title": "Articles",
-			"description": "A few articles about graphic design and front-end development."
-		},
-		"code": {
-			"title": "Snippets",
-			"description": "Snippets of fresh, easy and accessible code."
-		},
-		"references": {
-			"title": "Work",
-			"description": "A few case studies I worked on as a front-end developer."
-		}
-	}
-}

src/i18n/fr.json

@@ -1,68 +0,0 @@
-{
-	"accueil": "accueil",
-	"tagline": "Développeur web spécialisé en accessibilité.",
-	"copyright": "(re)Fait avec Astro",
-	"contact": {
-		"title": "contact",
-		"email": "Envoyez-moi un mail (ouverture du logiciel automatique).",
-		"tel": "Contactez-moi par téléphone (ouverture du logiciel automatique)."
-	},
-	"contenuVide": "Bientôt ici : du contenu de qualité",
-	"header": {
-		"skipLink": "Accéder au contenu",
-		"mainNav": "Menu principal",
-		"homeLink": "Accueil du site"
-	},
-	"sitemap": "Plan du site",
-	"prevNext": {
-		"contenus": "Contenus similaires",
-		"precedent": "Précédent",
-		"suivant": "Suivant"
-	},
-	"article": {
-		"titre": "articles",
-		"tagline": "Je blog, un peu.",
-		"published": "Publié le {datetime|date(options)}"
-	},
-	"meta": {
-		"publication": "Publié le",
-		"modification": "Mis à jour le",
-		"credit": "Image par"
-	},
-	"fragments": {
-		"titre": "fragments",
-		"tagline": "Les tutos de Nico mdr."
-	},
-	"references": {
-		"titre": "références",
-		"slug": "references",
-		"cta": "Consulter le site",
-		"tagline": "Quelques références."
-	},
-	"veille": {
-		"titre": "veille",
-		"tagline": "Des liens, en vrac."
-	},
-	"erreur": {
-		"introuvable": "Page introuvable",
-		"autre": "Oups… désolé pour cette erreur.",
-		"lienRetour": "Retour à l’accueil"
-	},
-	"seo": {
-		"meta": {
-			"description": "Développeur web spécialisé en accessibilité numérique et éco-conception à Toulouse. Création de sites web sur mesure, mise en conformité RGAA, maintenance, etc."
-		},
-		"article": {
-			"title": "Articles",
-			"description": "Quelques articles sur le développement web front-end et l'informatique à Toulouse."
-		},
-		"code": {
-			"title": "Fragments",
-			"description": "Fragments de codes stylés, faciles et accessibles."
-		},
-		"references": {
-			"title": "Références",
-			"description": "Quelques travaux réalisés en tant que et développeur web front-end à Toulouse."
-		}
-	}
-}

src/i18n/ui.ts

@@ -1,150 +0,0 @@
-export const languages = {
-	en: 'English',
-	fr: 'Français'
-}
-
-export const defaultLang = 'fr'
-
-export const ui = {
-	en: {
-		accueil: 'home',
-		tagline: 'Freelance web developer specialized in accessibility.',
-		copyright: '(re)Made with Astro',
-		contact: {
-			title: 'contact',
-			email: 'Send me an email (open in application).',
-			tel: 'Call or text me (open in application).',
-			contenuVide: 'Soon: really nice content.'
-		},
-		header: {
-			skipLink: 'Skip to content',
-			mainNav: 'Main menu',
-			homeLink: 'Back to homepage'
-		},
-		sitemap: 'Site map',
-		prevNext: {
-			contenus: 'Similar content',
-			precedent: 'Previous',
-			suivant: 'Next'
-		},
-		article: {
-			titre: 'articles',
-			tagline: 'I blog, sometimes.',
-			published: 'Published on {datetime|date(options)}'
-		},
-		meta: {
-			publication: 'Published on',
-			modification: 'Last updated on',
-			credit: 'Image by'
-		},
-		fragments: {
-			titre: 'snippets',
-			tagline: 'School with Nicool.'
-		},
-		references: {
-			titre: 'work',
-			slug: 'work',
-			cta: 'Visit website',
-			tagline: 'Some work.'
-		},
-		veille: {
-			titre: 'Around the web',
-			tagline: 'Some links that interested me.'
-		},
-		erreur: {
-			introuvable: 'Sorry, page not found.',
-			autre: 'Oups… sorry about that.',
-			lienRetour: 'Back to the home page'
-		},
-		seo: {
-			meta: {
-				description:
-					'Web developer specialized in accessibility and eco-design in Toulouse, France. Development of custom websites, RGAA compliance, maintenance, etc.'
-			},
-			article: {
-				title: 'Articles',
-				description:
-					'A few articles about graphic design and front-end development.'
-			},
-			code: {
-				title: 'Snippets',
-				description: 'Snippets of fresh, easy and accessible code.'
-			},
-			references: {
-				title: 'Work',
-				description: 'A few case studies I worked on as a front-end developer.'
-			}
-		}
-	},
-	fr: {
-		accueil: 'accueil',
-		tagline: 'Développeur web spécialisé en accessibilité.',
-		copyright: '(re)Fait avec Astro',
-		contact: {
-			title: 'contact',
-			email: 'Envoyez-moi un mail (ouverture du logiciel automatique).',
-			tel: 'Contactez-moi par téléphone (ouverture du logiciel automatique).'
-		},
-		contenuVide: 'Bientôt ici : du contenu de qualité',
-		header: {
-			skipLink: 'Accéder au contenu',
-			mainNav: 'Menu principal',
-			homeLink: 'Accueil du site'
-		},
-		sitemap: 'Plan du site',
-		prevNext: {
-			contenus: 'Contenus similaires',
-			precedent: 'Précédent',
-			suivant: 'Suivant'
-		},
-		article: {
-			titre: 'articles',
-			tagline: 'Je blog, un peu.',
-			published: 'Publié le {datetime|date(options)}'
-		},
-		meta: {
-			publication: 'Publié le',
-			modification: 'Mis à jour le',
-			credit: 'Image par'
-		},
-		fragments: {
-			titre: 'fragments',
-			tagline: 'Les tutos de Nico mdr.'
-		},
-		references: {
-			titre: 'références',
-			slug: 'references',
-			cta: 'Consulter le site',
-			tagline: 'Quelques références.'
-		},
-		veille: {
-			titre: 'veille',
-			tagline: 'Des liens, en vrac.'
-		},
-		erreur: {
-			introuvable: 'Page introuvable',
-			autre: 'Oups… désolé pour cette erreur.',
-			lienRetour: 'Retour à l’accueil'
-		},
-		seo: {
-			meta: {
-				description:
-					'Développeur web spécialisé en accessibilité numérique et éco-conception à Toulouse. Création de sites web sur mesure, mise en conformité RGAA, maintenance, etc.'
-			},
-			article: {
-				title: 'Articles',
-				description:
-					"Quelques articles sur le développement web front-end et l'informatique à Toulouse."
-			},
-			code: {
-				title: 'Fragments',
-				description: 'Fragments de codes stylés, faciles et accessibles.'
-			},
-			references: {
-				title: 'Références',
-				description:
-					'Quelques travaux réalisés en tant que et développeur web front-end à Toulouse.'
-			}
-		}
-	}
-} as const

src/pages/articles/[id].astro

@@ -1,37 +1,16 @@
 ---
-import { createStaticPaths } from 'astro-i18n'
-
-import { getCollection } from 'astro:content'
-
 import EditorialContent from '../../components/EditorialContent.astro'
 import BaseLayout from '../../layouts/BaseLayout.astro'
+import { getCollection } from 'astro:content'
 
-export const getStaticPaths = createStaticPaths(
+// 1. Generate a new path for every collection entry
-	async ({ langCode }) => {
+export async function getStaticPaths() {
-		const articles = await getCollection('articles', ({ data }) => {
+	const articles = await getCollection('articles')
-			console.log(langCode)
+	return articles.map((article) => ({
-			return data.lang === langCode
+		params: { id: article.data.slug },
-		})
+		props: { article }
-		return articles.map((article) => ({
+	}))
-			params: { id: article.data.slug },
+}
-			props: { article }
-		}))
-	},
-	import.meta.url
-)
-
-// export async function getStaticPaths() {
-// 	const articles = await getCollection("articles", ({ data }) => {
-// 		console.log(astroI18n.langCode);
-// 		return data.lang === astroI18n.langCode;
-// 	});
-// 	console.log(articles);
-
-// 	return articles.map((article) => ({
-// 		params: { slug: article.data.slug },
-// 		props: { article },
-// 	}));
-// }
 
 const { article } = Astro.props
 ---

src/pages/articles/i18n/en.json

@@ -1,4 +0,0 @@
-{
-	"pageName": "Articles",
-	"subtitle": "I blog, sometimes."
-}

src/pages/articles/i18n/fr.json

@@ -1,4 +0,0 @@
-{
-	"pageName": "Articles",
-	"subtitle": "Je blog, un peu."
-}

src/pages/articles/index.astro

@@ -1,29 +1,42 @@
 ---
-import { l, t, astroI18n } from "astro-i18n";
-astroI18n.init(Astro);
-
 // New astro content collections
-import { getCollection } from "astro:content";
+import { getCollection } from 'astro:content'
 
-import BaseLayout from "../../layouts/BaseLayout.astro";
+import BaseLayout from '../../layouts/BaseLayout.astro'
-import ListCards from "../../components/ListCards.astro";
+import ListCards from '../../components/ListCards.astro'
 
-const localizedPost = await getCollection("articles", ({ data }) => {
+const frArticles = await getCollection('articles', ({ data }) => {
-	return data.lang === astroI18n.langCode && !data.draft;
+	return data.lang === 'fr' && !data.draft
-});
+}).then((entries) =>
-// sort articles by descending publication date
+	// sort results
-const sortedArticles = localizedPost.sort(
+	entries.sort(
-	(a, b) => b.data.createdAt - a.data.createdAt
+		(a, b) => b.data.createdAt.getTime() - a.data.createdAt.getTime()
-);
+	)
+)
+const enArticles = await getCollection('articles', ({ data }) => {
+	return data.lang === 'en' && !data.draft
+}).then((entries) =>
+	// sort results
+	entries.sort(
+		(a, b) => b.data.createdAt.getTime() - a.data.createdAt.getTime()
+	)
+)
 
-const pageTitle = t("index.articles.pageName");
+const pageTitle = 'Articles'
 ---
 
 <BaseLayout pageTitle={pageTitle}>
-	<section class="region flow">
+	<section class='region flow'>
-		<h1>{t("index.articles.pageName")}</h1>
+		<h1>{pageTitle}</h1>
-		<h2>{t("index.articles.subtitle")}</h2>
+		<h2>Je blog, un peu.</h2>
-		<ListCards list={sortedArticles} routeName={t("article.titre")} />
+		<section class='flow'>
+			<h3>En français</h3>
+			<ListCards list={frArticles} routeName='articles' />
+		</section>
+		<section class='flow' lang='en'>
+			<h3>In english</h3>
+			<ListCards list={enArticles} routeName='articles' />
+		</section>
 	</section>
 </BaseLayout>
 
@@ -31,14 +44,10 @@ const pageTitle = t("index.articles.pageName");
 	.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);
 	}
+	section + section {
+		margin-block-start: var(--space-l-xl);
+	}
 </style>

src/pages/fragments/[id].astro

@@ -1,38 +1,21 @@
 ---
-import { createStaticPaths } from 'astro-i18n'
-// import { astroI18n } from "astro-i18n";
-
 import { getCollection } from 'astro:content'
 import EditorialContent from '../../components/EditorialContent.astro'
 
 import BaseLayout from '../../layouts/BaseLayout.astro'
 
-export const getStaticPaths = createStaticPaths(
+// 1. Generate a new path for every collection entry
-	async ({ langCode }) => {
+export async function getStaticPaths() {
-		const snippets = await getCollection('fragments', ({ data }) => {
+	const fragments = await getCollection('fragments')
-			return data.lang === langCode
+	return fragments.map((fragment) => ({
-		})
+		params: { id: fragment.data.slug },
-		return snippets.map((snippet) => ({
+		props: { fragment }
-			params: { id: snippet.data.slug },
+	}))
-			props: { snippet }
+}
-		}))
-	},
-	import.meta.url
-)
 
-// export async function getStaticPaths() {
+const { fragment } = Astro.props
-// 	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}>
+<BaseLayout pageTitle={fragment.data.title}>
-	<EditorialContent content={snippet} />
+	<EditorialContent content={fragment} />
 </BaseLayout>

src/pages/fragments/i18n/en.json

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

src/pages/fragments/i18n/fr.json

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

src/pages/fragments/index.astro

@@ -1,29 +1,42 @@
 ---
-import { l, t, astroI18n } from "astro-i18n";
-astroI18n.init(Astro);
-
 // New astro content collections
-import { getCollection } from "astro:content";
+import { getCollection } from 'astro:content'
 
-import BaseLayout from "../../layouts/BaseLayout.astro";
+import BaseLayout from '../../layouts/BaseLayout.astro'
-import ListCards from "../../components/ListCards.astro";
+import ListCards from '../../components/ListCards.astro'
 
-const localizedPost = await getCollection("fragments", ({ data }) => {
+const frFragments = await getCollection('fragments', ({ data }) => {
-	return data.lang === astroI18n.langCode && !data.draft;
+	return data.lang === 'fr' && !data.draft
-});
+}).then((entries) =>
-// sort snippets by descending publication date
+	// sort results
-const sortedPosts = localizedPost.sort(
+	entries.sort(
-	(a, b) => b.data.createdAt - a.data.createdAt
+		(a, b) => b.data.createdAt.getTime() - a.data.createdAt.getTime()
-);
+	)
+)
+const enFragments = await getCollection('fragments', ({ data }) => {
+	return data.lang === 'en' && !data.draft
+}).then((entries) =>
+	// sort results
+	entries.sort(
+		(a, b) => b.data.createdAt.getTime() - a.data.createdAt.getTime()
+	)
+)
 
-const pageTitle = t("index.fragments.pageName");
+const pageTitle = 'Fragments'
 ---
 
 <BaseLayout pageTitle={pageTitle}>
-	<section class="region flow">
+	<section class='region flow'>
-		<h1>{t("index.fragments.pageName")}</h1>
+		<h1>{pageTitle}</h1>
-		<h2>{t("index.fragments.subtitle")}</h2>
+		<h2>Les tutos de Nico mdr</h2>
-		<ListCards list={sortedPosts} routeName={t("fragments.titre")} />
+		<section class='flow'>
+			<h3>En français</h3>
+			<ListCards list={frFragments} routeName='fragments' />
+		</section>
+		<section class='flow' lang='en'>
+			<h3>In english</h3>
+			<ListCards list={enFragments} routeName='fragments' />
+		</section>
 	</section>
 </BaseLayout>
 
@@ -31,14 +44,10 @@ const pageTitle = t("index.fragments.pageName");
 	.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);
 	}
+	section + section {
+		margin-block-start: var(--space-l-xl);
+	}
 </style>

src/pages/i18n/en.json

@@ -1,15 +0,0 @@
-{
-	"title": "Crafting  <a href='#methodology' class='clean-link'>sober and accessible</a> <span class='highlight'>websites</span>",
-	"subtitle": "Learn more about…",
-	"quoi": "I design <strong>websites</strong> and <strong>web applications</strong> following <a href='https://www.a11yproject.com/' title='A11y project’s website (new window)' target='_blank' rel='noreferer noopener' >accessibility</a> best practices.",
-	"comment": "More precisely, I create web and mobile interfaces. From UX to UI, from development to deployment. I put digital accessibility standards, for which I have obtained the <a href='https://directory.opquast.com/fr/certificat/CTQSKP/' title='My Opquast certificate (new window)' target='_blank' rel='noreferer noopener'>Opquast certification</a>, forwards. I also keep <a href='https://en.wikipedia.org/wiki/Ecological_design' title='eco-design definition (new window)' target='_blank' rel='noreferer noopener'>eco-design</a> in mind when working.",
-	"opensource": "I try to contribute to <a class='u-nice-links' href='https://git.nardu.in/explore/repos' title='Open source projects I worked on (new window)' target='_blank' rel='noreferer noopener'>open source projects</a> that I enjoy.",
-	"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",
-	"allProjects": "All projects",
-	"allArticles": "Browse all articles",
-	"latestSnippets": "Latest snippets",
-	"allSnippets": "Browse all snippets",
-	"toc": "table of content"
-}

src/pages/i18n/fr.json

@@ -1,15 +0,0 @@
-{
-	"title": "Création de <span class='highlight'>sites&nbsp;web</span> <a href='/articles/faq' class='clean-link'>sobres et accessibles</a>",
-	"subtitle": "Apprenez-en plus sur…",
-	"quoi": "Je crée des <strong>sites</strong> et des <strong>applications web</strong> en suivant les bonnes pratiques <a href='https://access42.net/decouvrir-accessibilite' title='Définition selon Access42 (nouvelle fenêtre)' target='_blank' rel='noreferer noopener' >d’accessibilités</a>.",
-	"comment": "Plus précisément, je crée des interfaces web et mobiles. De l’ergonomie jusqu’au design final, de l’intégration jusqu’à la mise en ligne. Je mets en avant les standards d’accessibilité numérique, pour lesquels j’ai obtenu la <a href='https://directory.opquast.com/fr/certificat/CTQSKP/' title='Certificat Opquast personnel (nouvelle fenêtre)' target='_blank' rel='noreferer noopener'>certification Opquast</a>. Je m’inscris également dans une démarche <a href='https://www.ademe.fr/expertises/consommer-autrement/passer-a-laction/ameliorer-pratiques/lecoconception' title='Définition de l’ADEME (nouvelle fenêtre)' rel='noopener noreferer'>d’éco-conception</a> des services que je propose.",
-	"opensource": "J’essaie de contribuer à des <a href='https://git.nardu.in/explore/repos' title='Projets sur lesquels j’ai travaillé (nouvelle fenêtre)' target='_blank' rel='noreferer noopener'>projets open source</a> qui me tiennent à cœur.",
-	"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",
-	"allProjects": "Tous les projets",
-	"allArticles": "Consulter tous les articles",
-	"latestSnippets": "Derniers fragments",
-	"allSnippets": "Consulter tous les fragments",
-	"toc": "table des matières"
-}

src/pages/references/i18n/en.json

@@ -1,4 +0,0 @@
-{
-	"pageName": "Work",
-	"subtitle": "Some fine websites right here."
-}

src/pages/references/i18n/fr.json

@@ -1,4 +0,0 @@
-{
-	"pageName": "Références",
-	"subtitle": "Des sites web de qualité."
-}

src/pages/references/index.astro

@@ -1,29 +1,24 @@
 ---
-import { l, t, astroI18n } from "astro-i18n";
+import { getCollection } from 'astro:content'
-astroI18n.init(Astro);
 
-// New astro content collections
+import BaseLayout from '../../layouts/BaseLayout.astro'
-import { getCollection } from "astro:content";
+import ListCards from '../../components/ListCards.astro'
 
-import BaseLayout from "../../layouts/BaseLayout.astro";
+const allReferences = await getCollection('references').then((entries) =>
-import ListCards from "../../components/ListCards.astro";
+	// sort results
+	entries.sort(
+		(a, b) => b.data.createdAt.getTime() - a.data.createdAt.getTime()
+	)
+)
 
-const localizedPost = await getCollection("references", ({ data }) => {
+const pageTitle = 'Références'
-	return data.lang === astroI18n.langCode && !data.draft;
-});
-// sort references by descending publication date
-const sortedReferences = localizedPost.sort(
-	(a, b) => b.data.createdAt - a.data.createdAt
-);
-
-const pageTitle = t("index.references.pageName");
 ---
 
 <BaseLayout pageTitle={pageTitle}>
-	<section class="region flow">
+	<section class='region flow'>
-		<h1>{t("index.references.pageName")}</h1>
+		<h1>{pageTitle}</h1>
-		<h2>{t("index.references.subtitle")}</h2>
+		<h2>Des sites web de qualité.</h2>
-		<ListCards list={sortedReferences} routeName={t("references.slug")} />
+		<ListCards list={allReferences} routeName='references' />
 	</section>
 </BaseLayout>
 
@@ -31,13 +26,6 @@ const pageTitle = t("index.references.pageName");
 	.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);
 	}

src/pages/veille/i18n/en.json

@@ -1,4 +0,0 @@
-{
-	"pageName": "External stuff",
-	"subtitle": "Links, articles, videos…"
-}

src/pages/veille/i18n/fr.json

@@ -1,4 +0,0 @@
-{
-	"pageName": "Veille",
-	"subtitle": "Des liens, des articles, des vidéos… en vrac."
-}

src/pages/veille/index.astro

@@ -1,34 +1,35 @@
 ---
-import { t, astroI18n } from "astro-i18n";
+import { getCollection, render } from 'astro:content'
-astroI18n.init(Astro);
 
-const pageTitle = t("index.veille.pageName");
+import BaseLayout from '../../layouts/BaseLayout.astro'
 
-import BaseLayout from "../../layouts/BaseLayout.astro";
+const allVeille = await getCollection('veille').then(async (entries) => {
-import MetaDate from "../../components/MetaDate.astro";
+	return Promise.all(
+		entries.map(async (entry) => {
+			// render and return entry + content
+			const { Content } = await render(entry)
+			return {
+				...entry,
+				Content
+			}
+		})
+	)
+})
 
-// get all content
+const pageTitle = 'Veille'
-const allSections = Object.values(
-	import.meta.glob("../../data/veille/**/*.md", { eager: true })
-);
-// only keep the right locale version
-const localizedSections = allSections.filter((section) => {
-	return section.frontmatter.lang === astroI18n.langCode;
-});
 ---
 
 <BaseLayout pageTitle={pageTitle}>
-	<section class="region flow">
+	<section class='region flow'>
 		<h1>{pageTitle}</h1>
-		<p>{t("index.veille.subtitle")}</p>
+		<p>Des liens, des articles, des vidéos… en vrac.</p>
 	</section>
 
 	{
-		localizedSections.map((section) => (
+		allVeille.map(({ data, Content }) => (
-			<section class="flow content">
+			<section class='flow content'>
-				<h2>{section.frontmatter.title}</h2>
+				<h2>{data.title}</h2>
-				<MetaDate item={section.frontmatter} />
+				<Content />
-				<section.Content />
 			</section>
 		))
 	}

src/styles/global/global-styles.css

@@ -79,13 +79,13 @@ hr.small {
 	block-size: 2px;
 }
 
-ul:not([role="list"]),
+ul:not([role='list']),
-ol:not([role="list"]) {
+ol:not([role='list']) {
 	padding-inline-start: 1rem;
 }
 
-ul:not([role="list"]) > li + li,
+ul:not([role='list']) > li + li,
-ol:not([role="list"]) > li + li {
+ol:not([role='list']) > li + li {
 	margin-block-start: var(--space-xs);
 }
 
@@ -159,7 +159,7 @@ button[disabled] {
 	text-decoration: none;
 }
 .nice-link::after {
-	content: "";
+	content: '';
 	position: absolute;
 	left: 0;
 	bottom: -2px;
@@ -204,24 +204,46 @@ blockquote code {
 
 /* code highlight */
 
-.content :not(pre) > code {
+.astro-code,
-	padding: var(--space-3xs) var(--space-2xs);
+code {
-	position: relative;
-	display: inline-block;
 	font-size: var(--size--1);
 	font-family: var(--font-code);
 }
+.astro-code {
+	position: relative;
+	border-radius: var(--radius-small);
+	padding-block: var(--space-xs);
+	direction: ltr;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	-moz-tab-size: 2;
+	-o-tab-size: 2;
+	tab-size: 2;
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
 
-.content :not(pre) > code:before {
+	code {
-	content: "";
+		padding-inline: var(--space-s);
-	position: absolute;
+		white-space: pre-wrap;
-	inset: 0px -1px;
+		display: block;
-	background: var(--color-light-grey);
+		inline-size: fit-content;
-	border-radius: 4px;
+		min-inline-size: 100%;
-	z-index: -1;
+	}
 }
 
-.content code[class*="language-"],
+.line {
-.content pre[class*="language-"] {
+	&.highlighted::before {
-	white-space: pre-wrap;
+		content: '';
+		position: absolute;
+		display: inline-block;
+		inline-size: 100%;
+		block-size: 1lh;
+		inset-inline-start: 0;
+		background-color: hsla(0, 0%, 80%, 0.1);
+	}
 }