new HP design + content, new references, fixed styles, fixed i18n

.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" | "/references" | "/veille" | "/" | "/plan-du-site" 
+type RouteUri = | "/articles/[slug]" | "/articles" | "/agments/[slug]" | "/agments" | "/offres/web-classique" | "/references" | "/veille" | "/" | "/plan-du-site" 
-type RouteParams = {"/articles/[slug]": { "slug": string; }; "/articles": undefined; "/agments/[slug]": { "slug": string; }; "/agments": undefined; "/references": undefined; "/veille": undefined; "/": undefined; "/plan-du-site": undefined; }
+type RouteParams = {"/articles/[slug]": { "slug": string; }; "/articles": undefined; "/agments/[slug]": { "slug": string; }; "/agments": undefined; "/offres/web-classique": undefined; "/references": undefined; "/veille": 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" | "references.titre" | "references.slug" | "references.cta" | "references.tagline" | "veille.titre" | "veille.tagline" | "erreur.introuvable" | "erreur.autre" | "erreur.lienRetour" | "seo.meta.description" | "seo.article.title" | "seo.article.description" | "seo.code.title" | "seo.code.description" | "seo.references.title" | "seo.references.description" | "index.articles.pageName" | "index.articles.subtitle" | "index.fragments.pageName" | "index.fragments.subtitle" | "index.references.pageName" | "index.references.subtitle" | "index.veille.pageName" | "index.veille.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; "references.titre": {} | undefined; "references.slug": {} | undefined; "references.cta": {} | undefined; "references.tagline": {} | undefined; "veille.titre": {} | undefined; "veille.tagline": {} | undefined; "erreur.introuvable": {} | undefined; "erreur.autre": {} | undefined; "erreur.lienRetour": {} | undefined; "seo.meta.description": {} | undefined; "seo.article.title": {} | undefined; "seo.article.description": {} | undefined; "seo.code.title": {} | undefined; "seo.code.description": {} | undefined; "seo.references.title": {} | undefined; "seo.references.description": {} | undefined; "index.articles.pageName": {} | undefined; "index.articles.subtitle": {} | undefined; "index.fragments.pageName": {} | undefined; "index.fragments.subtitle": {} | undefined; "index.references.pageName": {} | undefined; "index.references.subtitle": {} | undefined; "index.veille.pageName": {} | undefined; "index.veille.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/types.d.ts

@@ -198,7 +198,293 @@ declare module 'astro:content' {
 	>;
 
 	type ContentEntryMap = {
-		
+		"articles": {
+"en/2022.md": {
+	id: "en/2022.md";
+  slug: "en/2022";
+  body: string;
+  collection: "articles";
+  data: any
+} & { render(): Render[".md"] };
+"en/2023.md": {
+	id: "en/2023.md";
+  slug: "en/2023";
+  body: string;
+  collection: "articles";
+  data: any
+} & { render(): Render[".md"] };
+"en/after-effects-expressions.mdx": {
+	id: "en/after-effects-expressions.mdx";
+  slug: "en/after-effects-expressions";
+  body: string;
+  collection: "articles";
+  data: any
+} & { render(): Render[".mdx"] };
+"en/faq.md": {
+	id: "en/faq.md";
+  slug: "en/faq";
+  body: string;
+  collection: "articles";
+  data: any
+} & { render(): Render[".md"] };
+"en/gratuiste.md": {
+	id: "en/gratuiste.md";
+  slug: "en/gratuiste";
+  body: string;
+  collection: "articles";
+  data: any
+} & { render(): Render[".md"] };
+"en/sci-hub-blocage.mdx": {
+	id: "en/sci-hub-blocage.mdx";
+  slug: "en/sci-hub-blocage";
+  body: string;
+  collection: "articles";
+  data: any
+} & { render(): Render[".mdx"] };
+"en/the-day-I-jamd.mdx": {
+	id: "en/the-day-I-jamd.mdx";
+  slug: "en/the-day-i-jamd";
+  body: string;
+  collection: "articles";
+  data: any
+} & { render(): Render[".mdx"] };
+"en/video-compression.mdx": {
+	id: "en/video-compression.mdx";
+  slug: "en/video-compression";
+  body: string;
+  collection: "articles";
+  data: any
+} & { render(): Render[".mdx"] };
+"fr/2022.md": {
+	id: "fr/2022.md";
+  slug: "fr/2022";
+  body: string;
+  collection: "articles";
+  data: any
+} & { render(): Render[".md"] };
+"fr/2023.md": {
+	id: "fr/2023.md";
+  slug: "fr/2023";
+  body: string;
+  collection: "articles";
+  data: any
+} & { render(): Render[".md"] };
+"fr/after-effects-expressions.md": {
+	id: "fr/after-effects-expressions.md";
+  slug: "fr/after-effects-expressions";
+  body: string;
+  collection: "articles";
+  data: any
+} & { render(): Render[".md"] };
+"fr/faq.md": {
+	id: "fr/faq.md";
+  slug: "fr/faq";
+  body: string;
+  collection: "articles";
+  data: any
+} & { render(): Render[".md"] };
+"fr/gratuiste.md": {
+	id: "fr/gratuiste.md";
+  slug: "fr/gratuiste";
+  body: string;
+  collection: "articles";
+  data: any
+} & { render(): Render[".md"] };
+"fr/sci-hub-blocage.mdx": {
+	id: "fr/sci-hub-blocage.mdx";
+  slug: "fr/sci-hub-blocage";
+  body: string;
+  collection: "articles";
+  data: any
+} & { render(): Render[".mdx"] };
+"fr/the-day-I-jamd.mdx": {
+	id: "fr/the-day-I-jamd.mdx";
+  slug: "fr/the-day-i-jamd";
+  body: string;
+  collection: "articles";
+  data: any
+} & { render(): Render[".mdx"] };
+"fr/video-compression.md": {
+	id: "fr/video-compression.md";
+  slug: "fr/video-compression";
+  body: string;
+  collection: "articles";
+  data: any
+} & { render(): Render[".md"] };
+};
+"fragments": {
+"en/acme-sh-tls-cert.md": {
+	id: "en/acme-sh-tls-cert.md";
+  slug: "en/acme-sh-tls-cert";
+  body: string;
+  collection: "fragments";
+  data: any
+} & { render(): Render[".md"] };
+"en/array-vs-array.md": {
+	id: "en/array-vs-array.md";
+  slug: "en/array-vs-array";
+  body: string;
+  collection: "fragments";
+  data: any
+} & { render(): Render[".md"] };
+"en/buttons.md": {
+	id: "en/buttons.md";
+  slug: "en/buttons";
+  body: string;
+  collection: "fragments";
+  data: any
+} & { render(): Render[".md"] };
+"en/image-full.mdx": {
+	id: "en/image-full.mdx";
+  slug: "en/image-full";
+  body: string;
+  collection: "fragments";
+  data: any
+} & { render(): Render[".mdx"] };
+"en/nuxt-graphql-static.md": {
+	id: "en/nuxt-graphql-static.md";
+  slug: "en/nuxt-graphql-static";
+  body: string;
+  collection: "fragments";
+  data: any
+} & { render(): Render[".md"] };
+"en/super-cookies.md": {
+	id: "en/super-cookies.md";
+  slug: "en/super-cookies";
+  body: string;
+  collection: "fragments";
+  data: any
+} & { render(): Render[".md"] };
+"en/toulouse-fun.md": {
+	id: "en/toulouse-fun.md";
+  slug: "en/toulouse-fun";
+  body: string;
+  collection: "fragments";
+  data: any
+} & { render(): Render[".md"] };
+"en/visited-links.md": {
+	id: "en/visited-links.md";
+  slug: "en/visited-links";
+  body: string;
+  collection: "fragments";
+  data: any
+} & { render(): Render[".md"] };
+"fr/acme-sh-tls-cert.md": {
+	id: "fr/acme-sh-tls-cert.md";
+  slug: "fr/acme-sh-tls-cert";
+  body: string;
+  collection: "fragments";
+  data: any
+} & { render(): Render[".md"] };
+"fr/array-vs-array.md": {
+	id: "fr/array-vs-array.md";
+  slug: "fr/array-vs-array";
+  body: string;
+  collection: "fragments";
+  data: any
+} & { render(): Render[".md"] };
+"fr/buttons.mdx": {
+	id: "fr/buttons.mdx";
+  slug: "fr/buttons";
+  body: string;
+  collection: "fragments";
+  data: any
+} & { render(): Render[".mdx"] };
+"fr/image-full.mdx": {
+	id: "fr/image-full.mdx";
+  slug: "fr/image-full";
+  body: string;
+  collection: "fragments";
+  data: any
+} & { render(): Render[".mdx"] };
+"fr/nuxt-graphql-static.md": {
+	id: "fr/nuxt-graphql-static.md";
+  slug: "fr/nuxt-graphql-static";
+  body: string;
+  collection: "fragments";
+  data: any
+} & { render(): Render[".md"] };
+"fr/super-cookies.mdx": {
+	id: "fr/super-cookies.mdx";
+  slug: "fr/super-cookies";
+  body: string;
+  collection: "fragments";
+  data: any
+} & { render(): Render[".mdx"] };
+"fr/toulouse-fun.md": {
+	id: "fr/toulouse-fun.md";
+  slug: "fr/toulouse-fun";
+  body: string;
+  collection: "fragments";
+  data: any
+} & { render(): Render[".md"] };
+"fr/visited-links.md": {
+	id: "fr/visited-links.md";
+  slug: "fr/visited-links";
+  body: string;
+  collection: "fragments";
+  data: any
+} & { render(): Render[".md"] };
+};
+"references": {
+"en/3w.md": {
+	id: "en/3w.md";
+  slug: "en/3w";
+  body: string;
+  collection: "references";
+  data: any
+} & { render(): Render[".md"] };
+"en/natureo.md": {
+	id: "en/natureo.md";
+  slug: "en/natureo";
+  body: string;
+  collection: "references";
+  data: any
+} & { render(): Render[".md"] };
+"en/parole-expression.md": {
+	id: "en/parole-expression.md";
+  slug: "en/parole-expression";
+  body: string;
+  collection: "references";
+  data: any
+} & { render(): Render[".md"] };
+"en/rose-primaire.md": {
+	id: "en/rose-primaire.md";
+  slug: "en/rose-primaire";
+  body: string;
+  collection: "references";
+  data: any
+} & { render(): Render[".md"] };
+"fr/3w.md": {
+	id: "fr/3w.md";
+  slug: "fr/3w";
+  body: string;
+  collection: "references";
+  data: any
+} & { render(): Render[".md"] };
+"fr/natureo.md": {
+	id: "fr/natureo.md";
+  slug: "fr/natureo";
+  body: string;
+  collection: "references";
+  data: any
+} & { render(): Render[".md"] };
+"fr/parole-expression.md": {
+	id: "fr/parole-expression.md";
+  slug: "fr/parole-expression";
+  body: string;
+  collection: "references";
+  data: any
+} & { render(): Render[".md"] };
+"fr/rose-primaire.md": {
+	id: "fr/rose-primaire.md";
+  slug: "fr/rose-primaire";
+  body: string;
+  collection: "references";
+  data: any
+} & { render(): Render[".md"] };
+};
+
 	};
 
 	type DataEntryMap = {

src/components/CardEditorial.astro

@@ -9,35 +9,33 @@ const isReference = routeName === t("references.slug");
 ---
 
 <div class:list={["card", { "card--link": !isReference }]}>
-	<div>
+	<h3>
-		<h3>
-			{
-				!isReference ? (
-					<a
-						class="clean-link card__link"
-						href={`${l(`/${routeName}`)}/${item.slug}`}
-					>
-						{item.data.title}
-					</a>
-				) : (
-					<span>{item.data.title}</span>
-				)
-			}
-		</h3>
-		<h4>{item.data.subtitle}</h4>
-		<ListTags list={item.data.tags} />
 		{
-			isReference && (
+			!isReference ? (
-				<a href={item.data.url} rel="noopener noreferer">
+				<a
-					{t("references.cta")}
+					class="clean-link card__link"
-					<span class="sr-only"> {item.data.title}</span>
+					href={`${l(`/${routeName}`)}/${item.data.permalink}`}
+				>
+					{item.data.title}
 				</a>
+			) : (
+				<span>{item.data.title}</span>
 			)
 		}
-	</div>
+	</h3>
+	<h4>{item.data.subtitle}</h4>
+	<ListTags list={item.data.tags} />
+	{
+		isReference && (
+			<a href={item.data.url} rel="noopener noreferer">
+				{t("references.cta")}
+				<span class="sr-only"> {item.data.title}</span>
+			</a>
+		)
+	}
 </div>
 
-<style scoped>
+<style define:vars={{ permalink: item.data.permalink }}>
 	.card {
 		padding: var(--space-s-m) var(--space-xs-s);
 		position: relative;
@@ -125,6 +123,9 @@ const isReference = routeName === t("references.slug");
 		.card::after {
 			transition: opacity ease 0.2s, transform ease 0.2s;
 		}
+		.card--link {
+			view-transition-name: var(--permalink);
+		}
 		h3 a {
 			transition: color ease 0.2s;
 		}

src/components/EditorialContent.astro

@@ -1,19 +1,17 @@
 ---
-import { renderContent } from "astro-i18n";
+// import { renderContent } from "astro-i18n";
 import MetaDate from "./MetaDate.astro";
 import TOC from "./TOC.astro";
 
 const { content } = Astro.props;
-// const { Content, headings } = await content.render();
+const { Content, headings } = await content.render();
-const { html, headings } = await renderContent(Astro, content);
+// const { html, headings } = await renderContent(Astro, content);
 
 const toc = headings.map((heading) => {
 	return heading;
 });
 
-if (content.data.code) {
+import "../styles/vendor/one-dark-pro.css";
-	import "../styles/vendor/one-dark-pro.css";
-}
 ---
 
 <div class="sidebar region">
@@ -22,13 +20,17 @@ if (content.data.code) {
 		<h1>{content.data.title}</h1>
 		<p class="h3">{content.data.subtitle}</p>
 		<MetaDate item={content.data} />
-		<div class="flow content" set:html={html}>
+		<!-- <div class="flow content" set:html={html}> -->
-			<!-- <Content /> -->
+		<Content />
-		</div>
 	</article>
 </div>
 
-<style>
+<style define:vars={{ permalink: content.data.permalink }}>
+	@media (prefers-reduced-motion: no-preference) {
+		article {
+			view-transition-name: var(--permalink);
+		}
+	}
 	.sidebar {
 		--gutter: var(--space-xs-m);
 	}

src/components/Head.astro

@@ -0,0 +1,17 @@
+---
+import { t } from "astro-i18n";
+const { pageTitle } = Astro.props;
+---
+
+<head>
+	<meta charset="utf-8" />
+	<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<title>{pageTitle} - Nicolas Arduin</title>
+	<meta name="description" content={t("seo.meta.description")} />
+	<meta name="robots" content="index,follow." />
+	<meta name="author" content="Nicolas Arduin" />
+	<meta name="subject" content="Développement de sites web, accessibilité." />
+	<meta name="view-transition" content="same-origin" />
+</head>

src/components/QuickAccessCard.astro

@@ -34,7 +34,7 @@ const { item } = Astro.props;
 		text-align: center;
 		gap: var(--space-xs);
 		cursor: pointer;
-		background-color: var(--color-light-blue);
+		background-color: var(--color-white);
 		transform: translateY(0);
 	}
 	.card:focus-within {

src/content/articles/en/2022.md

@@ -2,7 +2,7 @@
 title: Nico v2.0
 subtitle: 2022 update of many things.
 lang: en
-slug: "2022"
+permalink: "2022"
 excerpt: Changes in my services, the website and myself.
 tags: ["Freelance"]
 type: articles

src/content/articles/en/2023.md

@@ -2,7 +2,7 @@
 title: Nico v2.5
 subtitle: Update 2023.
 lang: en
-slug: "2023"
+permalink: "2023"
 excerpt: New changes.
 tags: ["Freelance"]
 type: articles

src/content/articles/en/after-effects-expressions.mdx

@@ -2,7 +2,7 @@
 title: After Effects Expressions
 subtitle: Animation on steroïds.
 lang: en
-slug: "after-effects-expressions"
+permalink: "after-effects-expressions"
 excerpt: Expressions in After Effects have always been blurry for me. I know they exist, I know they're powerful, I know it could save a lot of time and clean complex keyframe filled compositions but… They are hard to learn!
 tags: ["Design"]
 type: articles

src/content/articles/en/faq.md

@@ -2,7 +2,7 @@
 title: Accessibility and sobriety
 subtitle: Translation in progress, stay tuned ;)
 lang: en
-slug: "faq"
+permalink: "faq"
 draft: true
 excerpt: Why, how et and especially what.
 tags: ["Freelance"]

src/content/articles/en/gratuiste.md

@@ -2,7 +2,7 @@
 title: Gratuiste
 subtitle: Translation in progress, stay tuned ;)
 lang: en
-slug: "gratuiste"
+permalink: "gratuiste"
 draft: true
 excerpt: Translation in progress, stay tuned ;)
 tags: ["Design", "Freelance"]

src/content/articles/en/sci-hub-blocage.mdx

@@ -2,7 +2,7 @@
 title: "Access blocked Sci-hub"
 subtitle: "The science of sharing."
 lang: en
-slug: "sci-hub-unblock"
+permalink: "sci-hub-unblock"
 key: "scihub"
 excerpt: "In March 2019, the Paris Regional Court ruled in favour of the publishers of scientific articles Elsevier and Springer Nature by ordering internet service providers to block access to these two websites. Here is how to access them if they are blocked in your country anyway."
 tags: ["Internet", "Science"]

src/content/articles/en/the-day-I-jamd.mdx

@@ -2,7 +2,7 @@
 title: The day I Jam’d
 subtitle: A story of unusual tools and fun gambles.
 lang: en
-slug: "the-day-I-jamd"
+permalink: "the-day-I-jamd"
 excerpt: Ooh, yeah! All right! We’re jammin’
 tags: ["Dev", "Jamstack"]
 type: articles

src/content/articles/en/video-compression.mdx

@@ -2,7 +2,7 @@
 title: Video compression
 subtitle: Encode like you mean it.
 lang: en
-slug: "video-compression"
+permalink: "video-compression"
 excerpt: How to gain precious weight when encoding videos.
 tags: ["Design"]
 type: articles

src/content/articles/fr/2022.md

@@ -2,7 +2,7 @@
 title: Nico v2.0
 subtitle: Mise à jour 2022 de plein de trucs.
 lang: fr
-slug: "2022"
+permalink: "2022"
 excerpt: Évolution des services, du site et de moi-même.
 tags: ["Freelance"]
 type: articles

src/content/articles/fr/2023.md

@@ -2,7 +2,7 @@
 title: Nico v2.5
 subtitle: Mise à jour 2023.
 lang: fr
-slug: "2023"
+permalink: "2023"
 excerpt: Suite des évolutions.
 tags: ["Freelance"]
 type: articles

src/content/articles/fr/after-effects-expressions.md

@@ -3,7 +3,7 @@ title: After Effects Expressions
 subtitle: En cours de traduction, revenez bientôt ;)
 lang: fr
 draft: true
-slug: "after-effects-expressions"
+permalink: "after-effects-expressions"
 excerpt: En cours de traduction, revenez bientôt ;)
 tags: ["Design"]
 type: articles

src/content/articles/fr/faq.md

@@ -2,7 +2,7 @@
 title: Accessibilité, sobriété et F.A.Q.
 subtitle: Explications sur ma vision et mon fonctionnement.
 lang: fr
-slug: "faq"
+permalink: "faq"
 excerpt: Pourquoi, comment et surtout quèsaco.
 tags: ["Freelance"]
 type: articles

src/content/articles/fr/gratuiste.md

@@ -2,7 +2,7 @@
 title: "Gratuiste"
 subtitle: "Ou le travail gratuit."
 lang: fr
-slug: "gratuiste"
+permalink: "gratuiste"
 excerpt: "J’ai cherché un moyen de mettre mes compétences au service d’autrui et je pense avoir trouvé: je vais travailler gratuitement pour des associations."
 tags: ["Graphisme", "Freelance"]
 type: articles

src/content/articles/fr/sci-hub-blocage.mdx

@@ -2,7 +2,7 @@
 title: "Sci-hub bloqué, comment contourner"
 subtitle: "La science du partage."
 lang: fr
-slug: "sci-hub-blocage"
+permalink: "sci-hub-blocage"
 excerpt: "Le tribunal de grande instance de Paris a ordonné aux fournisseurs d’accès à internet de bloquer l’accès à sci-hub. Voici comment contourner les blocages mis en place."
 tags: ["Internet", "Science"]
 type: articles

src/content/articles/fr/the-day-I-jamd.mdx

@@ -2,7 +2,7 @@
 title: The day I Jam’d
 subtitle: Des paris, des outils et du fun.
 lang: fr
-slug: "the-day-I-jamd"
+permalink: "the-day-I-jamd"
 excerpt: Ooh, yeah! All right! We’re jammin’
 tags: ["Dev", "Jamstack"]
 type: articles

src/content/articles/fr/video-compression.md

@@ -3,7 +3,7 @@ title: Compression vidéo
 subtitle: En cours de traduction, revenez bientôt ;)
 lang: fr
 draft: true
