You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
website/src/pages/macchinisti.astro

83 lines
2.8 KiB
Plaintext

---
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 macchinisti from '@/data/macchinisti.yaml'
macchinisti.sort((a, b) => b.entranceDate - a.entranceDate)
// Import all images from assets folder
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,
])
)
)
console.log(macchinisti)
console.log(images)
const currentMacchinisti = macchinisti.filter(macchinista => !macchinista.exitDate)
const pastMacchinisti = macchinisti.filter(macchinista => macchinista.exitDate)
const getMacchinistaPicture = (fullName: string): ImageMetadata => {
const macchinistaId = fullName.toLowerCase().replace(/\s+/g, '-')
console.log(macchinistaId)
return images[macchinistaId] ?? images['fallback']
}
---
<BaseLayout title="Macchinisti | PHC" pageTags={'macchinisti'}>
<Header />
<main>
<div class="card large" style={{ '--card-base': '#e1766b' }}>
<div class="title">Ecco i Macchinisti!</div>
<div class="text">
<p>Le persone che hanno reso questo possibile vi dicono ciao!</p>
</div>
</div>
<div class="bubble-array">
{
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"><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">
{
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>