Displaying cheatsheet with astro

nx-academy · Jul 25, 2024 · caf5774 · caf5774
1 parent ff2ff1c
commit caf5774
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 8 deletions.
diff --git a/src/components/CheatsheetCard.astro b/src/components/CheatsheetCard.astro
@@ -1,12 +1,28 @@
 ---
+interface Props {
+    description: string
+    href: string
+    imgAlt: string
+    imgSrc: string
+    title: string
+}
+
 import Button from "./Button.astro"
+
+const {
+    description,
+    href,
+    imgAlt,
+    imgSrc,
+    title
+} = Astro.props
 ---
 
 <div>
-    <img src="/public/enfant-rangeant-jouets.webp" alt="">
-    <p class="title">Comprendre la fonction CSS Clamp</p>
-    <p class="description">Apprenez à utiliser la fonction CSS Clamp et rendez facilement les tailles de vos polices responsives.</p>
-    <Button label="Lire la fiche" type="primary" href="#" />
+    <img src={imgSrc} alt={imgAlt}>
+    <p class="title">{title}</p>
+    <p class="description">{description}</p>
+    <Button label="Lire la fiche" type="primary" href={href} />
 </div>
 
 <style>

diff --git a/src/pages/fiches/comprendre-la-fonction-css-clamp.md b/src/pages/fiches/comprendre-la-fonction-css-clamp.md
@@ -3,6 +3,8 @@ layout: ../../layouts/CheatSheetsLayout.astro
 
 title: Comprendre la fonction CSS Clamp
 description: Apprenez à utiliser la fonction CSS Clamp et rendez facilement les tailles de vos polices responsives.
+imgAlt: Quelqu'un mesurant un salon avec un mètre, pixel art
+imgSrc: /homme-mesure-salon.webp
 ---
 
 <article>

diff --git a/src/pages/fiches/index.astro b/src/pages/fiches/index.astro
@@ -22,10 +22,17 @@ const description = "Une fiche technique est un guide de référence pratique au
             <p>Les fiches techniques sont particulièrement utiles pour expliquer un concept rapidement et simplement. Elles concernent aussi bien le HTML, CSS et JavaScript que le DevOps.</p>
 
             <div class="cards-wrapper">
-                <CheatsheetCard />
-                <CheatsheetCard />
-                <CheatsheetCard />
-                <CheatsheetCard />
+                {
+                    cheatsheets.map(cheatsheet => (
+                    <CheatsheetCard
+                        description={cheatsheet.frontmatter.description}
+                        href={cheatsheet.url!}
+                        imgAlt={cheatsheet.frontmatter.imgAlt}
+                        imgSrc={cheatsheet.frontmatter.imgSrc}
+                        title={cheatsheet.frontmatter.title}
+                    />
+                    ))
+                }
             </div>
         </section>
         <Footer />