new: nuova guida su stampare via ssh; fix: more work on .card-list css

todo: fix the fallback image and make a general function to render the bubbles

astro.config.mjs

@@ -3,8 +3,13 @@ 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,
     },
@@ -14,5 +19,5 @@ export default defineConfig({
         },
     },
     integrations: [preact(), mdx()],
-    output: 'static'
+    output: 'static',
 })

package.json

@@ -11,8 +11,8 @@
     },
     "dependencies": {
         "@astrojs/check": "^0.9.4",
-        "@astrojs/node": "^8.3.4",
-        "@astrojs/preact": "^3.5.3",
+        "@astrojs/node": "9.0.0",
+        "@astrojs/preact": "4.0.0",
         "@fontsource-variable/material-symbols-outlined": "^5.1.1",
         "@fontsource/iosevka": "^5.0.11",
         "@fontsource/mononoki": "^5.0.11",
@@ -20,16 +20,19 @@
         "@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": "^4.15.11",
+        "astro": "5.1.0",
         "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": "^3.1.7",
+        "@astrojs/mdx": "4.0.2",
+        "@rollup/plugin-yaml": "^4.1.2",
         "@types/katex": "^0.16.7",
         "jsdom": "^24.1.1",
         "linkedom": "^0.18.4",

src/client/ComboBox.tsx

@@ -1,6 +1,7 @@
 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,
@@ -40,7 +41,8 @@ export const ComboBox = ({
         >
             <div class="selected" onClick={() => setOpen(!open)}>
                 <div class="content">{children[value]}</div>
-                <span class="material-symbols-outlined">expand_more</span>
+                {/* <span class="material-symbols-outlined">expand_more</span> */}
+                <PhosphorIcon name="caret-down" />
             </div>
             {open && (
                 <div

src/client/Icon.tsx

@@ -0,0 +1,21 @@
+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} />
+}

src/client/UtentiPage.tsx

@@ -3,6 +3,7 @@ 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
@@ -11,15 +12,15 @@ type User = {
 
 const FILTERS = {
     utenti: {
-        icon: 'person',
+        icon: 'user',
         label: 'Utenti',
     },
     macchinisti: {
-        icon: 'construction',
+        icon: 'wrench',
         label: 'Macchinisti',
     },
     rappstud: {
-        icon: 'account_balance',
+        icon: 'bank',
         label: 'Rappresentanti',
     },
 }
@@ -105,7 +106,9 @@ export const UtentiPage = () => {
                         Object.entries(FILTERS).map(([k, v]) => [
                             k,
                             <>
-                                <span class="material-symbols-outlined">{v.icon}</span> {v.label}
+                                {/* <span class="material-symbols-outlined">{v.icon}</span> {v.label} */}
+                                <PhosphorIcon name={v.icon} />
+                                {v.label}
                             </>,
                         ])
                     )}
@@ -117,7 +120,8 @@ export const UtentiPage = () => {
                         onInput={e => ($searchText.value = e.currentTarget.value)}
                         value={$searchText.value}
                     />
-                    <span class="material-symbols-outlined">search</span>
+                    {/* <span class="material-symbols-outlined">search</span> */}
+                    <PhosphorIcon name="magnifying-glass" />
                 </div>
             </div>
             <div class="search-results">
@@ -126,13 +130,22 @@ 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>
+                                    </span> */}
+                                    <PhosphorIcon
+                                        name={
+                                            RAPPSTUD.includes(poissonUser.uid)
+                                                ? 'bank'
+                                                : MACCHINISTI.includes(poissonUser.uid)
+                                                ? 'wrench'
+                                                : 'user'
+                                        }
+                                    />
                                 </div>
                                 <div class="text">{poissonUser.gecos}</div>
                                 <div class="right">
@@ -140,7 +153,8 @@ export const UtentiPage = () => {
                                         href={`https://poisson.phc.dm.unipi.it/~${poissonUser.uid}`}
                                         target="_blank"
                                     >
-                                        <span class="material-symbols-outlined">open_in_new</span>
+                                        {/* <span class="material-symbols-outlined">open_in_new</span> */}
+                                        <PhosphorIcon name="arrow-square-out" />
                                     </a>
                                 </div>
                             </div>

src/components/Bubble.astro

@@ -0,0 +1,44 @@
+---
+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>

src/components/Card.astro

@@ -1,7 +1,4 @@
 ---
-import type { AstroBuiltinProps } from 'astro'
-import type { AstroComponentFactory } from 'astro/runtime/server/index.js'
-
 type Props = {
     large?: boolean
     style?: string

src/components/Header.astro

@@ -1,16 +1,36 @@
+---
+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">
-        <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> -->
+        {
+            links.map(link => (
+                <a role="button" href={link.href}>
+                    {link.text}
+                </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>
@@ -19,14 +39,17 @@
             <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">
-            <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> -->
+            {
+                links.map(link => (
+                    <a role="button" href={link.href}>
+                        {link.text}
+                    </a>
+                ))
+            }
         </div>
     </div>
 </header>

src/components/PhosphorIcon.astro

@@ -0,0 +1,21 @@
+---
+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} />

src/content/config.ts

@@ -44,9 +44,15 @@ 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,
 }

src/content/guides/2024-02-29-git-101.md

@@ -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]
 ---

src/content/guides/2024-07-30-pagina-poisson-con-astro.md

@@ -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]
 ---

src/content/guides/2024-11-03-deploy-with-github-actions.md

@@ -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 utilizzando le GitHub Actions
+description: Come impostare il deploy automatico per la propria pagina Poisson tramite le GitHub Actions
 author: Antonio De Lucreziis
-tags: [github, deploy, poisson]
+tags: [github, poisson, sito]
 ---
 
 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?
 
-Vediamo come automatizzare questo processo utilizzando le GitHub Actions.
+Vedremo come deployare il nostro sito, e successivamente come automatizzare il deployment con le GitHub Actions.
 
-## Setup
+## Setup manuale
 
-Manualmente, possiamo costruire il nostro progetto in locale e poi caricare i file su Poisson utilizzando `rsync`, ad esempio come segue:
+Come primo approccio, potremmo compilare 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,10 +79,10 @@ 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).
@@ -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. 
+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, per evitare che la connessione venga rifiutata, eseguiamo in locale anche uno scan delle chiavi SSH di Poisson:
 

src/content/guides/2024-11-17-attivazione-poisson.md

@@ -1,9 +1,9 @@
 ---
 id: attivazione-poisson
 title: Come attivare il proprio account Poisson
-description: Guida per l'attivazione dell'account Poisson, con le istruzioni per il primo accesso e la configurazione del proprio spazio web
+description: Guida all'attivazione dell'account Poisson, con istruzioni per il primo accesso e configurazione del proprio sito
 author: Luca Lombardo
-tags: [poisson]
+tags: [poisson, sito, ssh]
 ---
 
 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.

src/content/guides/2024-11-17-recupero-password-poisson.md

@@ -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, ecco cosa fare!
+description: Hai dimenticato la tua password Poisson? Niente paura, vediamo cosa fare! 💪
 author: Luca Lombardo
 tags: [poisson, password]
 ---
@@ -12,10 +12,23 @@ 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 via email.
+3. Attendi pazientemente la risposta dei macchinisti, che ti resetteranno la password e ti invieranno una nuova.
 
 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/) 😉

src/content/guides/2024-12-22-eliminare-sito-poisson.md

@@ -0,0 +1,68 @@
+---
+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.

src/content/guides/2024-12-29-stampare-via-ssh.md

@@ -0,0 +1,79 @@
+---
+id: stampare-via-ssh
+title: Stampare via SSH
+description: Come stampare da remoto tramite SSH
+author: Antonio De Lucreziis
+tags: [linux, ssh, stampanti]
+---
+
+Per stampare in dipartimento non bisogna per forza usare i computer dei laboratori, possiamo che stampare direttamente da remoto tramite SSH. Vediamo come fare!
+
+Se non l'avete mai fatto prima per prima cosa bisogna poter accedere da remoto ad una macchina del dipartimento chiamata "login", il suo indirizzo è `login.dm.unipi.it`. Per fare l'accesso possiamo usare il seguente comando con l'account di Ateneo (non quello Poisson!)
+
+```bash shell
+ssh USERNAME_ATENEO@login.dm.unipi.it
+```
+
+Una volta connessi possiamo stampare utilizzando il comando `lpr` seguito dal nome del file che vogliamo stampare. Prima però serve trasferire il file che vogliamo stampare sulla macchina "login". Per fare ciò possiamo usare il comando `scp`, quindi per prima cosa usciamo dalla macchina "login" (premere `Ctrl+D` oppure scrivendo `exit`), andiamo nella cartella dove si trova il file che vogliamo stampare e poi eseguiamo il comando:
+
+```bash shell
+scp NOME_FILE.pdf USERNAME_ATENEO@login.dm.unipi.it:~/Documents
+```
+
+Dove `NOME_FILE.pdf` è il nome del file che vogliamo stampare e `Documents` è la cartella dove vogliamo trasferirlo. Una volta trasferito il file possiamo rifare ssh su "login" e stampare il file con il comando:
+
+```bash shell
+lpr Documents/NOME_FILE.pdf
+```
+
+Alternativamente possiamo stampare direttamente il file senza trasferirlo con il comando:
+
+```bash shell
+cat NOME_FILE.pdf | ssh USERNAME_ATENEO@login.dm.unipi.it lpr OPZIONI... -
+```
+
+dove `[OPZIONI...]` sono le opzioni che possiamo passare a `lpr` (vedi sotto). L'ultimo trattino "`-`" è molto importante e indica che il file da stampare è quello in standard input. Più precisamente, `cat NOME_FILE.pdf` invia il contenuto del file `NOME_FILE.pdf` allo standard output e `|` lo ridireziona a input di `ssh`, che a sua volta lo passa a `lpr` via rete.
+
+## Opzioni di `lpr`
+
+Il comando `lpr` accetta alcune opzioni che possono essere utili:
+
+-   `-P` seguito dal nome della stampante: permette di specificare la stampante su cui stampare, le stampanti disponibili in dipartimento sono
+
+    -   `cdc4` che è la stampante di default e si trova in Aula 4
+
+    -   `cdclf` che si trova al piano terra nel corridoio dopo l'Aula 4
+
+    -   `cdc3` che si trova in Aula 3 (è un po' vecchia ma di solito funziona)
+
+-   `-#` seguito dal numero di copie: permette di specificare il numero di copie da stampare. In realtà questa opzione non funziona per vari motivi arcani e se uno passa `-#N` per stampare $N$ copie, la stampante stampa $N^2$ copie. (Questo ha scaturito una serie di ragionamenti sul modo ottimo di decomporre $N$ come somma di quadrati [con tanto di sito di comodo](https://shortest-sum-of-squares.netlify.app/)...)
+
+-   `-o sides=two-sided-long-edge`: permette di stampare fronte-retro (che dovrebbe essere già il default)
+
+-   `-o sides=two-sided-short-edge`: permette di stampare fronte-retro con "la rilegatura" delle pagine sul lato corto
+
+-   `-o sides=one-sided`: permette di stampare solo fronte, comodo per stampare i meme di laurea
+
+-   `-o fit-to-page`: permette di ridimensionare il documento per farlo entrare in un foglio (è buona prassi passare sempre questa opzione)
+
+-   `-o media=a4`: permette di specificare il formato del foglio, di default è A4 quindi non dovrebbere servire
+
+## Altre comodità
+
+Stampare da remoto porta anche altre comodità, ad esempio possiamo interrompere un file che abbiamo mandato in stampa per sbaglio con il comando (sempre tutti comandi da eseguire su "login")
+
+```bash shell
+cancel -a
+```
+
+Oppure possiamo vedere lo stato della coda di stampa con il comando
+
+```bash shell
+lpq -a
+```
+
+o per vedere lo stato delle nostre stampe
+
+```bash shell
+lpstat -l
+```

src/content/meta/whats-phc.md

@@ -3,10 +3,8 @@
 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 1999, che offre vari servizi agli studenti come [Poisson](https://poisson.phc.dm.unipi.it), che ospita le pagine degli studenti.
+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).
 
-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.
+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.
 
-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.
+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)).

src/data/macchinisti.yaml

@@ -0,0 +1,42 @@
+# 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: Bla bla Void Linux
+  social:
+      github: https://github.com/Kratacoa
+
+- fullName: Francesco Manicastri
+  entranceDate: 2022
+  exitDate: 2024
+  description: Bla bla Keenan Crane

src/files.d.ts

@@ -0,0 +1,17 @@
+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
+}

src/pages/guide/tags/[tag].astro

@@ -19,7 +19,7 @@ export async function getStaticPaths() {
             params: { tag },
             props: {
                 tag,
-                guides: guides.filter(post => post.data.tags.includes(tag)),
+                guides: guides.filter(post => post.data.tags.includes(tag)).toReversed(),
             },
         }
     })

