diff --git a/.astro-i18n/generated.d.ts b/.astro-i18n/generated.d.ts
index 24f006f..de79448 100644
--- a/.astro-i18n/generated.d.ts
+++ b/.astro-i18n/generated.d.ts
@@ -1,8 +1,8 @@
 type DefaultLangCode = "fr"
 type SupportedLangCode = "en"
 type LangCode = DefaultLangCode | SupportedLangCode
-type RouteUri = | "/articles/[slug]" | "/articles" | "/agments/[slug]" | "/agments" | "/tags/[tag]" | "/tags" | "/" 
-type RouteParams = {"/articles/[slug]": { "slug": string; }; "/articles": undefined; "/agments/[slug]": { "slug": string; }; "/agments": undefined; "/tags/[tag]": { "tag": string; }; "/tags": undefined; "/": undefined; }
+type RouteUri = | "/articles/[slug]" | "/articles" | "/agments/[slug]" | "/agments" | "/tags/[tag]" | "/tags" | "/" | "/plan-du-site" 
+type RouteParams = {"/articles/[slug]": { "slug": string; }; "/articles": undefined; "/agments/[slug]": { "slug": string; }; "/agments": undefined; "/tags/[tag]": { "tag": string; }; "/tags": undefined; "/": undefined; "/plan-du-site": undefined; }
 type TranslationPath = "accueil" | "tagline" | "copyright" | "contact.title" | "contact.email" | "contact.tel" | "contenuVide" | "header.skipLink" | "header.mainNav" | "header.homeLink" | "sitemap" | "prevNext.contenus" | "prevNext.precedent" | "prevNext.suivant" | "article.titre" | "article.tagline" | "article.published" | "meta.publication" | "meta.modification" | "meta.credit" | "fragments.titre" | "fragments.tagline" | "projet.titre" | "projet.tagline" | "projet.cta" | "projet.lienTitle" | "projet.fenetre" | "erreur.introuvable" | "erreur.autre" | "erreur.lienRetour" | "seo.article.title" | "seo.article.description" | "seo.projet.title" | "seo.projet.description" | "seo.code.title" | "seo.code.description" | "index.articles.pageName" | "index.articles.subtitle" | "index.fragments.pageName" | "index.fragments.subtitle" | "index.title" | "index.subtitle" | "index.quoi" | "index.comment" | "index.opensource" | "index.writing" | "index.latestProjects" | "index.latestArticles" | "index.allProjects" | "index.allArticles" | "index.latestSnippets" | "index.allSnippets" | "index.toc" | "contact.contenuVide"
 type TranslationOptions = { "accueil": {} | undefined; "tagline": {} | undefined; "copyright": {} | undefined; "contact.title": {} | undefined; "contact.email": {} | undefined; "contact.tel": {} | undefined; "contenuVide": {} | undefined; "header.skipLink": {} | undefined; "header.mainNav": {} | undefined; "header.homeLink": {} | undefined; "sitemap": {} | undefined; "prevNext.contenus": {} | undefined; "prevNext.precedent": {} | undefined; "prevNext.suivant": {} | undefined; "article.titre": {} | undefined; "article.tagline": {} | undefined; "article.published": { datetime: unknown; options: unknown; }; "meta.publication": {} | undefined; "meta.modification": {} | undefined; "meta.credit": {} | undefined; "fragments.titre": {} | undefined; "fragments.tagline": {} | undefined; "projet.titre": {} | undefined; "projet.tagline": {} | undefined; "projet.cta": {} | undefined; "projet.lienTitle": {} | undefined; "projet.fenetre": {} | undefined; "erreur.introuvable": {} | undefined; "erreur.autre": {} | undefined; "erreur.lienRetour": {} | undefined; "seo.article.title": {} | undefined; "seo.article.description": {} | undefined; "seo.projet.title": {} | undefined; "seo.projet.description": {} | undefined; "seo.code.title": {} | undefined; "seo.code.description": {} | undefined; "index.articles.pageName": {} | undefined; "index.articles.subtitle": {} | undefined; "index.fragments.pageName": {} | undefined; "index.fragments.subtitle": {} | undefined; "index.title": {} | undefined; "index.subtitle": {} | undefined; "index.quoi": {} | undefined; "index.comment": {} | undefined; "index.opensource": {} | undefined; "index.writing": {} | undefined; "index.latestProjects": {} | undefined; "index.latestArticles": {} | undefined; "index.allProjects": {} | undefined; "index.allArticles": {} | undefined; "index.latestSnippets": {} | undefined; "index.allSnippets": {} | undefined; "index.toc": {} | undefined; "contact.contenuVide": {} | undefined; }
 