-slug: "video-compression"
+permalink: "video-compression"
 excerpt: Pas encore traduit
 tags: ["Design"]
 type: articles

src/content/config.ts

@@ -7,6 +7,7 @@ const articles = defineCollection({
 		lang: z.enum(["fr", "en"]),
 		tags: z.array(z.string()), // An array of strings
 		type: z.string(),
+		permalink: z.string(),
 		// Parse pubDate as a browser-standard `Date` object
 		createdAt: z.string().transform((str) => new Date(str)),
 		updatedAt: z
@@ -25,6 +26,7 @@ const fragments = defineCollection({
 		lang: z.enum(["fr", "en"]),
 		tags: z.array(z.string()), // An array of strings
 		type: z.string(),
+		permalink: z.string(),
 		// Parse pubDate as a browser-standard `Date` object
 		createdAt: z.string().transform((str) => new Date(str)),
 		updatedAt: z
@@ -42,6 +44,7 @@ const references = defineCollection({
 		subtitle: z.string(),
 		url: z.string(),
 		lang: z.enum(["fr", "en"]),
+		permalink: z.string(),
 		tags: z.array(z.string()), // An array of strings
 		// Parse pubDate as a browser-standard `Date` object
 		createdAt: z.string().transform((str) => new Date(str)),

src/content/fragments/en/acme-sh-tls-cert.md

@@ -2,7 +2,7 @@
 title: Strong TLS certificates with acme.sh
 subtitle: 384-bit of https
 lang: en
-slug: "acme-sh-tls-cert"
+permalink: "acme-sh-tls-cert"
 createdAt: "2022-06-08T14:24:06.000Z"
 excerpt: Real cert have curves.
 tags: ["security"]

src/content/fragments/en/array-vs-array.md

@@ -2,7 +2,7 @@
 title: Filter an array against another array
 subtitle: Array vs Array.
 lang: en
-slug: "array-vs-array"
+permalink: "array-vs-array"
 createdAt: "2022-06-08T14:24:06.000Z"
 excerpt: My peak javascript
 tags: ["nuxt.js"]

src/content/fragments/en/buttons.md

@@ -2,7 +2,7 @@
 title: Buttons hover
 subtitle: Simple, but nice.
 lang: en
-slug: "buttons"
+permalink: "buttons"
 draft: true
 excerpt: Easy to grab and use hover effects.
 tags: ["CSS"]

src/content/fragments/en/image-full.mdx

@@ -3,7 +3,7 @@ title: Full width image
 subtitle: Translation in progress, stay tuned ;)
 lang: en
 draft: true
-slug: "image-full"
+permalink: "image-full"
 createdAt: "2020-09-15T09:00:00.000Z"
 updatedAt: "2022-06-08T14:24:06.000Z"
 tags: ["CSS"]

src/content/fragments/en/nuxt-graphql-static.md

@@ -2,7 +2,7 @@
 title: Static website and GraphQL queries with Nuxt.js
 subtitle: Graphql client is king.
 lang: en
-slug: "nuxt-graphql-static"
+permalink: "nuxt-graphql-static"
 createdAt: "2022-06-08T14:24:06.000Z"
 updatedAt: "2022-09-08T13:43:33.000Z"
 excerpt: When the most used gql module doesn't work…
@@ -131,7 +131,7 @@ export default {
     const locale = app.i18n.localeProperties.iso
     const data = await $graphql.default.request(articleQuery, {
       code: locale,
-      slug: params.slug,
+      permalink: params.slug,
     })
     return { data }
   },

src/content/fragments/en/super-cookies.md

@@ -2,7 +2,7 @@
 title: The best cookies
 subtitle: Consentless biscuits.
 lang: en
-slug: "super-cookies"
+permalink: "super-cookies"
 createdAt: "2022-06-08T14:24:06.000Z"
 excerpt: It's a real recipe, not a joke about annoying files.
 tags: ["food"]

src/content/fragments/en/toulouse-fun.md

@@ -2,7 +2,7 @@
 title: Toulouse yourself
 subtitle: Only the bestest
 lang: en
-slug: "toulouse-fun"
+permalink: "toulouse-fun"
 excerpt: Gonna have to trust me on this ¯\_(ツ)_/¯
 tags: ["lifestyle"]
 type: snippets

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

@@ -0,0 +1,13 @@
+---
+title: Visited links and visuel aid
+subtitle: Translation in progress, stay tuned ;)
+lang: en
+draft: true
+permalink: "visited-links"
+excerpt: Petit hack CSS
+tags: ["Front-end"]
+type: snippets
+createdAt: "2023-06-06T18:34:00.000Z"
+---
+
+[Go back to available snippets](/en/snippets)

src/content/fragments/fr/acme-sh-tls-cert.md

@@ -2,7 +2,7 @@
 title: Certificates TLS robustes avec acme.sh
 subtitle: 384-bit de https
 lang: fr
-slug: "acme-sh-tls-cert"
+permalink: "acme-sh-tls-cert"
 createdAt: "2022-06-08T14:24:06.000Z"
 excerpt: La sécurité avec des courbes.
 tags: ["sécurité"]

src/content/fragments/fr/array-vs-array.md

@@ -3,7 +3,7 @@ title: Filtrer un array avec un autre array
 subtitle: En cours de traduction.
 lang: fr
 draft: true
-slug: "array-vs-array"
+permalink: "array-vs-array"
 createdAt: "2022-06-08T14:24:06.000Z"
 excerpt: En cours de traduction.
 tags: ["nuxt.js"]

src/content/fragments/fr/buttons.mdx

@@ -2,7 +2,7 @@
 title: "Effets de survol de boutons"
 subtitle: "Simples mais efficaces."
 lang: fr
-slug: "buttons"
+permalink: "buttons"
 draft: true
 excerpt: Quelques effets de survol faciles à récupérer et utiliser.
 tags: ["CSS"]

src/content/fragments/fr/image-full.mdx

@@ -2,7 +2,7 @@
 title: Image pleine largeur
 subtitle: Casser le conteneur.
 lang: fr
-slug: "image-full"
+permalink: "image-full"
 createdAt: "2020-09-15T09:00:00.000Z"
 updatedAt: "2022-06-08T14:24:06.000Z"
 excerpt: Faire déborder une image de son conteneur sans tout casser.

src/content/fragments/fr/nuxt-graphql-static.md

@@ -2,7 +2,7 @@
 title: Site statique et requêtes GraphQL avec Nuxt.js
 subtitle: Le client graphql est roi.
 lang: fr
-slug: "nuxt-graphql-static"
+permalink: "nuxt-graphql-static"
 createdAt: "2022-06-08T14:24:06.000Z"
 updatedAt: "2022-09-08T13:43:33.000Z"
 excerpt: Quand le module gql le plus utilisé ne fonctionne pas…
@@ -131,7 +131,7 @@ export default {
     const locale = app.i18n.localeProperties.iso
     const data = await $graphql.default.request(articleQuery, {
       code: locale,
-      slug: params.slug,
+      permalink: params.slug,
     })
     return { data }
   },

src/content/fragments/fr/super-cookies.mdx

@@ -2,7 +2,7 @@
 title: Les meilleurs cookies
 subtitle: Des gâteaux sans consentement.
 lang: fr
-slug: "super-cookies"
+permalink: "super-cookies"
 createdAt: "2022-06-08T14:24:06.000Z"
 excerpt: C'est vraiment une recette hein, pas une blague sur les fichiers temporaires.
 tags: ["cuisine"]

src/content/fragments/fr/toulouse-fun.md

@@ -3,7 +3,7 @@ title: Toulouse yourself
 subtitle: En cours de traduction.
 lang: fr
 draft: true
-slug: "toulouse-fun"
+permalink: "toulouse-fun"
 createdAt: "2022-06-22T15:34:45.000Z"
 excerpt: En cours de traduction.
 tags: ["lifestyle"]

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

@@ -3,7 +3,7 @@ title: Liens visités et indication visuelle
 subtitle: Comment différencier les liens déjà cliqués
 lang: fr
 draft: false
-slug: "visited-links"
+permalink: "visited-links"
 excerpt: Petit hack CSS
 tags: ["Front-end"]
 type: snippets

src/content/references/en/3w.md

@@ -3,7 +3,7 @@ title: 3w
 subtitle: I wrote the doc!
 url: https://3-w.fr
 lang: en
-slug: "3w"
+permalink: "3w"
 excerpt: Développement web et compagnie.
 tags: ["Front-end", "docs"]
 createdAt: "2022-10-19T18:02:00.000Z"

src/content/references/en/natureo.md

@@ -3,7 +3,7 @@ title: Nature en Occitanie
 subtitle: Sobriety is only natural.
 url: https://www.natureo.org/
 lang: en
-slug: "natureo"
+permalink: "natureo"
 excerpt: Développement web et compagnie.
 tags: ["Front-end", "accessibility", "sobriety", "CMS"]
 createdAt: "2023-04-19T18:02:00.000Z"

src/content/references/en/parole-expression.md

@@ -3,7 +3,7 @@ title: Parole Expression
 subtitle: A new website for the association.
 url: https://www.paroleexpression.fr/
 lang: en
-slug: "parole-expression"
+permalink: "parole-expression"
 excerpt: Développement web et compagnie.
 tags: ["Front-end", "sobriety", "CMS"]
 createdAt: "2022-04-19T17:11:00.000Z"

src/content/references/en/rose-primaire.md

@@ -3,7 +3,7 @@ title: Rose Primaire
 subtitle: An agency we love.
 url: https://roseprimaire.com/
 lang: en
-slug: "rose-primaire"
+permalink: "rose-primaire"
 excerpt: Web dev and other things.
 tags: ["Front-end", "accessibility", "sobriety", "CMS"]
 createdAt: "2023-04-19T17:11:00.000Z"

src/content/references/fr/3w.md

@@ -3,7 +3,7 @@ title: 3w
 subtitle: J'ai fait de la doc!
 url: https://3-w.fr
 lang: fr
-slug: "3w"
+permalink: "3w"
 excerpt: Développement web et compagnie.
 tags: ["Front-end", "documentation"]
 createdAt: "2022-10-19T18:02:00.000Z"

src/content/references/fr/natureo.md

@@ -3,7 +3,7 @@ title: Nature en Occitanie
 subtitle: La sobriété au naturel.
 url: https://www.natureo.org/
 lang: fr
-slug: "natureo"
+permalink: "natureo"
 excerpt: Développement web et compagnie.
 tags: ["Front-end", "accessibilité", "éco-conception", "CMS"]
 createdAt: "2023-04-19T18:02:00.000Z"

src/content/references/fr/parole-expression.md

@@ -3,7 +3,7 @@ title: Parole Expression
 subtitle: Un nouveau site pour l'association.
 url: https://www.paroleexpression.fr/
 lang: fr
-slug: parole-expression
+permalink: parole-expression
 excerpt: Développement web et compagnie.
 tags: ["Front-end", "éco-conception", "CMS"]
 createdAt: "2022-04-19T17:11:00.000Z"

src/content/references/fr/rose-primaire.md

@@ -3,7 +3,7 @@ title: Rose Primaire
 subtitle: Une agence comme on l'aime.
 url: https://roseprimaire.com/
 lang: fr
-slug: "rose-primaire"
+permalink: "rose-primaire"
 excerpt: Développement web et compagnie.
 tags: ["Front-end", "accessibilité", "éco-conception", "CMS"]
 createdAt: "2023-04-19T17:11:00.000Z"

src/data/HP/en/01-offre.md

@@ -2,8 +2,6 @@
 type: section
 id: offre
 lang: en
-slug:
-createdAt:
 image: /assets/images/home/offre-1.1.svg
 order: 1
 quickTitle: My offers

src/data/HP/en/02-methodo.md

@@ -2,8 +2,6 @@
 type: section
 id: methodology
 lang: en
-slug:
-createdAt:
 image: /assets/images/home/methodo.svg
 order: 2
 quickTitle: My methodology

src/data/HP/en/03-about.md

@@ -2,8 +2,6 @@
 type: section
 id: about
 lang: en
-slug:
-createdAt:
 image: /assets/images/home/about.svg
 order: 3
 quickTitle: Me

src/data/HP/fr/01.1-offre.md

@@ -16,4 +16,4 @@ Cette offre est destinée à un public souhaitant **se doter d'un site web**, sa
 
 L'objectif principal de cette offre étant d'**établir une présence en ligne** pour le client. Que cette dernière ait un but informatif et/ou éditorial.
 
-<a href="/offres/web-classique" class="btn">L'offre classique en détails</a>
+<!-- <a href="/offres/web-classique" class="btn">L'offre classique en détails</a> -->

src/data/HP/fr/01.2-offre.md

@@ -14,4 +14,4 @@ Lorsque le projet le nécessite, je fais appel à des partenaires talentueux par
 - [Rose Primaire](https://roseprimaire.com/) pour le conseil et l'accompagnement du projet ;
 - [Sylvain Plantier](https://jedessinebien.com/) et/ou [Benoît Etchevery](http://ben-etche.com/) pour l'illustration et la direction artistique.
 
-<a href="/offres/accessibilite" class="btn">L'offre accessibilité en détails</a>
+<!-- <a href="/offres/accessibilite" class="btn">L'offre accessibilité en détails</a> -->

src/layouts/BaseLayout.astro

@@ -1,27 +1,18 @@
 ---
-import { t, astroI18n } from "astro-i18n";
+import { astroI18n } from "astro-i18n";
 astroI18n.init(Astro);
 
 import "../styles/style.css";
 
+import Head from "../components/Head.astro";
 import Header from "../components/Header.astro";
 import Footer from "../components/Footer.astro";
 
-const { pageTitle, titleColor } = Astro.props;
+const { pageTitle } = Astro.props;
 ---
 
 <html lang={astroI18n.langCode} dir="ltr">
-	<head>
+	<Head pageTitle={pageTitle} />
-		<meta charset="utf-8" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>{pageTitle} - Nicolas Arduin</title>
-		<meta name="description" content={t("seo.meta.description")} />
-		<meta name="robots" content="index,follow." />
-		<meta name="author" content="Nicolas Arduin" />
-		<meta name="subject" content="Développement de sites web, accessibilité." />
-	</head>
 	<body>
 		<div class="wrapper">
 			<Header />

src/pages/articles/[slug].astro

@@ -11,7 +11,7 @@ export const getStaticPaths = createStaticPaths(async ({ langCode }) => {
 		return data.lang === langCode;
 	});
 	return articles.map((article) => ({
-		params: { slug: article.slug },
+		params: { slug: article.data.permalink },
 		props: { article },
 	}));
 }, import.meta.url);

src/pages/en/rss.xml.js

@@ -26,7 +26,7 @@ export async function get(context) {
 			lang: post.data.lang,
 			// Compute RSS link from post `slug`
 			// This example assumes all posts are rendered as `/blog/[slug]` routes
-			link: `/en/${post.data.type}/${post.slug}/`,
+			link: `/en/${post.data.type}/${post.data.permalink}/`,
 		})),
 		// (optional) inject custom xml
 		customData: `<language>en-us</language>`,

src/pages/fragments/[slug].astro

@@ -11,7 +11,7 @@ export const getStaticPaths = createStaticPaths(async ({ langCode }) => {
 		return data.lang === langCode;
 	});
 	return snippets.map((snippet) => ({
-		params: { slug: snippet.slug },
+		params: { slug: snippet.data.permalink },
 		props: { snippet },
 	}));
 }, import.meta.url);