src/pages/index.astro

@@ -128,7 +128,10 @@ 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>Varie conferenze del PHC su argomenti di informatica, matematica e tecnologia.</p>
+                <p>
+                    Storico degli incontri organizzati dal PHC su argomenti di informatica, matematica e
+                    tecnologia.
+                </p>
             </ProjectCard>
             <ProjectCard
                 title="Tutorato"
@@ -141,6 +144,17 @@ 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">
@@ -153,17 +167,28 @@ const galleryCollage = await Astro.glob('@/assets/gallery/*.jpg')
             <div class="text">
                 <p>Nessuno lo sa di preciso, ma facciamo molte cose:</p>
                 <ul>
-                    <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><strong>amministrazione</strong> di sistemi Linux/Unix e di macchine virtuali</li>
                     <li>
-                        organizzazione di seminari di divulgazione (vedi <a href="#projects">sopra</a>)
+                        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>
-                    Inoltre, il PHC è prima di tutto un luogo dove imparare, trasmettere le proprie conoscenze
-                    e condividere la passione per la tecnologia.
+                    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>

src/pages/macchinisti.astro

@@ -0,0 +1,85 @@
+---
+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>

src/pages/steffe/index.astro

@@ -1,95 +0,0 @@
----
-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>

src/pages/storia.astro

