offres layout and starting page

2023-07-20 15:33:27 +02:00
71 changed files with 1274 additions and 1674 deletions
--- a/.astro/types.d.ts
+++ b/.astro/types.d.ts
@ -20,14 +20,26 @@ declare module 'astro:content' {

 declare module 'astro:content' {
 	export { z } from 'astro/zod';
+	export type CollectionEntry<C extends keyof AnyEntryMap> = AnyEntryMap[C][keyof AnyEntryMap[C]];

-	type Flatten<T> = T extends { [K: string]: infer U } ? U : never;
-
-	export type CollectionKey = keyof AnyEntryMap;
-	export type CollectionEntry<C extends CollectionKey> = Flatten<AnyEntryMap[C]>;
-
-	export type ContentCollectionKey = keyof ContentEntryMap;
-	export type DataCollectionKey = keyof DataEntryMap;
+	// TODO: Remove this when having this fallback is no longer relevant. 2.3? 3.0? - erika, 2023-04-04
+	/**
+	 * @deprecated
+	 * `astro:content` no longer provide `image()`.
+	 *
+	 * Please use it through `schema`, like such:
+	 * ```ts
+	 * import { defineCollection, z } from "astro:content";
+	 *
+	 * defineCollection({
+	 *   schema: ({ image }) =>
+	 *     z.object({
+	 *       image: image(),
+	 *     }),
+	 * });
+	 * ```
+	 */
+	export const image: never;

 	// This needs to be in sync with ImageMetadata
 	export type ImageFunction = () => import('astro/zod').ZodObject<{
@ -42,17 +54,19 @@ declare module 'astro:content' {
 				import('astro/zod').ZodLiteral<'tiff'>,
 				import('astro/zod').ZodLiteral<'webp'>,
 				import('astro/zod').ZodLiteral<'gif'>,
-				import('astro/zod').ZodLiteral<'svg'>,
-				import('astro/zod').ZodLiteral<'avif'>,
+				import('astro/zod').ZodLiteral<'svg'>
 			]
 		>;
 	}>;

 	type BaseSchemaWithoutEffects =
 		| import('astro/zod').AnyZodObject
-		| import('astro/zod').ZodUnion<[BaseSchemaWithoutEffects, ...BaseSchemaWithoutEffects[]]>
+		| import('astro/zod').ZodUnion<import('astro/zod').AnyZodObject[]>
 		| import('astro/zod').ZodDiscriminatedUnion<string, import('astro/zod').AnyZodObject[]>
-		| import('astro/zod').ZodIntersection<BaseSchemaWithoutEffects, BaseSchemaWithoutEffects>;
+		| import('astro/zod').ZodIntersection<
+				import('astro/zod').AnyZodObject,
+				import('astro/zod').AnyZodObject
+		  >;

 	type BaseSchema =
 		| BaseSchemaWithoutEffects
@ -83,7 +97,7 @@ declare module 'astro:content' {

 	export function getEntryBySlug<
 		C extends keyof ContentEntryMap,
-		E extends ValidContentEntrySlug<C> | (string & {}),
+		E extends ValidContentEntrySlug<C> | (string & {})
 	>(
 		collection: C,
 		// Note that this has to accept a regular string too, for SSR
@ -108,7 +122,7 @@ declare module 'astro:content' {

 	export function getEntry<
 		C extends keyof ContentEntryMap,
-		E extends ValidContentEntrySlug<C> | (string & {}),
+		E extends ValidContentEntrySlug<C> | (string & {})
 	>(entry: {
 		collection: C;
 		slug: E;
@ -117,7 +131,7 @@ declare module 'astro:content' {
 		: Promise<CollectionEntry<C> | undefined>;
 	export function getEntry<
 		C extends keyof DataEntryMap,
-		E extends keyof DataEntryMap[C] | (string & {}),
+		E extends keyof DataEntryMap[C] | (string & {})
 	>(entry: {
 		collection: C;
 		id: E;
@ -126,7 +140,7 @@ declare module 'astro:content' {
 		: Promise<CollectionEntry<C> | undefined>;
 	export function getEntry<
 		C extends keyof ContentEntryMap,
-		E extends ValidContentEntrySlug<C> | (string & {}),
+		E extends ValidContentEntrySlug<C> | (string & {})
 	>(
 		collection: C,
 		slug: E
@ -135,7 +149,7 @@ declare module 'astro:content' {
 		: Promise<CollectionEntry<C> | undefined>;
 	export function getEntry<
 		C extends keyof DataEntryMap,
-		E extends keyof DataEntryMap[C] | (string & {}),
+		E extends keyof DataEntryMap[C] | (string & {})
 	>(
 		collection: C,
 		id: E
@ -184,293 +198,7 @@ declare module 'astro:content' {
 	>;

 	type ContentEntryMap = {
-		"articles": {
-"en/2022.md": {
-	id: "en/2022.md";
-  slug: "en/2022";
-  body: string;
-  collection: "articles";
-  data: InferEntrySchema<"articles">
-} & { render(): Render[".md"] };
-"en/2023.md": {
-	id: "en/2023.md";
-  slug: "en/2023";
-  body: string;
-  collection: "articles";
-  data: InferEntrySchema<"articles">
-} & { render(): Render[".md"] };
-"en/after-effects-expressions.mdx": {
-	id: "en/after-effects-expressions.mdx";
-  slug: "en/after-effects-expressions";
-  body: string;
-  collection: "articles";
-  data: InferEntrySchema<"articles">
-} & { render(): Render[".mdx"] };
-"en/faq.md": {
-	id: "en/faq.md";
-  slug: "en/faq";
-  body: string;
-  collection: "articles";
-  data: InferEntrySchema<"articles">
-} & { render(): Render[".md"] };
-"en/gratuiste.md": {
-	id: "en/gratuiste.md";
-  slug: "en/gratuiste";
-  body: string;
-  collection: "articles";
-  data: InferEntrySchema<"articles">
-} & { render(): Render[".md"] };
-"en/sci-hub-blocage.mdx": {
-	id: "en/sci-hub-blocage.mdx";
-  slug: "en/sci-hub-blocage";
-  body: string;
-  collection: "articles";
-  data: InferEntrySchema<"articles">
-} & { 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: InferEntrySchema<"articles">
-} & { render(): Render[".mdx"] };
-"en/video-compression.mdx": {
-	id: "en/video-compression.mdx";
-  slug: "en/video-compression";
-  body: string;
-  collection: "articles";
-  data: InferEntrySchema<"articles">
-} & { render(): Render[".mdx"] };
-"fr/2022.md": {
-	id: "fr/2022.md";
-  slug: "fr/2022";
-  body: string;
-  collection: "articles";
-  data: InferEntrySchema<"articles">
-} & { render(): Render[".md"] };
-"fr/2023.md": {
-	id: "fr/2023.md";
-  slug: "fr/2023";
-  body: string;
-  collection: "articles";
-  data: InferEntrySchema<"articles">
-} & { render(): Render[".md"] };
-"fr/after-effects-expressions.md": {
-	id: "fr/after-effects-expressions.md";
-  slug: "fr/after-effects-expressions";
-  body: string;
-  collection: "articles";
-  data: InferEntrySchema<"articles">
-} & { render(): Render[".md"] };
-"fr/faq.md": {
-	id: "fr/faq.md";
-  slug: "fr/faq";
-  body: string;
-  collection: "articles";
-  data: InferEntrySchema<"articles">
-} & { render(): Render[".md"] };
-"fr/gratuiste.md": {
-	id: "fr/gratuiste.md";
-  slug: "fr/gratuiste";
-  body: string;
-  collection: "articles";
-  data: InferEntrySchema<"articles">
-} & { render(): Render[".md"] };
-"fr/sci-hub-blocage.mdx": {
-	id: "fr/sci-hub-blocage.mdx";
-  slug: "fr/sci-hub-blocage";
-  body: string;
-  collection: "articles";
-  data: InferEntrySchema<"articles">
-} & { 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: InferEntrySchema<"articles">
-} & { render(): Render[".mdx"] };
-"fr/video-compression.md": {
-	id: "fr/video-compression.md";
-  slug: "fr/video-compression";
-  body: string;
-  collection: "articles";
-  data: InferEntrySchema<"articles">
-} & { 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: InferEntrySchema<"fragments">
-} & { render(): Render[".md"] };
-"en/array-vs-array.md": {
-	id: "en/array-vs-array.md";
-  slug: "en/array-vs-array";
-  body: string;
-  collection: "fragments";
-  data: InferEntrySchema<"fragments">
-} & { render(): Render[".md"] };
-"en/buttons.md": {
-	id: "en/buttons.md";
-  slug: "en/buttons";
-  body: string;
-  collection: "fragments";
-  data: InferEntrySchema<"fragments">
-} & { render(): Render[".md"] };
-"en/image-full.mdx": {
-	id: "en/image-full.mdx";
-  slug: "en/image-full";
-  body: string;
-  collection: "fragments";
-  data: InferEntrySchema<"fragments">
-} & { render(): Render[".mdx"] };
-"en/nuxt-graphql-static.md": {
-	id: "en/nuxt-graphql-static.md";
-  slug: "en/nuxt-graphql-static";
-  body: string;
-  collection: "fragments";
-  data: InferEntrySchema<"fragments">
-} & { render(): Render[".md"] };
-"en/super-cookies.mdx": {
-	id: "en/super-cookies.mdx";
-  slug: "en/super-cookies";
-  body: string;
-  collection: "fragments";
-  data: InferEntrySchema<"fragments">
-} & { render(): Render[".mdx"] };
-"en/toulouse-fun.md": {
-	id: "en/toulouse-fun.md";
-  slug: "en/toulouse-fun";
-  body: string;
-  collection: "fragments";
-  data: InferEntrySchema<"fragments">
-} & { render(): Render[".md"] };
-"en/visited-links.md": {
-	id: "en/visited-links.md";
-  slug: "en/visited-links";
-  body: string;
-  collection: "fragments";
-  data: InferEntrySchema<"fragments">
-} & { 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: InferEntrySchema<"fragments">
-} & { render(): Render[".md"] };
-"fr/array-vs-array.md": {
-	id: "fr/array-vs-array.md";
-  slug: "fr/array-vs-array";
-  body: string;
-  collection: "fragments";
-  data: InferEntrySchema<"fragments">
-} & { render(): Render[".md"] };
-"fr/buttons.mdx": {
-	id: "fr/buttons.mdx";
-  slug: "fr/buttons";
-  body: string;
-  collection: "fragments";
-  data: InferEntrySchema<"fragments">
-} & { render(): Render[".mdx"] };
-"fr/image-full.mdx": {
-	id: "fr/image-full.mdx";
-  slug: "fr/image-full";
-  body: string;
-  collection: "fragments";
-  data: InferEntrySchema<"fragments">
-} & { render(): Render[".mdx"] };
-"fr/nuxt-graphql-static.md": {
-	id: "fr/nuxt-graphql-static.md";
-  slug: "fr/nuxt-graphql-static";
-  body: string;
-  collection: "fragments";
-  data: InferEntrySchema<"fragments">
-} & { render(): Render[".md"] };
-"fr/super-cookies.mdx": {
-	id: "fr/super-cookies.mdx";
-  slug: "fr/super-cookies";
-  body: string;
-  collection: "fragments";
-  data: InferEntrySchema<"fragments">
-} & { render(): Render[".mdx"] };
-"fr/toulouse-fun.md": {
-	id: "fr/toulouse-fun.md";
-  slug: "fr/toulouse-fun";
-  body: string;
-  collection: "fragments";
-  data: InferEntrySchema<"fragments">
-} & { render(): Render[".md"] };
-"fr/visited-links.md": {
-	id: "fr/visited-links.md";
-  slug: "fr/visited-links";
-  body: string;
-  collection: "fragments";
-  data: InferEntrySchema<"fragments">
-} & { render(): Render[".md"] };
-};
-"references": {
-"en/3w.md": {
-	id: "en/3w.md";
-  slug: "en/3w";
-  body: string;
-  collection: "references";
-  data: InferEntrySchema<"references">
-} & { render(): Render[".md"] };
-"en/natureo.md": {
-	id: "en/natureo.md";
-  slug: "en/natureo";
-  body: string;
-  collection: "references";
-  data: InferEntrySchema<"references">
-} & { render(): Render[".md"] };
-"en/parole-expression.md": {
-	id: "en/parole-expression.md";
-  slug: "en/parole-expression";
-  body: string;
-  collection: "references";
-  data: InferEntrySchema<"references">
-} & { render(): Render[".md"] };
-"en/rose-primaire.md": {
-	id: "en/rose-primaire.md";
-  slug: "en/rose-primaire";
-  body: string;
-  collection: "references";
-  data: InferEntrySchema<"references">
-} & { render(): Render[".md"] };
-"fr/3w.md": {
-	id: "fr/3w.md";
-  slug: "fr/3w";
-  body: string;
-  collection: "references";
-  data: InferEntrySchema<"references">
-} & { render(): Render[".md"] };
-"fr/natureo.md": {
-	id: "fr/natureo.md";
-  slug: "fr/natureo";
-  body: string;
-  collection: "references";
-  data: InferEntrySchema<"references">
-} & { render(): Render[".md"] };
-"fr/parole-expression.md": {
-	id: "fr/parole-expression.md";
-  slug: "fr/parole-expression";
-  body: string;
-  collection: "references";
-  data: InferEntrySchema<"references">
-} & { render(): Render[".md"] };
-"fr/rose-primaire.md": {
-	id: "fr/rose-primaire.md";
-  slug: "fr/rose-primaire";
-  body: string;
-  collection: "references";
-  data: InferEntrySchema<"references">
-} & { render(): Render[".md"] };
-};
-
+		
 	};

 	type DataEntryMap = {
@ -479,5 +207,5 @@ declare module 'astro:content' {

 	type AnyEntryMap = ContentEntryMap & DataEntryMap;

-	type ContentConfig = typeof import("../src/content/config");
+	type ContentConfig = never;
 }
--- a/astro.config.mjs
+++ b/astro.config.mjs
@ -4,21 +4,19 @@ import { defineConfig } from "astro/config";
 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",
-	image: {
-		domains: ["assets.nardu.in"],
-		remotePatterns: [{ protocol: "https" }],
-	},
 	markdown: {
 		syntaxHighlight: "prism",
 	},
 	integrations: [
 		i18n(),
+		image(),
 		mdx(),
 		sitemap({
 			i18n: {
--- a/package.json
+++ b/package.json
@ -13,12 +13,12 @@
 		"i18n:sync": "astro-i18n sync"
 	},
 	"dependencies": {
-		"@astrojs/mdx": "^1.1.0",
-		"@astrojs/rss": "^3.0.0",
-		"@astrojs/sitemap": "^3.0.0",
-		"astro": "3.1.1",
-		"astro-i18n": "1.8.1",
-		"sharp": "^0.32.6"
+		"@astrojs/image": "0.17.0",
+		"@astrojs/mdx": "^0.19.7",
+		"@astrojs/rss": "^2.4.3",
+		"@astrojs/sitemap": "^1.3.3",
+		"astro": "2.6.3",
+		"astro-i18n": "1.8.1"
 	},
 	"devDependencies": {
 		"autoprefixer": "^10.4.13",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/components/AstroImage.astro
+++ b/src/components/AstroImage.astro
@ -1,44 +1,15 @@
 ---
-import { Image, getImage } from "astro:assets";
+import { Picture } from "@astrojs/image/components";

 const { src, alt, width, height, ...attrs } = Astro.props;
-
-// if h/w attributes are declared, use them. If not, use from the source file
-const imgHeight = height ? height : src.height;
-const imgWidth = width ? width : src.width;
-
-// compute avif and webp format in order to use inside a <picture> element
-const imgAvif = await getImage({
-	src: src,
-	format: "avif",
-	width: Number(imgWidth),
-	height: Number(imgHeight),
-});
-const imgWebp = await getImage({
-	src: src,
-	format: "webp",
-	width: Number(imgWidth),
-	height: Number(imgHeight),
-});
 ---

-<picture>
-	<source
-		srcset={imgAvif.src}
-		sizes={`(max-inline-size: ${imgWidth}px) 100vw, ${imgHeight}px`}
-		type="image/avif"
-	/>
-	<source
-		srcset={imgWebp.src}
-		sizes={`(max-inline-size: ${imgWidth}px) 100vw, ${imgHeight}px`}
-		type="image/webp"
-	/>
-	<Image
-		src={src}
-		width={Number(imgWidth)}
-		height={Number(imgHeight)}
-		format="jpg"
-		alt={alt ? alt : ""}
-		{...attrs}
-	/>
-</picture>
+<Picture
+	src={src}
+	widths={[320, 640, 768]}
+	aspectRatio={`${width}:${height}`}
+	sizes={`(max-inline-size: ${width}px) 100vw, ${width}px`}
+	formats={["avif", "webp"]}
+	alt={alt ? alt : ""}
+	{...attrs}
+/>
--- a/src/components/CardEditorial.astro
+++ b/src/components/CardEditorial.astro
@ -9,33 +9,35 @@ const isReference = routeName === t("references.slug");
 ---

 <div class:list={["card", { "card--link": !isReference }]}>
-	<h3>
+	<div>
+		<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 ? (
-				<a
-					class="clean-link card__link"
-					href={`${l(`/${routeName}`)}/${item.data.permalink}`}
-				>
-					{item.data.title}
+			isReference && (
+				<a href={item.data.url} rel="noopener noreferer">
+					{t("references.cta")}
+					<span class="sr-only"> {item.data.title}</span>
 				</a>
-			) : (
-				<span>{item.data.title}</span>
 			)
 		}
-	</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>
 </div>

-<style define:vars={{ permalink: item.data.permalink }}>
+<style scoped>
 	.card {
 		padding: var(--space-s-m) var(--space-xs-s);
 		position: relative;
@ -123,9 +125,6 @@ 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;
 		}
--- a/src/components/EditorialContent.astro
+++ b/src/components/EditorialContent.astro
@ -1,17 +1,19 @@
 ---
-// 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 { html, headings } = await renderContent(Astro, content);
+// const { Content, headings } = await content.render();
+const { html, headings } = await renderContent(Astro, content);

 const toc = headings.map((heading) => {
 	return heading;
 });

-import "../styles/vendor/one-dark-pro.css";
+if (content.data.code) {
+	import "../styles/vendor/one-dark-pro.css";
+}
 ---

 <div class="sidebar region">
@ -20,17 +22,13 @@ import "../styles/vendor/one-dark-pro.css";
 		<h1>{content.data.title}</h1>
 		<p class="h3">{content.data.subtitle}</p>
 		<MetaDate item={content.data} />
-		<!-- <div class="flow content" set:html={html}> -->
-		<Content />
+		<div class="flow content" set:html={html}>
+			<!-- <Content /> -->
+		</div>
 	</article>
 </div>

-<style define:vars={{ permalink: content.data.permalink }}>
-	@media (prefers-reduced-motion: no-preference) {
-		article {
-			view-transition-name: var(--permalink);
-		}
-	}
+<style>
 	.sidebar {
 		--gutter: var(--space-xs-m);
 	}
--- a/src/components/Head.astro
+++ b/src/components/Head.astro
@ -1,17 +0,0 @@
---
-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>
--- a/src/components/QuickAccessCard.astro
+++ b/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-white);
+		background-color: var(--color-light-blue);
 		transform: translateY(0);
 	}
 	.card:focus-within {
--- a/src/content/articles/en/2022.md
+++ b/src/content/articles/en/2022.md
@ -2,7 +2,7 @@
 title: Nico v2.0
 subtitle: 2022 update of many things.
 lang: en
-permalink: "2022"
+slug: "2022"
 excerpt: Changes in my services, the website and myself.
 tags: ["Freelance"]
 type: articles
--- a/src/content/articles/en/2023.md
+++ b/src/content/articles/en/2023.md
@ -2,7 +2,7 @@
 title: Nico v2.5
 subtitle: Update 2023.
 lang: en
-permalink: "2023"
+slug: "2023"
 excerpt: New changes.
 tags: ["Freelance"]
 type: articles
--- a/src/content/articles/en/after-effects-expressions.mdx
+++ b/src/content/articles/en/after-effects-expressions.mdx
@ -2,7 +2,7 @@
 title: After Effects Expressions
 subtitle: Animation on steroïds.
 lang: en
-permalink: "after-effects-expressions"
+slug: "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
@ -11,6 +11,9 @@ code: true
 ---

 import AstroImage from "../../../components/AstroImage.astro";
+export const basicExpression =
+	"https://assets.nardu.in/basic_expression_d81b12f1ac.jpeg";
+export const shortcut = "https://assets.nardu.in/shortcut_39cc19d383.jpeg";

 ## An ever lasting battle

@ -22,7 +25,7 @@ So the last time I had to do a complex animation, **I took the damn time!**
 Everyone uses expressions whether they know it or not. Most of the time it's a rather transparent process for the animator. For example: when parenting a property to another one, After Effects creates an expression for us.

 <AstroImage
-	src="https://assets.nardu.in/basic_expression_d81b12f1ac.jpeg"
+	src={basicExpression}
 	width="728"
 	height="80"
 	alt="Parenting the position of the form to a null creates an expression."
@ -33,7 +36,7 @@ Over the last updates, Adobe has made an effort to make expressions more accessi
 Those custom functions can be called through a menu once you enabled the expressions on a property. It offers organized shortcut and proper syntax to all of AE native functions and a bunch of JavaScript standard ones.

 <AstroImage
-	src="https://assets.nardu.in/shortcut_39cc19d383.jpeg"
+	src={shortcut}
 	width="728"
 	height="322"
 	alt="Alt + Click the stopwatch to access the shortcuts."
--- a/src/content/articles/en/faq.md
+++ b/src/content/articles/en/faq.md
@ -2,7 +2,7 @@
 title: Accessibility and sobriety
 subtitle: Translation in progress, stay tuned ;)
 lang: en
-permalink: "faq"
+slug: "faq"
 draft: true
 excerpt: Why, how et and especially what.
 tags: ["Freelance"]
--- a/src/content/articles/en/gratuiste.md
+++ b/src/content/articles/en/gratuiste.md
@ -2,7 +2,7 @@
 title: Gratuiste
 subtitle: Translation in progress, stay tuned ;)
 lang: en
-permalink: "gratuiste"
+slug: "gratuiste"
 draft: true
 excerpt: Translation in progress, stay tuned ;)
 tags: ["Design", "Freelance"]
--- a/src/content/articles/en/sci-hub-blocage.mdx
+++ b/src/content/articles/en/sci-hub-blocage.mdx
@ -2,7 +2,7 @@
 title: "Access blocked Sci-hub"
 subtitle: "The science of sharing."
 lang: en
-permalink: "sci-hub-unblock"
+slug: "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"]
@ -12,6 +12,13 @@ updatedAt: "2022-12-27T12:08:00.000Z"
 ---

 import AstroImage from "../../../components/AstroImage.astro";
+export const macOs =
+	"https://assets.nardu.in/ef5a4b8e82a046e6a466c73c2fd9e99e.jpg";
+export const windowsSettings = "https://assets.nardu.in/sci-hub-settings.jpg";
+export const windowsNetwork = "https://assets.nardu.in/sci-hub-network.jpg";
+export const windowsAdapter = "https://assets.nardu.in/sci-hub-adapter.jpg";
+export const windowsAdapterSettings =
+	"https://assets.nardu.in/sci-hub-adapter-settings.jpg";

 The current sci-hub address is: <a href="https://sci-hub.se" rel="noreferer noopener">sci-hub.se</a>

@ -46,7 +53,7 @@ Go to:
 From there, you can add DNS servers by clicking the + icon. Click ok and apply the new settings. You might need to restart your computer for the changes to work.

 <AstroImage
-	src="https://assets.nardu.in/ef5a4b8e82a046e6a466c73c2fd9e99e.jpg"
+	src={macOs}
 	width="728"
 	height="1060"
 	alt="MacOS network and DNS settings"
@ -67,28 +74,28 @@ Go to:
 From there, you can add DNS servers. Click save. You might need to restart your computer for the changes to work.

 <AstroImage
-	src="https://assets.nardu.in/sci-hub-settings.jpg"
+	src={windowsSettings}
 	width="728"
 	height="319"
 	alt="Windows system settings"
 />

 <AstroImage
-	src="https://assets.nardu.in/sci-hub-network.jpg"
+	src={windowsNetwork}
 	width="728"
 	height="803"
 	alt="Windows network settings"
 />

 <AstroImage
-	src="https://assets.nardu.in/sci-hub-adapter.jpg"
+	src={windowsAdapter}
 	width="728"
 	height="327"
 	alt="Windows network connections settings"
 />

 <AstroImage
-	src="https://assets.nardu.in/sci-hub-adapter-settings.jpg"
+	src={windowsAdapterSettings}
 	width="728"
 	height="434"
 	alt="Windows network adapter settings"
--- a/src/content/articles/en/the-day-I-jamd.mdx
+++ b/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
-permalink: "the-day-I-jamd"
+slug: "the-day-I-jamd"
 excerpt: Ooh, yeah! All right! We’re jammin’
 tags: ["Dev", "Jamstack"]
 type: articles
@ -11,6 +11,8 @@ updatedAt: "2022-12-27T15:40:06.000Z"
 ---

 import AstroImage from "../../../components/AstroImage.astro";
+export const wordpress = "https://assets.nardu.in/wordpress_8ee6f54b98.jpeg";
+export const strapi11ty = "https://assets.nardu.in/static_2c0d9f1eb8.jpeg";

 ## The not so easy choice

@ -31,7 +33,7 @@ Boy did they exceed my expectations! With almost no optimization on the static s
 ### wordpress

 <AstroImage
-	src="https://assets.nardu.in/wordpress_8ee6f54b98.jpeg"
+	src={wordpress}
 	width="728"
 	height="412"
 	alt="Performance score of 53/100 on Wordpress."
@ -42,7 +44,7 @@ Despite a lot of efforts I could not do better. I’m no expert in caching, do n
 ### 11ty + strapi

 <AstroImage
-	src="https://assets.nardu.in/static_2c0d9f1eb8.jpeg"
+	src={strapi11ty}
 	width="728"
 	height="412"
 	alt="Performance score of 97/100 on jamstack."
--- a/src/content/articles/en/video-compression.mdx
+++ b/src/content/articles/en/video-compression.mdx
@ -2,7 +2,7 @@
 title: Video compression
 subtitle: Encode like you mean it.
 lang: en
-permalink: "video-compression"
+slug: "video-compression"
 excerpt: How to gain precious weight when encoding videos.
 tags: ["Design"]
 type: articles
@ -11,6 +11,11 @@ updatedAt: "2022-06-08T14:24:06.000Z"
 ---

 import AstroImage from "../../../components/AstroImage.astro";
+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.jpg";

 ## Let's play.

@ -26,11 +31,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="https://assets.nardu.in/video-premiere-1.jpeg"
-	width="673"
-	height="800"
-/>
+<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.

@ -51,11 +52,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="https://assets.nardu.in/video-handbrake-1.jpeg"
-	width="728"
-	height="337"
-/>
+<AstroImage src={handbrakeBase} width="728" height="337" alt="" />

 ### Video screen

@ -64,11 +61,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="https://assets.nardu.in/video-handbrake-2.jpeg"
-	width="728"
-	height="337"
-/>
+<AstroImage src={handbrakeVideo} width="728" height="337" alt="" />

 ### Audio screen

@ -79,11 +72,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="https://assets.nardu.in/video-handbrake-3.jpeg"
-	width="728"
-	height="337"
-/>
+<AstroImage src={handbrakeAudio} width="728" height="337" alt="" />

 ### Export!

@ -104,12 +93,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="https://assets.nardu.in/video-handbrake-4.jpg"
-	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.

--- a/src/content/articles/fr/2022.md
+++ b/src/content/articles/fr/2022.md
@ -2,7 +2,7 @@
 title: Nico v2.0
 subtitle: Mise à jour 2022 de plein de trucs.
 lang: fr
-permalink: "2022"
+slug: "2022"
 excerpt: Évolution des services, du site et de moi-même.
 tags: ["Freelance"]
 type: articles
--- a/src/content/articles/fr/2023.md
+++ b/src/content/articles/fr/2023.md
@ -2,7 +2,7 @@
 title: Nico v2.5
 subtitle: Mise à jour 2023.
 lang: fr
-permalink: "2023"
+slug: "2023"
 excerpt: Suite des évolutions.
 tags: ["Freelance"]
 type: articles
--- a/src/content/articles/fr/after-effects-expressions.md
+++ b/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
-permalink: "after-effects-expressions"
+slug: "after-effects-expressions"
 excerpt: En cours de traduction, revenez bientôt ;)
 tags: ["Design"]
 type: articles
--- a/src/content/articles/fr/faq.md
+++ b/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
-permalink: "faq"
+slug: "faq"
 excerpt: Pourquoi, comment et surtout quèsaco.
 tags: ["Freelance"]
 type: articles
--- a/src/content/articles/fr/gratuiste.md
+++ b/src/content/articles/fr/gratuiste.md
@ -2,7 +2,7 @@
 title: "Gratuiste"
 subtitle: "Ou le travail gratuit."
 lang: fr
-permalink: "gratuiste"
+slug: "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
--- a/src/content/articles/fr/sci-hub-blocage.mdx
+++ b/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
-permalink: "sci-hub-blocage"
+slug: "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
@ -11,6 +11,13 @@ updatedAt: "2022-12-27T12:08:00.000Z"
 ---

 import AstroImage from "../../../components/AstroImage.astro";
+export const macOs =
+	"https://assets.nardu.in/ef5a4b8e82a046e6a466c73c2fd9e99e.jpg";
+export const windowsSettings = "https://assets.nardu.in/sci-hub-settings.jpg";
+export const windowsNetwork = "https://assets.nardu.in/sci-hub-network.jpg";
+export const windowsAdapter = "https://assets.nardu.in/sci-hub-adapter.jpg";
+export const windowsAdapterSettings =
+	"https://assets.nardu.in/sci-hub-adapter-settings.jpg";

 L'adresse actuelle de sci-hub est&nbsp;: [sci-hub.se](https://sci-hub.se)

@ -49,7 +56,7 @@ Ouvrez&nbsp;:
 De là, vous pouvez ajouter des serveurs DNS en cliquant sur l'icône +. Cliquez sur ok et appliquez les nouveaux paramètres. Vous devrez peut-être redémarrer votre ordinateur pour que les changements fonctionnent.

 <AstroImage
-	src="https://assets.nardu.in/ef5a4b8e82a046e6a466c73c2fd9e99e.jpg"
+	src={macOs}
 	width="728"
 	height="1060"
 	alt="MacOS réglages réseau et DNS"
@ -68,28 +75,28 @@ Ouvrez&nbsp;:
 1. Utiliser l’adresse de serveur DNS suivante

 <AstroImage
-	src="https://assets.nardu.in/sci-hub-settings.jpg"
+	src={windowsSettings}
 	width="728"
 	height="319"
 	alt="Réglages windows"
 />

 <AstroImage
-	src="https://assets.nardu.in/sci-hub-network.jpg"
+	src={windowsNetwork}
 	width="728"
 	height="803"
 	alt="Windows réglages réseaux"
 />

 <AstroImage
-	src="https://assets.nardu.in/sci-hub-adapter.jpg"
+	src={windowsAdapter}
 	width="728"
 	height="327"
 	alt="Windows régalges connections réseaux"
 />

 <AstroImage
-	src="https://assets.nardu.in/sci-hub-adapter-settings.jpg"
+	src={windowsAdapterSettings}
 	width="728"
 	height="434"
 	alt="Windows options adaptateur réseau"
--- a/src/content/articles/fr/the-day-I-jamd.mdx
+++ b/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
-permalink: "the-day-I-jamd"
+slug: "the-day-I-jamd"
 excerpt: Ooh, yeah! All right! We’re jammin’
 tags: ["Dev", "Jamstack"]
 type: articles
@ -11,6 +11,8 @@ updatedAt: "2022-12-27T15:40:06.000Z"
 ---

 import AstroImage from "../../../components/AstroImage.astro";
+export const wordpress = "https://assets.nardu.in/wordpress_8ee6f54b98.jpeg";
+export const strapi11ty = "https://assets.nardu.in/static_2c0d9f1eb8.jpeg";

 ## La solution de non facilité

@ -31,7 +33,7 @@ J’en suis resté pantois&nbsp;! Quasiment sans optimisation du côté statique
 ### wordpress

 <AstroImage
-	src="https://assets.nardu.in/wordpress_8ee6f54b98.jpeg"
+	src={wordpress}
 	width="728"
 	height="412"
 	alt="Score de performance de 53/100 sur Wordpress."
@ -42,7 +44,7 @@ Malgré beaucoup d’efforts, je n’ai pas pu faire mieux. Je ne suis pas un ex
 ### 11ty + strapi

 <AstroImage
-	src="https://assets.nardu.in/static_2c0d9f1eb8.jpeg"
+	src={strapi11ty}
 	width="728"
 	height="412"
 	alt="Score de performance de 97/100 en Jamstack."
--- a/src/content/articles/fr/video-compression.md
+++ b/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
-permalink: "video-compression"
+slug: "video-compression"
 excerpt: Pas encore traduit
 tags: ["Design"]
 type: articles
--- a/src/content/config.ts
+++ b/src/content/config.ts
@ -7,7 +7,6 @@ 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
@ -26,7 +25,6 @@ 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
@ -44,7 +42,6 @@ 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)),
--- a/src/content/fragments/en/acme-sh-tls-cert.md
+++ b/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
-permalink: "acme-sh-tls-cert"
+slug: "acme-sh-tls-cert"
 createdAt: "2022-06-08T14:24:06.000Z"
 excerpt: Real cert have curves.
 tags: ["security"]
--- a/src/content/fragments/en/array-vs-array.md
+++ b/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
-permalink: "array-vs-array"
+slug: "array-vs-array"
 createdAt: "2022-06-08T14:24:06.000Z"
 excerpt: My peak javascript
 tags: ["nuxt.js"]
--- a/src/content/fragments/en/buttons.md
+++ b/src/content/fragments/en/buttons.md
@ -2,7 +2,7 @@
 title: Buttons hover
 subtitle: Simple, but nice.
 lang: en
-permalink: "buttons"
+slug: "buttons"
 draft: true
 excerpt: Easy to grab and use hover effects.
 tags: ["CSS"]
--- a/src/content/fragments/en/image-full.mdx
+++ b/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
-permalink: "image-full"
+slug: "image-full"
 createdAt: "2020-09-15T09:00:00.000Z"
 updatedAt: "2022-06-08T14:24:06.000Z"
 tags: ["CSS"]
--- a/src/content/fragments/en/nuxt-graphql-static.md
+++ b/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
-permalink: "nuxt-graphql-static"
+slug: "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,
-      permalink: params.slug,
+      slug: params.slug,
    })
    return { data }
  },
--- a/src/content/fragments/en/super-cookies.mdx
+++ b/src/content/fragments/en/super-cookies.mdx
@ -2,7 +2,7 @@
 title: The best cookies
 subtitle: Consentless biscuits.
 lang: en
-permalink: "super-cookies"
+slug: "super-cookies"
 createdAt: "2022-06-08T14:24:06.000Z"
 excerpt: It's a real recipe, not a joke about annoying files.
 tags: ["food"]
@ -10,6 +10,8 @@ type: snippets
 ---

 import AstroImage from "../../../components/AstroImage.astro";
+export const cookies1 = "https://assets.nardu.in/cookies-fig-1.jpg";
+export const cookies2 = "https://assets.nardu.in/cookies-fig-2.jpg";

 ## Vegetalian version

@ -74,14 +76,14 @@ Chocolate can be replaced by anything like nuts, raisins, legos... (don't eat le
 ## Figures

 <AstroImage
-	src="https://assets.nardu.in/cookies-fig-1.jpg"
+	src={cookies1}
 	width="753"
 	height="1248"
 	alt="All ingredients mixed together to form a brown paste."
 />
 <AstroImage
-	src="https://assets.nardu.in/cookies-fig-2.jpg"
+	src={cookies2}
 	width="753"
 	height="1248"
-	alt="The cookies are round and soft after baking."
+	alt="The cookies are rounded and soft after baking."
 />
--- a/src/content/fragments/en/toulouse-fun.md
+++ b/src/content/fragments/en/toulouse-fun.md
@ -2,7 +2,7 @@
 title: Toulouse yourself
 subtitle: Only the bestest
 lang: en
-permalink: "toulouse-fun"
+slug: "toulouse-fun"
 excerpt: Gonna have to trust me on this ¯\_(ツ)_/¯
 tags: ["lifestyle"]
 type: snippets
--- a/src/content/fragments/en/visited-links.md
+++ b/src/content/fragments/en/visited-links.md
@ -1,13 +0,0 @@
---
-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)
--- a/src/content/fragments/fr/acme-sh-tls-cert.md
+++ b/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
-permalink: "acme-sh-tls-cert"
+slug: "acme-sh-tls-cert"
 createdAt: "2022-06-08T14:24:06.000Z"
 excerpt: La sécurité avec des courbes.
 tags: ["sécurité"]
--- a/src/content/fragments/fr/array-vs-array.md
+++ b/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
-permalink: "array-vs-array"
+slug: "array-vs-array"
 createdAt: "2022-06-08T14:24:06.000Z"
 excerpt: En cours de traduction.
 tags: ["nuxt.js"]
--- a/src/content/fragments/fr/buttons.mdx
+++ b/src/content/fragments/fr/buttons.mdx
@ -2,7 +2,7 @@
 title: "Effets de survol de boutons"
 subtitle: "Simples mais efficaces."
 lang: fr
-permalink: "buttons"
+slug: "buttons"
 draft: true
 excerpt: Quelques effets de survol faciles à récupérer et utiliser.
 tags: ["CSS"]
@ -51,7 +51,7 @@ Tous les boutons présents utilisent ces styles comme base en guise de «&nbsp;r
 	background-color: hotpink;
 }
 .btn-icon::before {
-	content: url("./assets/svg/arrow-right-white.svg");
+	content: url("~assets/svg/arrow-right-white.svg");
 	position: absolute;
 	width: 20px;
 	top: 50%;
--- a/src/content/fragments/fr/image-full.mdx
+++ b/src/content/fragments/fr/image-full.mdx
@ -2,7 +2,7 @@
 title: Image pleine largeur
 subtitle: Casser le conteneur.
 lang: fr
-permalink: "image-full"
+slug: "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.
@ -11,16 +11,23 @@ type: fragments
 ---

 import AstroImage from "../../../components/AstroImage.astro";
+export const example =
+	"https://assets.nardu.in/image_bleed_container_9e3939b3ae.jpeg";
+export const context =
+	"https://assets.nardu.in/image_bleed_original_d49f0d11bf.jpeg";
+export const container =
+	"https://assets.nardu.in/image_bleed_full_2a902f9539.jpeg";
+export const banner =
+	"https://assets.nardu.in/image_bleed_height_81b4ce969a.jpeg";
+export const broken =
+	"https://assets.nardu.in/image_bleed_deformed_479046d2cb.jpeg";
+export const result = "https://assets.nardu.in/image_bleed_6c164e82b3.jpeg";

 ## Image inline

 On est parfois obligé d'utiliser des images dans des balises `img` plutôt que dans un `background` en css. Comment faire alors pour que l'image sorte de son conteneur pour en faire une bannière&nbsp;? Exemple pratique à partir de ce même site.

-<AstroImage
-	src="https://assets.nardu.in/image_bleed_container_9e3939b3ae.jpeg"
-	width="320"
-	height="568"
-/>
+<AstroImage src={example} width="320" height="568" alt="" />

 ### Contexte

@ -49,11 +56,7 @@ img {
 }
 ```

-<AstroImage
-	src="https://assets.nardu.in/image_bleed_original_d49f0d11bf.jpeg"
-	width="320"
-	height="568"
-/>
+<AstroImage src={context} width="320" height="568" alt="" />

 ### Déborder du conteneur

@ -67,11 +70,7 @@ Afin de faire prendre à l'image toute la largeur, on agit sur son conteneur&nbs
 }
 ```

-<AstroImage
-	src="https://assets.nardu.in/image_bleed_full_2a902f9539.jpeg"
-	width="320"
-	height="568"
-/>
+<AstroImage src={container} width="320" height="568" alt="" />

 ### Faire une bannière

@ -86,11 +85,7 @@ On peut alors réduire la hauteur du conteneur pour obtenir une bannière plutô
 }
 ```

-<AstroImage
-	src="https://assets.nardu.in/image_bleed_height_81b4ce969a.jpeg"
-	width="320"
-	height="568"
-/>
+<AstroImage src={banner} width="320" height="568" alt="" />

 Il faut ensuite forcer l'image à prendre toute la largeur du conteneur&nbsp;:

@ -100,11 +95,7 @@ Il faut ensuite forcer l'image à prendre toute la largeur du conteneur&nbsp;:
 }
 ```

-<AstroImage
-	src="https://assets.nardu.in/image_bleed_deformed_479046d2cb.jpeg"
-	width="320"
-	height="568"
-/>
+<AstroImage src={broken} width="320" height="568" alt="" />

 Pas top…

@ -119,11 +110,7 @@ Pas top…
 }
 ```

-<AstroImage
-	src="https://assets.nardu.in/image_bleed_6c164e82b3.jpeg"
-	width="320"
-	height="568"
-/>
+<AstroImage src={result} width="320" height="568" alt="" />

 Cette technique s'apparente à l'utilisation d'une image de background mais en dur 😁

--- a/src/content/fragments/fr/nuxt-graphql-static.md
+++ b/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
-permalink: "nuxt-graphql-static"
+slug: "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,
-      permalink: params.slug,
+      slug: params.slug,
    })
    return { data }
  },
--- a/src/content/fragments/fr/super-cookies.mdx
+++ b/src/content/fragments/fr/super-cookies.mdx
@ -2,7 +2,7 @@
 title: Les meilleurs cookies
 subtitle: Des gâteaux sans consentement.
 lang: fr
-permalink: "super-cookies"
+slug: "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"]
@ -10,6 +10,8 @@ type: fragments
 ---

 import AstroImage from "../../../components/AstroImage.astro";
+export const cookies1 = "https://assets.nardu.in/cookies-fig-1.jpg";
+export const cookies2 = "https://assets.nardu.in/cookies-fig-2.jpg";

 ## Version végétalienne

@ -74,13 +76,13 @@ Le chocolat peut-être remplacé par n'importe quoi comme des noix, des raisins
 ## Figures

 <AstroImage
-	src="https://assets.nardu.in/cookies-fig-1.jpg"
+	src={cookies1}
 	width="753"
 	height="1248"
 	alt="Tous les ingrédients mélangés forment une pâte marron."
 />
 <AstroImage
-	src="https://assets.nardu.in/cookies-fig-2.jpg"
+	src={cookies2}
 	width="753"
 	height="1248"
 	alt="Les cookies cuits sont bombés et très moelleux."
--- a/src/content/fragments/fr/toulouse-fun.md
+++ b/src/content/fragments/fr/toulouse-fun.md
@ -3,7 +3,7 @@ title: Toulouse yourself
 subtitle: En cours de traduction.
 lang: fr
 draft: true
-permalink: "toulouse-fun"
+slug: "toulouse-fun"
 createdAt: "2022-06-22T15:34:45.000Z"
 excerpt: En cours de traduction.
 tags: ["lifestyle"]
--- a/src/content/fragments/fr/visited-links.md
+++ b/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
-permalink: "visited-links"
+slug: "visited-links"
 excerpt: Petit hack CSS
 tags: ["Front-end"]
 type: snippets
--- a/src/content/references/en/3w.md
+++ b/src/content/references/en/3w.md
@ -3,7 +3,7 @@ title: 3w
 subtitle: I wrote the doc!
 url: https://3-w.fr
 lang: en
-permalink: "3w"
+slug: "3w"
 excerpt: Développement web et compagnie.
 tags: ["Front-end", "docs"]
 createdAt: "2022-10-19T18:02:00.000Z"
--- a/src/content/references/en/natureo.md
+++ b/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
-permalink: "natureo"
+slug: "natureo"
 excerpt: Développement web et compagnie.
 tags: ["Front-end", "accessibility", "sobriety", "CMS"]
 createdAt: "2023-04-19T18:02:00.000Z"
--- a/src/content/references/en/parole-expression.md
+++ b/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
-permalink: "parole-expression"
+slug: "parole-expression"
 excerpt: Développement web et compagnie.
 tags: ["Front-end", "sobriety", "CMS"]
 createdAt: "2022-04-19T17:11:00.000Z"
--- a/src/content/references/en/rose-primaire.md
+++ b/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
-permalink: "rose-primaire"
+slug: "rose-primaire"
 excerpt: Web dev and other things.
 tags: ["Front-end", "accessibility", "sobriety", "CMS"]
 createdAt: "2023-04-19T17:11:00.000Z"
--- a/src/content/references/fr/3w.md
+++ b/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
-permalink: "3w"
+slug: "3w"
 excerpt: Développement web et compagnie.
 tags: ["Front-end", "documentation"]
 createdAt: "2022-10-19T18:02:00.000Z"
--- a/src/content/references/fr/natureo.md
+++ b/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
-permalink: "natureo"
+slug: "natureo"
 excerpt: Développement web et compagnie.
 tags: ["Front-end", "accessibilité", "éco-conception", "CMS"]
 createdAt: "2023-04-19T18:02:00.000Z"
--- a/src/content/references/fr/parole-expression.md
+++ b/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
-permalink: parole-expression
+slug: parole-expression
 excerpt: Développement web et compagnie.
 tags: ["Front-end", "éco-conception", "CMS"]
 createdAt: "2022-04-19T17:11:00.000Z"
--- a/src/content/references/fr/rose-primaire.md
+++ b/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
-permalink: "rose-primaire"
+slug: "rose-primaire"
 excerpt: Développement web et compagnie.
 tags: ["Front-end", "accessibilité", "éco-conception", "CMS"]
 createdAt: "2023-04-19T17:11:00.000Z"
--- a/src/data/HP/en/01-offre.md
+++ b/src/data/HP/en/01-offre.md
@ -2,6 +2,8 @@
 type: section
 id: offre
 lang: en
+slug:
+createdAt:
 image: /assets/images/home/offre-1.1.svg
 order: 1
 quickTitle: My offers
--- a/src/data/HP/en/02-methodo.md
+++ b/src/data/HP/en/02-methodo.md
@ -2,6 +2,8 @@
 type: section
 id: methodology
 lang: en
+slug:
+createdAt:
 image: /assets/images/home/methodo.svg
 order: 2
 quickTitle: My methodology
--- a/src/data/HP/en/03-about.md
+++ b/src/data/HP/en/03-about.md
@ -2,6 +2,8 @@
 type: section
 id: about
 lang: en
+slug:
+createdAt:
 image: /assets/images/home/about.svg
 order: 3
 quickTitle: Me
--- a/src/data/HP/fr/01.1-offre.md
+++ b/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>
--- a/src/data/HP/fr/01.2-offre.md
+++ b/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&nbsp;;
 - [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>
--- a/src/env.d.ts
+++ b/src/env.d.ts
@ -1,4 +1,4 @@
 /// <reference path="../.astro/types.d.ts" />
-/// <reference types="astro/client" />
+/// <reference types="@astrojs/image/client" />

 /// <reference path="../.astro-i18n/generated.d.ts" />
--- a/src/fonts/recoleta/Recoleta-Bold.woff2
+++ b/src/fonts/recoleta/Recoleta-Bold.woff2
--- a/src/fonts/recoleta/Recoleta-SemiBold.woff2
+++ b/src/fonts/recoleta/Recoleta-SemiBold.woff2
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@ -1,18 +1,27 @@
 ---
-import { astroI18n } from "astro-i18n";
+import { t, 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 } = Astro.props;
+const { pageTitle, titleColor } = Astro.props;
 ---

 <html lang={astroI18n.langCode} dir="ltr">
-	<Head pageTitle={pageTitle} />
+	<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é." />
+	</head>
 	<body>
 		<div class="wrapper">
 			<Header />
--- a/src/layouts/OffreLayout.astro
+++ b/src/layouts/OffreLayout.astro
@ -0,0 +1,43 @@
+---
+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 } = Astro.props;
+---
+
+<html lang={astroI18n.langCode} dir="ltr">
+	<Head pageTitle={pageTitle} />
+	<body class="offre-layout">
+		<div class="wrapper">
+			<!-- <Header /> -->
+			<main id="skip-content" role="main">
+				<slot />
+			</main>
+		</div>
+		<!-- <Footer /> -->
+		<style>
+			html {
+				--color-primary: rgb(255, 222, 223);
+				--color-secondary: rgb(150, 0, 13);
+			}
+			@supports (color: oklch(0% 0 0)) {
+				html {
+					--color-primary: oklch(92.9% 0.04480512547881144 16.3020144016784);
+					--color-secondary: oklch(42.3% 0.193 26.95);
+				}
+			}
+			.offre-layout {
+				background-color: var(--color-primary);
+			}
+			.offre-layout :global(*) {
+				color: var(--color-secondary);
+			}
+		</style>
+	</body>
+</html>
--- a/src/pages/articles/[slug].astro
+++ b/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.data.permalink },
+		params: { slug: article.slug },
 		props: { article },
 	}));
 }, import.meta.url);
--- a/src/pages/en/offres/web-classique.astro
+++ b/src/pages/en/offres/web-classique.astro
@ -0,0 +1,6 @@
+---
+import Page from "../../offres/web-classique.astro"
+const { props } = Astro
+---
+
+<Page {...props} />
--- a/src/pages/en/rss.xml.js
+++ b/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.data.permalink}/`,
+			link: `/en/${post.data.type}/${post.slug}/`,
 		})),
 		// (optional) inject custom xml
 		customData: `<language>en-us</language>`,
--- a/src/pages/fragments/[slug].astro
+++ b/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.data.permalink },
+		params: { slug: snippet.slug },
 		props: { snippet },
 	}));
 }, import.meta.url);
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@ -3,10 +3,13 @@
 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");

