nardu.in
/
website-astro
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

use AstroImage in all content files

This commit is contained in:
Nico 2023-02-03 17:37:34 +01:00
parent 530ce16e5d
commit 6442f7265d
4 changed files with 53 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.astro/types.d.ts vendored
View File

@ -251,8 +251,8 @@ declare module 'astro:content' {
collection: "fragments", collection: "fragments",
data: InferEntrySchema<"fragments"> data: InferEntrySchema<"fragments">
}, },
"fr/super-cookies.md": { "fr/super-cookies.mdx": {
id: "fr/super-cookies.md", id: "fr/super-cookies.mdx",
slug: "super-cookies", slug: "super-cookies",
body: string, body: string,
collection: "fragments", collection: "fragments",

18
src/content/fragments/en/super-cookies.md
View File

@ -8,6 +8,10 @@ excerpt: It's a real recipe, not a joke about annoying files.
tags: ["food"] 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 ## Vegetalian version
### Ingredients ### Ingredients
@ -70,5 +74,15 @@ Chocolate can be replaced by anything like nuts, raisins, legos... (don't eat le
## Figures ## Figures
![Fig.1 - All ingredients mixed together to form a brown paste.](https://assets.nardu.in/cookies-fig-1.jpg) <AstroImage
![Fig.2 - Baked cookies are very soft.](https://assets.nardu.in/cookies-fig-2.jpg) src={cookies1}
width="753"
height="1248"
alt="All ingredients mixed together to form a brown paste."
/>
<AstroImage
src={cookies2}
width="753"
height="1248"
alt="The cookies are rounded and soft after baking."
/>

25
src/content/fragments/fr/image-full.mdx
View File

@ -9,11 +9,24 @@ excerpt: Faire déborder une image de son conteneur sans tout casser.
tags: ["CSS"] 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 ## 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. 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.
[![](https://assets.nardu.in/image_bleed_container_9e3939b3ae.jpeg "Cliquer pour agrandir")](https://assets.nardu.in/image_bleed_container_9e3939b3ae.jpeg) <AstroImage src={example} width="320" height="568" alt="" />
### Contexte ### 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) <AstroImage src={context} width="320" height="568" alt="" />
### Déborder du conteneur ### 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) <AstroImage src={container} width="320" height="568" alt="" />
### Faire une bannière ### 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) <AstroImage src={banner} width="320" height="568" alt="" />
Il faut ensuite forcer l'image à prendre toute la largeur du conteneur&nbsp;: Il faut ensuite forcer l'image à prendre toute la largeur du conteneur&nbsp;:
@ -81,7 +94,7 @@ Il faut ensuite forcer l'image à prendre toute la largeur du conteneur&nbsp;:
} }
``` ```
[![](https://assets.nardu.in/image_bleed_deformed_479046d2cb.jpeg "Cliquer pour agrandir")](https://assets.nardu.in/image_bleed_deformed_479046d2cb.jpeg) <AstroImage src={broken} width="320" height="568" alt="" />
Pas top… 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) <AstroImage src={result} width="320" height="568" alt="" />
Cette technique s'apparente à l'utilisation d'une image de background mais en dur 😁 Cette technique s'apparente à l'utilisation d'une image de background mais en dur 😁

18
src/content/fragments/fr/super-cookies.md → src/content/fragments/fr/super-cookies.mdx
View File

@ -8,6 +8,10 @@ excerpt: C'est vraiment une recette hein, pas une blague sur les fichiers tempor
tags: ["cuisine"] 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 ## Version végétalienne
### Ingrédients ### Ingrédients
@ -70,5 +74,15 @@ Le chocolat peut-être remplacé par n'importe quoi comme des noix, des raisins
## Figures ## Figures
![Fig.1 - Tous les ingrédients mélangés forment une pâte marron.](https://assets.nardu.in/cookies-fig-1.jpg) <AstroImage
![Fig.2 - Les cookies cuits sont très moelleux.](https://assets.nardu.in/cookies-fig-2.jpg) src={cookies1}
width="753"
height="1248"
alt="Tous les ingrédients mélangés forment une pâte marron."
/>
<AstroImage
src={cookies2}
width="753"
height="1248"
alt="Les cookies cuits sont bombés et très moelleux."
/>