merge: coding session with fra

package.json

@@ -12,9 +12,9 @@
         "drizzle:migrate": "tsx src/db/migrate.ts"
     },
     "dependencies": {
-        "@astrojs/check": "^0.5.6",
+        "@astrojs/check": "^0.9.4",
-        "@astrojs/node": "^8.2.1",
+        "@astrojs/node": "^8.3.4",
-        "@astrojs/preact": "^3.1.1",
+        "@astrojs/preact": "^3.5.3",
         "@fontsource-variable/material-symbols-outlined": "^5.0.23",
         "@fontsource/iosevka": "^5.0.11",
         "@fontsource/mononoki": "^5.0.11",
@@ -23,7 +23,7 @@
         "@fontsource/source-sans-pro": "^5.0.8",
         "@fontsource/space-mono": "^5.0.20",
         "@preact/signals": "^1.3.0",
-        "astro": "^4.4.6",
+        "astro": "^4.15.11",
         "better-sqlite3": "^9.4.3",
         "drizzle-orm": "^0.29.4",
         "katex": "^0.16.9",
@@ -31,7 +31,7 @@
         "typescript": "^5.3.3"
     },
     "devDependencies": {
-        "@astrojs/mdx": "^3.1.3",
+        "@astrojs/mdx": "^3.1.7",
         "@types/better-sqlite3": "^7.6.9",
         "@types/katex": "^0.16.7",
         "drizzle-kit": "^0.20.14",

src/components/Footer.astro

@@ -1 +1,9 @@
-<footer>&copy; PHC 2024</footer>
+<footer>
+    <div class="text">
+        <p>
+            &copy; PHC 2024 &nbsp;&bull;&nbsp; <a href="mailto:macchinisti@lists.dm.unipi.it"
+                >macchinisti@lists.dm.unipi.it</a
+            >
+        </p>
+    </div>
+</footer>

src/components/Timeline.astro

@@ -0,0 +1,14 @@
+---
+const { year, title } = Astro.props
+---
+
+<div class="timeline-item">
+    <div class="content">
+        <div class="card">
+            <div class="title">{year} &bull; {title}</div>
+            <div class="text">
+                <slot />
+            </div>
+        </div>
+    </div>
+</div>

src/content/meta/whats-phc.md

@@ -2,10 +2,10 @@
 title: Cos'è il PHC?
 ---
 
-Il <span title="Pisa Happy Computing">**PHC**</span> è un laboratorio informatico, gestito dagli studenti del **Dipartimento di Matematica** di Pisa e nato nel [1994](http://web.archive.org/web/19971017065805/http://poisson.dm.unipi.it/), che offre vari servizi agli studenti come [Poisson](https://poisson.phc.dm.unipi.it), che ospita le pagine degli studenti.
+Il <span title="Pisa Happy Computing">**PHC**</span> è un laboratorio informatico, gestito dagli studenti del **Dipartimento di Matematica** di Pisa e nato nel 1999, che offre vari servizi agli studenti come [Poisson](https://poisson.phc.dm.unipi.it), che ospita le pagine degli studenti.
 
 La sede del PHC è la [stanza 106](https://www.dm.unipi.it/mappa/?sel=638cd24b50cf34e03924a00c) del Dipartimento, dove si trovano i **macchinisti** per discutere e realizzare progetti [hardware](http://steffe.cs.dm.unipi.it/) e [software](https://lab.phc.dm.unipi.it/orario), e occuparsi di server autogestiti.
 
 Le macchine del PHC girano principalmente Linux/Unix come sistemi operativi e i macchinisti sono grandi sostenitori di software [FOSS](https://it.wikipedia.org/wiki/Free_and_Open_Source_Software) (che loro stessi sviluppano sull'[istanza Gitea del PHC](https://git.phc.dm.unipi.it/phc)).
 
-La lista dei vari macchinisti nel corso del tempo e di vari eventi notevoli si trova nella [pagina della storia](/storia) del PHC.
+La lista dei vari macchinisti e di altri eventi notevoli si trova nella [pagina della storia](/storia) del PHC.

src/content/news/2024-07-28-nuovo-sito.md

@@ -1,7 +1,7 @@
 ---
 title: Il Nuovo Sito del PHC
 description: Benvenuti nel nuovo sito web del PHC, realizzato con la tecnologia web Astro! In questo articolo, ne vedremo le feature principali e cosa serba il futuro.
-publishDate: 2024-07-28
+publishDate: 2024-10-05
 ---
 
 # Il Nuovo Sito del PHC

src/pages/storia.astro

@@ -3,73 +3,98 @@ import BaseLayout from '../layouts/BaseLayout.astro'
 
 import Header from '../components/Header.astro'
 import Footer from '../components/Footer.astro'
+import Timeline from '../components/Timeline.astro'
 ---
 
 <BaseLayout {...Astro.props} pageTags={'storia'}>
     <Header />
     <main>
         <h1>Storia</h1>
+        <div class="text">
+            <p>
+                Qui annoverariamo la storia del PHC in una timeline con gli eventi più salienti del progetto.
+            </p>
+            <p>
+                Per delle note storiche un po' più dettagliate, si legga l'ottima pagine sul <a
+                    href="http://betti.dm.unipi.it/servizi/PHC.html">sito del dipartimento</a
+                >.
+            </p>
+        </div>
         <div class="timeline">
-            <div class="timeline-item">
+            <Timeline title="Tanti Francesco" year="2022">
-                <div class="content">
+                <p>
-                    <div class="card">
+                    Nel 2022, entrano a far parte del PHC <strong>Francesco Minnocci</strong>, <strong
-                        <div class="title">1999</div>
+                        >Francesco Manicastri</strong
-                        <div class="text">Evento 1</div>
+                    > e <strong>Francesco Baldino</strong>
-                        <div class="text">
+                </p>
-                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
+            </Timeline>
-                            incididunt ut labore et dolore magna aliqua.
+            <Timeline title="Nuovi macchinisti" year="2019">
-                        </div>
+                <p>
-                    </div>
+                    Nel 2019, entrano a far parte del PHC <strong>Antonio De Lucreziis</strong> e <strong
-                </div>
+                        >Illya Serdyuk</strong
-            </div>
+                    >
-            <div class="timeline-item">
+                </p>
-                <div class="content">
+            </Timeline>
-                    <div class="card">
+            <Timeline title="Nuovi macchinisti" year="2018">
-                        <div class="title">2005</div>
+                <p>
-                        <div class="text">Evento 2</div>
+                    Nel 2018, entrano a far parte del PHC <strong>Francesco Caporali</strong> e <strong
-                        <div class="text">
+                        >Letizia D'Achille</strong
-                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
+                    >
-                            incididunt ut labore et dolore magna aliqua.
+                </p>
-                        </div>
+            </Timeline>
-                    </div>
+            <Timeline title="Rinnovo del sito" year="2004">
-                </div>
+                <p>
-            </div>
+                    Dopo un periodo di inattività del progetto, il sito del PHC viene riscritto in PHP e
-            <div class="timeline-item">
+                    trasferito sul dominio <a
-                <div class="content">
+                        href="https://web.archive.org/web/20040823112401/http://poisson.phc.unipi.it/"
-                    <div class="card">
+                        >poisson.phc.unipi.it</a
-                        <div class="title">2010</div>
+                    >, il cui design è caratterizzato da un <a
-                        <div class="text">Evento 3</div>
+                        href="https://web.archive.org/web/20060609003904im_/http://poisson.phc.unipi.it/logo_studenti.orig.png"
-                        <div class="text">
+                        >logo</a
-                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
+                    > creato da <strong>Michele Cerulli</strong>.
-                            incididunt ut labore et dolore magna aliqua.
+                </p><img
-                        </div>
+                    class="dropdown"
-                    </div>
+                    src="https://web.archive.org/web/20060609003904im_/http://poisson.phc.unipi.it/logo_studenti.orig.png"
-                </div>
+                    alt="Logo"
-            </div>
+                />
-            <div class="timeline-item">
+            </Timeline>
-                <div class="content">
+            <Timeline title="Seminari del PHC" year="2000">
-                    <div class="card">
+                <p>
-                        <div class="title">2015</div>
+                    Nel primo semestre del 2000, vengono tenuti diversi <a
-                        <div class="text">Evento 4</div>
+                        href="https://web.archive.org/web/20010430151939/http://www.phc.unipi.it/seminari2000/"
-                        <div class="text">
+                        >seminari</a
-                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
+                    > su temi quali: installazione di programmi e sistemi operativi (come Linux), sicurezza informatica,
-                            incididunt ut labore et dolore magna aliqua.
+                    esperimenti con matematica e musica e creazione di pagine web.
-                        </div>
+                </p>
-                    </div>
+            </Timeline>
-                </div>
+            <Timeline title="Rete del PHC e DNS" year="1999">
-            </div>
+                <p>
-            <div class="timeline-item">
+                    Nel maggio del 1999 viene attivata la rete 131.114.10.0, con tanto di nameserver sul
-                <div class="content">
+                    dominio <a href="https://web.archive.org/web/20010410215451/http://www.phc.unipi.it/"
-                    <div class="card">
+                        >phc.unipi.it</a
-                        <div class="title">2020</div>
+                    >.
-                        <div class="text">Evento 5</div>
+                </p>
-                        <div class="text">
+            </Timeline>
-                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
+            <Timeline title="Fondazione del PHC" year="1999">
-                            incididunt ut labore et dolore magna aliqua.
+                <p>
-                        </div>
+                    In seguito alla proposta del prof. <strong>Sergio Steffè</strong>, in data 26 febbraio
-                    </div>
+                    1999 il Dipartimento di Matematica approva una delibera per stanziare la stanza 106 ed
-                </div>
+                    alcuni computer ad uso di un gruppo di studenti, così da avere un luogo in cui
-            </div>
+                    "smanettare", dare supporto informatica agli studenti e gestire il sito Poisson.
+                </p>
+            </Timeline>
+            <Timeline title="Apertura di Poisson" year="~1994">
+                <p>
+                    Nell'attuale Aula 4, allora semplice Aula studenti, nasce il sito web <strong
+                        >poisson.dm.unipi.it</strong
+                    >
+                    su dei computer messi a disposizione agli studenti da Vinicio Villani. Una versione del 1996
+                    di tale sito si trova nel <a
+                        href="https://web.archive.org/web/19971017065805/http://poisson.dm.unipi.it/"
+                        >Web Archive</a
+                    >
+                </p>
+            </Timeline>
         </div>
     </main>
     <Footer />

src/styles/components.scss

@@ -13,7 +13,11 @@
         place-content: center;
 
         font-size: 24px;
-        font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
+        font-variation-settings:
+            'FILL' 0,
+            'wght' 300,
+            'GRAD' 0,
+            'opsz' 24;
     }
 
     .title {
@@ -334,43 +338,12 @@
             grid-template-columns: var(--timeline-track-size) 1fr;
         }
 
-        max-width: 120rch;
+        max-width: 120ch;
 
         & > .timeline-item {
+            position: relative;
             display: grid;
 
-            @media screen and (min-width: $screen-desktop-min) {
-                &:nth-child(odd) {
-                    grid-column: 1 / span 2;
-                    grid-template-columns: 1fr var(--timeline-track-size);
-
-                    // text-align: right;
-
-                    & > .content {
-                        grid-column: 1;
-                    }
-                }
-
-                &:nth-child(even) {
-                    grid-column: 2 / span 2;
-                    grid-template-columns: var(--timeline-track-size) 1fr;
-
-                    & > .content {
-                        grid-column: 2;
-                    }
-                }
-            }
-
-            @media screen and (max-width: $screen-desktop-min) {
-                grid-column: 1 / span 2;
-
-                grid-template-columns: var(--timeline-track-size) 1fr;
-
-                & > .content {
-                    grid-column: 2;
-                }
-            }
-
             & > .content {
                 padding: 2rem 1rem;
 
@@ -393,8 +366,6 @@
                 }
             }
 
-            position: relative;
-
             // timeline vertical line
             &::before {
                 content: '';
@@ -454,6 +425,67 @@
                     grid-column: 1 / span 1;
                 }
             }
+
+            .dropdown {
+                @include neo-brutalist-card;
+
+                max-width: 15rem;
+                position: absolute;
+                bottom: calc(-10rem - 1px);
+                left: 50%;
+                transform: translateX(calc(-50% - var(--timeline-track-size) / 2));
+                border-top: none;
+                border-radius: 0 0 0.5rem 0.5rem;
+
+                @media screen and (max-width: $screen-desktop-min) {
+                    @include neo-brutalist-card;
+
+                    position: static;
+                    transform: none;
+                    margin-left: auto;
+                    margin-right: auto;
+                }
+            }
+            @media screen and (min-width: $screen-desktop-min) {
+                &:nth-child(odd) {
+                    grid-column: 1 / span 2;
+                    grid-template-columns: 1fr var(--timeline-track-size);
+
+                    & > .content {
+                        grid-column: 1;
+                    }
+
+                    .dropdown {
+                        left: auto;
+                        right: 50%;
+                        transform: translateX(calc(50% - var(--timeline-track-size) / 2));
+                    }
+                }
+
+                &:nth-child(even) {
+                    grid-column: 2 / span 2;
+                    grid-template-columns: var(--timeline-track-size) 1fr;
+
+                    & > .content {
+                        grid-column: 2;
+                    }
+
+                    .dropdown {
+                        left: 50%;
+                        transform: translateX(calc(-50% + var(--timeline-track-size) / 2));
+                    }
+                }
+            }
+
+            @media screen and (max-width: $screen-desktop-min) {
+                grid-column: 1 / span 2;
+
+                grid-template-columns: var(--timeline-track-size) 1fr;
+
+                & > .content {
+                    grid-column: 2;
+                }
+            }
         }
     }
 

src/styles/main.scss

@@ -125,6 +125,9 @@ body {
 
     footer {
         z-index: 10;
+        padding: 1rem 0;
+        --paragraph-margin: 0.5rem;
+        --zone-color: #aaa;
 
         min-height: 6rem;
         border-top: $border-large;

src/styles/pages.scss

@@ -412,7 +412,7 @@
     }
 
     .storia {
-        --card-base: #70f0a9;
+        --card-base: #e4c5ff;
 
         main {
             justify-self: center;
@@ -427,11 +427,11 @@
             // background horizontal linear gradient that is black in the center
             background: linear-gradient(
                 to right,
-                #70f0a933 0%,
+                #e0ffc511 0%,
-                #70f0a933 25%,
+                #e0ffc533 25%,
-                #70f0a999 50%,
+                #e0ffc599 50%,
-                #70f0a933 75%,
+                #e0ffc533 75%,
-                #70f0a933 100%
+                #e0ffc511 100%
             );
         }
     }

src/styles/typography.scss

@@ -84,7 +84,7 @@
 
         p {
             line-height: 1.75;
-            margin: 1rem auto;
+            margin: var(--paragraph-margin, 1rem) auto;
         }
 
         // p + p {