@ -70,7 +73,7 @@ const localizedReferences = await getCollection("references", ({ data }) => {
 							<div class="section__reference">
 								<ListCards
 									list={localizedReferences.filter((ref) => {
-										return ref.data.permalink === section.frontmatter.reference;
+										return ref.slug === section.frontmatter.reference;
 									})}
 									routeName={t("references.slug")}
 								/>
--- a/src/pages/offres/web-classique.astro
+++ b/src/pages/offres/web-classique.astro
@ -0,0 +1,28 @@
+---
+import OffreLayout from "../../layouts/OffreLayout.astro";
+
+const pageTitle = "Offre web classique";
+---
+
+<OffreLayout pageTitle={pageTitle}>
+	<div class="region">
+		<section class="flow">
+			<h1>{pageTitle}</h1>
+			<p class="h3">Un site rapide, moderne et (plus) accessible.</p>
+		</section>
+		<section class="flow">
+			<h2>Description</h2>
+			<p class="h3">
+				Lorem ipsum dolor, sit amet consectetur adipisicing elit. Est esse
+				molestias ipsam rerum, dolor libero dolores aperiam blanditiis,
+				provident, ut recusandae in quae non doloremque officia quia labore.
+				Tempore, sint!
+			</p>
+		</section>
+	</div>
+</OffreLayout>
+
+<style>
+	section {
+	}
+</style>
--- a/src/pages/rss.xml.js
+++ b/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.data.permalink}/`,
+			link: `/${post.data.type}/${post.slug}/`,
 		})),
 		// (optional) inject custom xml
 		customData: `<language>fr-fr</language>`,
--- a/src/styles/global/fonts.css
+++ b/src/styles/global/fonts.css
@ -19,6 +19,13 @@
 	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
--- a/src/styles/global/global-styles.css
+++ b/src/styles/global/global-styles.css
@ -126,6 +126,9 @@ 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;
@ -225,3 +228,11 @@ 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;
+} */
--- a/src/styles/global/reset.css
+++ b/src/styles/global/reset.css
@ -123,17 +123,7 @@ 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;
 }
@ -155,17 +145,11 @@ a:not([class]) {
 	}
 }
 :where(:not(:active)):focus-visible {
-	outline-offset: 2px;
+	outline-offset: 5px;
 }

 /* 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;
@ -175,13 +159,7 @@ 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;
 }

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