src/pages/index.astro

@@ -3,13 +3,10 @@
 import { l, t, astroI18n } from "astro-i18n";
 astroI18n.init(Astro);
 
-import { getEntry } from "astro:content";
-
 // import stuff
 import BaseLayout from "../layouts/BaseLayout.astro";
 import QuickAccessCard from "../components/QuickAccessCard.astro";
 import ListCards from "../components/ListCards.astro";
-import CardEditorial from "../components/CardEditorial.astro";
 
 const pageTitle = t("accueil");
 
@@ -73,7 +70,7 @@ const localizedReferences = await getCollection("references", ({ data }) => {
 							<div class="section__reference">
 								<ListCards
 									list={localizedReferences.filter((ref) => {
-										return ref.slug === section.frontmatter.reference;
+										return ref.data.permalink === section.frontmatter.reference;
 									})}
 									routeName={t("references.slug")}
 								/>

src/pages/rss.xml.js

@@ -26,7 +26,7 @@ export async function get(context) {
 			lang: post.data.lang,
 			// Compute RSS link from post `slug`
 			// This example assumes all posts are rendered as `/blog/[slug]` routes
-			link: `/${post.data.type}/${post.slug}/`,
+			link: `/${post.data.type}/${post.data.permalink}/`,
 		})),
 		// (optional) inject custom xml
 		customData: `<language>fr-fr</language>`,