diff --git a/astro.config.mjs b/astro.config.mjs
index 622f63c..c242484 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -6,14 +6,29 @@ import i18n from "astro-i18n";
 // https://astro.build/config
 import image from "@astrojs/image";
 import mdx from "@astrojs/mdx";
+import sitemap from "@astrojs/sitemap";
 
 // https://astro.build/config
 export default defineConfig({
+	site: "https://www.nardu.in",
 	experimental: {
 		contentCollections: true,
 	},
 	markdown: {
 		syntaxHighlight: "prism",
 	},
-	integrations: [i18n(), image(), mdx()],
+	integrations: [
+		i18n(),
+		image(),
+		mdx(),
+		sitemap({
+			i18n: {
+				defaultLocale: "fr", // All urls that don't contain `en`
+				locales: {
+					fr: "fr-FR", // The `defaultLocale` value must present in `locales` keys
+					en: "en-US",
+				},
+			},
+		}),
+	],
 });
diff --git a/astro.i18n.config.ts b/astro.i18n.config.ts
index bfea82c..ae8268f 100644
--- a/astro.i18n.config.ts
+++ b/astro.i18n.config.ts
@@ -12,6 +12,7 @@ export default defineAstroI18nConfig({
 		en: {
 			"sci-hub-blocage": "sci-hub-unblock",
 			fragments: "snippets",
+			"plan-du-site": "sitemap",
 		},
 	},
 });
diff --git a/package.json b/package.json
index 1ea342e..9096503 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
 	"dependencies": {
 		"@astrojs/image": "^0.12.1",
 		"@astrojs/mdx": "^0.13.0",
+		"@astrojs/sitemap": "^1.0.0",
 		"astro": "1.7.2",
 		"astro-i18n": "^1.4.5"
 	},
@@ -23,6 +24,6 @@
 		"postcss": "^8.4.20"
 	},
 	"engines": {
-		"node": "16.18.1"
+		"node": "16.19.0"
 	}
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d081058..cc3b21a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3,6 +3,7 @@ lockfileVersion: 5.4
 specifiers:
   '@astrojs/image': ^0.12.1
   '@astrojs/mdx': ^0.13.0
+  '@astrojs/sitemap': ^1.0.0
   astro: 1.7.2
   astro-i18n: ^1.4.5
   autoprefixer: ^10.4.13
@@ -11,6 +12,7 @@ specifiers:
 dependencies:
   '@astrojs/image': 0.12.1
   '@astrojs/mdx': 0.13.0
+  '@astrojs/sitemap': 1.0.0
   astro: 1.7.2
   astro-i18n: 1.4.5
 
@@ -153,6 +155,13 @@ packages:
       prismjs: 1.29.0
     dev: false
 
+  /@astrojs/sitemap/1.0.0:
+    resolution: {integrity: sha512-42GxuF5FP7RaKXZrwGLBLOX3hPv+Wl7ExJC43O0J5e34ojJkLeKf7QfwN1UwrJlqH0Ywi0Fm4/xGe482G09+wg==}
+    dependencies:
+      sitemap: 7.1.1
+      zod: 3.20.2
+    dev: false
+
   /@astrojs/telemetry/1.0.1:
     resolution: {integrity: sha512-SJVfZHp00f8VZsT1fsx1+6acJGUNt/84xZytV5znPzzNE8RXjlE0rv03llgTsEeUHYZc6uJah91jNojS7RldFg==}
     engines: {node: ^14.18.0 || >=16.12.0}
@@ -677,6 +686,10 @@ packages:
       '@types/unist': 2.0.6
     dev: false
 
+  /@types/node/17.0.45:
+    resolution: {integrity: sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==}
+    dev: false
+
   /@types/parse5/6.0.3:
     resolution: {integrity: sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g==}
     dev: false
@@ -685,6 +698,12 @@ packages:
     resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
     dev: false
 
+  /@types/sax/1.2.4:
+    resolution: {integrity: sha512-pSAff4IAxJjfAXUG6tFkO7dsSbTmf8CtUpfhhZ5VhkRpC4628tJhh3+V6H1E+/Gs9piSzYKT5yzHO5M4GG9jkw==}
+    dependencies:
+      '@types/node': 17.0.45
+    dev: false
+
   /@types/unist/2.0.6:
     resolution: {integrity: sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==}
     dev: false
@@ -757,6 +776,10 @@ packages:
     engines: {node: '>=12'}
     dev: false
 
+  /arg/5.0.2:
+    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
+    dev: false
+
   /argparse/1.0.10:
     resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
     dependencies:
