diff --git a/.astro/types.d.ts b/.astro/types.d.ts
index b34e112..e87b9c3 100644
--- a/.astro/types.d.ts
+++ b/.astro/types.d.ts
@@ -251,8 +251,8 @@ declare module 'astro:content' {
collection: "fragments",
data: InferEntrySchema<"fragments">
},
-"fr/super-cookies.md": {
- id: "fr/super-cookies.md",
+"fr/super-cookies.mdx": {
+ id: "fr/super-cookies.mdx",
slug: "super-cookies",
body: string,
collection: "fragments",
diff --git a/src/content/fragments/en/super-cookies.md b/src/content/fragments/en/super-cookies.md
index 96cd7d7..53ca4c2 100644
--- a/src/content/fragments/en/super-cookies.md
+++ b/src/content/fragments/en/super-cookies.md
@@ -8,6 +8,10 @@ excerpt: It's a real recipe, not a joke about annoying files.
tags: ["food"]
---
+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
### Ingredients
@@ -70,5 +74,15 @@ Chocolate can be replaced by anything like nuts, raisins, legos... (don't eat le
## Figures
-![Fig.1 - All ingredients mixed together to form a brown paste.](https://assets.nardu.in/cookies-fig-1.jpg)
-![Fig.2 - Baked cookies are very soft.](https://assets.nardu.in/cookies-fig-2.jpg)
+
+
diff --git a/src/content/fragments/fr/image-full.mdx b/src/content/fragments/fr/image-full.mdx
index ecb339c..753bf5b 100644
--- a/src/content/fragments/fr/image-full.mdx
+++ b/src/content/fragments/fr/image-full.mdx
@@ -9,11 +9,24 @@ excerpt: Faire déborder une image de son conteneur sans tout casser.
tags: ["CSS"]
---
+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 ? Exemple pratique à partir de ce même site.
-[![](https://assets.nardu.in/image_bleed_container_9e3939b3ae.jpeg "Cliquer pour agrandir")](https://assets.nardu.in/image_bleed_container_9e3939b3ae.jpeg)
+
### Contexte
@@ -42,7 +55,7 @@ img {
}
```
-[![](https://assets.nardu.in/image_bleed_original_d49f0d11bf.jpeg "Cliquer pour agrandir")](https://assets.nardu.in/image_bleed_original_d49f0d11bf.jpeg)
+
### Déborder du conteneur
@@ -56,7 +69,7 @@ Afin de faire prendre à l'image toute la largeur, on agit sur son conteneur&nbs
}
```
-[![](https://assets.nardu.in/image_bleed_full_2a902f9539.jpeg "Cliquer pour agrandir")](https://assets.nardu.in/image_bleed_full_2a902f9539.jpeg)
+
### Faire une bannière
@@ -71,7 +84,7 @@ On peut alors réduire la hauteur du conteneur pour obtenir une bannière plutô
}
```
-[![](https://assets.nardu.in/image_bleed_height_81b4ce969a.jpeg "Cliquer pour agrandir")](https://assets.nardu.in/image_bleed_height_81b4ce969a.jpeg)
+
Il faut ensuite forcer l'image à prendre toute la largeur du conteneur :
@@ -81,7 +94,7 @@ Il faut ensuite forcer l'image à prendre toute la largeur du conteneur :
}
```
-[![](https://assets.nardu.in/image_bleed_deformed_479046d2cb.jpeg "Cliquer pour agrandir")](https://assets.nardu.in/image_bleed_deformed_479046d2cb.jpeg)
+
Pas top…
@@ -96,7 +109,7 @@ Pas top…
}
```
-[![](https://assets.nardu.in/image_bleed_6c164e82b3.jpeg "Cliquer pour agrandir")](https://assets.nardu.in/image_bleed_6c164e82b3.jpeg)
+
Cette technique s'apparente à l'utilisation d'une image de background mais en dur 😁
diff --git a/src/content/fragments/fr/super-cookies.md b/src/content/fragments/fr/super-cookies.mdx
similarity index 82%
rename from src/content/fragments/fr/super-cookies.md
rename to src/content/fragments/fr/super-cookies.mdx
index d5747c7..da7e0ca 100644
--- a/src/content/fragments/fr/super-cookies.md
+++ b/src/content/fragments/fr/super-cookies.mdx
@@ -8,6 +8,10 @@ excerpt: C'est vraiment une recette hein, pas une blague sur les fichiers tempor
tags: ["cuisine"]
---
+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
### Ingrédients
@@ -70,5 +74,15 @@ Le chocolat peut-être remplacé par n'importe quoi comme des noix, des raisins
## Figures
-![Fig.1 - Tous les ingrédients mélangés forment une pâte marron.](https://assets.nardu.in/cookies-fig-1.jpg)
-![Fig.2 - Les cookies cuits sont très moelleux.](https://assets.nardu.in/cookies-fig-2.jpg)
+
+