src/styles/global/fonts.css

@@ -19,13 +19,6 @@
 	font-style: normal;
 	font-display: swap;
 }
-@font-face {
-	font-family: "recoleta";
-	src: url("../../fonts/recoleta/Recoleta-SemiBold.woff2") format("woff2");
-	font-weight: 600;
-	font-style: normal;
-	font-display: swap;
-}
 
 /*
 * reduces Cumulative Layout Shift

src/styles/global/global-styles.css

@@ -126,9 +126,6 @@ ol:not([role="list"]) > li + li {
 	color: var(--color-blue);
 	background-color: var(--color-white);
 }
-.btn:visited {
-	color: var(--color-white);
-}
 
 button[disabled] {
 	cursor: not-allowed;
@@ -228,11 +225,3 @@ blockquote code {
 .content pre[class*="language-"] {
 	white-space: pre-wrap;
 }
-
-/* .astro-code .filename {
-	margin: 0.5rem 0;
-	display: block;
-	font-family: var(--font-code);
-	font-size: 1.4rem;
-	text-align: right;
-} */

src/styles/global/reset.css

@@ -123,7 +123,17 @@ a:not([class]) {
 }
 
 /* Make it clear that interactive elements are interactive */
-:where(a[href], area, button, input, label[for], select, summary, textarea, [tabindex]:not([tabindex*="-"])) {
+:where(
+		a[href],
+		area,
+		button,
+		input,
+		label[for],
+		select,
+		summary,
+		textarea,
+		[tabindex]:not([tabindex*="-"])
+	) {
 	cursor: pointer;
 	touch-action: manipulation;
 }
@@ -145,11 +155,17 @@ a:not([class]) {
 	}
 }
 :where(:not(:active)):focus-visible {
-	outline-offset: 5px;
+	outline-offset: 2px;
 }
 
 /* Make sure users can't select button text */