@@ -3166,6 +3189,10 @@ packages:
       suf-log: 2.5.3
     dev: false
 
+  /sax/1.2.4:
+    resolution: {integrity: sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==}
+    dev: false
+
   /section-matter/1.0.0:
     resolution: {integrity: sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==}
     engines: {node: '>=4'}
@@ -3235,6 +3262,17 @@ packages:
     resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
     dev: false
 
+  /sitemap/7.1.1:
+    resolution: {integrity: sha512-mK3aFtjz4VdJN0igpIJrinf3EO8U8mxOPsTBzSsy06UtjZQJ3YY3o3Xa7zSc5nMqcMrRwlChHZ18Kxg0caiPBg==}
+    engines: {node: '>=12.0.0', npm: '>=5.6.0'}
+    hasBin: true
+    dependencies:
+      '@types/node': 17.0.45
+      '@types/sax': 1.2.4
+      arg: 5.0.2
+      sax: 1.2.4
+    dev: false
+
   /slash/4.0.0:
     resolution: {integrity: sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==}
     engines: {node: '>=12'}
diff --git a/src/components/LangSwitcher.astro b/src/components/LangSwitcher.astro
index f8ea05a..9af34e5 100644
--- a/src/components/LangSwitcher.astro
+++ b/src/components/LangSwitcher.astro
@@ -7,6 +7,19 @@ const availableLocales = astroI18n.langCodes.filter(
 );
 // current path
 const currentRoute = Astro.url.pathname;
+
+function localeName(locale) {
+	let localeName = "";
+	switch (locale) {
+		case "fr":
+			localeName = "Français";
+			break;
+		case "en":
+			localeName = "English";
+			break;
+	}
+	return localeName;
+}
 ---
 
 <ul role="list">
@@ -18,7 +31,7 @@ const currentRoute = Astro.url.pathname;
 					href={l(currentRoute as any, {}, locale as any)}
 					class="clean-link nice-link"
 				>
-					{locale}
+					{localeName(locale)}
 				</a>
 			</li>
 		))
diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
index 9693e81..ed9a733 100644
--- a/src/components/Navigation.astro
+++ b/src/components/Navigation.astro
@@ -11,10 +11,6 @@ import LanguageSwitcher from "./LangSwitcher.astro";
 			>
 			<span aria-hidden="true">&middot;</span>
 		</li>
-		<li>
-			<a href={l("/")} class="clean-link nice-link">{t("projet.titre")}</a>
-			<span aria-hidden="true">&middot;</span>
-		</li>
 		<li>
 			<a href={l("/fragments")} class="clean-link nice-link"
 				>{t("fragments.titre")}</a
diff --git a/src/content/articles/en/faq.md b/src/content/articles/en/faq.md
index 3d1608c..6a058a4 100644
--- a/src/content/articles/en/faq.md
+++ b/src/content/articles/en/faq.md
@@ -3,9 +3,10 @@ title: Accessibility and sobriety
 subtitle: Translation in progress, stay tuned ;)
 lang: en
 slug: "faq"
+draft: true
 excerpt: Why, how et and especially what.
 tags: ["Freelance"]
 createdAt: "2022-06-22T15:34:45.000Z"
 ---
 
-[Go back to available articles](/en/articles/)
+[Go back to available articles](/en/articles)
diff --git a/src/content/articles/en/gratuiste.md b/src/content/articles/en/gratuiste.md
index 0e10739..61691c3 100644
--- a/src/content/articles/en/gratuiste.md
+++ b/src/content/articles/en/gratuiste.md
@@ -3,9 +3,10 @@ title: Gratuiste
 subtitle: Translation in progress, stay tuned ;)
 lang: en
 slug: "gratuiste"
+draft: true
 excerpt: Translation in progress, stay tuned ;)
 tags: ["Design", "Freelance"]
 createdAt: "2017-05-27T07:47:36.000Z"
 ---
 
-[Go back to available articles](/en/articles/)
+[Go back to available articles](/en/articles)
diff --git a/src/content/articles/en/the-day-I-jamd.mdx b/src/content/articles/en/the-day-I-jamd.mdx
index 1eb2179..5e3d172 100644
--- a/src/content/articles/en/the-day-I-jamd.mdx
+++ b/src/content/articles/en/the-day-I-jamd.mdx
@@ -65,7 +65,7 @@ No more Apollo client and graphQL query, only markdown and a few promises.
 
 Don’t get me wrong, I really like working with Strapi and its graphQL capabilities but for the purpose of this website, nuxt content does it (extremely well).
 
