initial prototype

2024-11-25 01:43:17 +01:00
42 changed files with 354 additions and 635 deletions
@@ -3,13 +3,8 @@ import preact from '@astrojs/preact'

 import mdx from '@astrojs/mdx'

-import yaml from '@rollup/plugin-yaml'
-
 // https://astro.build/config
 export default defineConfig({
-    vite: {
-        plugins: [yaml()],
-    },
    server: {
        port: 3000,
    },
@@ -19,5 +14,5 @@ export default defineConfig({
        },
    },
    integrations: [preact(), mdx()],
-    output: 'static',
+    output: 'static'
 })
@@ -11,8 +11,8 @@
    },
    "dependencies": {
        "@astrojs/check": "^0.9.4",
-        "@astrojs/node": "9.0.0",
-        "@astrojs/preact": "4.0.0",
+        "@astrojs/node": "^8.3.4",
+        "@astrojs/preact": "^3.5.3",
        "@fontsource-variable/material-symbols-outlined": "^5.1.1",
        "@fontsource/iosevka": "^5.0.11",
        "@fontsource/mononoki": "^5.0.11",
@@ -20,19 +20,16 @@
        "@fontsource/source-code-pro": "^5.0.16",
        "@fontsource/source-sans-pro": "^5.0.8",
        "@fontsource/space-mono": "^5.0.20",
-        "@phosphor-icons/core": "^2.1.1",
        "@preact/signals": "^1.3.0",
        "@types/jsdom": "^21.1.7",
-        "astro": "5.1.0",
+        "astro": "^4.15.11",
        "fuse.js": "^7.0.0",
        "katex": "^0.16.9",
-        "lucide-static": "^0.468.0",
        "preact": "^10.19.6",
        "typescript": "^5.3.3"
    },
    "devDependencies": {
-        "@astrojs/mdx": "4.0.2",
-        "@rollup/plugin-yaml": "^4.1.2",
+        "@astrojs/mdx": "^3.1.7",
        "@types/katex": "^0.16.7",
        "jsdom": "^24.1.1",
        "linkedom": "^0.18.4",
@@ -1,7 +1,6 @@
 import { type ComponentChildren } from 'preact'
 import { useState, useRef, useEffect } from 'preact/hooks'
 import { clsx, isMobile } from './lib/util'
-import { PhosphorIcon } from './Icon'

 export const ComboBox = ({
    value,
@@ -41,8 +40,7 @@ export const ComboBox = ({
        >
            <div class="selected" onClick={() => setOpen(!open)}>
                <div class="content">{children[value]}</div>
-                {/* <span class="material-symbols-outlined">expand_more</span> */}
-                <PhosphorIcon name="caret-down" />
+                <span class="material-symbols-outlined">expand_more</span>
            </div>
            {open && (
                <div
@@ -1,21 +0,0 @@
-const icons = Object.fromEntries(
-    Object.entries(
-        import.meta.glob<{ default: ImageMetadata }>(`node_modules/@phosphor-icons/core/assets/light/*.svg`, {
-            eager: true,
-        })
-    ).map(([path, module]) => [path.split('/').pop()!.split('.')[0].replace('-light', ''), module])
-)
-
-type Props = {
-    name: string
-}
-
-export const PhosphorIcon = ({ name }: Props) => {
-    const icon = icons[name]
-
-    if (!icon) {
-        throw new Error(`Icon "${name}" not found`)
-    }
-
-    return <img class="phosphor-icon" src={icon.default.src} alt={name} />
-}
@@ -3,7 +3,6 @@ import Fuse from 'fuse.js'
 import { useEffect } from 'preact/hooks'
 import { ShowMore } from './Paginate'
 import { ComboBox } from './ComboBox'
-import { PhosphorIcon } from './Icon'

 type User = {
    uid: string
@@ -12,15 +11,15 @@ type User = {

 const FILTERS = {
    utenti: {
-        icon: 'user',
+        icon: 'person',
        label: 'Utenti',
    },
    macchinisti: {
-        icon: 'wrench',
+        icon: 'construction',
        label: 'Macchinisti',
    },
    rappstud: {
-        icon: 'bank',
+        icon: 'account_balance',
        label: 'Rappresentanti',
    },
 }
@@ -106,9 +105,7 @@ export const UtentiPage = () => {
                        Object.entries(FILTERS).map(([k, v]) => [
                            k,
                            <>
-                                {/* <span class="material-symbols-outlined">{v.icon}</span> {v.label} */}
-                                <PhosphorIcon name={v.icon} />
-                                {v.label}
+                                <span class="material-symbols-outlined">{v.icon}</span> {v.label}
                            </>,
                        ])
                    )}
@@ -120,8 +117,7 @@ export const UtentiPage = () => {
                        onInput={e => ($searchText.value = e.currentTarget.value)}
                        value={$searchText.value}
                    />
-                    {/* <span class="material-symbols-outlined">search</span> */}
-                    <PhosphorIcon name="magnifying-glass" />
+                    <span class="material-symbols-outlined">search</span>
                </div>
            </div>
            <div class="search-results">
@@ -130,22 +126,13 @@ export const UtentiPage = () => {
                        {poissonUser => (
                            <div class="search-result">
                                <div class="icon">
-                                    {/* <span class="material-symbols-outlined">
+                                    <span class="material-symbols-outlined">
                                        {RAPPSTUD.includes(poissonUser.uid)
                                            ? 'account_balance'
                                            : MACCHINISTI.includes(poissonUser.uid)
                                            ? 'construction'
                                            : 'person'}
-                                    </span> */}
-                                    <PhosphorIcon
-                                        name={
-                                            RAPPSTUD.includes(poissonUser.uid)
-                                                ? 'bank'
-                                                : MACCHINISTI.includes(poissonUser.uid)
-                                                ? 'wrench'
-                                                : 'user'
-                                        }
-                                    />
+                                    </span>
                                </div>
                                <div class="text">{poissonUser.gecos}</div>
                                <div class="right">
@@ -153,8 +140,7 @@ export const UtentiPage = () => {
                                        href={`https://poisson.phc.dm.unipi.it/~${poissonUser.uid}`}
                                        target="_blank"
                                    >
-                                        {/* <span class="material-symbols-outlined">open_in_new</span> */}
-                                        <PhosphorIcon name="arrow-square-out" />
+                                        <span class="material-symbols-outlined">open_in_new</span>
                                    </a>
                                </div>
                            </div>
@@ -1,44 +0,0 @@
---
-import PhosphorIcon from './PhosphorIcon.astro'
-
-const ICONS_MAP: Record<string, string> = {
-    github: 'github-logo',
-    linkedin: 'linkedin-logo',
-    website: 'globe',
-    mail: 'mailbox',
-}
-
-type Props = {
-    image: ImageMetadata
-    fullName: string
-    entranceDate: number
-    exitDate?: number
-    description: string
-    social?: {
-        github?: string
-        linkedin?: string
-        website?: string
-        mail?: string
-    }
-}
-
-const { image, fullName, entranceDate, exitDate, description, social } = Astro.props
---
-
-<div class="bubble">
-    <img src={image.src} alt={fullName.toLowerCase()} />
-    <div class="title">{fullName}</div>
-    <div class="date">{entranceDate}&mdash;{exitDate ?? 'Presente'}</div>
-    <div class="description">{description}</div>
-    {
-        social && (
-            <div class="social">
-                {Object.entries(social).map(([key, value]) => (
-                    <a href={value} target="_blank" rel="noopener noreferrer">
-                        <PhosphorIcon name={ICONS_MAP[key] ?? 'question-mark'} />
-                    </a>
-                ))}
-            </div>
-        )
-    }
-</div>
@@ -1,4 +1,7 @@
 ---
+import type { AstroBuiltinProps } from 'astro'
+import type { AstroComponentFactory } from 'astro/runtime/server/index.js'
+
 type Props = {
    large?: boolean
    style?: string
@@ -1,36 +1,16 @@
---
-const links = [
-    { href: '/utenti', text: 'Utenti' },
-    // { href: '/macchinisti', text: 'Macchinisti' },
-    // { href: '/appunti', text: 'Appunti' },
-    { href: '/notizie', text: 'Notizie' },
-    { href: '/guide', text: 'Guide' },
-    { href: '/storia', text: 'Storia' },
-    // { href: '/login', text: 'Login' },
-]
---
-
 <header>
-    <!-- main logo on the left -->
    <a href="/" class="logo">
        <img src="/images/phc-logo-2024-11@x8.png" alt="phc logo" />
    </a>
-
-    <!-- hidden checkbox for mobile js-less sidebar interaction -->
    <input type="checkbox" id="header-menu-toggle" />
-
-    <!-- desktop navbar links -->
    <div class="links desktop-only">
-        {
-            links.map(link => (
-                <a role="button" href={link.href}>
-                    {link.text}
-                </a>
-            ))
-        }
+        <a role="button" href="/utenti">Utenti</a>
+        <!-- <a role="button" href="/appunti">Appunti</a> -->
+        <a role="button" href="/notizie">Notizie</a>
+        <a role="button" href="/guide">Guide</a>
+        <a role="button" href="/storia">Storia</a>
+        <!-- <a class="primary" role="button" href="/login">Login</a> -->
    </div>
-
-    <!-- sidebar menu for mobile -->
    <div class="mobile-only">
        <label id="header-menu-toggle-menu" role="button" class="flat icon" for="header-menu-toggle">
            <span class="material-symbols-outlined">menu</span>
@@ -39,17 +19,14 @@ const links = [
            <span class="material-symbols-outlined">close</span>
        </label>
    </div>
-
-    <!-- sidebar menu only visible on mobile when #header-menu-toggle is checked -->
    <div class="side-menu">
        <div class="links">
-            {
-                links.map(link => (
-                    <a role="button" href={link.href}>
-                        {link.text}
-                    </a>
-                ))
-            }
+            <a role="button" href="/utenti">Utenti</a>
+            <!-- <a role="button" href="/appunti">Appunti</a> -->
+            <a role="button" href="/notizie">Notizie</a>
+            <a role="button" href="/guide">Guide</a>
+            <a role="button" href="/storia">Storia</a>
+            <!-- <a class="primary" role="button" href="/login">Login</a> -->
        </div>
    </div>
 </header>
@@ -1,21 +0,0 @@
---
-import { Image } from 'astro:assets'
-
-type Props = {
-    name: string
-}
-
-const { name } = Astro.props
-
-const icons = Object.fromEntries(
-    Object.entries(
-        import.meta.glob<{ default: ImageMetadata }>(`node_modules/@phosphor-icons/core/assets/light/*.svg`)
-    ).map(([path, module]) => [path.split('/').pop()!.split('.')[0].replace('-light', ''), module])
-)
-
-if (!icons[name]) {
-    throw new Error(`Icon "${name}" not found`)
-}
---
-
-<Image class="phosphor-icon" src={icons[name]()} alt={name} />
@@ -44,15 +44,9 @@ const seminariettiCollection = defineCollection({
    }),
 })

-const metaCollection = defineCollection({
-    type: 'content',
-    schema: z.any(),
-})
-
 // Export a single `collections` object to register your collection(s)
 export const collections = {
    news: newsCollection,
    guides: guidesCollection,
    seminarietti: seminariettiCollection,
-    meta: metaCollection,
 }
@@ -1,7 +1,7 @@
 ---
 id: git-101
 title: Git 101
-description: Una guida 📚 introduttiva alle basi di Git
+description: Una guida introduttiva alle basi di Git
 author: Luca Lombardo
 tags: [git, gitea]
 ---
@@ -1,7 +1,7 @@
 ---
 id: pagina-poisson-con-astro
 title: Pagina Poisson con Astro
-description: Vediamo come creare una pagina Poisson moderna ⚡ con Astro
+description: Vediamo come creare una pagina Poisson moderna con Astro
 author: Antonio De Lucreziis
 tags: [astro, website]
 ---
@@ -1,18 +1,18 @@
 ---
 id: deploy-with-github-actions
 title: Deploy automatico per Poisson da GitHub
-description: Come impostare il deploy automatico per la propria pagina Poisson tramite le GitHub Actions
+description: Come impostare il deploy automatico per la propria pagina Poisson utilizzando le GitHub Actions
 author: Antonio De Lucreziis
-tags: [github, poisson, sito]
+tags: [github, deploy, poisson]
 ---

-Supponiamo di avere un sito web statico che vogliamo caricare su Poisson, ad esempio un progetto NodeJS che genera in `dist/` o `out/` i file da caricare. Come possiamo automatizzare il processo di deploy su Poisson?
+Supponiamo di avere un sito web statico che vogliamo caricare su Poisson, ad esempio un progetto NodeJS che genera in `dist/` o `out/` i file da caricare. Come possiamo automatizzare il processo di deploy su Poisson? 

-Vedremo come deployare il nostro sito, e successivamente come automatizzare il deployment con le GitHub Actions.
+Vediamo come automatizzare questo processo utilizzando le GitHub Actions.

-## Setup manuale
+## Setup

-Come primo approccio, potremmo compilare il nostro progetto in locale e poi caricare i file su Poisson utilizzando `rsync`, ad esempio come segue:
+Manualmente, possiamo costruire il nostro progetto in locale e poi caricare i file su Poisson utilizzando `rsync`, ad esempio come segue:

 ```bash
 $ npm run build
@@ -28,49 +28,49 @@ Per automatizzare questo processo possiamo caricare il nostro progetto su GitHub
 ```yaml
 name: Deploy to Poisson
 on:
-    push:
-        branches:
-            - main
+  push:
+    branches:
+      - main
 jobs:
-    deploy:
-        runs-on: ubuntu-latest
-        steps:
-            - name: Checkout code
-              uses: actions/checkout@v4
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4

-            - name: Write SSH keys
-              run: |
-                  install -m 600 -D /dev/null ~/.ssh/known_hosts
-                  install -m 600 -D /dev/null ~/.ssh/id_ed25519
-                  echo "${{ secrets.SSH_KNOWN_HOSTS }}" > ~/.ssh/known_hosts
-                  echo "${{ secrets.SSH_PRIVATE_KEY }}" > ~/.ssh/id_ed25519
+      - name: Write SSH keys
+        run: |
+          install -m 600 -D /dev/null ~/.ssh/known_hosts
+          install -m 600 -D /dev/null ~/.ssh/id_ed25519
+          echo "${{ secrets.SSH_KNOWN_HOSTS }}" > ~/.ssh/known_hosts
+          echo "${{ secrets.SSH_PRIVATE_KEY }}" > ~/.ssh/id_ed25519

-            - name: Setup Node.js
-              uses: actions/setup-node@v3
-              with:
-                  node-version: '23'
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '23'

-            - name: Install dependencies
-              run: npm install
+      - name: Install dependencies
+        run: npm install

-            - name: Build
-              run: npm run build
+      - name: Build
+        run: npm run build

-            - name: Deploy
-              run: rsync -cavz dist/ ${{ secrets.SSH_USER }}@poisson.phc.dm.unipi.it:public_html/
+      - name: Deploy
+        run: rsync -cavz dist/ ${{ secrets.SSH_USER }}@poisson.phc.dm.unipi.it:public_html/
 ```

 ## Comando rsync

 Il comando `rsync` ha le seguenti opzioni:

-   `-c` per controllare i file tramite checksum invece che per data e dimensione (che sono sempre diverse visto che stiamo ricosruendo il sito ogni volta con le GitHub Actions)
+- `-c` per controllare i file tramite checksum invece che per data e dimensione (che sono sempre diverse visto che stiamo ricosruendo il sito ogni volta con le GitHub Actions)

-   `-a` per copiare ricorsivamente i file e mantenere i permessi
+- `-a` per copiare ricorsivamente i file e mantenere i permessi

-   `-v` per mostrare i file copiati
+- `-v` per mostrare i file copiati

-   `-z` per comprimere i file durante il trasferimento
+- `-z` per comprimere i file durante il trasferimento

 ## SSH Segreti

@@ -79,13 +79,13 @@ Per stabilire una connessione SSH a Poisson dalle GitHub Actions in modo sicuro,
 ```yaml
 - name: Write SSH keys
  run: |
-      install -m 600 -D /dev/null ~/.ssh/known_hosts
-      install -m 600 -D /dev/null ~/.ssh/id_ed25519
-      echo "${{ secrets.SSH_KNOWN_HOSTS }}" > ~/.ssh/known_hosts
-      echo "${{ secrets.SSH_PRIVATE_KEY }}" > ~/.ssh/id_ed25519
+    install -m 600 -D /dev/null ~/.ssh/known_hosts
+    install -m 600 -D /dev/null ~/.ssh/id_ed25519
+    echo "${{ secrets.SSH_KNOWN_HOSTS }}" > ~/.ssh/known_hosts
+    echo "${{ secrets.SSH_PRIVATE_KEY }}" > ~/.ssh/id_ed25519
 ```

-Questa è la parte più importante del workflow, che permette di autenticarsi su Poisson senza dover inserire la password ogni volta (cosa che non possiamo materialmente fare dall GitHub Actions).
+Questa è la parte più importante del workflow, che permette di autenticarsi su Poisson senza dover inserire la password ogni volta (cosa che non possiamo materialmente fare dall GitHub Actions). 

 Per farlo, creiamo in locale una coppia di chiavi SSH apposta per le GitHub Actions e aggiungiamo la chiave pubblica su Poisson. Per farlo, possiamo seguire questi passaggi:

@@ -96,7 +96,7 @@ $ ssh-copy-id -i actions-deploy-key <username>@poisson.phc.dm.unipi.it

 Qui generiamo una chiave ssh utilizzando l'algoritmo `ed25519` (leggermente più consigliato rispetto a `rsa`, in particolare ha anche chiavi più corte), `-C` aggiunge semplicemente un commento alla chiave e `-f` specifica il file in cui salvare la chiave.

-Poi eseguendo `cat actions-deploy-key` possiamo copiare il contenuto della chiave privata ed aggiungiamo il contenuto in un segreto chiamato `SSH_PRIVATE_KEY` nella nostra repository GitHub.
+Poi eseguendo `cat actions-deploy-key` possiamo copiare il contenuto della chiave privata ed aggiungiamo il contenuto in un segreto chiamato `SSH_PRIVATE_KEY` nella nostra repository. 

 Poi, per evitare che la connessione venga rifiutata, eseguiamo in locale anche uno scan delle chiavi SSH di Poisson:

@@ -104,8 +104,8 @@ Poi, per evitare che la connessione venga rifiutata, eseguiamo in locale anche u
 $ ssh-keyscan poisson.phc.dm.unipi.it
 ```

-(se l'output è vuoto riprovare con `ssh-keyscan -4 ...`) e copiamo l'output in un segreto della nostra repository chiamato `SSH_KNOWN_HOSTS`.
+(se l'output è vuoto riprovare con `ssh-keyscan -4 ...`) e copiamo l'output in un segreto della nostra repository chiamato `SSH_KNOWN_HOSTS`. 

 Infine possiamo aggiungere anche un segreto `SSH_USER` con il nostro username o modificare anche direttamente il workflow ed inserire l'username direttamente nel file.

-Ora ogni volta che facciamo un push sul branch `main` il nostro sito verrà automaticamente costruito e caricato su Poisson!
+Ora ogni volta che facciamo un push sul branch `main` il nostro sito verrà automaticamente costruito e caricato su Poisson!
@@ -1,9 +1,9 @@
 ---
 id: attivazione-poisson
 title: Come attivare il proprio account Poisson
-description: Guida all'attivazione dell'account Poisson, con istruzioni per il primo accesso e configurazione del proprio sito
+description: Guida per l'attivazione dell'account Poisson, con le istruzioni per il primo accesso e la configurazione del proprio spazio web
 author: Luca Lombardo
-tags: [poisson, sito, ssh]
+tags: [poisson]
 ---

 Poisson è un server autogestito dalla comunità studentesca di matematica, da sempre gestito con cura dai membri del PHC. Ogni studentə ha la possibilità di attivare un account personale, che consente l'accesso alla macchina via SSH e la creazione di uno spazio web personale.
@@ -1,7 +1,7 @@
 ---
 id: recupero-password
 title: MI SONO SCORDATO LA PASSWORD DI POISSON COME FACCIO ORA?
-description: Hai dimenticato la tua password Poisson? Niente paura, vediamo cosa fare! 💪
+description: Hai dimenticato la tua password Poisson? Niente paura, ecco cosa fare!
 author: Luca Lombardo
 tags: [poisson, password]
 ---
@@ -12,23 +12,10 @@ Se per qualche strano motivo hai dimenticato la tua password Poisson, niente pau

 2. Nella mail, specifica il tuo nome, cognome, username di ateneo (quello della tua email istituzionale) e se lo ricordi, anche il tuo username Poisson.

-3. Attendi pazientemente la risposta dei macchinisti, che ti resetteranno la password e ti invieranno una nuova.
+3. Attendi pazientemente la risposta dei macchinisti, che ti resetteranno la password e ti invieranno una nuova via email.

 E voilà, in un batter d'occhio sarai di nuovo pronto a entrare nel fantastico mondo di Poisson.

-## Template Email di Recupero
-
-**Oggetto**: Recupero Password Poisson
-
-```
-Salve,
-sono NOME COGNOME, la mia email istituzionale è
-N.COGNOME@studenti.unipi.it {ed il mio username Poisson
-è USERNAME / ma non ricordo il mio username Poisson}.
-
-Grazie mille!
-```
-
 ---

 **Nota:** Non preoccuparti, capita a tutti di dimenticare una password ogni tanto. Se vuoi evitare che succeda di nuovo, prova ad usare un password manager come [Bitwarden](https://bitwarden.com/) 😉
@@ -1,68 +0,0 @@
---
-id: eliminare-sito-poisson
-title: Come tolgo la mia pagina Poisson da Google?
-description: Sei divenuto troppo famoso 🤩 e vuoi eliminare la tua pagina Poisson dai risultati di ricerca di Google? Ecco come farlo!
-author: Antonio De Lucreziis
-tags: [poisson, sito]
---
-
-Hai un nuovo sito web e vuoi che venga indicizzato da Google prima della tua pagina Poisson? Oppure sei diventato troppo famoso, e vuoi eliminare la tua pagina Poisson dai risultati di ricerca di Google? In entrambi i casi, vediamo come fare.
-
-Ricorda che la tua pagina Poisson è indicizzata da Google in quanto pubblicamente accessibile. Per "toglierla" dai risultati di ricerca dovremo chiedere a Google di non indicizzarla più, e quindi innanzitutto dire a Google che siamo i proprietari di quella pagina (altrimenti non ci permetterà di rimuoverla).
-
-> **Attenzione**: in questo articolo, sostituisci sempre `USERNAME` con il tuo username Poisson (non `n.cognome`, quello è il tuo username di Ateneo).
-
-## Cancellazione pagina Poisson
-
-Invece di eliminare la tua pagina Poisson, puoi anche solo ridirezionarla al tuo nuovo sito web. Se fossi proprio sicuro di volerla eliminare, vediamo ora come fare.
-
-A questo punto, se vogliamo anche eliminare tutta la pagina Poisson, possiamo farlo con il comando
-
-```bash
-$ ssh USERNAME@poisson.phc.dm.unipi.it
-$ cd public_html
-$ rm -rf *
-```
-
-> **Attenzione!** La cartella `public_html` nella propria home in realtà è un **link simbolico** alla cartella `public_html`, che fisicamente sta altrove. Per sostituire o cancellare il contenuto della propria pagina Poisson, dovremo eliminare tutti i file contenuti nella cartella `public_html`, _ma non la cartella stessa_.
-
-## Google Search Console
-
-### 1. Verifica della proprietà
-
-Prima di tutto visita la pagina <https://search.google.com/search-console>, fai l'accesso con un account Google di tuo piacimento e clicca su "Aggiungi proprietà". Poisson utilizza la convenzione che le pagine personali sono raggiungibili all'indirizzo `https://poisson.phc.dm.unipi.it/~USERNAME`, quindi seleziona l'opzione "Prefisso URL" / "URL prefix" per poi inserire l'URL della tua pagina Poisson (es. `https://poisson.phc.dm.unipi.it/~USERNAME`).
-
-Dopo una breve attesa, Google ci chiederà di verificare la nostra proprietà con alcuni metodi. Il metodo più semplice è quello di inserire un file di verifica nella nostra cartella pubblica. Scarica il file di verifica e copialo nella tua cartella pubblica: se ad esempio il file si chiama `google1234567890.html`, puoi caricarlo nella tua cartella pubblica con il seguente comando ([clicca QUI se non ricordi le credenziali](/guide/recupero-password)):
-
-```bash
-# Vai nella cartella in cui hai scaricato il file di verifica
-$ ls
-... google1234567890.html ...
-
-# Copia il file nella public_html su Poisson
-$ scp google1234567890.html USERNAME@poisson.phc.dm.unipi.it:public_html/
-```
-
-Dopo qualche minuto, torniamo su Google Search Console e clicchiamo su "Verifica". Se tutto è andato a buon fine, Google ci darà accesso ai dati di indicizzazione della nostra pagina Poisson.
-
-### 2. Richiesta di Rimozione
-
-Nella barra laterale di sinistra, nella sezione "Indicizzazione", clicchiamo su "Rimozioni", dopodichè in "Rimozioni Temporanee" clicchiamo su "Nuova Richiesta" e selezioniamo l'opzione "Rimuovi tutti gli URL con questo prefisso". Come prefisso, andiamo ad inserire `https://poisson.phc.dm.unipi.it/~USERNAME` per rimuovere la nostra pagina Poisson e tutte le sue sottopagine. Infine, clicchiamo su "Invia richiesta di rimozione" per confermare.
-
-### 3. Attesa...
-
-Considera che Google potrebbe metterci fino a qualche giorno per rimuovere le pagine indicizzate. Ben fatto! Ora la tua pagina Poisson non sarà più indicizzata da Google.
-
-## Redirect
-
-Se invece vuoi che la tua pagina Poisson rimandi al tuo nuovo sito web, puoi impostare un redirect. Per fare ciò, ti basterà creare un file `.htaccess` nella cartella `public_html/` della tua home con il seguente contenuto:
-
-```apache
-RedirectMatch 307 /~USERNAME/.* https://www.mio-nuovo-sito.com/
-```
-
-Qui, il codice `307` indica un redirect temporaneo; se sei sicuro di volere un redirect permanente puoi usare direttamente il codice `301` (la differenza tecnica tra i due è che il primo non salva la cache del redirect nel browser, mentre il secondo sì).
-
-## Conclusioni
-
-Per rimuovere la tua pagina Poisson dai risultati di ricerca di altri motori di ricerca come Bing, DuckDuckGo, ecc., bisogna seguire procedure simili. Se fosse proprio necessario scrivi pure a noi macchinisti, e ricorda sempre che la tua pagina Poisson è pubblica e accessibile a tutti, quindi non metterci cose che non vuoi che siano pubbliche.
@@ -3,8 +3,10 @@
 title: Cos'è il PHC?
 ---

-Il <span class="highlighted" title="Pisa Happy Computing">**PHC**</span> è un laboratorio informatico nato nel 1999 e gestito dagli studenti del **Dipartimento di Matematica** di Pisa; per più informazioni sulla storia del PHC, vedi la [pagina dedicata](/storia).
+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 i <span class="highlighted" title="ovver gli studenti che gestiscono il PHC, vedi fine pagina">**macchinisti**</span> si ritrovano per realizzare progetti [hardware](http://steffe.cs.dm.unipi.it/) o [software](https://lab.phc.dm.unipi.it/orario) e per occuparsi di alcuni servizi per gli studenti, come il server [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.

-In PHC si usano principalmente sistemi operativi basati su <span class="highlighted" title="ma anche UNIX, Solaris, MacOS...">**Linux**</span>, ed i macchinisti sono grandi sostenitori del <a title="Free and Open Source Software" href="https://it.wikipedia.org/wiki/Free_and_Open_Source_Software">FOSS</a> (che loro stessi sviluppano sulla propria istanza [Gitea](https://git.phc.dm.unipi.it/phc)).
+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 e di altri eventi notevoli si trova nella [pagina della storia](/storia) del PHC.
@@ -1,31 +0,0 @@
---
-title: Incidente del 2 Gennaio 2025
-description: Riassunto dell'incidente che ha portato al guasto del server Poisson e delle azioni intraprese per ripristinare i servizi.
-publishDate: 2025-01-07
---
-
-# Incidente 2-7 Gennaio 2025
-
-In questi giorni il server fisico principale del PHC, **Poisson**, non è stato operativo. Di conseguenza, i servizi ospitati direttamente su Poisson, come le pagine web degli utenti, l'accesso SSH e Gitea, sono rimasti offline. Al contrario, altri servizi web del PHC che non sono hostati su Poisson non hanno subito interruzioni. La buona notizia è che tutti i dati sono stati recuperati con successo e che l'infrastruttura è tornata pienamente operativa senza ulteriori complicazioni.
-
-## Cosa è successo?
-
-Sospettiamo che la causa principale dell'incidente sia stata una serie di brusche accensioni e spegnimenti, che hanno portato al guasto della scheda madre di Poisson. Il server non riusciva più ad avviarsi, neanche accedendo al BIOS, rendendo evidente che il problema era di natura hardware.
-
-### Diagnosi e sostituzione
-
-La mattina del 7 Gennaio, grazie alla disponibilità del dipartimento, abbiamo trovato una scheda madre di recupero, simile a quella originale ma meno potente. Questa è stata installata immediatamente, permettendo di riportare Poisson in funzione. Dal punto di vista software non è cambiato nulla: l'architettura della CPU è rimasta invariata, sebbene con meno core e la metà della RAM. Gli Hard Disks e una delle schede di rete sono stati riutilizzati senza problemi.
-
-In un futuro prossimo si prevede di aggiornare la scheda madre con una più potente, per garantire le prestazioni di Poisson. Preghiamo per ora quindi di evitare di eseguire operazioni troppo pesanti sul server.
-
-Tutto è stato rimontato nel consueto case bianco che ospita Poisson. Anche se ora è operativo, il server potrebbe essere considerato una nuova incarnazione, sollevando una riflessione interessante: **Poisson è ancora lo stesso server?** Proprio come nel paradosso della nave di Teseo, molti componenti di Poisson sono stati sostituiti nel corso degli anni. Dal 1992, pezzi come HDD, CPU, RAM e schede madri sono stati aggiornati per mantenere il server al passo con i tempi, mentre i dati e le funzionalità sono rimasti intatti.
-
-![Visione vs Visione](/images/misc/meme-vision-vs-vision.webp)
-
-## Ritorno alla normalità
-
-Grazie all’intervento, i servizi principali sono tornati online. Gli utenti possono nuovamente accedere alle proprie pagine web, utilizzare SSH e lavorare su Gitea senza alcuna modifica ai dati o alle configurazioni precedenti.
-
-Per chi avesse riscontrato difficoltà nell'accesso, invitiamo a contattare i macchinisti per ricevere supporto.
-
-> Be a System Administrator, they said. It will be fun, they said 🤦‍♂️
@@ -1,73 +0,0 @@
-# the schema of this file in "@/files.d.ts"
-
- fullName: Antonio De Lucreziis
-  entranceDate: 2019
-  description: |
-      Appassionato di geometria computazionale, parser, teoria dei linguaggi di programmazione, Smalltalk e Lisp.
-  social:
-      github: https://github.com/aziis98
-      website: https://poisson.phc.dm.unipi.it/~delucreziis/
-
- fullName: Luca Lombardo
-  entranceDate: 2024
-  description: Appassionato di algoritmi e strutture dati, Rust e di quando matematica e informatica si incontrano.
-  social:
-      github: https://github.com/lukefleed
-      website: https://lukefleex.xyz
-      linkedin: https://www.linkedin.com/in/l-lombardo/
-
- fullName: Francesco Minnocci
-  entranceDate: 2022
-  description: Chitarrista classico ossessionato con la geometria aritmetica, linux e il rock progressivo.
-  social:
-      github: https://github.com/BachoSeven
-      website: https://bachoseven.com
-
- fullName: Francesco Baldino
-  entranceDate: 2022
-  description: Bla bla Star Wars
-  social:
-      github: https://github.com/Fran314
-      website: https://poisson.phc.dm.unipi.it/~baldino
-
- fullName: Illya Serdyuk
-  entranceDate: 2020
-  description: lorem ipsum carogna
-  social:
-      github: https://github.com/Kratacoa
-
-# Vecchi Macchinisti
-
-# - fullName: Francesco Manicastri
-#   entranceDate: 2022
-#   exitDate: 2024
-#   description: Bla bla Keenan Crane
-
- fullName: Cristiano Cricci
-  entranceDate: 2010
-  exitDate: 2019
-  social:
-      website: https://poisson.phc.dm.unipi.it/~cricci/
-
- fullName: Tommaso Biannucci
-  entranceDate: 2019
-  exitDate: 2022
-  social:
-      github: https://gitlab.com/churli
-      website: https://churli.gitlab.io/
-
- fullName: Letizia D'Achille
-  entranceDate: 2018
-  exitDate: 2022
-  description: Appassionata di crittografia, teoria dei codici e matematica computazionale.
-  social:
-      github: https://github.com/letizia-dachille
-      website: https://letizia-dachille.github.io/
-      linkedin: https://www.linkedin.com/in/letizia-dachille/
-
- fullName: Emiliano Rago
-  entranceDate: 2000
-  exitDate: 2006
-  description: Traviato da Linux in età troppo giovane ha difficoltà ad usare il mouse ma ama gli shortcuts con una decina di tasti.
-  social:
-      linkedin: https://www.linkedin.com/in/emiliano-rago-1a8018109/
@@ -1,17 +0,0 @@
-declare module '*.yaml' {
-    const value: any // Add type definitions here if desired
-    export default value
-}
-
-declare module '@/data/macchinisti.yaml' {
-    type Macchinista = {
-        fullName: string
-        entranceDate: number
-        exitDate?: number
-        description: string
-        social: Record<string, string>
-    }
-
-    const value: Macchinista[]
-    export default value
-}
@@ -19,7 +19,7 @@ export async function getStaticPaths() {
            params: { tag },
            props: {
                tag,
-                guides: guides.filter(post => post.data.tags.includes(tag)).toReversed(),
+                guides: guides.filter(post => post.data.tags.includes(tag)),
            },
        }
    })
@@ -128,10 +128,7 @@ const galleryCollage = await Astro.glob('@/assets/gallery/*.jpg')
                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>
+                <p>Varie conferenze del PHC su argomenti di informatica, matematica e tecnologia.</p>
            </ProjectCard>
            <ProjectCard
                title="Tutorato"
@@ -144,17 +141,6 @@ const galleryCollage = await Astro.glob('@/assets/gallery/*.jpg')
                    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">
@@ -167,28 +153,17 @@ const galleryCollage = await Astro.glob('@/assets/gallery/*.jpg')
            <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>amministrazione di sistemi Linux/Unix e macchine virtuali</li>
+                    <li>supporto tecnico per installare e usare Linux sul proprio portatile</li>
+                    <li>costruiamo, smontiamo ed aggiustamo computer (antichi e moderni)</li>
+                    <li>sviluppo di software per backend e web development</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
-                        >)
+                        organizzazione di seminari 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.
+                    Inoltre, il PHC è prima di tutto un luogo dove imparare, trasmettere le proprie conoscenze
+                    e condividere la passione per la tecnologia.
                </p>
            </div>
        </Card>
@@ -1,85 +0,0 @@
---
-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>
@@ -10,7 +10,7 @@ const news = await getCollection('news')
    <h1><a href="/notizie">Notizie</a></h1>
    <div class="card-list">
        {
-            news.toReversed().map(newsItem => (
+            news.map(newsItem => (
                <div class="card">
                    <a href={`/notizie/${newsItem.slug}`} class="title">
                        {newsItem.data.title}
@@ -0,0 +1,95 @@
+---
+import Footer from '@/components/Footer.astro'
+import Header from '@/components/Header.astro'
+import BaseLayout from '@/layouts/BaseLayout.astro'
+---
+
+<BaseLayout title="Cluster Steffè | PHC" pageTags={'steffe'}>
+    <Header />
+    <div class="steffe-layout">
+        <div class="docs-navigation">
+            <div class="nav-item active">
+                <a href="/steffe">Documentazione</a>
+            </div>
+            <div class="nav-item">
+                <a href="/steffe/monitoring">Monitoring</a>
+            </div>
+            <div class="nav-item">
+                <a href="/steffe/installazione">Installazione</a>
+            </div>
+            <div class="nav-item">
+                <a href="/steffe/risorse">Risorse</a>
+            </div>
+            <div class="nav-item">
+                <a href="/steffe/contatti">Contatti</a>
+            </div>
+            <div class="nav-item">
+                <a href="/steffe/faq">FAQ</a>
+            </div>
+        </div>
+        <div class="docs-content">
+            <main class="article card large">
+                <div class="text">
+                    <h1>Documentazione</h1>
+                    <p>
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum pariatur officiis,
+                        delectus nisi voluptates dolore eaque quas vitae nesciunt nobis sequi architecto
+                        deleniti cupiditate doloribus, quisquam hic esse perspiciatis tempore.
+                    </p>
+                    <p>
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum pariatur officiis,
+                        delectus nisi voluptates dolore eaque quas vitae nesciunt nobis sequi architecto
+                        deleniti cupiditate doloribus, quisquam hic esse perspiciatis tempore.
+                    </p>
+                    <h2>Some subtitle here</h2>
+                    <p>
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum pariatur officiis,
+                        delectus nisi voluptates dolore eaque quas vitae nesciunt nobis sequi architecto
+                        deleniti cupiditate doloribus, quisquam hic esse perspiciatis tempore.
+                    </p>
+                    <!-- <h2>Some subtitle here</h2>
+                    <p>
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum pariatur officiis,
+                        delectus nisi voluptates dolore eaque quas vitae nesciunt nobis sequi architecto
+                        deleniti cupiditate doloribus, quisquam hic esse perspiciatis tempore.
+                    </p>
+                    <h2>Some subtitle here</h2>
+                    <p>
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum pariatur officiis,
+                        delectus nisi voluptates dolore eaque quas vitae nesciunt nobis sequi architecto
+                        deleniti cupiditate doloribus, quisquam hic esse perspiciatis tempore.
+                    </p>
+                    <h2>Some subtitle here</h2>
+                    <p>
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum pariatur officiis,
+                        delectus nisi voluptates dolore eaque quas vitae nesciunt nobis sequi architecto
+                        deleniti cupiditate doloribus, quisquam hic esse perspiciatis tempore.
+                    </p> -->
+                </div>
+            </main>
+        </div>
+        <div class="title">
+            <h1>Cluster Steffé</h1>
+        </div>
+        <div class="monitoring">
+            <div class="card">
+                <div class="title">Current Status</div>
+                <div class="nodes-status">
+                    {
+                        Array.from({ length: 30 }, (_, i) => (
+                            <div
+                                class:list={['node-status-dot', Math.random() < 0.75 ? 'online' : 'offline']}
+                                style={{ '--node-random-delay': `${Math.random() * 1}s` }}
+                            >
+                                <div class="label">
+                                    <span>steffe{i + 1}</span>
+                                </div>
+                            </div>
+                        ))
+                    }
+                </div>
+            </div>
+        </div>
+    </div>
+    <Footer />
+</BaseLayout>
@@ -36,10 +36,9 @@ import WebSite from '@/assets/gallery/005-website-development@3x4.jpg'
        <div class="timeline">
            <Timeline title="Un nuovo look" year="Nov 2024">
                <p>
-                    Dopo <s>mesi</s> anni di lavoro e di progettazione, il sito del PHC viene riscritto da zero
-                    in Astro. Il progetto è stato voluto principalmente da <strong
-                        >Antonio De Lucreziis</strong
-                    > (in foto, in fase di sviluppo), con il supporto di <strong>Francesco Minnocci</strong>.
+                    Dopo mesi di lavoro e di progettazione, il sito del PHC viene riscritto da zero in Astro.
+                    Il progetto è stato voluto principalmente da <strong>Antonio De Lucreziis</strong> (in foto,
+                    in fase di sviluppo), con il supporto di <strong>Francesco Minnocci</strong>.
                </p>
                <img class="fill" src={WebSite.src} alt="Sviluppo del sito" />
            </Timeline>
@@ -91,6 +90,7 @@ import WebSite from '@/assets/gallery/005-website-development@3x4.jpg'
                        >logo</a
                    > creato da <strong>Michele Cerulli</strong>.
                </p>
+                <!-- TODO: Pensare a come mostrare questa immagine su mobile -->
                <img
                    class="fill"
                    src="https://web.archive.org/web/20060609003904im_/http://poisson.phc.unipi.it/logo_studenti.orig.png"
@@ -121,11 +121,6 @@ import WebSite from '@/assets/gallery/005-website-development@3x4.jpg'
                    alcuni computer ad uso di un gruppo di studenti, così da avere un luogo in cui
                    "smanettare", dare supporto informatica agli studenti e gestire il sito Poisson.
                </p>
-                <img
-                    class="fill"
-                    src="https://poisson.phc.dm.unipi.it/~steffe/sergio.jpg"
-                    alt="Sergio Steffè"
-                />
            </Timeline>
            <Timeline title="Apertura di Poisson" year="~1994">
                <p>
@@ -8,16 +8,6 @@
    // Components - for complex parts of the UI like search bars or compound buttons
    //

-    .phosphor-icon {
-        box-sizing: content-box;
-
-        width: 22px;
-        height: 22px;
-
-        display: grid;
-        place-content: center;
-    }
-
    .material-symbols-outlined {
        font-family: 'Material Symbols Outlined Variable';
        font-weight: normal;
@@ -39,7 +29,7 @@
    }

    .title {
-        font-family: var(--font-display);
+        font-family: 'Iosevka', monospace;
        font-weight: 700;
        font-size: 28px;
    }
@@ -73,8 +63,7 @@
            padding-left: 0.35rem;
        }

-        .material-symbols-outlined,
-        .phosphor-icon {
+        .material-symbols-outlined {
            padding: 0 0.5rem;
        }
    }
@@ -546,7 +535,7 @@

        & > .title {
            color: color-mix(in srgb, var(--card-base-internal), #000 75%);
-            font-size: 30px;
+            font-size: 26px;
            font-weight: 700;
        }

@@ -621,7 +610,7 @@
        max-width: 100%;

        gap: 2rem;
-        grid-template-columns: repeat(auto-fit, minmax(auto, 25rem));
+        grid-template-columns: repeat(auto-fit, minmax(25rem, auto));
        grid-auto-rows: auto;

        justify-content: center;
@@ -629,6 +618,10 @@
        & > .card {
            max-width: 25rem;
        }
+
+        @media screen and (max-width: $screen-desktop-min) {
+            grid-template-columns: 1fr;
+        }
    }

    .show-more {
@@ -706,8 +699,7 @@

        background: var(--filter-bg-color, #ddd);

-        .material-symbols-outlined,
-        .phosphor-icon {
+        .material-symbols-outlined {
            padding: 0 0.35rem;
        }

@@ -827,52 +819,160 @@
        }
    }

-    .bubble-array {
-        display: flex;
-        width: 100%;
-        flex-wrap: wrap;
-        justify-content: center;
-        gap: 3rem 6rem;
+    .steffe-layout {
+        display: grid;
+
+        grid-template-columns: minmax(15rem, auto) minmax(50rem, auto) minmax(auto, 20rem);
+        grid-template-rows: auto 1fr;
+
+        grid-template-areas:
+            'docs-navigation docs-content title'
+            'docs-navigation docs-content monitoring';
+
+        padding: 2rem;
+        gap: 2rem;
+
+        place-content: center;
+
+        min-height: 100%;
+
+        --card-base: #a2d4f3;
+
+        > .docs-navigation {
+            grid-area: docs-navigation;

-        > .bubble {
            display: grid;
-            grid-template-rows: auto auto auto auto;
-            grid-auto-rows: auto;
-            gap: 0.5rem;
-            text-align: center;
-            justify-items: center;
+            grid-auto-flow: row;
+            gap: 1.25rem;
+
            align-content: start;
-            width: 28ch;

-            .date {
-                display: grid;
-                place-content: center;
-                font-size: 16px;
+            & > .nav-item {
+                padding: 1rem;
+
+                background: oklch(from #a2d4f3 calc(l + 0.05) calc(c - 0.02) h);
+                @include neo-brutalist-card(3px, 3px);
+
                font-weight: 600;
-                padding: 0.25rem 0.5rem;
-                background: #0002;
-                border-radius: 0.25rem;
-            }
+                cursor: pointer;

-            .social {
-                display: grid;
-                grid-auto-flow: column;
-                gap: 0.5rem;
-                justify-content: center;
+                &:hover {
+                    background: oklch(from #a2d4f3 calc(l + 0.01) calc(c - 0.01) h);
+                }

-                .phosphor-icon {
-                    width: 28px;
-                    height: 28px;
+                &.active {
+                    background: oklch(from #a2d4f3 calc(l - 0.1) calc(c + 0.04) h);
+
+                    @include neo-brutalist-card(3px, 1px);
+                    transform: translate(2px, 2px);
+
+                    &:hover {
+                        background: oklch(from #a2d4f3 calc(l - 0.15) calc(c + 0.04) h);
+                    }
                }
            }
+        }

-            > img {
-                border-radius: 100%;
-                border: 4px solid #333;
-                object-fit: cover;
-                width: 100%;
-                aspect-ratio: 1 / 1;
+        > .docs-content {
+            grid-area: docs-content;
+
+            min-height: 100%;
+
+            & > .card {
+                min-height: 100%;
+            }
+        }
+
+        > .title {
+            grid-area: title;
+
+            place-self: center;
+
+            padding-top: 2rem;
+
+            h1 {
+                line-height: 1;
+            }
+        }
+
+        > .monitoring {
+            grid-area: monitoring;
+
+            > .card {
+                display: grid;
+                grid-auto-flow: row;
+            }
+        }
+    }
+
+    .nodes-status {
+        display: grid;
+
+        grid-template-columns: repeat(auto-fill, 1rem);
+        grid-auto-flow: row;
+
+        gap: 0.25rem;
+
+        & > .node-status-dot {
+            width: 1rem;
+            height: 1rem;
+            border-radius: 0.25rem;
+
+            @include neo-brutalist-card(2px, 2px);
+
+            &.online {
+                background: #0d0;
+
+                animation: pluse-online 1s infinite ease-in-out alternate;
+                animation-delay: calc(-1 * var(--node-random-delay, 0s));
+            }
+
+            &.offline {
+                background: #e00;
+            }
+
+            position: relative;
+
+            // --tooltip-color: oklch(from orange calc(l + 0.1) c h);
+            --tooltip-color: royalblue;
+
+            & > .label {
+                position: absolute;
+                display: none;
+            }
+
+            &:hover {
+                border-color: var(--tooltip-color);
+
+                & > .label {
+                    display: grid;
+
+                    pointer-events: none;
+
+                    bottom: calc(100% + 4px);
+                    left: 0;
+
+                    padding: 0.125rem 0.25rem;
+                    background: var(--tooltip-color);
+                    color: #eee;
+
+                    border-radius: 0.25rem;
+
+                    font-size: 15px;
+                    font-family: 'Iosevka', monospace;
+
+                    @include neo-brutalist-card(2px, 1px);
+                }
            }
        }
    }
 }
+
+@keyframes pluse-online {
+    0% {
+        background: #0a0;
+    }
+    100% {
+        background: #0e0;
+    }
+}
@@ -35,7 +35,7 @@
            text-decoration: none;
            color: #222;

-            font-family: var(--font-secondary);
+            font-family: 'Source Sans Pro', sans-serif;
            font-weight: 600;

            cursor: pointer;
@@ -16,11 +16,6 @@ $screen-desktop-min: 1024px;
    --homepage-macchinisti-bg: #888;

    --project-card-bg: #a2d4f3;
-
-    --font-primary: 'Open Sans', sans-serif;
-    --font-display: 'Iosevka', monospace;
-    --font-mono: 'Source Code Pro', monospace;
-    --font-secondary: 'Source Sans Pro', sans-serif;
 }

@layer common, typography, component, page;
@@ -46,7 +41,7 @@ $screen-desktop-min: 1024px;
        min-height: 100%;
        margin: 0;

-        font-family: var(--font-primary);
+        font-family: 'Open Sans', sans-serif;
        font-size: 18px;
        color: #222;
    }
@@ -117,7 +112,7 @@ body {
            padding: 0 1.5rem;

            a {
-                font-family: var(--font-display);
+                font-family: 'Iosevka', monospace;
                font-size: 18px;
                font-weight: 500;
                letter-spacing: 1px;
@@ -225,8 +220,8 @@ body {
        display: grid;
        place-content: center;

-        font-family: var(--font-secondary);
-        font-size: 18px;
+        font-family: 'Source Sans Pro', sans-serif;
+        font-size: 20px;

        scroll-snap-align: end;

@@ -141,13 +141,6 @@
                        --zone-color: color-mix(in lab, #e4c5ff, #000 60%);
                    }
                }
-
-                span.highlighted {
-                    background: color-mix(in lab, #e4c5ff, #000 10%);
-                    cursor: default;
-                    border-radius: 0.25rem;
-                    padding: 0.125rem 0.25rem;
-                }
            }
        }

@@ -644,18 +637,8 @@
        }
    }

-    .macchinisti {
-        main {
-            justify-self: center;
-            background: linear-gradient(to top, #d5fbff, #ffd9d5);
-
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-
-            padding: 6rem;
-            gap: 6rem;
-        }
+    .steffe {
+        background: oklch(from #a2d4f3 calc(l + 0.3) calc(c - 0.03) h);
    }

    //
@@ -784,7 +767,7 @@
                background: #eee;
                color: #000;

-                font-family: var(--font-display);
+                font-family: 'Iosevka', monospace;
                font-size: 14px;

                border-radius: 0.25rem;
@@ -840,7 +823,7 @@
                display: grid;
                align-content: center;

-                font-family: 'JetBrains Mono', var(--font-mono);
+                font-family: 'JetBrains Mono', monospace;
                font-size: 16px;

                user-select: all;
@@ -19,7 +19,7 @@

        h#{$i} {
            font-size: $base-font-size * $factor;
-            font-family: var(--font-display);
+            font-family: 'Iosevka', monospace;
            font-weight: 700;
            margin-bottom: 0.25rem;
        }
@@ -55,7 +55,7 @@
            // background: color-mix(in lab, var(--zone-color), #fff 75%) !important;
            // background: var(--code-bg, #00000022) !important;

-            font-family: var(--font-mono);
+            font-family: 'Source Code Pro', monospace;
            font-weight: 400;
            font-size: 16px;
        }
@@ -129,9 +129,6 @@
            display: block;
            margin: 0 auto;

-            width: 50ch;
-            max-width: 100%;
-
            @include neo-brutalist-card(2px);

            &.fill {