-:where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"]),
+:where(
+		button,
+		button[type],
+		input[type="button"],
+		input[type="submit"],
+		input[type="reset"]
+	),
 :where(input[type="file"])::-webkit-file-upload-button,
 :where(input[type="file"])::file-selector-button {
 	-webkit-tap-highlight-color: transparent;
@@ -159,7 +175,13 @@ a:not([class]) {
 }
 
 /* Disabled cursor for disabled buttons */
-:where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"])[disabled] {
+:where(
+		button,
+		button[type],
+		input[type="button"],
+		input[type="submit"],
+		input[type="reset"]
+	)[disabled] {
 	cursor: not-allowed;
 }
 

src/styles/vendor/one-dark-pro.css

@@ -1,5 +1,6 @@
 code[class*="language-"],
-pre[class*="language-"] {
+pre[class*="language-"],
+:not(pre) > code {
 	color: #abb2bf;
 	background: none;
 	font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
@@ -33,10 +34,13 @@ pre[class*="language-"] {
 pre[class*="language-"] {
 	background: #282c34;
 }
-:not(pre) > code[class*="language-"] {
+:not(pre) > code[class*="language-"],
-	padding: 0.1em;
+:not(pre) > code {
-	border-radius: 0.3em;
+	padding: 0.2em;
 	white-space: normal;
+	color: var(--color-dark);
+	border-radius: 0.3em;
+	background-color: var(--color-light-grey);
 }
 pre[class*="language-"]::selection,
 pre[class*="language-"] ::selection,