-I’m still using Strapi as a way to upload, store and manage images, videos, gifs, etc. It might be too much for this use case but I like to know that I can still go back to it if I want to! Also, I spent quite a bit of time setting it up with OpenLiteSpeed and I’m still too attached to this accomplishment to let it go. I wrote [an article on Strapi running with OpenLiteSpeed](/en/articles/strapi-openlitespeed) if you’re into that kind of stuff.
+I’m still using Strapi as a way to upload, store and manage images, videos, gifs, etc. It might be too much for this use case but I like to know that I can still go back to it if I want to! Also, I spent quite a bit of time setting it up with OpenLiteSpeed and I’m still too attached to this accomplishment to let it go.
 
 ## In the end
 
diff --git a/src/content/articles/en/video-compression.md b/src/content/articles/en/video-compression.mdx
similarity index 90%
rename from src/content/articles/en/video-compression.md
rename to src/content/articles/en/video-compression.mdx
index 9e26829..c9d7b51 100644
--- a/src/content/articles/en/video-compression.md
+++ b/src/content/articles/en/video-compression.mdx
@@ -10,11 +10,11 @@ updatedAt: "2022-06-08T14:24:06.000Z"
 ---
 
 import AstroImage from "../../../components/AstroImage.astro";
-export const premiereExport = "https://assets.nardu.in/wordpress_8ee6f54b98.jpeg";
+export const premiereExport = "https://assets.nardu.in/video-premiere-1.jpeg";
 export const handbrakeBase = "https://assets.nardu.in/video-handbrake-1.jpeg";
 export const handbrakeVideo = "https://assets.nardu.in/video-handbrake-2.jpeg";
 export const handbrakeAudio = "https://assets.nardu.in/video-handbrake-3.jpeg";
-export const handbrakeWeb = "https://assets.nardu.in/video-handbrake-4.jpeg";
+export const handbrakeWeb = "https://assets.nardu.in/video-handbrake-4.jpg";
 
 ## Let's play.
 
@@ -30,12 +30,7 @@ With a good connection, users will not see the difference. But if we go down tha
 
 Let's say we exported​ a 1920x1080 video from Premiere Pro with these basic settings:
 
-<AstroImage
-	src={premiereExport}
-	width="673"
-	height="800"
-	alt=""
-/>
+<AstroImage src={premiereExport} width="673" height="800" alt="" />
 
 It's gorgeous, it's Full HD, it's 1:30 minute of excellent editing but it's 50mb… What a shame.
 
@@ -56,12 +51,7 @@ While it's not as nice as Premiere Pro, it has way more exporting capabilities.
 1. Check Web Optimized
 1. Keep MPEG-4 as the format
 
-<AstroImage
-	src={handbrakeBase}
-	width="728"
-	height="337"
-	alt=""
-/>
+<AstroImage src={handbrakeBase} width="728" height="337" alt="" />
 
 ### Video screen
 
@@ -70,12 +60,7 @@ While it's not as nice as Premiere Pro, it has way more exporting capabilities.
 1. Choose Peak Framerate. If you don't know the framerate, keep the default setting
 1. Choose the type of video you are encoding (film, animation…)
 
-<AstroImage
-	src={handbrakeVideo}
-	width="728"
-	height="337"
-	alt=""
-/>
+<AstroImage src={handbrakeVideo} width="728" height="337" alt="" />
 
 ### Audio screen
 
@@ -86,12 +71,7 @@ If you have an audio channel, these settings are great and will not influence th
 1. Samplerate 44.1
 1. Bitrate 192 to 256 (your choice)
 
-<AstroImage
-	src={handbrakeAudio}
-	width="728"
-	height="337"
-	alt=""
-/>
+<AstroImage src={handbrakeAudio} width="728" height="337" alt="" />
 
 ### Export!
 
@@ -112,12 +92,7 @@ Webm is an html video format and VP9 is its latest codec.
 
 Using Handbrake and webm/VP9, we can achieve really great compression without losing too much quality (or none at all depending on the settings). I was able to divide by 4 the size of a video using these presets:
 
-<AstroImage
-	src={handbrakeWeb}
-	width="728"
-	height="313"
-	alt=""
-/>
+<AstroImage src={handbrakeWeb} width="728" height="313" alt="" />
 
 The only down side is that it takes some time to encode. It will depend on the video length and your computing power.
 
diff --git a/src/content/articles/fr/after-effects-expressions.md b/src/content/articles/fr/after-effects-expressions.md
index b301f8c..0012108 100644
--- a/src/content/articles/fr/after-effects-expressions.md
+++ b/src/content/articles/fr/after-effects-expressions.md
@@ -2,10 +2,11 @@
 title: After Effects Expressions
 subtitle: En cours de traduction, revenez bientôt ;)
 lang: fr
