lot of content

.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 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; }
+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; }
 

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",
+				},
+			},
+		}),
+	],
 });

astro.i18n.config.ts

@@ -12,6 +12,7 @@ export default defineAstroI18nConfig({
 		en: {
 			"sci-hub-blocage": "sci-hub-unblock",
 			fragments: "snippets",
+			"plan-du-site": "sitemap",
 		},
 	},
 });

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"
 	}
 }

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

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>
 		))

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

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)

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)

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
 

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
+<AstroImage src={premiereExport} width="673" height="800" alt="" />
-	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
+<AstroImage src={handbrakeBase} width="728" height="337" alt="" />
-	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
+<AstroImage src={handbrakeVideo} width="728" height="337" alt="" />
-	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
+<AstroImage src={handbrakeAudio} width="728" height="337" alt="" />
-	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
+<AstroImage src={handbrakeWeb} width="728" height="313" alt="" />
-	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.
 

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)

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)

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,
 	},
 });
 

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

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)

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)

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 « 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

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)

src/content/types.generated.d.ts

@@ -85,8 +85,8 @@ declare module 'astro:content' {
   collection: "articles",
   data: InferEntrySchema<"articles">
 },
-"en/video-compression.md": {
+"en/video-compression.mdx": {
-  id: "en/video-compression.md",
+  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": {
+"en/image-full.mdx": {
-  id: "en/image-full.md",
+  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": {
+"fr/buttons.mdx": {
-  id: "fr/buttons.md",
+  id: "fr/buttons.mdx",
   slug: "fr/buttons",
   body: string,
   collection: "fragments",
   data: InferEntrySchema<"fragments">
 },
-"fr/image-full.md": {
+"fr/image-full.mdx": {
-  id: "fr/image-full.md",
+  id: "fr/image-full.mdx",
   slug: "fr/image-full",
   body: string,
   collection: "fragments",

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.

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 ! Des articles sur le design, le développement web et l’informatique.
+Ah et j’écris [des articles](/articles) aussi ! Des articles sur le design, le développement web et l’informatique.

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(

src/pages/en/sitemap.astro

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

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(

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",

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",

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(

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>

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);
+}