new: add current and past macchinisti data with dynamic rendering

todo: fix the fallback image and make a general function to render the bubbles

src/data/current-macchinisti.json

@@ -0,0 +1,47 @@
+[
+    {
+        "fullName": "Antonio De Lucreziis",
+        "dateIn": "2019",
+        "dateOut": "",
+        "description": "Description here",
+        "github": "https://github.com/adelucreziis",
+        "website": "",
+        "linkedin": ""
+    },
+    {
+        "fullName": "Luca Lombardo",
+        "dateIn": "2024",
+        "dateOut": "",
+        "description": "Algoritmi e Strutture Dati Bla Bla",
+        "github": "https://github.com/lukefleed",
+        "website": "https://lukefleex.xyz",
+        "linkedin": "https://www.linkedin.com/in/l-lombardo/"
+    },
+    {
+        "fullName": "Francesco Minnocci",
+        "dateIn": "2022",
+        "dateOut": "",
+        "description": "Ho una laurea(?)",
+        "github": "https://github.com/BachoSeven",
+        "website": "https://bachoseven.com",
+        "linkedin": ""
+    },
+    {
+        "fullName": "Francesco Baldino",
+        "dateIn": "2022",
+        "dateOut": "",
+        "description": "Bla Bla",
+        "github": "",
+        "website": "",
+        "linkedin": ""
+    },
+    {
+        "fullName": "Illya Serdyuk",
+        "dateIn": "2019",
+        "dateOut": "",
+        "description": "Bla Bla",
+        "github": "",
+        "website": "",
+        "linkedin": ""
+    }
+  ]

src/data/past-macchinisti.json

@@ -0,0 +1,11 @@
+[
+    {
+      "fullName": "Francesco Manicastri",
+      "dateIn": "2022",
+      "dateOut": "2024",
+      "description": "Geometria bla bla",
+      "github": "",
+      "website": "",
+      "linkedin": ""
+    }
+  ]

src/pages/macchinisti.astro

@@ -1,12 +1,32 @@
 ---
 import BaseLayout from '../layouts/BaseLayout.astro'
-
 import Header from '../components/Header.astro'
 import Footer from '../components/Footer.astro'
+import Bubble from '../components/Bubble.astro'
 
-import francescoMinnocci from '@/assets/macchinisti/francesco-minnocci.png'
+import currentMacchinisti from '../data/current-macchinisti.json'
+import pastMacchinisti from '../data/past-macchinisti.json'
 
-import Bubble from '../components/Bubble.astro'
+// Import all images from assets folder
+const images = import.meta.glob('@/assets/macchinisti/*.{jpg,jpeg,png,gif}', {
+  eager: true 
+})
+
+// Sort by dateIn
+const sortedCurrent = currentMacchinisti.sort((a, b) => parseInt(a.dateIn) - parseInt(b.dateIn))
+const sortedPast = pastMacchinisti.sort((a, b) => parseInt(a.dateIn) - parseInt(b.dateIn))
+
+// Define a fallback image metadata
+const fallbackImage = { default: 'assets/macchinisti/fallback.jpg' }
+
+// Function to get image for a macchinista
+const getImage = (fullName: string) => {
+  const imageName = fullName.toLowerCase().replaceAll(' ', '-')
+  const imageModule = Object.entries(images).find(([path]) => 
+    path.includes(imageName)
+  )?.[1]
+  return imageModule || fallbackImage
+}
 ---
 
 <BaseLayout title="Macchinisti | PHC" pageTags={'macchinisti'}>
@@ -20,68 +40,42 @@ import Bubble from '../components/Bubble.astro'
         </div>
 
         <div class="bubble-array">
+            {sortedCurrent.map(async (macchinista) => (
                 <Bubble
-                image={francescoMinnocci}
-                fullName="Antonio De Lucreziis"
-                date="2019—Presente"
-                description="Fanno coose Lorem ipsum dolor sit amet."
-            />
-            <Bubble
-                image={francescoMinnocci}
-                fullName="Illya Serdyuk"
-                date="2019—Presente"
-                description="Fanno coose Lorem ipsum dolor sit amet."
-            />
-            <Bubble
-                image={francescoMinnocci}
-                fullName="Francesco Minnocci"
-                date="2022—Presente"
-                description="Ho una laurea(?)"
+                    image={(getImage(macchinista.fullName) as { default: string }).default as unknown as ImageMetadata}
+                    fullName={macchinista.fullName}
+                    date={`${macchinista.dateIn}—Presente`}
+                    description={macchinista.description}
                     social={{
-                    github: 'https://github.com/BachoSeven',
-                    website: 'https://bachoseven.com',
+                        ...(macchinista.github && { github: macchinista.github }),
+                        ...(macchinista.website && { website: macchinista.website }),
+                        ...(macchinista.linkedin && { linkedin: macchinista.linkedin })
                     }}
                 />
-
-            <Bubble
-                image={francescoMinnocci}
-                fullName="Francesco Baldino"
-                date="2022—Presente"
-                description="Fanno coose Lorem ipsum dolor sit amet."
-            />
-
-            <Bubble
-                image={francescoMinnocci}
-                fullName="Luca Lombardo"
-                date="2024—Presente"
-                description="quello che fa le cose serie."
-                social={{ linkedin: 'https://it.linkedin.com/in/l-lombardo' }}
-            />
+            ))}
         </div>
 
         <div class="card large" style={{ '--card-base': '#6BD6E1' }}>
-            <div class="title"><s>Deus</s> Ex Macchinisti</div>
+            <div class="title">Ex Macchinisti</div>
             <div class="text">
-                <p>
-                    Gli vogliamo molto bene, molti di loro hanno fatto cose eccoveli che ve li presentiamo
-                    subito ora ADESSO!
-                </p>
+                <p>Gli vogliamo molto bene, hanno fatto grandi cose!</p>
             </div>
         </div>
 
         <div class="bubble-array">
+            {sortedPast.map(async (macchinista) => (
                 <Bubble
-                image={francescoMinnocci}
-                fullName="Nome Cognome"
-                date="2004—2008"
-                description="Fanno coose Lorem ipsum dolor sit amet."
-            />
-            <Bubble
-                image={francescoMinnocci}
-                fullName="Nome Cognome"
-                date="2004—2008"
-                description="Fanno coose Lorem ipsum dolor sit amet."
+                    image={(getImage(macchinista.fullName) as { default: string }).default as unknown as ImageMetadata}
+                    fullName={macchinista.fullName}
+                    date={`${macchinista.dateIn}—${macchinista.dateOut}`}
+                    description={macchinista.description}
+                    social={{
+                        ...(macchinista.github && { github: macchinista.github }),
+                        ...(macchinista.website && { website: macchinista.website }),
+                        ...(macchinista.linkedin && { linkedin: macchinista.linkedin })
+                    }}
                 />
+            ))}
         </div>
     </main>
     <Footer />