+draft: true
 slug: "after-effects-expressions"
 excerpt: En cours de traduction, revenez bientôt ;)
 tags: ["Design"]
 createdAt: "2019-04-24T09:00:00.000Z"
 ---
 
-[Retour aux articles](/articles/)
+[Retour aux articles](/articles)
diff --git a/src/content/articles/fr/video-compression.md b/src/content/articles/fr/video-compression.md
index 3fdda2b..7c34cdf 100644
--- a/src/content/articles/fr/video-compression.md
+++ b/src/content/articles/fr/video-compression.md
@@ -2,6 +2,7 @@
 title: Compression vidéo
 subtitle: En cours de traduction, revenez bientôt ;)
 lang: fr
+draft: true
 slug: "video-compression"
 excerpt: Pas encore traduit
 tags: ["Design"]
@@ -9,4 +10,4 @@ createdAt: "2021-05-05T09:00:00.000Z"
 updatedAt: "2022-06-08T14:24:06.000Z"
 ---
 
-[Retour aux articles](/articles/)
+[Retour aux articles](/articles)
diff --git a/src/content/config.ts b/src/content/config.ts
index d584e47..4802aa6 100644
--- a/src/content/config.ts
+++ b/src/content/config.ts
@@ -14,6 +14,7 @@ const articles = defineCollection({
 			.transform((str) => new Date(str))
 			.optional(),
 		code: z.boolean().optional() || false,
+		draft: z.boolean().optional() || false,
 	},
 });
 
@@ -31,6 +32,7 @@ const fragments = defineCollection({
 			.transform((str) => new Date(str))
 			.optional(),
 		code: z.boolean().optional() || false,
+		draft: z.boolean().optional() || false,
 	},
 });
 
diff --git a/src/content/fragments/en/buttons.md b/src/content/fragments/en/buttons.md
index 86a413e..dc7f25b 100644
--- a/src/content/fragments/en/buttons.md
+++ b/src/content/fragments/en/buttons.md
@@ -3,6 +3,7 @@ title: Buttons hover
 subtitle: Simple, but nice.
 lang: en
 slug: "buttons"
+draft: true
 excerpt: Easy to grab and use hover effects.
 tags: ["CSS"]
 code: true
diff --git a/src/content/fragments/en/image-full.md b/src/content/fragments/en/image-full.mdx
similarity index 77%
rename from src/content/fragments/en/image-full.md
rename to src/content/fragments/en/image-full.mdx
index 91b793e..440d7e3 100644
--- a/src/content/fragments/en/image-full.md
+++ b/src/content/fragments/en/image-full.mdx
@@ -2,10 +2,11 @@
 title: Full width image
 subtitle: Translation in progress, stay tuned ;)
 lang: en
+draft: true
 slug: "image-full"
 createdAt: "2020-09-15T09:00:00.000Z"
 updatedAt: "2022-06-08T14:24:06.000Z"
 tags: ["CSS"]
 ---
 
-[Go back to available snippets](/en/snippets/)
+[Go back to available snippets](/en/snippets)
diff --git a/src/content/fragments/fr/array-vs-array.md b/src/content/fragments/fr/array-vs-array.md
index a873933..e5dc370 100644
--- a/src/content/fragments/fr/array-vs-array.md
+++ b/src/content/fragments/fr/array-vs-array.md
@@ -2,10 +2,11 @@
 title: Filtrer un array avec un autre array
 subtitle: En cours de traduction.
 lang: fr
+draft: true
 slug: "array-vs-array"
 createdAt: "2022-06-08T14:24:06.000Z"
 excerpt: En cours de traduction.
 tags: ["nuxt.js"]
 ---
 
-[Voir les fragments disponibles](/fragments/)
+[Voir les fragments disponibles](/fragments)
diff --git a/src/content/fragments/fr/buttons.md b/src/content/fragments/fr/buttons.mdx
similarity index 97%
rename from src/content/fragments/fr/buttons.md
rename to src/content/fragments/fr/buttons.mdx
index 726c086..1f0d69e 100644
--- a/src/content/fragments/fr/buttons.md
+++ b/src/content/fragments/fr/buttons.mdx
@@ -3,6 +3,7 @@ title: "Effets de survol de boutons"
 subtitle: "Simples mais efficaces."
 lang: fr
 slug: "buttons"
+draft: true
 excerpt: Quelques effets de survol faciles à récupérer et utiliser.
 tags: ["CSS"]
 code: true