@@ -36,9 +36,10 @@ import WebSite from '@/assets/gallery/005-website-development@3x4.jpg'
         <div class="timeline">
             <Timeline title="Un nuovo look" year="Nov 2024">
                 <p>
-                    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>.
+                    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>.
                 </p>
                 <img class="fill" src={WebSite.src} alt="Sviluppo del sito" />
             </Timeline>
@@ -90,7 +91,6 @@ 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,6 +121,11 @@ 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>

src/styles/components.scss

@@ -8,6 +8,16 @@
     // 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;
@@ -29,7 +39,7 @@
     }
 
     .title {
-        font-family: 'Iosevka', monospace;
+        font-family: var(--font-display);
         font-weight: 700;
         font-size: 28px;
     }
@@ -63,7 +73,8 @@
             padding-left: 0.35rem;
         }
 
-        .material-symbols-outlined {
+        .material-symbols-outlined,
+        .phosphor-icon {
             padding: 0 0.5rem;
         }
     }
@@ -535,7 +546,7 @@
 
         & > .title {
             color: color-mix(in srgb, var(--card-base-internal), #000 75%);
-            font-size: 26px;
+            font-size: 30px;
             font-weight: 700;
         }
 
@@ -610,7 +621,7 @@
         max-width: 100%;
 
         gap: 2rem;
-        grid-template-columns: repeat(auto-fit, minmax(25rem, auto));
+        grid-template-columns: repeat(auto-fit, minmax(auto, 25rem));
         grid-auto-rows: auto;
 
         justify-content: center;
@@ -618,10 +629,6 @@
         & > .card {
             max-width: 25rem;
         }
-
-        @media screen and (max-width: $screen-desktop-min) {
-            grid-template-columns: 1fr;
-        }
     }
 
     .show-more {
@@ -699,7 +706,8 @@
 
         background: var(--filter-bg-color, #ddd);
 
-        .material-symbols-outlined {
+        .material-symbols-outlined,
+        .phosphor-icon {
             padding: 0 0.35rem;
         }
 
@@ -819,160 +827,52 @@
         }
     }
 
-    .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-array {
+        display: flex;
+        width: 100%;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 3rem 6rem;
 
+        > .bubble {
             display: grid;
-            grid-auto-flow: row;
-            gap: 1.25rem;
-
+            grid-template-rows: auto auto auto auto;
+            grid-auto-rows: auto;
+            gap: 0.5rem;
+            text-align: center;
+            justify-items: center;
             align-content: start;
+            width: 28ch;
 
-            & > .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;
-                cursor: pointer;
-
-                &:hover {
-                    background: oklch(from #a2d4f3 calc(l + 0.01) calc(c - 0.01) h);
-                }
-
-                &.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);
-                    }
-                }
-            }
-        }
-
-        > .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 {
+            .date {
                 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));
