chore: fixed bugs in macchinisti page and some refactoring

This commit is contained in:
2024-12-19 20:12:57 +01:00
parent 2dbdf99827
commit e49e2ff0c5
14 changed files with 188 additions and 165 deletions
+45 -45
View File
@@ -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,43 +43,40 @@ const getImage = (fullName: string) => {
</div>
<div class="bubble-array">
{sortedCurrent.map(async (macchinista) => (
<Bubble
image={(getImage(macchinista.fullName) as { default: string }).default as unknown as ImageMetadata}
fullName={macchinista.fullName}
date={`${macchinista.dateIn}—Presente`}
description={macchinista.description}
social={{
...(macchinista.github && { github: macchinista.github }),
...(macchinista.website && { website: macchinista.website }),
...(macchinista.linkedin && { linkedin: macchinista.linkedin })
}}
/>
))}
{
currentMacchinisti.map(macchinista => (
<Bubble
image={getMacchinistaPicture(macchinista.fullName)}
fullName={macchinista.fullName}
entranceDate={macchinista.entranceDate}
description={macchinista.description}
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) => (
<Bubble
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 })
}}
/>
))}
{
pastMacchinisti.map(macchinista => (
<Bubble
image={getMacchinistaPicture(macchinista.fullName)}
fullName={macchinista.fullName}
entranceDate={macchinista.entranceDate}
exitDate={macchinista.exitDate}
description={macchinista.description}
social={macchinista.social}
/>
))
}
</div>
</main>
<Footer />
</BaseLayout>
</BaseLayout>