@@ -41,7 +42,7 @@ Tous les boutons présents utilisent ces styles comme base en guise de «&nbsp;r
 ## Ajout d'icône
 
 <button role="none" class="btn btn-icon">
-  <span>Icône</span>
+	<span>Icône</span>
 </button>
 
 ```css
@@ -80,7 +81,7 @@ Tous les boutons présents utilisent ces styles comme base en guise de «&nbsp;r
 ## Double volet
 
 <button role="none" class="btn btn-rideau">
-  <span>Volet</span>
+	<span>Volet</span>
 </button>
 
 ```css
@@ -127,7 +128,7 @@ Tous les boutons présents utilisent ces styles comme base en guise de «&nbsp;r
 ## Dégradé animé
 
 <button role="none" class="btn btn-gradient">
-  <span>Dégradé</span>
+	<span>Dégradé</span>
 </button>
 
 ```css
@@ -162,7 +163,7 @@ Tous les boutons présents utilisent ces styles comme base en guise de «&nbsp;r
 ## Échelle non desctructrice
 
 <button role="none" class="btn btn-scale">
-  <span>Échelle</span>
+	<span>Échelle</span>
 </button>
 
 ```css
diff --git a/src/content/fragments/fr/image-full.md b/src/content/fragments/fr/image-full.mdx
similarity index 100%
rename from src/content/fragments/fr/image-full.md
rename to src/content/fragments/fr/image-full.mdx
diff --git a/src/content/fragments/fr/toulouse-fun.md b/src/content/fragments/fr/toulouse-fun.md
index 709a162..817f344 100644
--- a/src/content/fragments/fr/toulouse-fun.md
+++ b/src/content/fragments/fr/toulouse-fun.md
@@ -2,10 +2,11 @@
 title: Toulouse yourself
 subtitle: En cours de traduction.
 lang: fr
+draft: true
 slug: "toulouse-fun"
 createdAt: "2022-06-22T15:34:45.000Z"
 excerpt: En cours de traduction.
 tags: ["lifestyle"]
 ---
 
-[Voir les fragments disponibles](/fragments/)
+[Voir les fragments disponibles](/fragments)
diff --git a/src/content/types.generated.d.ts b/src/content/types.generated.d.ts
index 696e946..18a8a20 100644
--- a/src/content/types.generated.d.ts
+++ b/src/content/types.generated.d.ts
@@ -85,8 +85,8 @@ declare module 'astro:content' {
   collection: "articles",
   data: InferEntrySchema<"articles">
 },