+                place-content: center;
+                font-size: 16px;
+                font-weight: 600;
+                padding: 0.25rem 0.5rem;
+                background: #0002;
+                border-radius: 0.25rem;
             }
 
-            &.offline {
-                background: #e00;
-            }
+            .social {
+                display: grid;
+                grid-auto-flow: column;
+                gap: 0.5rem;
+                justify-content: center;
 
-            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);
+                .phosphor-icon {
+                    width: 28px;
+                    height: 28px;
                 }
             }
+
+            > img {
+                border-radius: 100%;
+                border: 4px solid #333;
+                object-fit: cover;
+                width: 100%;
+                aspect-ratio: 1 / 1;
+            }
         }
     }
 }
-
-@keyframes pluse-online {
-    0% {
-        background: #0a0;
-    }
-    100% {
-        background: #0e0;
-    }
-}

src/styles/controls.scss

@@ -35,7 +35,7 @@
             text-decoration: none;
             color: #222;
 
-            font-family: 'Source Sans Pro', sans-serif;
+            font-family: var(--font-secondary);
             font-weight: 600;
 
             cursor: pointer;

src/styles/main.scss

@@ -16,6 +16,11 @@ $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;
@@ -41,7 +46,7 @@ $screen-desktop-min: 1024px;
         min-height: 100%;
         margin: 0;
 
