From 6442f7265d30cd6791e24cc533c290788aab784b Mon Sep 17 00:00:00 2001 From: Nico Date: Fri, 3 Feb 2023 17:37:34 +0100 Subject: [PATCH] use AstroImage in all content files --- .astro/types.d.ts | 4 +-- src/content/fragments/en/super-cookies.md | 18 +++++++++++-- src/content/fragments/fr/image-full.mdx | 25 ++++++++++++++----- .../{super-cookies.md => super-cookies.mdx} | 18 +++++++++++-- 4 files changed, 53 insertions(+), 12 deletions(-) rename src/content/fragments/fr/{super-cookies.md => super-cookies.mdx} (82%) 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) + +