-"en/video-compression.md": {
-  id: "en/video-compression.md",
+"en/video-compression.mdx": {
+  id: "en/video-compression.mdx",
   slug: "en/video-compression",
   body: string,
   collection: "articles",
@@ -164,8 +164,8 @@ declare module 'astro:content' {
   collection: "fragments",
   data: InferEntrySchema<"fragments">
 },
-"en/image-full.md": {
-  id: "en/image-full.md",
+"en/image-full.mdx": {
+  id: "en/image-full.mdx",
   slug: "en/image-full",
   body: string,
   collection: "fragments",
@@ -206,15 +206,15 @@ declare module 'astro:content' {
   collection: "fragments",
   data: InferEntrySchema<"fragments">
 },
-"fr/buttons.md": {
-  id: "fr/buttons.md",
+"fr/buttons.mdx": {
+  id: "fr/buttons.mdx",
   slug: "fr/buttons",
   body: string,
   collection: "fragments",
   data: InferEntrySchema<"fragments">
 },
-"fr/image-full.md": {
-  id: "fr/image-full.md",
+"fr/image-full.mdx": {
+  id: "fr/image-full.mdx",
   slug: "fr/image-full",
   body: string,
   collection: "fragments",
diff --git a/src/data/HP/en/03-about.md b/src/data/HP/en/03-about.md
index d26d7a5..21a2a66 100644
--- a/src/data/HP/en/03-about.md
+++ b/src/data/HP/en/03-about.md
@@ -23,4 +23,4 @@ In order to strengthen my skills, I have completed the following training and ce
 
 I try to contribute to [open source projects](https://git.nardu.in/explore/repos) that I enjoy.
 
-Oh and I write [articles!](/en/articles/) Articles about design and the web in general.
+Oh and I write [articles!](/en/articles) Articles about design and the web in general.
diff --git a/src/data/HP/fr/03-about.md b/src/data/HP/fr/03-about.md
index 2d31023..3c82baa 100644
--- a/src/data/HP/fr/03-about.md
+++ b/src/data/HP/fr/03-about.md
@@ -23,4 +23,4 @@ Afin de solidifier mes compétences, j'ai suivi les formations et passé les cer
 
 J’essaie de contribuer à des [projets open source](https://git.nardu.in/explore/repos) qui me tiennent à cœur et je m'engage localement avec le collectif [good-it!](https://www.good-it.org/)
 
-Ah et j’écris [des articles](/articles/) aussi&nbsp;! Des articles sur le design, le développement web et l’informatique.
+Ah et j’écris [des articles](/articles) aussi&nbsp;! Des articles sur le design, le développement web et l’informatique.
diff --git a/src/pages/articles/index.astro b/src/pages/articles/index.astro
index c328225..6536934 100644
--- a/src/pages/articles/index.astro
+++ b/src/pages/articles/index.astro
@@ -9,7 +9,7 @@ import BaseLayout from "../../layouts/BaseLayout.astro";
 import ListCards from "../../components/ListCards.astro";
 
 const localizedPost = await getCollection("articles", ({ data }) => {
-	return data.lang === astroI18n.langCode;
+	return data.lang === astroI18n.langCode && !data.draft;
 });
 // sort articles by descending publication date
 const sortedArticles = localizedPost.sort(
diff --git a/src/pages/en/sitemap.astro b/src/pages/en/sitemap.astro
new file mode 100644
index 0000000..7d56647
--- /dev/null
+++ b/src/pages/en/sitemap.astro
@@ -0,0 +1,7 @@
+---
+import Page from "../plan-du-site.astro"
+
+const { props } = Astro
+---
+
+<Page {...props} />
\ No newline at end of file
diff --git a/src/pages/fragments/index.astro b/src/pages/fragments/index.astro
index eb2575b..4bf18a9 100644
--- a/src/pages/fragments/index.astro
+++ b/src/pages/fragments/index.astro
@@ -9,7 +9,7 @@ import BaseLayout from "../../layouts/BaseLayout.astro";
 import ListCards from "../../components/ListCards.astro";
 
 const localizedPost = await getCollection("fragments", ({ data }) => {
-	return data.lang === astroI18n.langCode;
+	return data.lang === astroI18n.langCode && !data.draft;
 });
 // sort snippets by descending publication date
 const sortedPosts = localizedPost.sort(
diff --git a/src/pages/i18n/en.json b/src/pages/i18n/en.json
index 00d4df0..c7a7ecd 100644
--- a/src/pages/i18n/en.json
+++ b/src/pages/i18n/en.json
@@ -4,7 +4,7 @@
 	"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.",
+	"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",
diff --git a/src/pages/i18n/fr.json b/src/pages/i18n/fr.json
index b8d1cc5..407796f 100644
--- a/src/pages/i18n/fr.json
+++ b/src/pages/i18n/fr.json
@@ -1,10 +1,10 @@
 {
-	"title": "Création de <span class='highlight'>sites&nbsp;web</span> <a href='/articles/faq' clean-link>sobres et accessibles</a>",
+	"title": "Création de <span class='highlight'>sites&nbsp;web</span> <a href='/articlesfaq' 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.",
+	"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",
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 862a052..57ecd3a 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -21,7 +21,7 @@ const localizedSections = allSections.filter((section) => {
 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;
+	return data.lang === astroI18n.langCode && !data.draft;
 });
 // sort articles by descending publication date
 const sortedArticles = localizedArticles.sort(
@@ -29,7 +29,7 @@ const sortedArticles = localizedArticles.sort(
 );
 // Only return snippets with correct lang in the frontmatter
 const localizedSnippets = await getCollection("fragments", ({ data }) => {
-	return data.lang === astroI18n.langCode;
+	return data.lang === astroI18n.langCode && !data.draft;
 });
 // sort articles by descending publication date
 const sortedSnippets = localizedSnippets.sort(
diff --git a/src/pages/plan-du-site.astro b/src/pages/plan-du-site.astro
new file mode 100644
index 0000000..1feacde
--- /dev/null
+++ b/src/pages/plan-du-site.astro
@@ -0,0 +1,82 @@
+---
+// init i18n
+import { l, t, astroI18n } from "astro-i18n";
+astroI18n.init(Astro);
+
+import BaseLayout from "../layouts/BaseLayout.astro";
+
+// New astro content collections
+import { getCollection } from "astro:content";
+
+// get all articles
+const localizedArticles = await getCollection("articles", ({ data }) => {
+	return data.lang === astroI18n.langCode && !data.draft;
+});
+// get all snippets
+const localizedFragments = await getCollection("fragments", ({ data }) => {
+	return data.lang === astroI18n.langCode && !data.draft;
+});
+
+const pageTitle = t("sitemap");
+---
+
+<BaseLayout pageTitle={pageTitle}>
+	<section class="region">
+		<h1>{t("sitemap")}</h1>
+		<ul class="flow sitemap" role="list">
+			<li>
+				<h2>
+					<a href={l("/")}>{t("accueil")}</a>
+				</h2>
+			</li>
+			<li>
+				<h2>
+					<a href={l("/articles")}>{t("article.titre")}</a>
+				</h2>
+				<ul>
+					{
+						localizedArticles.map((article) => (
+							<li>
+								<a href={l("/articles/[slug]", { slug: article.data.slug })}>
+									{article.data.title}
+								</a>
+							</li>
+						))
+					}
+				</ul>
+			</li>
+			<li>
+				<h2>
+					<a href={l("/fragments")}>{t("fragments.titre")}</a>
+				</h2>
+				<ul>
+					{
+						localizedFragments.map((fragment) => (
+							<li>
+								<a href={l("/fragments/[slug]", { slug: fragment.data.slug })}>
+									{fragment.data.title}
+								</a>
+							</li>
+						))
+					}
+				</ul>
+			</li>
+		</ul>
+	</section>
+</BaseLayout>
+
+<style>
+	/* :link {
+  text-decoration: underline;
+}
+:link:hover {
+  text-decoration: none;
+} */
+	h2 {
+		text-transform: capitalize;
+	}
+
+	.sitemap * + * {
+		margin-block-start: 20px;
+	}
+</style>
diff --git a/src/styles/editorial/buttons.css b/src/styles/editorial/buttons.css
new file mode 100644
index 0000000..9c944f6
--- /dev/null
+++ b/src/styles/editorial/buttons.css
@@ -0,0 +1,129 @@
+.btn {
+  padding: 12px 26px;
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+  cursor: pointer;
+  color: white;
+  border: none;
+  background-color: transparent;
+  transition: background-color 0.3s ease;
+}
+.btn-icon {
+  background-color: hotpink;
+}
+.btn-icon::before {
+  content: url('~assets/svg/arrow-right-white.svg');
+  position: absolute;
+  width: 20px;
+  top: 50%;
+  right: 0;
+  transform: translate(40px, -50%);
+  transition: transform ease 0.3s;
+}
+.btn-icon:hover,
+.btn-icon:focus {
+  background-color: darkorchid;
+}
+.btn-icon:hover::before,
+.btn-icon:focus::before {
+  transform: translate(-10px, -50%);
+}
+.btn-icon > span {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+  transition: transform 0.3s ease;
+}
+.btn-icon:hover > span,
+.btn-icon:focus > span {
+  transform: translateX(-10px);
+}
+
+.btn-rideau {
+  border: 2px solid var(--dark);
+  color: var(--dark);
+  background-color: transparent;
+  transition: color 0.3s ease, border-color 0.3s ease;
+}
+.btn-rideau:hover {
+  color: white;
+  border-color: darkorchid;
+}
+.btn-rideau::before {
+  background: hotpink;
+}
+.btn-rideau::after {
+  background: darkorchid;
+}
+.btn-rideau::before,
+.btn-rideau::after {
+  content: '';
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  bottom: 100%;
+  left: 0;
+  z-index: -1;
+  transition: transform 0.3s;
+  transition-timing-function: ease;
+  transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
+}
+.btn-rideau:hover::before,
+.btn-rideau:hover::after,
+.btn-rideau:focus::before,
+.btn-rideau:focus::after {
+  transform: translateY(100%);
+}
+.btn-rideau:hover::after,
+.btn-rideau:focus::after {
+  transition-delay: 0.175s;
+}
+
+.btn-gradient {
+  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
+  background-size: 400% 400%;
+  background-position: 0% 50%;
+  animation: GradientReverse 0.5s ease 1 normal forwards;
+}
+.btn-gradient:hover,
+.btn-gradient:focus {
+  animation: Gradient 0.5s ease 1 normal forwards;
+}
+@keyframes Gradient {
+  0% {
+    background-position: 0% 50%;
+  }
+  100% {
+    background-position: 100% 100%;
+  }
+}
+@keyframes GradientReverse {
+  0% {
+    background-position: 100% 100%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+.btn-scale {
+  overflow: visible;
+  color: #10113a;
+  background-color: transparent;
+}
+.btn-scale::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  border: 2px solid #10113a;
+  border-radius: 2px;
+  transition: transform 0.3s ease;
+}
+.btn-scale:hover::after,
+.btn-scale:focus::after {
+  transform: scale(1.1);
+}