chore: fixed bugs in macchinisti page and some refactoring

astro.config.mjs

@@ -3,8 +3,13 @@ import preact from '@astrojs/preact'
 
 import mdx from '@astrojs/mdx'
 
+import yaml from '@rollup/plugin-yaml'
+
 // https://astro.build/config
 export default defineConfig({
+    vite: {
+        plugins: [yaml()],
+    },
     server: {
         port: 3000,
     },
@@ -14,5 +19,5 @@ export default defineConfig({
         },
     },
     integrations: [preact(), mdx()],
-    output: 'static'
+    output: 'static',
 })

package.json

@@ -31,6 +31,7 @@
     },
     "devDependencies": {
         "@astrojs/mdx": "^3.1.7",
+        "@rollup/plugin-yaml": "^4.1.2",
         "@types/katex": "^0.16.7",
         "jsdom": "^24.1.1",
         "linkedom": "^0.18.4",

src/components/Bubble.astro

@@ -14,7 +14,8 @@ const ICONS_MAP = {
 type Props = {
     image: ImageMetadata
     fullName: string
-    date: string
+    entranceDate: number
+    exitDate?: number
     description: string
     social?: {
         github?: string
@@ -24,13 +25,13 @@ type Props = {
     }
 }
 
-const { image, fullName, date, description, social } = Astro.props
+const { image, fullName, entranceDate, exitDate, description, social } = Astro.props
 ---
 
 <div class="bubble">
     <img src={image.src} alt={fullName.toLowerCase()} />
     <div class="title">{fullName}</div>
-    <div class="date">{date}</div>
+    <div class="date">{entranceDate}&mdash;{exitDate ?? 'Presente'}</div>
     <div class="description">{description}</div>
     {
         social && (

src/components/Header.astro

@@ -1,17 +1,36 @@
+---
+const links = [
+    { href: '/utenti', text: 'Utenti' },
+    // { href: '/macchinisti', text: 'Macchinisti' },
+    // { href: '/appunti', text: 'Appunti' },
+    { href: '/notizie', text: 'Notizie' },
+    { href: '/guide', text: 'Guide' },
+    { href: '/storia', text: 'Storia' },
+    // { href: '/login', text: 'Login' },
+]
+---
+
 <header>
+    <!-- main logo on the left -->
     <a href="/" class="logo">
         <img src="/images/phc-logo-2024-11@x8.png" alt="phc logo" />
     </a>
+
+    <!-- hidden checkbox for mobile js-less sidebar interaction -->
     <input type="checkbox" id="header-menu-toggle" />
+
+    <!-- desktop navbar links -->
     <div class="links desktop-only">
-        <a role="button" href="/utenti">Utenti</a>
-        <a role="button" href="/macchinisti">Macchinisti</a>
-        <!-- <a role="button" href="/appunti">Appunti</a> -->
-        <a role="button" href="/notizie">Notizie</a>
-        <a role="button" href="/guide">Guide</a>
-        <a role="button" href="/storia">Storia</a>
-        <!-- <a class="primary" role="button" href="/login">Login</a> -->
+        {
+            links.map(link => (
+                <a role="button" href={link.href}>
+                    {link.text}
+                </a>
+            ))
+        }
     </div>
+
+    <!-- sidebar menu for mobile -->
     <div class="mobile-only">
         <label id="header-menu-toggle-menu" role="button" class="flat icon" for="header-menu-toggle">
             <span class="material-symbols-outlined">menu</span>
@@ -20,15 +39,17 @@
             <span class="material-symbols-outlined">close</span>
         </label>
     </div>
+
+    <!-- sidebar menu only visible on mobile when #header-menu-toggle is checked -->
     <div class="side-menu">
         <div class="links">
-            <a role="button" href="/utenti">Utenti</a>
-            <a role="button" href="/macchinisti">Macchinisti</a>
-            <!-- <a role="button" href="/appunti">Appunti</a> -->
-            <a role="button" href="/notizie">Notizie</a>
-            <a role="button" href="/guide">Guide</a>
-            <a role="button" href="/storia">Storia</a>
-            <!-- <a class="primary" role="button" href="/login">Login</a> -->
+            {
+                links.map(link => (
+                    <a role="button" href={link.href}>
+                        {link.text}
+                    </a>
+                ))
+            }
         </div>
     </div>
 </header>

src/data/current-macchinisti.json

@@ -1,47 +0,0 @@
-[
-    {
-        "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/macchinisti.yaml

@@ -0,0 +1,35 @@
+- fullName: Antonio De Lucreziis
+  entranceDate: 2019
+  description: |
+      Appassionato di geometria computazionale, parser, teoria dei linguaggi di programmazione.
+  social:
+      github: https://github.com/aziis98
+      website: https://poisson.phc.dm.unipi.it/~delucreziis/
+
+- fullName: Luca Lombardo
+  entranceDate: 2024
+  description: Algoritmi e Strutture Dati bla bla
+  social:
+      github: https://github.com/lukefleed
+      website: https://lukefleex.xyz
+      linkedin: https://www.linkedin.com/in/l-lombardo/
+
+- fullName: Francesco Minnocci
+  entranceDate: 2022
+  description: Ho una laurea (?), bla bla tastiere meccaniche
+  social:
+      github: https://github.com/BachoSeven
+      website: https://bachoseven.com
+
+- fullName: Francesco Baldino
+  entranceDate: 2022
+  description: Bla bla Star Wars
+
+- fullName: Illya Serdyuk
+  entranceDate: 2020
+  description: Bla bla Void Linux
+
+- fullName: Francesco Manicastri
+  entranceDate: 2022
+  exitDate: 2024
+  description: Bla bla Keenan Crane

src/data/past-macchinisti.json

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

src/files.d.ts

@@ -0,0 +1,17 @@
+declare module '*.yaml' {
+    const value: any // Add type definitions here if desired
+    export default value
+}
+
+declare module '@/data/macchinisti.yaml' {
+    type Macchinista = {
+        fullName: string
+        entranceDate: number
+        exitDate?: number
+        description: string
+        social: Record<string, string>
+    }
+
+    const value: Macchinista[]
+    export default value
+}

src/pages/macchinisti.astro

@@ -4,28 +4,31 @@ import Header from '../components/Header.astro'
 import Footer from '../components/Footer.astro'
 import Bubble from '../components/Bubble.astro'
 
-import currentMacchinisti from '../data/current-macchinisti.json'
-import pastMacchinisti from '../data/past-macchinisti.json'
+import macchinisti from '@/data/macchinisti.yaml'
+macchinisti.sort((a, b) => b.entranceDate - a.entranceDate)
 
 // Import all images from assets folder
-const images = import.meta.glob('@/assets/macchinisti/*.{jpg,jpeg,png,gif}', {
-  eager: true 
-})
+const images: Record<string, ImageMetadata> = Object.fromEntries(
+    await Promise.all(
+        Object.entries(import.meta.glob('@/assets/macchinisti/*')).map(async ([path, module]) => [
+            path.split('/').pop()!.split('.')[0],
+            // @ts-ignore
+            (await module()).default,
+        ])
+    )
+)
 
-// 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))
+console.log(macchinisti)
+console.log(images)
 
-// Define a fallback image metadata
-const fallbackImage = { default: 'assets/macchinisti/fallback.jpg' }
+const currentMacchinisti = macchinisti.filter(macchinista => !macchinista.exitDate)
+const pastMacchinisti = macchinisti.filter(macchinista => macchinista.exitDate)
 
-// 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
+const getMacchinistaPicture = (fullName: string): ImageMetadata => {
+    const macchinistaId = fullName.toLowerCase().replace(/\s+/g, '-')
+    console.log(macchinistaId)
+
+    return images[macchinistaId] ?? images['fallback']
 }
 ---
 
@@ -40,42 +43,39 @@ const getImage = (fullName: string) => {
         </div>
 
         <div class="bubble-array">
-            {sortedCurrent.map(async (macchinista) => (
+            {
+                currentMacchinisti.map(macchinista => (
                     <Bubble
-                    image={(getImage(macchinista.fullName) as { default: string }).default as unknown as ImageMetadata}
+                        image={getMacchinistaPicture(macchinista.fullName)}
                         fullName={macchinista.fullName}
-                    date={`${macchinista.dateIn}—Presente`}
+                        entranceDate={macchinista.entranceDate}
                         description={macchinista.description}
-                    social={{
-                        ...(macchinista.github && { github: macchinista.github }),
-                        ...(macchinista.website && { website: macchinista.website }),
-                        ...(macchinista.linkedin && { linkedin: macchinista.linkedin })
-                    }}
+                        social={macchinista.social}
                     />
-            ))}
+                ))
+            }
         </div>
 
         <div class="card large" style={{ '--card-base': '#6BD6E1' }}>
-            <div class="title">Ex Macchinisti</div>
+            <div class="title"><s>Deus</s> Ex Macchinisti</div>
             <div class="text">
                 <p>Gli vogliamo molto bene, hanno fatto grandi cose!</p>
             </div>
         </div>
 
         <div class="bubble-array">
-            {sortedPast.map(async (macchinista) => (
+            {
+                pastMacchinisti.map(macchinista => (
                     <Bubble
-                    image={(getImage(macchinista.fullName) as { default: string }).default as unknown as ImageMetadata}
+                        image={getMacchinistaPicture(macchinista.fullName)}
                         fullName={macchinista.fullName}
-                    date={`${macchinista.dateIn}—${macchinista.dateOut}`}
+                        entranceDate={macchinista.entranceDate}
+                        exitDate={macchinista.exitDate}
                         description={macchinista.description}
-                    social={{
-                        ...(macchinista.github && { github: macchinista.github }),
-                        ...(macchinista.website && { website: macchinista.website }),
-                        ...(macchinista.linkedin && { linkedin: macchinista.linkedin })
-                    }}
+                        social={macchinista.social}
                     />
-            ))}
+                ))
+            }
         </div>
     </main>
     <Footer />

src/styles/components.scss

@@ -818,4 +818,48 @@
             }
         }
     }
+
+    .bubble-array {
+        display: flex;
+        width: 100%;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 3rem 6rem;
+
+        > .bubble {
+            display: grid;
+            grid-template-rows: auto auto auto auto;
+            grid-auto-rows: auto;
+            gap: 0.5rem;
+            text-align: center;
+            justify-items: center;
+            align-content: start;
+            width: 25ch;
+
+            .date {
+                display: grid;
+                place-content: center;
+                font-size: 16px;
+                font-weight: 600;
+                padding: 0.25rem 0.5rem;
+                background: #0002;
+                border-radius: 0.25rem;
+            }
+
+            .social {
+                display: grid;
+                grid-auto-flow: column;
+                gap: 0.5rem;
+                justify-content: center;
+            }
+
+            > img {
+                border-radius: 100%;
+                border: 4px solid #333;
+                object-fit: cover;
+                width: 100%;
+                aspect-ratio: 1 / 1;
+            }
+        }
+    }
 }

src/styles/pages.scss

@@ -646,52 +646,9 @@
             flex-direction: column;
             align-items: center;
 
-            padding: 6rem 4rem;
+            padding: 6rem;
             gap: 4rem;
         }
-
-        .bubble-array {
-            display: flex;
-            width: 100%;
-            flex-wrap: wrap;
-            justify-content: center;
-            gap: 4rem;
-
-            > .bubble {
-                display: grid;
-                grid-template-rows: auto auto auto auto;
-                grid-auto-rows: auto;
-                gap: 0.5rem;
-                text-align: center;
-                justify-items: center;
-                width: 25ch;
-
-                .date {
-                    display: grid;
-                    place-content: center;
-                    font-size: 16px;
-                    font-weight: 600;
-                    padding: 0rem 0.5rem;
-                    background: #0002;
-                    border-radius: 0.25rem;
-                }
-
-                .social {
-                    display: grid;
-                    grid-auto-flow: column;
-                    gap: 0.5rem;
-                    justify-content: center;
-                }
-
-                > img {
-                    border-radius: 100%;
-                    border: 4px solid #333;
-                    object-fit: cover;
-                    width: 100%;
-                    aspect-ratio: 1 / 1;
-                }
-            }
-        }
     }
 
     //