website/src/pages/index.astro

---
import { getCollection } from 'astro:content'
import PageLayout from '@/layouts/PageLayout.astro'
import { Content as WhatPhcContent, frontmatter as whatsPhcFrontmatter } from '@/content/meta/whats-phc.md'
import { Image } from 'astro:assets'
import ProjectCard from '@/components/ProjectCard.astro'
import HomepageZigZag from '@/components/HomepageZigZag.astro'
import Card from '@/components/Card.astro'

const news = await getCollection('news')

const galleryCollage = await Astro.glob('@/assets/gallery/*.jpg')
---

<PageLayout title="PHC" pageTags="homepage">
    <section class="principal">
        <div class="circuit-layer">
            <canvas id="circuits-art"></canvas>
            <script src="../scripts/circuits-art.ts"></script>
        </div>
        <div class="logo">
            <img src="/images/phc-logo-2024-11@x8.png" alt="phc logo" />
        </div>
        <div class="whats-phc card large">
            <input type="checkbox" class="hide" id="mobile-whats-phc-read-more" checked />
            <div class="title">{whatsPhcFrontmatter.title}</div>
            <div class="text">
                <WhatPhcContent />
            </div>
            <div class="mobile-only">
                <label for="mobile-whats-phc-read-more">
                    <div class="button">
                        <span>Mostra di più</span>
                        <span>Mostra meno</span>
                    </div>
                </label>
            </div>
        </div>
    </section>

    <section class="news">
        <HomepageZigZag color="#C2A8EB" />

        <div class="title">Ultime Notizie</div>

        <div class="card-list">
            {
                news.map(newsItem => (
                    <Card>
                        <a href={`/notizie/${newsItem.slug}`} class="title">
                            {newsItem.data.title}
                        </a>
                        <div class="text small dimmed">
                            {new Date(newsItem.data.publishDate).toLocaleDateString('it-IT', {
                                year: 'numeric',
                                month: 'long',
                                day: 'numeric',
                            })}
                        </div>
                        <div class="text">{newsItem.data.description}</div>
                    </Card>
                ))
            }
        </div>

        <a class="primary" href="/notizie" role="button">Vai all'Archivio</a>
    </section>

    <section class="projects" id="projects">
        <HomepageZigZag color="#f5f2cc" />

        <div class="title">Progetti</div>

        <div class="project-list">
            <ProjectCard
                title="Gitea"
                href="https://git.phc.dm.unipi.it/"
                imgSrc="https://upload.wikimedia.org/wikipedia/commons/b/bb/Gitea_Logo.svg"
                style="--card-bg: rgb(150, 197, 150); --masonry-height: 2;"
            >
                <p>Gitea è un servizio di hosting per progetti software, come GitHub ma autogestito.</p>
                <p>
                    Qui puoi trovare i progetti del PHC, e accedendo con un account di Ateneo potrai crearne
                    di nuovi.
                </p>
            </ProjectCard>
            <!-- <ProjectCard
                title="PHC-Bot"
                href="#"
                style="--card-bg: #c55; --masonry-height: 1;"
            >
                <p>Un bot con cui chattare per chiedere informazioni o supporto tecnico.</p>
            </ProjectCard> -->
            <ProjectCard
                title="Orario"
                href="https://lab.phc.dm.unipi.it/orario/"
                style="--card-bg: #75ca75; --masonry-height: 1;"
                imgSrc="https://lab.phc.dm.unipi.it/orario/icon.png"
            >
                <p>
                    Questo sito permette di visualizzare il proprio orario delle lezioni, con informazioni sui
                    docenti e le aule.
                </p>
            </ProjectCard>
            <ProjectCard
                title="Problemi"
                href="https://lab.phc.dm.unipi.it/problemi/"
                style="--card-bg: #aa88c0; --masonry-height: 2;"
                imgSrc="https://lab.phc.dm.unipi.it/problemi/favicon/android-chrome-512x512.png"
            >
                <p>Bacheca di problemi di Matematica da risolvere, inviandone le soluzioni in LaTeX.</p>
                <p>Di sera, puoi leggere i problemi sullo schermo del Dipartimento in atrio.</p>
            </ProjectCard>
            <ProjectCard
                title='Cluster "Steffè"'
                href="http://steffe.cs.dm.unipi.it/"
                style="--masonry-height: 2;"
                imgSrc="https://steffe.lb.cs.dm.unipi.it/assets/img/logo.png"
            >
                <p>
                    Cluster progettato ed assemblato durante il progetto speciale per la didattica "Calcolo
                    Parallelo dall'Infrastruttura alla Matematica".
                </p>
            </ProjectCard>
            <ProjectCard
                title="Seminarietti"
                href="https://seminarietti.phc.dm.unipi.it/"
                style="--card-bg: #bd9fec; --masonry-height: 2;"
                imgSrc="https://seminarietti.phc.dm.unipi.it/favicon.png"
            >
                <p>
                    Storico degli incontri organizzati dal PHC su argomenti di informatica, matematica e
                    tecnologia.
                </p>
            </ProjectCard>
            <ProjectCard
                title="Tutorato"
                href="https://tutorato.phc.dm.unipi.it/"
                style="--card-bg: #c55; --masonry-height: 2;"
                imgSrc="https://tutorato.phc.dm.unipi.it/favicon.svg"
            >
                <p>
                    Un sito con tutte le informazioni sui tutorati di Matematica, con tanto di archivio degli
                    anni passati.
                </p>
            </ProjectCard>
            <ProjectCard
                title="GGWP"
                href="https://ggwp.phc.dm.unipi.it/"
                style="--card-bg: rgb(255, 157, 65); --masonry-height: 2;"
                imgSrc="https://ggwp.phc.dm.unipi.it/ggwp-icon.png"
            >
                <p>
                    Sito per il tabellone del GGWP, utilizzato durante la gara di Novembre 2024 dagli
                    organizzatori per inserire le risposte alla gara in tempo reale.
                </p>
            </ProjectCard>
        </div>
    </section>
    <section class="wanna-be-macchinista">
        <HomepageZigZag color="#888" />

        <div class="title"></div>

        <Card large style="--card-base: #ddd;">
            <div class="title" title="recentemente, anche il caffè">E cosa si fa in PHC?</div>
            <div class="text">
                <p>Nessuno lo sa di preciso, ma facciamo molte cose:</p>
                <ul>
                    <li><strong>amministrazione</strong> di sistemi Linux/Unix e di macchine virtuali</li>
                    <li>
                        supporto tecnico per installare ed usare <strong>Linux</strong> sul proprio portatile
                    </li>
                    <li>
                        <strong>costruiamo</strong>, <strong>smontiamo</strong> ed <strong>aggiustiamo</strong
                        >
                        computer (antichi e moderni)
                    </li>
                    <li>
                        <strong>sviluppo software</strong> di backend e frontend per siti web (ma non solo)
                    </li>
                    <li>
                        organizzazione di <strong>seminari</strong> di divulgazione (vedi <a href="#projects"
                            >sopra</a
                        >)
                    </li>
                </ul>
                <p>
                    Infine, il PHC è prima di tutto un luogo dove <strong>imparare</strong>, <strong
                        >trasmettere</strong
                    > le proprie conoscenze e <strong>condividere</strong> la passione per la tecnologia.
                </p>
            </div>
        </Card>
        <div class="gallery-collage">
            {
                galleryCollage.map((module, i) => {
                    const src = module.default.src
                    const filename = src.split('/').at(-1).split('?').at(0).split('.').at(0)

                    const [rows, cols] = filename.includes('@')
                        ? filename
                              .split('@')
                              .at(-1)
                              .split('x')
                              .map((s: string) => parseInt(s))
                        : [1, 1]

                    return (
                        <Card style={`--rows: ${rows}; --cols: ${cols};`}>
                            <Image src={module.default} alt={`gallery image ${i}`} />
                        </Card>
                    )
                })
            }
        </div>

        <Card large style="--card-base: #ddd;">
            <div class="title">Vuoi diventare macchinista?</div>
            <div class="text">
                <p>
                    <strong>Macchinista non si nasce, si diventa:</strong> se sei uno studente di Matematica e
                    vuoi diventare un macchinista, vienici a trovare!
                </p>
                <p>
                    L'unico prerequisito è la voglia di imparare! Di solito, c'è un periodo di "apprendistato"
                    nel quale si apprendono le basi; una volta superato potrai diventare un macchinista a
                    tutti gli effetti.
                </p>
            </div>
        </Card>
    </section>
</PageLayout>