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

86 lines
3.1 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 = Object.fromEntries(
Object.entries(
import.meta.glob<{ default: ImageMetadata }>('@/assets/macchinisti/*', {
eager: true,
})
).map(([path, module]) => [path.split('/').pop()!.split('.')[0], module])
)
const currentMacchinisti = macchinisti.filter(macchinista => !macchinista.exitDate)
const pastMacchinisti = macchinisti.filter(macchinista => macchinista.exitDate)
const getMacchinistaPicture = (fullName: string) => {
const macchinistaId = fullName.toLowerCase().replace(/\s+/g, '-')
const { default: image } = images[macchinistaId] ?? images['fallback']
return image
}
---
<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>
<em>> Chi sono i macchinisti?</em>
<br />
Questo è l'appellativo dato agli studenti che si occupano di gestire l'infrastuttura e i servizi
del PHC (vedi la homepage per informazioni su come diventare un macchinista). Qua sotto trovi
i macchinisti attualmente attivi in PHC.
</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>
Qui raccogliamo qualche informazione sui macchinisti del passato, che hanno contribuito a
rendere il PHC quello che è oggi.
</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>