-        font-family: 'Open Sans', sans-serif;
+        font-family: var(--font-primary);
         font-size: 18px;
         color: #222;
     }
@@ -112,7 +117,7 @@ body {
             padding: 0 1.5rem;
 
             a {
-                font-family: 'Iosevka', monospace;
+                font-family: var(--font-display);
                 font-size: 18px;
                 font-weight: 500;
                 letter-spacing: 1px;
@@ -220,8 +225,8 @@ body {
         display: grid;
         place-content: center;
 
-        font-family: 'Source Sans Pro', sans-serif;
-        font-size: 20px;
+        font-family: var(--font-secondary);
+        font-size: 18px;
 
         scroll-snap-align: end;
 

src/styles/pages.scss

@@ -141,6 +141,13 @@
                         --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;
+                }
             }
         }
 
@@ -532,6 +539,12 @@
             padding: 5rem;
             gap: 5rem;
         }
+
+        .card-list {
+            > .card {
+                grid-template-rows: auto 1fr auto;
+            }
+        }
     }
 
     .guida {
@@ -637,8 +650,18 @@
         }
     }
 
-    .steffe {
-        background: oklch(from #a2d4f3 calc(l + 0.3) calc(c - 0.03) h);
+    .macchinisti {
+        main {
+            justify-self: center;
+            background: linear-gradient(to top, #d5fbff, #ffd9d5);
+
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+
+            padding: 6rem;
+            gap: 6rem;
+        }
     }
 
     //
@@ -767,7 +790,7 @@
                 background: #eee;
                 color: #000;
 
-                font-family: 'Iosevka', monospace;
+                font-family: var(--font-display);
                 font-size: 14px;
 
                 border-radius: 0.25rem;
@@ -823,7 +846,7 @@
                 display: grid;
                 align-content: center;
 
-                font-family: 'JetBrains Mono', monospace;
+                font-family: 'JetBrains Mono', var(--font-mono);
                 font-size: 16px;
 
                 user-select: all;

src/styles/typography.scss

@@ -19,7 +19,7 @@
 
         h#{$i} {
             font-size: $base-font-size * $factor;
-            font-family: 'Iosevka', monospace;
+            font-family: var(--font-display);
             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: 'Source Code Pro', monospace;
+            font-family: var(--font-mono);
             font-weight: 400;
             font-size: 16px;
         }