102 changed files with 5258 additions and 4905 deletions
--- a/.drone.yml
+++ b/.drone.yml
@ -1,50 +0,0 @@
-# This file defines a Drone pipeline that builds a static website with "npm run build". This
-# pipeline must be marked as "Trusted" in the Drone project settings.
-# 
-# We mount the target directory of the project at "/var/www/{project}" to the container
-# "dist/" directory and the run the build. A caveat is that the container builds files
-# with "root" permissions, so we need to fix those after each build with a second pipeline.
-
-kind: pipeline
-name: default
-
-steps:
- name: deploy
-  image: node:latest
-  volumes:
-  - name: host-website-dist
-    path: /mnt/website
-  commands:
-  - npm install
-  - npm run build
-  - cp -rT ./dist /mnt/website
-
-volumes:
- name: host-website-dist
-  host: # this volume is mounted on the host machine
-    path: /var/www/website
-
-trigger:
-  branch:
-  - main
-  event:
-  - push
-
---
-kind: pipeline
-type: exec # this job is executed on the host machine
-name: caddy-permissions
-
-depends_on:
- default
-
-steps:
- name: chown
-  commands:
-  - chown -R caddy:caddy /var/www/website 
-
-trigger:
-  branch:
-  - main
-  event:
-  - push
--- a/.gitignore
+++ b/.gitignore
@ -1,23 +1,8 @@
-# build output
-dist/
-# generated types
-.astro/
-
-# dependencies
-node_modules/
-
-# logs
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-
-# local data
-*.local*
-
-# environment variables
 .env
-.env.production
+*.local*
+bin/

-# macOS-specific files
-.DS_Store
+.out/
+out/
+dist/
+node_modules/
--- a/.prettierrc
+++ b/.prettierrc
@ -1,9 +0,0 @@
-{
-    "printWidth": 110,
-    "singleQuote": true,
-    "quoteProps": "consistent",
-    "tabWidth": 4,
-    "useTabs": false,
-    "semi": false,
-    "arrowParens": "avoid"
-}
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -1,3 +0,0 @@
-{
-    "npm.packageManager": "bun"
-}
--- a/11
+++ b/11
@ -0,0 +1,11 @@
+
+.PHONY: all
+all: frontend backend
+
+.PHONY: frontend
+frontend:
+	$(NPM) run build
+
+.PHONY: backend
+backend:
+	go build -v -o ./out/server ./cmd/server
--- a/README.md
+++ b/README.md
@ -1,42 +1,30 @@
 # PHC Website

-Questo è il repository del sito web del PHC. Il sito è costruito utilizzando Astro, un framework statico per la generazione di siti web.
+Sito web del PHC

-## Installazione
+## Usage

-```bash
-bun install
-```
-
-## Sviluppo
+Come usare questo progetto

-```bash
-bun dev
-```
+### Development

-## Build
+```sh
+# Start the backend server and the frontend development server
+$ go run -v ./cmd/dev-server

-```bash
-bun build
+# Or using entr lo get live reload for go files
+$ fd -e go | entr -r go run -v ./cmd/dev-server
 ```

-## Deploy [TODO]
-
-Il progetto contiene un `Dockerfile` che viene usato per il deploy (del server prodotto da Astro).
+### Production

-```bash
-docker build -t phc-website .
-docker run -p 3000:3000 phc-website
+```sh
+$ go run ./cmd/server
 ```

-C'è anche un `.drone.yml` che viene usato per il deploy su un server remoto utilizzando Drone per il CD.
+### Deploy

-## Come Contribuire
-
-**Nota per Sviluppatori**: SE il branch `dev` non esiste o è indietro rispetto a `main`, bisogna portarlo avanti a `main` e poi continuare con le modifiche dal lì.
-
-Sentitevi liberi di aprire una PR per qualsiasi modifica o aggiunta al sito web. Il branch `main` è protetto e corrisponde alla versione di produzione del sito web, le modifiche devono prima essere accettate su `dev` e poi mergeate su `main` da un amministratore.
-
-### Cose da fare
+```sh
+$ make all
+```

- Aggiungere guide in [src/content/guides/](./src/content/guides/)
--- a/astro.config.js
+++ b/astro.config.js
@ -0,0 +1,15 @@
+import { defineConfig } from 'astro/config'
+
+// https://astro.build/config
+export default defineConfig({
+    publicDir: './client/public',
+    srcDir: './client',
+    outDir: './out/client',
+    vite: {
+        server: {
+            proxy: {
+                '/api': 'http://127.0.0.1:4000',
+            },
+        },
+    },
+})
--- a/astro.config.mjs
+++ b/astro.config.mjs
@ -1,18 +0,0 @@
-import { defineConfig } from 'astro/config'
-import preact from '@astrojs/preact'
-
-import mdx from '@astrojs/mdx'
-
-// https://astro.build/config
-export default defineConfig({
-    server: {
-        port: 3000,
-    },
-    markdown: {
-        shikiConfig: {
-            theme: 'github-light',
-        },
-    },
-    integrations: [preact(), mdx()],
-    output: 'static'
-})
--- a/bun.lockb
+++ b/bun.lockb
--- a/client/env.d.ts
+++ b/client/env.d.ts
@ -0,0 +1 @@
+/// <reference types="astro/client" />
--- a/client/layouts/ArticleLayout.astro
+++ b/client/layouts/ArticleLayout.astro
@ -0,0 +1,7 @@
+---
+import PageLayout from './PageLayout.astro'
+
+const { frontmatter } = Astro.props
+---
+
+<PageLayout {...frontmatter} />
--- a/client/layouts/BaseLayout.astro
+++ b/client/layouts/BaseLayout.astro
@ -0,0 +1,28 @@
+---
+import '@fontsource/open-sans/latin.css'
+import '@fontsource/source-sans-pro/latin.css'
+import '@fontsource/source-code-pro/latin.css'
+
+import '../styles/main.scss'
+
+const { title, description, thumbnail, pageName } = Astro.props
+---
+
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+        <meta property="og:title" content={title ?? 'PHC'} />
+        <meta property="og:description" content={description ?? 'Sito web del PHC'} />
+        {thumbnail && <meta property="og:image" content={thumbnail} />}
+
+        <link rel="icon" type="image/png" sizes="512x512" href="/assets/icon.png" />
+
+        <title>{title}</title>
+    </head>
+    <body class:list={['page-' + (pageName ?? 'unknown')]}>
+        <slot />
+    </body>
+</html>
--- a/client/layouts/PageLayout.astro
+++ b/client/layouts/PageLayout.astro
@ -0,0 +1,22 @@
+---
+import BaseLayout from './BaseLayout.astro'
+---
+
+<BaseLayout {...Astro.props}>
+    <header>
+        <div class="logo">
+            <img src="/images/logo-circuit-board.svg" alt="phc logo" />
+        </div>
+        <div class="links">
+            <a role="button" href="#">Utenti</a>
+            <a role="button" href="#">Notizie</a>
+            <a role="button" href="#">Progetti</a>
+            <a role="button" href="#">About</a>
+            <a class="primary" role="button" href="#">Accedi</a>
+        </div>
+    </header>
+    <main>
+        <slot />
+    </main>
+    <footer>&copy; PHC 2023</footer>
+</BaseLayout>
--- a/client/pages/index.astro
+++ b/client/pages/index.astro
@ -0,0 +1,199 @@
+---
+import PageLayout from '../layouts/PageLayout.astro'
+---
+
+<PageLayout pageName="homepage">
+    <section class="principal">
+        <div class="circuit-layer">
+            <canvas id="circuits-art"></canvas>
+            <script src="../scripts/circuits-art.ts"></script>
+        </div>
+        <div class="logo">
+            <img src="/images/logo-circuit-board.svg" alt="phc logo" />
+        </div>
+        <div class="whats-phc">
+            <div class="title">Cos'è il PHC?</div>
+            <div class="content">
+                <p>
+                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam vero deserunt tempore reprehenderit atque, voluptate
+                    dolorum excepturi libero pariatur sequi?
+                </p>
+                <p>
+                    Laboriosam soluta ab a illum mollitia quaerat quia, veniam consequatur expedita dolore autem reiciendis quae rem
+                    excepturi optio? Maiores, hic?
+                </p>
+                <p>
+                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Exercitationem error atque amet. Tempora earum nemo eveniet
+                    aspernatur quam quas, doloribus expedita quisquam dignissimos cupiditate inventore a modi optio harum veritatis,
+                    adipisci ab ullam distinctio odio quod delectus ipsum, rerum animi.
+                </p>
+            </div>
+        </div>
+    </section>
+    <section class="news">
+        <div class="zig-zag">
+            <svg width="100%" height="2rem" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMid meet">
+                <defs>
+                    <pattern id="zig-zag-1" x="0" y="0" width="2" height="1" patternUnits="userSpaceOnUse">
+                        <path fill="#C2A8EB" d="M 0,1 L 1,0 L 2,1 L 0,1"></path>
+                    </pattern>
+                </defs>
+                <rect fill="url(#zig-zag-1)" x="0" y="0" width="1000" height="1"></rect>
+            </svg>
+        </div>
+
+        <div class="title">Ultime Notizie</div>
+
+        <div class="news-list">
+            <div class="news">
+                <div class="title">Lorem ipsum dolor sit.</div>
+                <div class="abstract">
+                    <p>
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis reprehenderit porro omnis enim deleniti esse quos,
+                        architecto adipisci veritatis, iusto perferendis aperiam recusandae exercitationem doloribus, illum commodi
+                        voluptatem pariatur eius!
+                    </p>
+                    <p>
+                        Impedit ut quod aspernatur vitae vero incidunt cupiditate perferendis explicabo sunt possimus rerum expedita dicta
+                        nesciunt enim mollitia iure ullam aut, pariatur, at cumque. Nemo obcaecati eaque recusandae fugit sed!
+                    </p>
+                </div>
+            </div>
+            <div class="news">
+                <div class="title">Tempore provident impedit libero?</div>
+                <div class="abstract">
+                    <p>
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis reprehenderit porro omnis enim deleniti esse quos,
+                        architecto adipisci veritatis, iusto perferendis aperiam recusandae exercitationem doloribus, illum commodi
+                        voluptatem pariatur eius!
+                    </p>
+                    <p>
+                        Impedit ut quod aspernatur vitae vero incidunt cupiditate perferendis explicabo sunt possimus rerum expedita dicta
+                        nesciunt enim mollitia iure ullam aut, pariatur, at cumque. Nemo obcaecati eaque recusandae fugit sed!
+                    </p>
+                    <p>
+                        Impedit ut quod aspernatur vitae vero incidunt cupiditate perferendis explicabo sunt possimus rerum expedita dicta
+                        nesciunt enim mollitia iure ullam aut, pariatur, at cumque. Nemo obcaecati eaque recusandae fugit sed!
+                    </p>
+                    <p>
+                        Impedit ut quod aspernatur vitae vero incidunt cupiditate perferendis explicabo sunt possimus rerum expedita dicta
+                        nesciunt enim mollitia iure ullam aut, pariatur, at cumque. Nemo obcaecati eaque recusandae fugit sed!
+                    </p>
+                </div>
+            </div>
+            <div class="news">
+                <div class="title">Alias molestias consectetur quam</div>
+                <div class="abstract">
+                    <p>
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis reprehenderit porro omnis enim deleniti esse quos,
+                        architecto adipisci veritatis, iusto perferendis aperiam recusandae exercitationem doloribus, illum commodi
+                        voluptatem pariatur eius!
+                    </p>
+                </div>
+            </div>
+            <div class="news">
+                <div class="title">Inventore dignissimos sapiente nulla</div>
+                <div class="abstract">
+                    <p>
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis reprehenderit porro omnis enim deleniti esse quos,
+                        architecto adipisci veritatis, iusto perferendis aperiam recusandae exercitationem doloribus, illum commodi
+                        voluptatem pariatur eius!
+                    </p>
+                    <p>
+                        Impedit ut quod aspernatur vitae vero incidunt cupiditate perferendis explicabo sunt possimus rerum expedita dicta
+                        nesciunt enim mollitia iure ullam aut, pariatur, at cumque. Nemo obcaecati eaque recusandae fugit sed!
+                    </p>
+                </div>
+            </div>
+        </div>
+
+        <a class="primary" href="#" role="button">Vai all'Archivio</a>
+    </section>
+    <section class="projects">
+        <div class="zig-zag">
+            <svg width="100%" height="2rem" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMid meet">
+                <defs>
+                    <pattern id="zig-zag-2" x="0" y="0" width="2" height="1" patternUnits="userSpaceOnUse">
+                        <path fill="#f5f2cc" d="M 0,1 L 1,0 L 2,1 L 0,1"></path>
+                    </pattern>
+                </defs>
+                <rect fill="url(#zig-zag-2)" x="0" y="0" width="1000" height="1"></rect>
+            </svg>
+        </div>
+
+        <div class="title">Progetti</div>
+
+        <div class="project-list">
+            <a href="#">
+                <div class="project">
+                    <div class="image">
+                        <div class="box"></div>
+                    </div>
+                    <div class="title">Gitea</div>
+                    <div class="description">
+                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus quam iure dolor. Excepturi facere, ipsa
+                        accusantium labore explicabo quaerat incidunt.
+                    </div>
+                </div>
+            </a>
+            <a href="#">
+                <div class="project">
+                    <div class="image">
+                        <div class="box"></div>
+                    </div>
+                    <div class="title">Zulip</div>
+                    <div class="description">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellendus, veritatis.</div>
+                </div>
+            </a>
+            <a href="#">
+                <div class="project">
+                    <div class="image">
+                        <div class="box"></div>
+                    </div>
+                    <div class="title">Orario</div>
+                    <div class="description">
+                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus quam iure dolor. Excepturi facere, ipsa
+                        accusantium labore explicabo quaerat incidunt.
+                    </div>
+                </div>
+            </a>
+            <a href="#">
+                <div class="project">
+                    <div class="image">
+                        <div class="box"></div>
+                    </div>
+                    <div class="title">Problemi</div>
+                    <div class="description">
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, hic libero beatae voluptatem incidunt.
+                    </div>
+                </div>
+            </a>
+            <a href="#">
+                <div class="project">
+                    <div class="image">
+                        <div class="box"></div>
+                    </div>
+                    <div class="title">Cluster "Steffè"</div>
+                    <div class="description">
+                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus quam iure dolor. Excepturi facere, ipsa
+                        accusantium labore explicabo quaerat incidunt.
+                    </div>
+                </div>
+            </a>
+        </div>
+    </section>
+    <section class="wanna-be-macchinista">
+        <div class="zig-zag">
+            <svg width="100%" height="2rem" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMid meet">
+                <defs>
+                    <pattern id="zig-zag-3" x="0" y="0" width="2" height="1" patternUnits="userSpaceOnUse">
+                        <path fill="#888" d="M 0,1 L 1,0 L 2,1 L 0,1"></path>
+                    </pattern>
+                </defs>
+                <rect fill="url(#zig-zag-3)" x="0" y="0" width="1000" height="1"></rect>
+            </svg>
+        </div>
+
+        <div class="title">Vuoi diventare macchinista?</div>
+    </section>
+</PageLayout>
--- a/src/content/seminarietti/.keep
+++ b/src/content/seminarietti/.keep
--- a/client/public/images/logo-circuit-board.svg
+++ b/client/public/images/logo-circuit-board.svg
--- a/client/public/images/logo-circuit-board@100w.png
+++ b/client/public/images/logo-circuit-board@100w.png
--- a/client/public/images/logo-circuit-board@1x.png
+++ b/client/public/images/logo-circuit-board@1x.png
--- a/client/public/images/scritta-h.jpg
+++ b/client/public/images/scritta-h.jpg
--- a/client/public/images/scritta-t-mini.jpg
+++ b/client/public/images/scritta-t-mini.jpg
--- a/client/public/images/scritta-t.jpg
+++ b/client/public/images/scritta-t.jpg
--- a/client/public/images/scritta.jpg
+++ b/client/public/images/scritta.jpg
--- a/client/public/images/zigzag.svg
+++ b/client/public/images/zigzag.svg
--- a/client/scripts/circuits-art.ts
+++ b/client/scripts/circuits-art.ts
@ -1,9 +1,5 @@
 const $canvas: HTMLCanvasElement = document.querySelector('#circuits-art')!

-const isMobile = window.matchMedia('(max-width: 1024px)').matches
-
-const CELL_SIZE = !isMobile ? 27 : 19
-
 interface Grid<T> extends Iterable<[number, number, T]> {
    has(point: [number, number]): boolean
    get(point: [number, number]): T
@ -60,8 +56,8 @@ const RENDERER_FPS = 30
 function setup() {
    console.log('Setting up circuits art...')

-    $canvas.width = $canvas.clientWidth * window.devicePixelRatio
-    $canvas.height = $canvas.clientHeight * window.devicePixelRatio
+    $canvas.width = $canvas.clientWidth
+    $canvas.height = $canvas.clientHeight

    const g = $canvas.getContext('2d')!
    const state: State = {
@ -72,22 +68,17 @@ function setup() {

    const startTime = new Date()

-    const handle = window.setInterval(() => {
+    const handle = setInterval(() => {
        const time = new Date().getTime() - startTime.getTime()

-        update(
-            state,
-            g.canvas.width / window.devicePixelRatio,
-            g.canvas.height / window.devicePixelRatio,
-            time
-        )
+        update(state, g.canvas.width, g.canvas.height, time)
        render(g, state, time)
    }, 1000 / RENDERER_FPS)

    renderer = { timer: handle }
 }

-function update(state: State, width: number, _height: number, _time: number) {
+function update(state: State, width: number, height: number, time: number) {
    const w = (width / CELL_SIZE) | 0
    // const h = (height / CELL_SIZE) | 0

@ -133,6 +124,8 @@ function update(state: State, width: number, _height: number, _time: number) {
    }
 }

+const CELL_SIZE = 27
+
 const BACKGROUND_COLOR = '#ecffe3'
 const WIRE_COLOR = '#a6ce94'

@ -171,20 +164,14 @@ const RENDER_CELL: Record<WireCell, (g: CanvasRenderingContext2D) => void> = {
    },
 }

-function render(g: CanvasRenderingContext2D, state: State, _time: number) {
-    const WIDTH = g.canvas.width / window.devicePixelRatio
-    const HEIGHT = g.canvas.height / window.devicePixelRatio
-
+function render(g: CanvasRenderingContext2D, state: State, time: number) {
    g.clearRect(0, 0, g.canvas.width, g.canvas.height)
-
    g.resetTransform()
-    g.scale(window.devicePixelRatio, window.devicePixelRatio)
    g.scale(CELL_SIZE, CELL_SIZE)
-
    g.lineWidth = 3 / CELL_SIZE

-    const w = (WIDTH / CELL_SIZE) | 0
-    const h = (HEIGHT / CELL_SIZE) | 0
+    const w = (g.canvas.width / CELL_SIZE) | 0
+    const h = (g.canvas.height / CELL_SIZE) | 0
    for (let y = 0; y <= h + 1; y++) {
        for (let x = 0; x <= w + 1; x++) {
            if (!state.grid.has([x, y])) continue
@ -246,6 +233,18 @@ function randomChoice<T>(choices: T[]): T {
    return choices[randomInt(0, choices.length - 1)]
 }

+function randomWeightedChoice<T>(choices: [T, number][]) {
+    return
+}
+
+// 3 + 4 + 5 + 6
+randomWeightedChoice([
+    ['a', 3],
+    ['b', 4],
+    ['c', 5],
+    ['d', 6],
+])
+
 const DIR_TO_VEC: Record<WireDirection, Point2> = {
    ['down']: [0, 1],
    ['down-left']: [-1, 1],
@ -265,26 +264,16 @@ const DIR_AVAILABLE_PREDICATE: Record<WireDirection, (pos: Point2, grid: Grid<Wi
        !grid.has([x, y + 1]) &&
        implies(grid.has([x - 1, y]), () => grid.get([x - 1, y]) !== 'down-right') &&
        implies(grid.has([x + 1, y]), () => grid.get([x + 1, y]) !== 'down-left'),
-    ['down-left']: ([x, y], grid) =>
-        !grid.has([x - 1, y + 1]) &&
-        implies(grid.has([x - 1, y]), () => grid.get([x - 1, y]) === 'down-left'),
+    ['down-left']: ([x, y], grid) => !grid.has([x - 1, y + 1]) && implies(grid.has([x - 1, y]), () => grid.get([x - 1, y]) === 'down-left'),
    ['down-right']: ([x, y], grid) =>
-        !grid.has([x + 1, y + 1]) &&
-        implies(grid.has([x + 1, y]), () => grid.get([x + 1, y]) === 'down-right'),
+        !grid.has([x + 1, y + 1]) && implies(grid.has([x + 1, y]), () => grid.get([x + 1, y]) === 'down-right'),
 }

-function pruneDirections(
-    grid: Grid<WireCell>,
-    position: Point2,
-    directions: WireDirection[]
-): WireDirection[] {
+function pruneDirections(grid: Grid<WireCell>, position: Point2, directions: WireDirection[]): WireDirection[] {
    return directions.filter(dir => DIR_AVAILABLE_PREDICATE[dir](position, grid))
 }

-function generateWire(
-    grid: Grid<WireCell>,
-    startingPoint: Point2
-): { position: Point2; direction: WireCell }[] {
+function generateWire(grid: Grid<WireCell>, startingPoint: Point2): { position: Point2; direction: WireCell }[] {
    const segmentLength = Math.floor(1 - Math.random() ** 2) * 10 + 30
    let currentPosition = startingPoint
    let currentDirection: WireDirection = randomChoice(['down', 'down', 'down', 'down-left', 'down-right'])
@ -292,11 +281,7 @@ function generateWire(
    const steps: { position: Point2; direction: WireCell }[] = []

    for (let i = 0; i < segmentLength; i++) {
-        const availableDirections = pruneDirections(grid, currentPosition, [
-            'down',
-            'down-left',
-            'down-right',
-        ])
+        const availableDirections = pruneDirections(grid, currentPosition, ['down', 'down-left', 'down-right'])
        if (availableDirections.length === 0) {
            break
        } else {
@ -305,10 +290,7 @@ function generateWire(
                    ? currentDirection
                    : randomChoice(availableDirections)

-            if (
-                (currentDirection === 'down-left' && dir === 'down-right') ||
-                (currentDirection === 'down-right' && dir === 'down-left')
-            ) {
+            if ((currentDirection === 'down-left' && dir === 'down-right') || (currentDirection === 'down-right' && dir === 'down-left')) {
                break
            }

--- a/client/styles/main.scss
+++ b/client/styles/main.scss
@ -0,0 +1,474 @@
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+    font: inherit;
+    margin: 0;
+}
+
+html,
+body {
+    min-height: 100%;
+    height: 100%;
+    margin: 0;
+
+    font-family: 'Open Sans', sans-serif;
+    font-size: 18px;
+    color: #222;
+}
+
+html {
+    scroll-snap-type: y proximity;
+    scroll-padding-top: 4rem;
+}
+
+img {
+    display: block;
+}
+
+a {
+    color: inherit;
+    text-decoration: none;
+}
+
+//
+// Typography
+//
+
+.text {
+    display: block;
+
+    line-height: 1.5;
+
+    p + p {
+        margin-top: 0.5rem;
+    }
+}
+
+//
+// Controls
+//
+
+button,
+.button,
+[role='button'] {
+    appearance: none;
+
+    background: #fff;
+
+    border: 3px solid #222;
+    border-radius: 6px;
+    box-shadow: 4px 4px 0 0 #222;
+
+    transition: all 64ms linear;
+
+    &:hover {
+        background: #f0f0f0;
+    }
+
+    &:active {
+        transform: translate(2px, 2px);
+        box-shadow: 2px 2px 0 0 #222;
+    }
+
+    padding: 0.25rem 1.5rem;
+
+    text-decoration: none;
+    color: #222;
+
+    font-family: 'Source Sans Pro', sans-serif;
+    font-weight: 600;
+
+    &.primary {
+        background: #1e6733;
+        color: #f4fef7;
+
+        &:hover {
+            background: #2b8b47;
+        }
+    }
+}
+
+//
+// Pages
+//
+
+header {
+    z-index: 10;
+
+    height: 6rem;
+    border-bottom: 4px solid #222;
+    background: #fff;
+
+    position: fixed;
+    width: 100%;
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .logo {
+        padding-left: 0.5rem;
+
+        img {
+            height: 4rem;
+        }
+    }
+
+    .links {
+        display: flex;
+        align-items: center;
+        gap: 1.5rem;
+
+        padding: 0 1.5rem;
+
+        a {
+            font-size: 22px;
+            font-weight: 600;
+        }
+    }
+}
+
+footer {
+    min-height: 6rem;
+    border-top: 4px solid #222;
+    background: #444;
+    color: #fdfdfd;
+
+    display: grid;
+    place-content: center;
+
+    font-family: 'Source Sans Pro', sans-serif;
+    font-size: 20px;
+}
+
+.page-homepage {
+    header .logo {
+        visibility: hidden;
+    }
+
+    section {
+        position: relative;
+
+        min-height: calc(100vh - 6rem);
+
+        &:last-of-type {
+            min-height: calc(100vh - 10rem);
+        }
+
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        gap: 2rem;
+
+        scroll-snap-align: start;
+
+        & > .title {
+            font-weight: 700;
+            font-size: 60px;
+
+            font-family: 'Source Sans Pro', sans-serif;
+
+            padding-top: 4rem;
+        }
+    }
+
+    .zig-zag {
+        z-index: 5;
+
+        position: absolute;
+        width: 100%;
+
+        display: flex;
+
+        &:first-child {
+            bottom: 100%;
+        }
+    }
+
+    section.principal {
+        z-index: -2;
+
+        min-height: calc(100vh - 2rem);
+
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        gap: 6rem;
+
+        padding: 6rem 0;
+
+        background: #ecffe3;
+        // circuit color
+        // background: #a6ce94;
+
+        flex-wrap: wrap;
+
+        position: relative;
+
+        .circuit-layer {
+            z-index: -1;
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+
+            padding-top: 6rem;
+
+            canvas {
+                width: 100%;
+                height: 100%;
+            }
+        }
+
+        .logo {
+            max-width: 640px;
+            position: relative;
+
+            user-select: none;
+
+            img {
+                width: 100%;
+                filter: drop-shadow(6px 6px 0 #222) drop-shadow(4px 0 0 #222) drop-shadow(0 4px 0 #222) drop-shadow(-4px 0 0 #222)
+                    drop-shadow(0 -4px 0 #222);
+            }
+        }
+
+        .whats-phc {
+            background: #e4c5ff;
+
+            border: 4px solid #222;
+            border-radius: 8px;
+            box-shadow: 6px 6px 0 0 #222;
+
+            padding: 2rem;
+
+            max-width: 37rem;
+
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+
+            gap: 1rem;
+
+            .title {
+                font-family: 'Source Sans Pro', sans-serif;
+                font-weight: 700;
+                font-size: 40px;
+            }
+
+            .content {
+                @extend .text;
+            }
+        }
+    }
+
+    section.news {
+        background: #c2a8eb;
+
+        gap: 3rem;
+
+        padding-bottom: 6rem;
+
+        .news-list {
+            display: flex;
+            flex-direction: row;
+            gap: 3rem;
+
+            padding: 0 3rem;
+
+            justify-content: center;
+            flex-wrap: wrap;
+
+            .news {
+                background: #fffbeb;
+
+                border: 3px solid #222;
+                border-radius: 9px;
+                box-shadow: 9px 9px 0 0 #222;
+
+                display: flex;
+                flex-direction: column;
+
+                width: 22rem;
+                max-height: 27rem;
+
+                ::-webkit-scrollbar {
+                    width: 10px;
+                }
+
+                ::-webkit-scrollbar-thumb {
+                    background-color: #c67e14;
+                    border: 2px solid #222;
+
+                    &:hover {
+                        background-color: #e69419;
+                    }
+                }
+
+                a {
+                    font-weight: 600;
+                    text-decoration: none;
+                    color: #c67e14;
+
+                    &:hover {
+                        text-decoration: underline solid 2px;
+                    }
+                }
+
+                & > .title {
+                    // border-bottom: 2px solid #222;
+
+                    border-top-left-radius: 9px;
+                    border-top-right-radius: 9px;
+
+                    padding: 1rem;
+                    background: #f8e8b1;
+
+                    font-family: 'Source Sans Pro', sans-serif;
+                    font-weight: 700;
+                    font-size: 32px;
+                }
+                & > .abstract {
+                    flex-grow: 1;
+
+                    padding: 1rem;
+
+                    overflow-y: auto;
+
+                    @extend .text;
+                }
+                & > .continue {
+                    padding: 1rem;
+
+                    display: grid;
+                    align-items: end;
+                    justify-content: end;
+                }
+            }
+        }
+
+        [role='button'] {
+            padding: 0.5rem 2rem;
+
+            &.primary {
+                // background: #824ed4;
+                // color: #f0e6ff;
+                background: #f8e8b1;
+                color: #000d;
+
+                &:hover {
+                    // background: #8e5ddd;
+                }
+            }
+        }
+    }
+
+    section.projects {
+        background: #f5f2cc;
+
+        padding-bottom: 6rem;
+
+        .project-list {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
+            gap: 3rem;
+
+            padding: 0 6rem;
+
+            align-items: start;
+
+            .project {
+                // background: #fcddff;
+                // background: #ffa89c;
+                background: #a2d4f3;
+                color: #000e;
+
+                border: 3px solid #222;
+                border-radius: 9px;
+                box-shadow: 9px 9px 0 0 #222;
+
+                padding: 1rem;
+
+                display: grid;
+                grid-template-columns: auto 1fr;
+                grid-template-rows: auto 1fr;
+
+                gap: 0.25rem 1rem;
+
+                .title {
+                    font-family: 'Source Sans Pro', sans-serif;
+                    font-weight: 700;
+                    font-size: 32px;
+                }
+
+                .image {
+                    grid-row: span 2;
+                    // place-self: center;
+
+                    .box {
+                        background: #0003;
+                        border: 3px solid #0006;
+                        border-radius: 6px;
+                        width: 5rem;
+                        height: 5rem;
+                    }
+                }
+
+                .description {
+                    font-size: 16px;
+                }
+
+                transition: all 128ms ease-out;
+
+                &:hover {
+                    transform: translate(0, -8px);
+                }
+            }
+        }
+    }
+
+    section.wanna-be-macchinista {
+        background: #888;
+        color: #fdfdfd;
+    }
+}
+
+//
+// Misc
+//
+
+::-webkit-scrollbar-track:vertical {
+    background-color: #f0f0f0;
+    border-left: 2px solid #222;
+    border-top: 2px solid #222;
+    border-bottom: 2px solid #222;
+}
+
+::-webkit-scrollbar-track:horizontal {
+    background-color: #f0f0f0;
+    border-top: 2px solid #222;
+    border-left: 2px solid #222;
+    border-right: 2px solid #222;
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: #1e6733;
+    border: 2px solid #222;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background-color: #2b8b47;
+}
+
+::-webkit-scrollbar-corner {
+    background-color: #f0f0f0;
+    // border-left: 2px solid #222;
+    // border-top: 2px solid #222;
+}
+
+::-webkit-scrollbar {
+    width: 15px;
+}
--- a/cmd/dev-server/main.go
+++ b/cmd/dev-server/main.go
@ -0,0 +1,81 @@
+package main
+
+import (
+	"bufio"
+	"io"
+	"log"
+	"os/exec"
+
+	"git.phc.dm.unipi.it/phc/website/libs/db"
+	"git.phc.dm.unipi.it/phc/website/libs/sl"
+
+	"git.phc.dm.unipi.it/phc/website/server"
+
+	"git.phc.dm.unipi.it/phc/website/server/config"
+	"git.phc.dm.unipi.it/phc/website/server/database"
+	"git.phc.dm.unipi.it/phc/website/server/listautenti"
+	"git.phc.dm.unipi.it/phc/website/server/model"
+)
+
+func init() {
+	log.SetFlags(0)
+}
+
+func main() {
+	l := sl.New()
+
+	//
+	// Setup the application
+	//
+
+	// Config
+	sl.ProvideFunc(l, config.Slot, config.Configure)
+
+	// Database
+	sl.Provide[database.Database](l, database.Slot, &database.Memory{
+		Users: []model.User{
+			{
+				Id:       "e39ad8d5-a087-4cb2-8fd7-5a6ca3f6a534",
+				Username: "claire-doe",
+				FullName: db.NewOption("Claire Doe"),
+				Email:    db.NewOption("claire.doe@example.org"),
+			},
+			{
+				Id:       "9b7109cd-95a1-41e9-a9f6-001a32c20ca1",
+				Username: "john-smith",
+				FullName: db.NewOption("John Smith"),
+				Email:    db.NewOption("john.smith@example.org"),
+			},
+		},
+	})
+
+	// Server
+	sl.ProvideFunc(l, server.Slot, server.Configure)
+	sl.ProvideHook(l, server.ApiRoutesHook,
+		listautenti.MountApiRoutesHook,
+	)
+
+	//
+	// Start the application
+	//
+
+	sl.MustInvoke(l, server.Slot)
+
+	r, w := io.Pipe()
+
+	cfg := sl.MustUse(l, config.Slot)
+
+	cmd := exec.Command(cfg.NpmCommand, "run", "dev")
+	cmd.Stdout = w
+
+	go func() {
+		scanner := bufio.NewScanner(r)
+		for scanner.Scan() {
+			log.Printf(`[cmd/devserver] [vitejs] %s`, scanner.Text())
+		}
+	}()
+
+	if err := cmd.Run(); err != nil {
+		log.Fatal(err)
+	}
+}
--- a/cmd/server/main.go
+++ b/cmd/server/main.go
@ -0,0 +1,59 @@
+package main
+
+import (
+	"log"
+
+	"git.phc.dm.unipi.it/phc/website/libs/db"
+	"git.phc.dm.unipi.it/phc/website/libs/sl"
+
+	"git.phc.dm.unipi.it/phc/website/server"
+
+	"git.phc.dm.unipi.it/phc/website/server/config"
+	"git.phc.dm.unipi.it/phc/website/server/database"
+	"git.phc.dm.unipi.it/phc/website/server/listautenti"
+	"git.phc.dm.unipi.it/phc/website/server/model"
+)
+
+func main() {
+	l := sl.New()
+
+	//
+	// Setup the application
+	//
+
+	// Config
+	sl.Provide(l, config.Slot, config.ExampleProductionConfig)
+
+	// Database
+	sl.Provide[database.Database](l, database.Slot, &database.Memory{
+		Users: []model.User{
+			{
+				Id:       "e39ad8d5-a087-4cb2-8fd7-5a6ca3f6a534",
+				Username: "claire-doe",
+				FullName: db.NewOption("Claire Doe"),
+				Email:    db.NewOption("claire.doe@example.org"),
+			},
+			{
+				Id:       "9b7109cd-95a1-41e9-a9f6-001a32c20ca1",
+				Username: "john-smith",
+				FullName: db.NewOption("John Smith"),
+				Email:    db.NewOption("john.smith@example.org"),
+			},
+		},
+	})
+
+	// Server
+	sl.ProvideFunc(l, server.Slot, server.Configure)
+	sl.ProvideHook(l, server.ApiRoutesHook,
+		listautenti.MountApiRoutesHook,
+	)
+
+	//
+	// Start the application
+	//
+
+	err := sl.Invoke(l, server.Slot)
+	if err != nil {
+		log.Fatal(err)
+	}
+}
--- a/go.mod
+++ b/go.mod
@ -0,0 +1,28 @@
+module git.phc.dm.unipi.it/phc/website
+
+go 1.20
+
+require (
+	github.com/alecthomas/repr v0.2.0 // indirect
+	github.com/andybalholm/brotli v1.0.5 // indirect
+	github.com/gofiber/fiber/v2 v2.44.0 // indirect
+	github.com/google/go-cmp v0.5.9 // indirect
+	github.com/google/uuid v1.3.0 // indirect
+	github.com/joho/godotenv v1.5.1 // indirect
+	github.com/klauspost/compress v1.16.5 // indirect
+	github.com/mattn/go-colorable v0.1.13 // indirect
+	github.com/mattn/go-isatty v0.0.18 // indirect
+	github.com/mattn/go-runewidth v0.0.14 // indirect
+	github.com/philhofer/fwd v1.1.2 // indirect
+	github.com/pkg/errors v0.9.1 // indirect
+	github.com/rivo/uniseg v0.4.4 // indirect
+	github.com/savsgio/dictpool v0.0.0-20221023140959-7bf2e61cea94 // indirect
+	github.com/savsgio/gotils v0.0.0-20230208104028-c358bd845dee // indirect
+	github.com/tinylib/msgp v1.1.8 // indirect
+	github.com/valyala/bytebufferpool v1.0.0 // indirect
+	github.com/valyala/fasthttp v1.46.0 // indirect
+	github.com/valyala/tcplisten v1.0.0 // indirect
+	golang.org/x/exp v0.0.0-20230522175609-2e198f4a06a1 // indirect
+	golang.org/x/sys v0.7.0 // indirect
+	gotest.tools v2.2.0+incompatible // indirect
+)
--- a/go.sum
+++ b/go.sum
@ -0,0 +1,93 @@
+github.com/alecthomas/repr v0.2.0 h1:HAzS41CIzNW5syS8Mf9UwXhNH1J9aix/BvDRf1Ml2Yk=
+github.com/alecthomas/repr v0.2.0/go.mod h1:Fr0507jx4eOXV7AlPV6AVZLYrLIuIeSOWtW57eE/O/4=
+github.com/andybalholm/brotli v1.0.5 h1:8uQZIdzKmjc/iuPu7O2ioW48L81FgatrcpfFmiq/cCs=
+github.com/andybalholm/brotli v1.0.5/go.mod h1:fO7iG3H7G2nSZ7m0zPUDn85XEX2GTukHGRSepvi9Eig=
+github.com/gofiber/fiber/v2 v2.44.0 h1:Z90bEvPcJM5GFJnu1py0E1ojoerkyew3iiNJ78MQCM8=
+github.com/gofiber/fiber/v2 v2.44.0/go.mod h1:VTMtb/au8g01iqvHyaCzftuM/xmZgKOZCtFzz6CdV9w=
+github.com/google/go-cmp v0.5.9 h1:O2Tfq5qg4qc4AmwVlvv0oLiVAGB7enBSJ2x2DqQFi38=
+github.com/google/go-cmp v0.5.9/go.mod h1:17dUlkBOakJ0+DkrSSNjCkIjxS6bF9zb3elmeNGIjoY=
+github.com/google/uuid v1.3.0 h1:t6JiXgmwXMjEs8VusXIJk2BXHsn+wx8BZdTaoZ5fu7I=
+github.com/google/uuid v1.3.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
+github.com/joho/godotenv v1.5.1 h1:7eLL/+HRGLY0ldzfGMeQkb7vMd0as4CfYvUVzLqw0N0=
+github.com/joho/godotenv v1.5.1/go.mod h1:f4LDr5Voq0i2e/R5DDNOoa2zzDfwtkZa6DnEwAbqwq4=
+github.com/klauspost/compress v1.16.5 h1:IFV2oUNUzZaz+XyusxpLzpzS8Pt5rh0Z16For/djlyI=
+github.com/klauspost/compress v1.16.5/go.mod h1:ntbaceVETuRiXiv4DpjP66DpAtAGkEQskQzEyD//IeE=
+github.com/mattn/go-colorable v0.1.13 h1:fFA4WZxdEF4tXPZVKMLwD8oUnCTTo08duU7wxecdEvA=
+github.com/mattn/go-colorable v0.1.13/go.mod h1:7S9/ev0klgBDR4GtXTXX8a3vIGJpMovkB8vQcUbaXHg=
+github.com/mattn/go-isatty v0.0.16/go.mod h1:kYGgaQfpe5nmfYZH+SKPsOc2e4SrIfOl2e/yFXSvRLM=
+github.com/mattn/go-isatty v0.0.18 h1:DOKFKCQ7FNG2L1rbrmstDN4QVRdS89Nkh85u68Uwp98=
+github.com/mattn/go-isatty v0.0.18/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
+github.com/mattn/go-runewidth v0.0.14 h1:+xnbZSEeDbOIg5/mE6JF0w6n9duR1l3/WmbinWVwUuU=
+github.com/mattn/go-runewidth v0.0.14/go.mod h1:Jdepj2loyihRzMpdS35Xk/zdY8IAYHsh153qUoGf23w=
+github.com/philhofer/fwd v1.1.1/go.mod h1:gk3iGcWd9+svBvR0sR+KPcfE+RNWozjowpeBVG3ZVNU=
+github.com/philhofer/fwd v1.1.2 h1:bnDivRJ1EWPjUIRXV5KfORO897HTbpFAQddBdE8t7Gw=
+github.com/philhofer/fwd v1.1.2/go.mod h1:qkPdfjR2SIEbspLqpe1tO4n5yICnr2DY7mqEx2tUTP0=
+github.com/pkg/errors v0.9.1 h1:FEBLx1zS214owpjy7qsBeixbURkuhQAwrK5UwLGTwt4=
+github.com/pkg/errors v0.9.1/go.mod h1:bwawxfHBFNV+L2hUp1rHADufV3IMtnDRdf1r5NINEl0=
+github.com/rivo/uniseg v0.2.0/go.mod h1:J6wj4VEh+S6ZtnVlnTBMWIodfgj8LQOQFoIToxlJtxc=
+github.com/rivo/uniseg v0.4.4 h1:8TfxU8dW6PdqD27gjM8MVNuicgxIjxpm4K7x4jp8sis=
+github.com/rivo/uniseg v0.4.4/go.mod h1:FN3SvrM+Zdj16jyLfmOkMNblXMcoc8DfTHruCPUcx88=
+github.com/savsgio/dictpool v0.0.0-20221023140959-7bf2e61cea94 h1:rmMl4fXJhKMNWl+K+r/fq4FbbKI+Ia2m9hYBLm2h4G4=
+github.com/savsgio/dictpool v0.0.0-20221023140959-7bf2e61cea94/go.mod h1:90zrgN3D/WJsDd1iXHT96alCoN2KJo6/4x1DZC3wZs8=
+github.com/savsgio/gotils v0.0.0-20220530130905-52f3993e8d6d/go.mod h1:Gy+0tqhJvgGlqnTF8CVGP0AaGRjwBtXs/a5PA0Y3+A4=
+github.com/savsgio/gotils v0.0.0-20230208104028-c358bd845dee h1:8Iv5m6xEo1NR1AvpV+7XmhI4r39LGNzwUL4YpMuL5vk=
+github.com/savsgio/gotils v0.0.0-20230208104028-c358bd845dee/go.mod h1:qwtSXrKuJh/zsFQ12yEE89xfCrGKK63Rr7ctU/uCo4g=
+github.com/tinylib/msgp v1.1.6/go.mod h1:75BAfg2hauQhs3qedfdDZmWAPcFMAvJE5b9rGOMufyw=
+github.com/tinylib/msgp v1.1.8 h1:FCXC1xanKO4I8plpHGH2P7koL/RzZs12l/+r7vakfm0=
+github.com/tinylib/msgp v1.1.8/go.mod h1:qkpG+2ldGg4xRFmx+jfTvZPxfGFhi64BcnL9vkCm/Tw=
+github.com/valyala/bytebufferpool v1.0.0 h1:GqA5TC/0021Y/b9FG4Oi9Mr3q7XYx6KllzawFIhcdPw=
+github.com/valyala/bytebufferpool v1.0.0/go.mod h1:6bBcMArwyJ5K/AmCkWv1jt77kVWyCJ6HpOuEn7z0Csc=
+github.com/valyala/fasthttp v1.46.0 h1:6ZRhrFg8zBXTRYY6vdzbFhqsBd7FVv123pV2m9V87U4=
+github.com/valyala/fasthttp v1.46.0/go.mod h1:k2zXd82h/7UZc3VOdJ2WaUqt1uZ/XpXAfE9i+HBC3lA=
+github.com/valyala/tcplisten v1.0.0 h1:rBHj/Xf+E1tRGZyWIWwJDiRY0zc1Js+CV5DqwacVSA8=
+github.com/valyala/tcplisten v1.0.0/go.mod h1:T0xQ8SeCZGxckz9qRXTfG43PvQ/mcWh7FwZEA7Ioqkc=
+github.com/yuin/goldmark v1.2.1/go.mod h1:3hX8gzYuyVAZsxl0MRgGTJEmQBFcNTphYh9decYSb74=
+github.com/yuin/goldmark v1.4.13/go.mod h1:6yULJ656Px+3vBD8DxQVa3kxgyrAnzto9xy5taEt/CY=
+golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
+golang.org/x/crypto v0.0.0-20191011191535-87dc89f01550/go.mod h1:yigFU9vqHzYiE8UmvKecakEJjdnWj3jj499lnFckfCI=
+golang.org/x/crypto v0.0.0-20200622213623-75b288015ac9/go.mod h1:LzIPMQfyMNhhGPhUkYOs5KpL4U8rLKemX1yGLhDgUto=
+golang.org/x/crypto v0.0.0-20210921155107-089bfa567519/go.mod h1:GvvjBRRGRdwPK5ydBHafDWAxML/pGHZbMvKqRZ5+Abc=
+golang.org/x/exp v0.0.0-20230522175609-2e198f4a06a1 h1:k/i9J1pBpvlfR+9QsetwPyERsqu1GIbi967PQMq3Ivc=
+golang.org/x/exp v0.0.0-20230522175609-2e198f4a06a1/go.mod h1:V1LtkGg67GoY2N1AnLN78QLrzxkLyJw7RJb1gzOOz9w=
+golang.org/x/mod v0.3.0/go.mod h1:s0Qsj1ACt9ePp/hMypM3fl4fZqREWJwdYDEqhRiZZUA=
+golang.org/x/mod v0.6.0-dev.0.20220419223038-86c51ed26bb4/go.mod h1:jJ57K6gSWd91VN4djpZkiMVwK6gcyfeH4XE8wZrZaV4=
+golang.org/x/mod v0.7.0/go.mod h1:iBbtSCu2XBx23ZKBPSOrRkjjQPZFPuis4dIYUhu/chs=
+golang.org/x/net v0.0.0-20190404232315-eb5bcb51f2a3/go.mod h1:t9HGtf8HONx5eT2rtn7q6eTqICYqUVnKs3thJo3Qplg=
+golang.org/x/net v0.0.0-20190620200207-3b0461eec859/go.mod h1:z5CRVTTTmAJ677TzLLGU+0bjPO0LkuOLi4/5GtJWs/s=
+golang.org/x/net v0.0.0-20201021035429-f5854403a974/go.mod h1:sp8m0HH+o8qH0wwXwYZr8TS3Oi6o0r6Gce1SSxlDquU=
+golang.org/x/net v0.0.0-20210226172049-e18ecbb05110/go.mod h1:m0MpNAwzfU5UDzcl9v0D8zg8gWTRqZa9RBIspLL5mdg=
+golang.org/x/net v0.0.0-20220722155237-a158d28d115b/go.mod h1:XRhObCWvk6IyKnWLug+ECip1KBveYUHfp+8e9klMJ9c=
+golang.org/x/net v0.3.0/go.mod h1:MBQ8lrhLObU/6UmLb4fmbmk5OcyYmqtbGd/9yIeKjEE=
+golang.org/x/sync v0.0.0-20190423024810-112230192c58/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
+golang.org/x/sync v0.0.0-20201020160332-67f06af15bc9/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
+golang.org/x/sync v0.0.0-20220722155255-886fb9371eb4/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
+golang.org/x/sync v0.1.0/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
+golang.org/x/sys v0.0.0-20190215142949-d0b11bdaac8a/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
+golang.org/x/sys v0.0.0-20190412213103-97732733099d/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/sys v0.0.0-20200930185726-fdedc70b468f/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/sys v0.0.0-20201119102817-f84b799fce68/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/sys v0.0.0-20210615035016-665e8c7367d1/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.0.0-20220520151302-bc2c85ada10a/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.0.0-20220722155257-8c9f86f7a55f/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.0.0-20220811171246-fbc7d0a398ab/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.3.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.7.0 h1:3jlCCIQZPdOYu1h8BkNvLz8Kgwtae2cagcG/VamtZRU=
+golang.org/x/sys v0.7.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo=
+golang.org/x/term v0.0.0-20210927222741-03fcf44c2211/go.mod h1:jbD1KX2456YbFQfuXm/mYQcufACuNUgVhRMnK/tPxf8=
+golang.org/x/term v0.3.0/go.mod h1:q750SLmJuPmVoN1blW3UFBPREJfb1KmY3vwxfr+nFDA=
+golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
+golang.org/x/text v0.3.3/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
+golang.org/x/text v0.3.7/go.mod h1:u+2+/6zg+i71rQMx5EYifcz6MCKuco9NR6JIITiCfzQ=
+golang.org/x/text v0.5.0/go.mod h1:mrYo+phRRbMaCq/xk9113O4dZlRixOauAjOtrjsXDZ8=
+golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
+golang.org/x/tools v0.0.0-20191119224855-298f0cb1881e/go.mod h1:b+2E5dAYhXwXZwtnZ6UAqBI28+e2cm9otk0dWdXHAEo=
+golang.org/x/tools v0.0.0-20201022035929-9cf592e881e9/go.mod h1:emZCQorbCU4vsT4fOWvOPXz4eW1wZW4PmDk9uLelYpA=
+golang.org/x/tools v0.1.12/go.mod h1:hNGJHUnrk76NpqgfD5Aqm5Crs+Hm0VOH/i9J2+nxYbc=
+golang.org/x/tools v0.4.0/go.mod h1:UE5sM2OK9E/d67R0ANs2xJizIymRP5gJU295PvKXxjQ=
+golang.org/x/xerrors v0.0.0-20190717185122-a985d3407aa7/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
+golang.org/x/xerrors v0.0.0-20191011141410-1b5146add898/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
+golang.org/x/xerrors v0.0.0-20200804184101-5ec99f83aff1/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
+gotest.tools v2.2.0+incompatible h1:VsBPFP1AI068pPrMxtb/S8Zkgf9xEmTLJjfM+P5UIEo=
+gotest.tools v2.2.0+incompatible/go.mod h1:DsYFclhRJ6vuDpmuTbkuFWG+y2sxOXAzmJt81HFBacw=
--- a/libs/db/db.go
+++ b/libs/db/db.go
@ -0,0 +1,250 @@
+// This package provides a small framework to work with SQL databases using
+// generics. The most important part for now is the "Ref[T]" type that lets
+// us pass around typed IDs to table rows in a type safe manner.
+//
+// For now this library uses both generics for keeping the interface type safe
+// and reflection to extract automatically some metedata from structs that
+// represent tables.
+package db
+
+import (
+	"database/sql"
+	"encoding/json"
+	"fmt"
+	"reflect"
+	"strings"
+
+	"golang.org/x/exp/slices"
+)
+
+// Option è un valore che nel database può potenzialmente essere "NULL"
+//
+// NOTE/TODO: Magari si può fare una cosa fatta bene e nascondere
+// l'implementazione al Go, ad esempio Option[string] può essere NULL o testo
+// nel db mentre Option[time.Time] può essere codificato in json come
+//
+//	"{ present: false }"
+//
+// oppure
+//
+//	"{ present: true, value: '2023/04/...' }"
+//
+// in modo da semplificare leggermente la processazione in Go. Altrimenti si
+// può separare in Option[T] e Nullable[T].
+type Option[T any] struct {
+	present bool
+	value   T
+}
+
+func (o Option[T]) MarshalJSON() ([]byte, error) {
+	if !o.present {
+		return []byte("null"), nil
+	}
+
+	return json.Marshal(o.value)
+}
+
+func (o Option[T]) UnmarshalJSON(v []byte) error {
+	if slices.Equal(v, []byte("null")) {
+		var zero T
+		o.present = false
+		o.value = zero
+		return nil
+	}
+
+	if err := json.Unmarshal(v, &o.value); err != nil {
+		return err
+	}
+
+	return nil
+}
+
+func NewOption[T any](value T) Option[T] {
+	return Option[T]{true, value}
+}
+
+func NewEmptyOption[T any]() Option[T] {
+	return Option[T]{present: false}
+}
+
+func (Option[T]) SqlType() string {
+	return "BLOB"
+}
+
+// func (v *Option[T]) Scan(a any) error {
+// 	data, ok := a.([]byte)
+// 	if !ok {
+// 		return fmt.Errorf(`scan expected []byte`)
+// 	}
+
+// 	m := map[string]any{}
+// 	if err := json.Unmarshal(data, m); err != nil {
+// 		return err
+// 	}
+
+// 	if present, _ := m["present"].(bool); present {
+
+// 		m["value"]
+// 	}
+
+// 	return nil
+// }
+
+// Ref è un id tipato da un'entità presente nel database. È il tipo fondamentale
+// esportato da questo package. Non dovrebbe essere troppo importante ma
+// internamente è una stringa, inoltre è consigliato che una struct
+// con _primary key_ abbia un campo di tipo Ref a se stessa.
+//
+//	type User struct {
+//		Id db.Ref[User] // meglio se unico e immutabile
+//		...
+//	}
+type Ref[T any] string
+
+func (Ref[T]) SqlType() string {
+	return "TEXT"
+}
+
+func (v *Ref[T]) Scan(a any) error {
+	s, ok := a.(string)
+	if !ok {
+		return fmt.Errorf(`scan expected string`)
+	}
+
+	*v = Ref[T](s)
+	return nil
+}
+
+type sqlValue interface {
+	SqlType() string
+	sql.Scanner
+}
+
+type Table[T any] struct {
+	Name       string
+	PrimaryKey func(value *T, pk ...string) Ref[T]
+	Columns    [][2]string
+}
+
+var commonTypes = map[string]string{
+	"string":  "TEXT",
+	"int":     "INTEGER",
+	"int32":   "INTEGER",
+	"int64":   "INTEGER",
+	"float32": "REAL",
+	"float64": "REAL",
+}
+
+func toSqlType(typ reflect.Type) string {
+	st, ok := reflect.New(typ).Interface().(sqlValue)
+	if ok {
+		return st.SqlType()
+	}
+
+	return commonTypes[typ.Name()]
+}
+
+func AutoTable[T any](name string) Table[T] {
+	columns := [][2]string{}
+	pkIndex := -1
+
+	var zero T
+	typ := reflect.TypeOf(zero)
+	for i := 0; i < typ.NumField(); i++ {
+		fieldTyp := typ.Field(i)
+		isPK, _, typ, col := fieldInfo(fieldTyp)
+		if isPK {
+			pkIndex = i
+		}
+		columns = append(columns, [2]string{col, toSqlType(typ)})
+	}
+
+	if pkIndex == -1 {
+		panic(fmt.Sprintf("struct %T has no primary key field", zero))
+	}
+
+	// debug logging
+	// log.Printf("[auto table] struct %T has primary key %q", zero, typ.Field(pkIndex).Name)
+
+	return Table[T]{
+		Name: name,
+		PrimaryKey: func(value *T, pk ...string) Ref[T] {
+			// SAFETY: this is required to cast *Ref[T] to *string, internally
+			// they are the same type so this should be safe
+			ptr := reflect.ValueOf(value).Elem().Field(pkIndex).Addr().UnsafePointer()
+			pkPtr := (*string)(ptr)
+
+			if len(pk) > 0 {
+				*pkPtr = pk[0]
+			}
+
+			return Ref[T](*pkPtr)
+		},
+		Columns: columns,
+	}
+}
+
+func (table Table[T]) CreateIfNotExists(dbConn *sql.DB) error {
+	columns := make([]string, len(table.Columns))
+
+	for i, col := range table.Columns {
+		columns[i] = fmt.Sprintf("%s %s", col[0], col[1])
+	}
+
+	stmt := fmt.Sprintf(`CREATE TABLE IF NOT EXISTS %s(%s)`,
+		table.Name,
+		strings.Join(columns, ", "),
+	)
+
+	_, err := dbConn.Exec(stmt)
+	return err
+}
+
+func Create[T any](dbConn *sql.DB, table Table[T], value T) (Ref[T], error) {
+	id := randomHex(15)
+
+	table.PrimaryKey(&value, id)
+
+	columns, values := structDatabaseColumnValues(&value)
+
+	stmt := fmt.Sprintf(`INSERT INTO %s(%s) VALUES (%s)`,
+		table.Name,
+		strings.Join(columns, ", "),
+		strings.Join(repeatSlice("?", len(columns)), ", "),
+	)
+
+	if _, err := dbConn.Exec(stmt, values...); err != nil {
+		return "", err
+	}
+
+	return Ref[T](id), nil
+}
+
+func Insert[T any](dbConn *sql.DB, table Table[T], value T) error {
+	columns, values := structDatabaseColumnValues(&value)
+
+	stmt := fmt.Sprintf(`INSERT INTO %s(%s) VALUES (%s)`,
+		table.Name,
+		strings.Join(columns, ", "),
+		strings.Join(repeatSlice("?", len(columns)), ", "),
+	)
+
+	_, err := dbConn.Exec(stmt, values...)
+	return err
+}
+
+func Read[T any](dbConn *sql.DB, table Table[T], id Ref[T]) (T, error) {
+	panic("todo")
+}
+
+func ReadAll[T any](dbConn *sql.DB, table Table[T]) ([]T, error) {
+	panic("todo")
+}
+
+func Update[T any](dbConn *sql.DB, table Table[T], id Ref[T], value T) error {
+	panic("todo")
+}
+
+func Delete[T any](dbConn *sql.DB, table Table[T], id Ref[T]) error {
+	panic("todo")
+}
--- a/libs/db/db_test.go
+++ b/libs/db/db_test.go
@ -0,0 +1,88 @@
+package db_test
+
+import (
+	"context"
+	"database/sql"
+	"database/sql/driver"
+	"testing"
+
+	"git.phc.dm.unipi.it/phc/website/libs/db"
+	"gotest.tools/assert"
+)
+
+type mockDB struct {
+	*testing.T
+
+	LastQuery string
+}
+
+func (db *mockDB) Prepare(query string) (driver.Stmt, error) { return nil, nil }
+func (db *mockDB) Close() error                              { return nil }
+func (db *mockDB) Begin() (driver.Tx, error)                 { return nil, nil }
+
+func (db *mockDB) Query(query string, args []driver.Value) (driver.Rows, error) {
+	db.LastQuery = query
+	db.Logf("[sql mock driver] [exec] query: '%s', args: %#v", query, args)
+
+	return nil, nil
+}
+
+func (db *mockDB) Exec(query string, args []driver.Value) (driver.Result, error) {
+	db.LastQuery = query
+	db.Logf("[sql mock driver] [exec] query: '%s', args: %#v", query, args)
+
+	return nil, nil
+}
+
+func (db *mockDB) Open(name string) (driver.Conn, error) {
+	return &mockDB{T: db.T}, nil
+}
+
+func (db *mockDB) Connect(context.Context) (driver.Conn, error) {
+	return db, nil
+}
+
+func (db *mockDB) Driver() driver.Driver {
+	return db
+}
+
+//
+// Tests
+//
+
+func TestDb1(t *testing.T) {
+	type Product struct {
+		Id       db.Ref[Product] `db:"id*"`
+		Title    string          `db:"title"`
+		Quantity int             `db:"quantity"`
+	}
+
+	products := db.AutoTable[Product]("products")
+
+	mock := &mockDB{T: t}
+	conn := sql.OpenDB(mock)
+
+	err := products.CreateIfNotExists(conn)
+	if err != nil {
+		t.Fatal(err)
+	}
+	assert.Equal(t, mock.LastQuery,
+		`CREATE TABLE IF NOT EXISTS products(id TEXT, title TEXT, quantity INTEGER)`,
+	)
+
+	ref1, err := db.Create(conn, products, Product{Title: "Foo", Quantity: 27})
+	if err != nil {
+		t.Fatal(err)
+	}
+	assert.Assert(t, string(ref1) != "")
+	assert.Equal(t, mock.LastQuery,
+		`INSERT INTO products(id, title, quantity) VALUES (?, ?, ?)`,
+	)
+
+	if err := db.Insert(conn, products, Product{Id: "123", Title: "Bar", Quantity: 42}); err != nil {
+		t.Fatal(err)
+	}
+	assert.Equal(t, mock.LastQuery,
+		`INSERT INTO products(id, title, quantity) VALUES (?, ?, ?)`,
+	)
+}
--- a/libs/db/query.go
+++ b/libs/db/query.go
@ -0,0 +1 @@
+package db
--- a/libs/db/util.go
+++ b/libs/db/util.go
@ -0,0 +1,118 @@
+package db
+
+import (
+	"crypto/rand"
+	"encoding/hex"
+	"reflect"
+	"strings"
+)
+
+func randomHex(len int) string {
+	buff := make([]byte, len/2+1)
+	rand.Read(buff)
+	str := hex.EncodeToString(buff)
+	return str[:len]
+}
+
+func fieldInfo(fieldTyp reflect.StructField) (bool, string, reflect.Type, string) {
+	fieldName := fieldTyp.Name
+	columnName, ok := fieldTyp.Tag.Lookup("db")
+	if !ok {
+		columnName = strings.ToLower(fieldName)
+	}
+	if ok && columnName[len(columnName)-1] == '*' {
+		return true, fieldName, fieldTyp.Type, columnName[:len(columnName)-1]
+	}
+
+	return false, fieldName, fieldTyp.Type, columnName
+}
+
+func fieldPrimaryKey(fieldTyp reflect.StructField) bool {
+	isPK, _, _, _ := fieldInfo(fieldTyp)
+	return isPK
+}
+
+// structDatabaseColumnValues takes a pointer to a struct and returns a pair
+// of slices, one with the column names and the other with pointers to all
+// its exported fields.
+//
+// The column name can be changed using the "db" tag attribute on that field
+func structDatabaseColumnValues(s any) ([]string, []any) {
+	v := reflect.ValueOf(s).Elem()
+
+	numFields := v.NumField()
+
+	names := []string{}
+	values := []any{}
+
+	for i := 0; i < numFields; i++ {
+		fieldTyp := v.Type().Field(i)
+		fieldVal := v.Field(i)
+
+		if fieldTyp.IsExported() {
+			key := strings.ToLower(fieldTyp.Name)
+
+			if name, ok := fieldTyp.Tag.Lookup("db"); ok {
+				key = name
+
+				// primary key has a "*" at the end, exclude from column name
+				if key[len(key)-1] == '*' {
+					key = key[:len(key)-1]
+				}
+			}
+
+			names = append(names, key)
+			values = append(values, fieldVal.Addr().Interface())
+		}
+	}
+
+	return names, values
+}
+
+func structPrimaryKeyPtr(s any) (*string, bool) {
+	v := reflect.ValueOf(s).Elem()
+
+	for i := 0; i < v.NumField(); i++ {
+		fieldTyp := v.Type().Field(i)
+		fieldVal := v.Field(i)
+
+		if fieldTyp.IsExported() {
+			if fieldPrimaryKey(fieldTyp) {
+				// SAFETY: this is required to cast *Ref[T] to *string, internally
+				// they are the same type so this should be safe
+				ptr := fieldVal.Addr().UnsafePointer()
+				return (*string)(ptr), true
+			}
+		}
+	}
+
+	return nil, false
+}
+
+// structDatabasePrimaryKeyColumn takes a pointer to a struct and returns the
+// name of the field with the primary key
+func structDatabasePrimaryKeyColumn(s any) (field, column string, ok bool) {
+	v := reflect.ValueOf(s).Elem()
+
+	for i := 0; i < v.NumField(); i++ {
+		fieldTyp := v.Type().Field(i)
+		if fieldTyp.IsExported() {
+			key := fieldTyp.Name
+			if value, ok := fieldTyp.Tag.Lookup("db"); ok {
+				if value[len(value)-1] == '*' {
+					return key, value[:len(value)-1], true
+				}
+			}
+		}
+	}
+
+	return "", "", false
+}
+
+func repeatSlice[T any](value T, count int) []T {
+	s := make([]T, count)
+	for i := 0; i < count; i++ {
+		s[i] = value
+	}
+	return s
+}
--- a/libs/sl/sl.go
+++ b/libs/sl/sl.go
@ -0,0 +1,277 @@
+// The [sl] package has two main concepts, the [ServiceLocator] itself is the
+// main object that one should pass around through the application. A
+// [ServiceLocator] has a list of slots that can be filled with
+// [ProvideFunc] and [Provide] and retrieved with [Use]. Slots should
+// be unique by type and they can only be created with the [NewSlot] function.
+//
+// The usual way to use this module is to make slots for Go interfaces and
+// then pass implementations using the [Provide] and
+// [ProvideFunc] functions.
+//
+// Services can be of various types:
+//   - a service with no dependencies can be directly injected inside a
+//     ServiceLocator using [Provide].
+//   - a service with dependencies on other service should use
+//     [ProvideFunc]. This lets the service configure itself when needed
+//     and makes the developer not think about correctly ordering the
+//     recursive configuration of its dependencies.
+//   - a service can also be private, in this case the slot for a service
+//     should be a private field in the service package. This kind of
+//     services should also provide a way to inject them into a
+//     ServiceLocator.
+//   - a package can also just provide a slot with some value. This is useful
+//     for using the ServiceLocator to easily pass around values, effectively
+//     threating slots just as dynamically scoped variables.
+package sl
+
+import (
+	"fmt"
+	"log"
+	"os"
+)
+
+// Logger is the debug logger
+//
+// TODO: in the future this will be disabled and discard by default.
+//
+// As this is the service locator module it was meaning less to pass this
+// through the ServiceLocator itself (without making the whole module more
+// complex)
+var Logger *log.Logger = log.New(os.Stderr, "[service locator] ", log.Lmsgprefix)
+
+// slot is just a "typed" unique "symbol".
+//
+// This must be defined like so and not for example "struct{ typeName string }"
+// because we might want to have more slots for the same type.
+type slot[T any] *struct{}
+
+type Hook[T any] func(*ServiceLocator, T) error
+
+// hook is just a typed unique symbol
+type hook[T any] *struct{}
+
+// NewSlot is the only way to create instances of the slot type. Each instance
+// is unique.
+//
+// This then lets you attach a service instance of type "T" to a
+// [ServiceLocator] object.
+func NewSlot[T any]() slot[T] {
+	return slot[T](new(struct{}))
+}
+
+// NewHook is the only way to create instances of the hook type. Each instance
+// is unique.
+//
+// This lets you have a service dispatch an hook
+func NewHook[T any]() hook[T] {
+	return hook[T](new(struct{}))
+}
+
+// slotEntry represents a service that can lazily configured
+// (using "configureFunc"). Once configured the instance is kept in the "value"
+// field and "created" will always be "true". The field "typeName" just for
+// debugging purposes.
+type slotEntry struct {
+	// typeName is just used for debugging purposes
+	typeName string
+
+	// configureFunc is used by lazily provided slot values to tell how to
+	// configure them self when required
+	configureFunc func(*ServiceLocator) (any, error)
+
+	// configured tells if this slot is already configured
+	configured bool
+
+	// value for this slot
+	value any
+}
+
+// checkConfigured tries to call configure on this slot entry if not already configured
+func (s *slotEntry) checkConfigured(l *ServiceLocator) error {
+	if !s.configured {
+		v, err := s.configureFunc(l)
+		if err != nil {
+			return err
+		}
+
+		Logger.Printf(`[slot: %s] configured service of type %T`, s.typeName, v)
+
+		s.configured = true
+		s.value = v
+	}
+
+	return nil
+}
+
+type hookEntry struct {
+	// typeName is just used for debugging purposes
+	typeName string
+
+	// listeners is a list of functions to call when this hook is called
+	listeners []func(*ServiceLocator, any) error
+}
+
+// ServiceLocator is the main context passed around to retrive service
+// instances, the interface uses generics so to inject and retrive service
+// instances you should use the functions [Provide], [ProvideFunc] and [Use].
+// This is essentially a dictionary indexed by slots that are them self just
+// typed unique symbols
+type ServiceLocator struct {
+	providers map[any]*slotEntry
+	hooks     map[any]*hookEntry
+}
+
+// New creates a new [ServiceLocator] context to pass around in the application.
+func New() *ServiceLocator {
+	return &ServiceLocator{
+		providers: map[any]*slotEntry{},
+		hooks:     map[any]*hookEntry{},
+	}
+}
+
+// Provide will inject a concrete instance inside the ServiceLocator "l" for
+// the given "slotKey". This should be used for injecting "static" services, for
+// instances whose construction depend on other services you should use the
+// [ProvideFunc] function.
+//
+// This is generic over "T" to check that instances for the given slot type
+// check as "T" can also be an interface.
+func Provide[T any](l *ServiceLocator, slotKey slot[T], value T) T {
+	typeName := getTypeName[T]()
+
+	Logger.Printf(`[slot: %s] provided value of type %T`, typeName, value)
+
+	l.providers[slotKey] = &slotEntry{
+		typeName:   typeName,
+		configured: true,
+		value:      value,
+	}
+	return value
+}
+
+// ProvideFunc will inject an instance inside the given ServiceLocator
+// and "slotKey" that is created only when requested with a call to the
+// [Use] function.
+//
+// This is generic over "T" to check that instances for the given slot type
+// check as "T" can also be an interface.
+func ProvideFunc[T any](l *ServiceLocator, slotKey slot[T], createFunc func(*ServiceLocator) (T, error)) {
+	typeName := getTypeName[T]()
+	Logger.Printf(`[slot: %s] inject lazy provider`, typeName)
+
+	l.providers[slotKey] = &slotEntry{
+		typeName:      typeName,
+		configureFunc: func(l *ServiceLocator) (any, error) { return createFunc(l) },
+		configured:    false,
+	}
+}
+
+// Use retrieves the value of type T associated with the given slot key from
+// the provided ServiceLocator instance.
+//
+// If the ServiceLocator does not have a value for the slot key, or if the
+// value wasn't correctly configured (in the case of a lazy slot), an error
+// is returned.
+func Use[T any](l *ServiceLocator, slotKey slot[T]) (T, error) {
+	var zero T
+
+	slot, ok := l.providers[slotKey]
+	if !ok {
+		return zero, fmt.Errorf(`no injected value for type %s`, getTypeName[T]())
+	}
+
+	err := slot.checkConfigured(l)
+	if err != nil {
+		return zero, err
+	}
+
+	v := slot.value.(T)
+
+	Logger.Printf(`[slot: %s] using slot with value of type %T`, getTypeName[T](), v)
+	return v, nil
+}
+
+func MustUse[T any](l *ServiceLocator, slotKey slot[T]) T {
+	v, err := Use(l, slotKey)
+	if err != nil {
+		log.Fatal(err)
+	}
+
+	return v
+}
+
+func Invoke[T any](l *ServiceLocator, slotKey slot[T]) error {
+	slot, ok := l.providers[slotKey]
+	if !ok {
+		return fmt.Errorf(`no injected value for type %s`, getTypeName[T]())
+	}
+
+	err := slot.checkConfigured(l)
+	if err != nil {
+		return err
+	}
+
+	v := slot.value.(T)
+
+	Logger.Printf(`[slot: %s] invoked slot with value of type %T`, getTypeName[T](), v)
+	return nil
+}
+
+func MustInvoke[T any](l *ServiceLocator, slotKey slot[T]) {
+	if err := Invoke(l, slotKey); err != nil {
+		log.Fatal(err)
+	}
+}
+
+func ProvideHook[T any](l *ServiceLocator, hookKey hook[T], listeners ...Hook[T]) {
+	typeName := getTypeName[T]()
+	Logger.Printf(`[hook: %s] injecting hooks`, typeName)
+
+	// cast type safe listeners to internal untyped version to put inside the hook map
+	anyListeners := make([]func(*ServiceLocator, any) error, len(listeners))
+	for i, l := range listeners {
+		ll := l
+		anyListeners[i] = func(l *ServiceLocator, a any) error {
+			t, ok := a.(T)
+			if !ok {
+				panic(`illegal state`)
+			}
+
+			return ll(l, t)
+		}
+	}
+
+	l.hooks[hookKey] = &hookEntry{
+		typeName:  typeName,
+		listeners: anyListeners,
+	}
+}
+
+func UseHook[T any](l *ServiceLocator, hookKey hook[T], value T) error {
+	hookEntry, ok := l.hooks[hookKey]
+	if !ok {
+		return fmt.Errorf(`no injected hooks for hook of type %s`, hookEntry.typeName)
+	}
+
+	Logger.Printf(`[hook: %s] calling hook with value of type %T`, hookEntry.typeName, value)
+	for _, hookFunc := range hookEntry.listeners {
+		if err := hookFunc(l, value); err != nil {
+			return err
+		}
+	}
+
+	return nil
+}
+
+func MustUseHook[T any](l *ServiceLocator, hookKey hook[T], value T) {
+	if err := UseHook(l, hookKey, value); err != nil {
+		log.Fatal(err)
+	}
+}
+
+// getTypeName is a trick to get the name of a type (even if it is an
+// interface type)
+func getTypeName[T any]() string {
+	var zero T
+	return fmt.Sprintf(`%T`, &zero)[1:]
+}
--- a/libs/util/util.go
+++ b/libs/util/util.go
@ -0,0 +1,10 @@
+package util
+
+import (
+	"regexp"
+)
+
+// CompactIndentedLines removes all indentation from a string and also removes all newlines, usefull in tests
+func CompactIndentedLines(s string) string {
+	return regexp.MustCompile(`(?m)\n\s+`).ReplaceAllString(s, "")
+}
--- a/package.json
+++ b/package.json
@ -1,44 +1,23 @@
 {
-    "name": "website",
+    "name": "website-frontend",
+    "version": "1.0.0",
+    "description": "Frontend for the PHC website",
    "type": "module",
-    "version": "0.0.1",
    "scripts": {
-        "dev": "run-s astro:sync astro:dev",
-        "build": "run-s astro:build",
-        "astro:sync": "astro sync",
-        "astro:dev": "astro dev",
-        "astro:build": "astro check && astro build"
+        "dev": "astro dev",
+        "start": "astro dev",
+        "build": "astro build",
+        "preview": "astro preview"
    },
+    "license": "MIT",
    "dependencies": {
-        "@astrojs/check": "^0.9.4",
-        "@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",
-        "@fontsource/open-sans": "^5.0.24",
-        "@fontsource/source-code-pro": "^5.0.16",
-        "@fontsource/source-sans-pro": "^5.0.8",
-        "@fontsource/space-mono": "^5.0.20",
-        "@preact/signals": "^1.3.0",
-        "@types/jsdom": "^21.1.7",
-        "astro": "^4.15.11",
-        "fuse.js": "^7.0.0",
-        "katex": "^0.16.9",
-        "preact": "^10.19.6",
-        "typescript": "^5.3.3"
+        "@fontsource/open-sans": "^4.5.14",
+        "@fontsource/source-code-pro": "^4.5.14",
+        "@fontsource/source-sans-pro": "^4.5.11",
+        "astro": "^2.3.1",
+        "sass": "^1.62.1"
    },
    "devDependencies": {
-        "@astrojs/mdx": "^3.1.7",
-        "@types/katex": "^0.16.7",
-        "jsdom": "^24.1.1",
-        "linkedom": "^0.18.4",
-        "npm-run-all": "^4.1.5",
-        "rehype-autolink-headings": "^7.1.0",
-        "rehype-slug": "^6.0.0",
-        "remark-math": "^6.0.0",
-        "remark-toc": "^9.0.0",
-        "sass": "^1.71.1",
-        "tsx": "^4.7.1"
+        "typescript": "^5.0.4"
    }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/favicon.svg
+++ b/public/favicon.svg
@ -1,95 +0,0 @@
-<svg width="1000" height="500" viewBox="0 0 1000 500" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <rect x="80" y="190" width="60" height="120" fill="#1E6733" />
-    <rect x="160" y="50" width="150" height="60" fill="#1E6733" />
-    <rect x="140" y="90" width="10" height="50" fill="#ECC333" />
-    <rect x="140" y="200" width="10" height="50" fill="#ECC333" />
-    <rect x="140" y="410" width="10" height="20" fill="#ECC333" />
-    <rect x="140" y="350" width="10" height="50" fill="#ECC333" />
-    <rect x="240" y="110" width="70" height="10" fill="#ECC333" />
-    <rect x="250" y="130" width="60" height="130" fill="#1E6733" />
-    <rect x="340" y="50" width="60" height="120" fill="#1E6733" />
-    <rect x="340" y="190" width="60" height="120" fill="#1E6733" />
-    <rect x="590" y="190" width="60" height="120" fill="#1E6733" />
-    <rect x="690" y="180" width="60" height="120" fill="#1E6733" />
-    <rect x="690" y="310" width="60" height="140" fill="#1E6733" />
-    <rect x="690" y="50" width="60" height="120" fill="#1E6733" />
-    <rect x="590" y="320" width="60" height="130" fill="#1E6733" />
-    <rect x="590" y="50" width="60" height="130" fill="#1E6733" />
-    <rect x="420" y="240" width="150" height="60" fill="#1E6733" />
-    <rect x="340" y="320" width="60" height="130" fill="#1E6733" />
-    <rect x="240" y="140" width="10" height="50" fill="#ECC333" />
-    <rect x="350" y="170" width="40" height="10" fill="#ECC333" />
-    <rect x="330" y="330" width="10" height="50" fill="#ECC333" />
-    <rect x="160" y="200" width="80" height="60" fill="#1E6733" />
-    <rect x="650" y="200" width="10" height="50" fill="#ECC333" />
-    <rect x="750" y="330" width="10" height="60" fill="#ECC333" />
-    <rect x="800" y="450" width="40" height="10" fill="#ECC333" />
-    <rect x="850" y="450" width="30" height="10" fill="#ECC333" />
-    <rect x="750" y="90" width="10" height="50" fill="#ECC333" />
-    <rect x="810" y="110" width="60" height="10" fill="#ECC333" />
-    <rect x="580" y="330" width="10" height="50" fill="#ECC333" />
-    <rect x="580" y="60" width="10" height="50" fill="#ECC333" />
-    <rect x="710" y="420" width="20" height="20" fill="#C4C4C4" />
-    <rect x="710" y="390" width="20" height="20" fill="#C4C4C4" />
-    <rect x="100" y="280" width="20" height="10" fill="#C4C4C4" />
-    <rect x="100" y="260" width="20" height="10" fill="#C4C4C4" />
-    <rect x="110" y="210" width="20" height="20" fill="#C4C4C4" />
-    <rect x="350" y="430" width="40" height="10" fill="#303030" />
-    <rect x="350" y="410" width="40" height="10" fill="#303030" />
-    <rect x="350" y="390" width="40" height="10" fill="#303030" />
-    <rect x="700" y="70" width="20" height="40" fill="#303030" />
-    <rect x="700" y="120" width="20" height="40" fill="#303030" />
-    <rect x="610" y="280" width="20" height="20" fill="#C4C4C4" />
-    <rect x="600" y="240" width="20" height="20" fill="#C4C4C4" />
-    <rect x="430" y="250" width="10" height="10" fill="#C4C4C4" />
-    <rect x="430" y="265" width="10" height="10" fill="#C4C4C4" />
-    <rect x="430" y="280" width="10" height="10" fill="#C4C4C4" />
-    <rect x="445" y="250" width="10" height="10" fill="#C4C4C4" />
-    <rect x="445" y="265" width="10" height="10" fill="#C4C4C4" />
-    <rect x="460" y="280" width="40" height="10" fill="#C4C4C4" />
-    <rect x="475" y="250" width="10" height="10" fill="#C4C4C4" />
-    <rect x="475" y="265" width="10" height="10" fill="#C4C4C4" />
-    <rect x="505" y="250" width="10" height="10" fill="#C4C4C4" />
-    <rect x="505" y="265" width="10" height="10" fill="#C4C4C4" />
-    <rect x="520" y="265" width="10" height="15" fill="#C4C4C4" />
-    <rect x="505" y="280" width="25" height="10" fill="#C4C4C4" />
-    <rect x="535" y="250" width="10" height="10" fill="#C4C4C4" />
-    <rect x="535" y="265" width="10" height="10" fill="#C4C4C4" />
-    <rect x="535" y="280" width="10" height="10" fill="#C4C4C4" />
-    <rect x="445" y="280" width="10" height="10" fill="#C4C4C4" />
-    <rect x="460" y="250" width="10" height="10" fill="#C4C4C4" />
-    <rect x="460" y="265" width="10" height="10" fill="#C4C4C4" />
-    <rect x="490" y="250" width="10" height="10" fill="#C4C4C4" />
-    <rect x="490" y="265" width="10" height="10" fill="#C4C4C4" />
-    <rect x="520" y="250" width="10" height="10" fill="#C4C4C4" />
-    <rect x="550" y="250" width="10" height="10" fill="#C4C4C4" />
-    <rect x="550" y="265" width="10" height="10" fill="#C4C4C4" />
-    <rect x="550" y="280" width="10" height="10" fill="#C4C4C4" />
-    <rect x="620" y="210" width="20" height="20" fill="#C4C4C4" />
-    <rect x="370" y="70" width="20" height="30" fill="#303030" />
-    <rect x="370" y="110" width="20" height="30" fill="#303030" />
-    <rect x="870" y="440" width="40" height="10" transform="rotate(-90 870 440)" fill="#303030" />
-    <rect x="890" y="440" width="40" height="10" transform="rotate(-90 890 440)" fill="#303030" />
-    <rect x="810" y="440" width="40" height="10" transform="rotate(-90 810 440)" fill="#303030" />
-    <rect x="790" y="440" width="40" height="10" transform="rotate(-90 790 440)" fill="#303030" />
-    <rect x="270" y="100" width="40" height="10" transform="rotate(-90 270 100)" fill="#303030" />
-    <rect x="290" y="100" width="40" height="10" transform="rotate(-90 290 100)" fill="#303030" />
-    <rect x="190" y="100" width="40" height="10" transform="rotate(-90 190 100)" fill="#303030" />
-    <rect x="170" y="100" width="40" height="10" transform="rotate(-90 170 100)" fill="#303030" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M140 60V170C134.477 170 130 174.477 130 180H90C90 174.477 85.5228 170 80 170V60C85.5228 60 90 55.5228 90 50H130C130 55.5228 134.477 60 140 60Z"
-        fill="#1E6733" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M130 320H90C90 325.523 85.5229 330 80 330V440C85.5229 440 90 444.477 90 450H130C130 444.477 134.477 440 140 440V330C134.477 330 130 325.523 130 320Z"
-        fill="#1E6733" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M770 60C775.523 60 780 55.5228 780 50H910C910 55.5228 914.477 60 920 60V100C914.477 100 910 104.477 910 110H780C780 104.477 775.523 100 770 100V60Z"
-        fill="#1E6733" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M770 400C775.523 400 780 395.523 780 390H910C910 395.523 914.477 400 920 400V440C914.477 440 910 444.477 910 450H780C780 444.477 775.523 440 770 440V400Z"
-        fill="#1E6733" />
-    <rect x="750" y="190" width="10" height="40" fill="#ECC333" />
-    <rect x="750" y="240" width="10" height="20" fill="#ECC333" />
-    <rect x="400" y="200" width="10" height="40" fill="#ECC333" />
-    <rect x="400" y="250" width="10" height="20" fill="#ECC333" />
-</svg>
--- a/public/images/phc-logo-2024-11.png
+++ b/public/images/phc-logo-2024-11.png
--- a/public/images/phc-logo-2024-11@x8.png
+++ b/public/images/phc-logo-2024-11@x8.png
--- a/server/config/config.go
+++ b/server/config/config.go
@ -0,0 +1,54 @@
+package config
+
+import (
+	"git.phc.dm.unipi.it/phc/website/libs/sl"
+
+	"github.com/joho/godotenv"
+)
+
+type Config struct {
+	Mode string
+	Host string
+
+	NpmCommand string
+}
+
+var Slot = sl.NewSlot[Config]()
+
+func setFromEnvOrDefault(target *string, m map[string]string, key string, defaultValue string) {
+	v, ok := m[key]
+	if ok {
+		*target = v
+	} else {
+		*target = defaultValue
+	}
+}
+
+func Configure(l *sl.ServiceLocator) (Config, error) {
+	env, err := godotenv.Read(".env")
+	if err != nil {
+		return Config{}, err
+	}
+
+	var cfg Config
+
+	setFromEnvOrDefault(&cfg.Mode, env, "MODE", "production")
+	setFromEnvOrDefault(&cfg.Host, env, "HOST", ":4000")
+	setFromEnvOrDefault(&cfg.NpmCommand, env, "NPM_COMMAND", "npm")
+
+	return cfg, nil
+}
+
+var ExampleProductionConfig = Config{
+	Mode: "production",
+	Host: ":4000",
+
+	NpmCommand: "npm",
+}
+
+var ExampleDevelopmentConfig = Config{
+	Mode: "development",
+	Host: ":4000",
+
+	NpmCommand: "npm",
+}
--- a/server/database/database.go
+++ b/server/database/database.go
@ -0,0 +1,82 @@
+package database
+
+import (
+	"fmt"
+
+	"git.phc.dm.unipi.it/phc/website/libs/db"
+	"git.phc.dm.unipi.it/phc/website/libs/sl"
+
+	"git.phc.dm.unipi.it/phc/website/server/model"
+)
+
+var Slot = sl.NewSlot[Database]()
+
+// Database is the main database service interface
+type Database interface {
+	// User
+
+	CreateUser(user model.User) (db.Ref[model.User], error)
+	ReadUser(id db.Ref[model.User]) (model.User, error)
+	ReadUsers() ([]model.User, error)
+	UpdateUser(user model.User) error
+	DeleteUser(id db.Ref[model.User]) error
+
+	// Accounts
+
+	CreateAccount(account model.Account) (db.Ref[model.Account], error)
+	ReadAccount(id db.Ref[model.Account]) (model.Account, error)
+	UpdateAccount(user model.Account) error
+	DeleteAccount(id db.Ref[model.Account]) error
+
+	// Users & Accounts
+
+	ReadUserAccounts(user db.Ref[model.User]) ([]model.Account, error)
+}
+
+// Memory is an in-memory implementation of [Database] that can be used for testing
+type Memory struct {
+	Database // TODO: Per ora almeno così facciamo compilare il codice
+
+	Users []model.User
+}
+
+func (m *Memory) CreateUser(user model.User) (db.Ref[model.User], error) {
+	m.Users = append(m.Users, user)
+	return db.Ref[model.User](user.Id), nil
+}
+
+func (m *Memory) ReadUser(id db.Ref[model.User]) (model.User, error) {
+	for _, u := range m.Users {
+		if u.Id == id {
+			return u, nil
+		}
+	}
+
+	return model.User{}, fmt.Errorf(`no user with id "%s"`, id)
+}
+
+func (m *Memory) ReadUsers() ([]model.User, error) {
+	return m.Users, nil
+}
+
+func (m *Memory) UpdateUser(user model.User) error {
+	for i, u := range m.Users {
+		if u.Id == user.Id {
+			m.Users[i] = user
+			return nil
+		}
+	}
+
+	return fmt.Errorf(`no user with id "%s"`, user.Id)
+}
+
+func (m *Memory) DeleteUser(id db.Ref[model.User]) error {
+	for i, u := range m.Users {
+		if u.Id == id {
+			m.Users = append(m.Users[:i], m.Users[i+1:]...)
+			return nil
+		}
+	}
+
+	return fmt.Errorf(`no user with id "%s"`, id)
+}
--- a/server/database/tables/tables.go
+++ b/server/database/tables/tables.go
@ -0,0 +1,10 @@
+package tables
+
+import (
+	"git.phc.dm.unipi.it/phc/website/libs/db"
+
+	"git.phc.dm.unipi.it/phc/website/server/model"
+)
+
+var Users = db.AutoTable[model.User]("users")
+var Accounts = db.AutoTable[model.Account]("accounts")
--- a/server/listautenti/listautenti.go
+++ b/server/listautenti/listautenti.go
@ -0,0 +1,28 @@
+package listautenti
+
+import (
+	"github.com/gofiber/fiber/v2"
+
+	"git.phc.dm.unipi.it/phc/website/libs/sl"
+
+	"git.phc.dm.unipi.it/phc/website/server/database"
+)
+
+func MountApiRoutesHook(l *sl.ServiceLocator, api fiber.Router) error {
+	db, err := sl.Use(l, database.Slot)
+	if err != nil {
+		return err
+	}
+
+	api.Get("/lista-utenti", func(c *fiber.Ctx) error {
+		users, err := db.ReadUsers()
+		if err != nil {
+			return err
+		}
+
+		// TODO: Pre-process data to strip server only fields...
+		return c.JSON(users)
+	})
+
+	return nil
+}
--- a/server/listautenti/listautenti_test.go
+++ b/server/listautenti/listautenti_test.go
@ -0,0 +1,111 @@
+package listautenti_test
+
+import (
+	"context"
+	"fmt"
+	"io"
+	"net"
+	"net/http"
+	"testing"
+
+	"gotest.tools/assert"
+
+	"github.com/valyala/fasthttp"
+	"github.com/valyala/fasthttp/fasthttputil"
+
+	"git.phc.dm.unipi.it/phc/website/libs/db"
+	"git.phc.dm.unipi.it/phc/website/libs/sl"
+	"git.phc.dm.unipi.it/phc/website/libs/util"
+	"git.phc.dm.unipi.it/phc/website/server"
+
+	"git.phc.dm.unipi.it/phc/website/server/config"
+	"git.phc.dm.unipi.it/phc/website/server/database"
+	"git.phc.dm.unipi.it/phc/website/server/listautenti"
+	"git.phc.dm.unipi.it/phc/website/server/model"
+)
+
+func TestApiListaUtenti(t *testing.T) {
+
+	memDB := &database.Memory{
+		Users: []model.User{
+			{
+				Id:       "e39ad8d5-a087-4cb2-8fd7-5a6ca3f6a534",
+				Username: "claire-doe",
+				FullName: db.NewOption("Claire Doe"),
+				Email:    db.NewOption("claire.doe@example.org"),
+			},
+			{
+				Id:       "9b7109cd-95a1-41e9-a9f6-001a32c20ca1",
+				Username: "john-smith",
+				FullName: db.NewOption("John Smith"),
+				Email:    db.NewOption("john.smith@example.org"),
+			},
+		},
+	}
+
+	l := sl.New()
+
+	// Config
+	sl.Provide(l, config.Slot, config.ExampleProductionConfig)
+
+	// Database
+	sl.Provide[database.Database](l, database.Slot, memDB)
+
+	// Server
+	sl.ProvideFunc(l, server.Slot, server.Configure)
+	sl.ProvideHook(l, server.ApiRoutesHook,
+		listautenti.MountApiRoutesHook,
+	)
+
+	// Initialize server instance
+	srv, err := sl.Use(l, server.Slot)
+	assert.NilError(t, err)
+
+	//
+	// Try doing the request
+	//
+
+	req, err := http.NewRequest("GET", "http://localhost:4000/api/lista-utenti", nil)
+	assert.NilError(t, err)
+
+	ln := fasthttputil.NewInmemoryListener()
+	defer ln.Close()
+
+	go func() {
+		err := fasthttp.Serve(ln, srv.Router.Handler())
+		if err != nil {
+			panic(fmt.Errorf("failed to serve: %v", err))
+		}
+	}()
+
+	client := http.Client{
+		Transport: &http.Transport{
+			DialContext: func(ctx context.Context, network, addr string) (net.Conn, error) {
+				return ln.Dial()
+			},
+		},
+	}
+
+	res, err := client.Do(req)
+	assert.NilError(t, err)
+
+	body, err := io.ReadAll(res.Body)
+	assert.NilError(t, err)
+
+	assert.Equal(t, string(body), util.CompactIndentedLines(`
+		[
+			{
+				"Id":"e39ad8d5-a087-4cb2-8fd7-5a6ca3f6a534",
+				"Username":"claire-doe",
+				"FullName":"Claire Doe",
+				"Email":"claire.doe@example.org"
+			},
+			{
+				"Id":"9b7109cd-95a1-41e9-a9f6-001a32c20ca1",
+				"Username":"john-smith",
+				"FullName":"John Smith",
+				"Email":"john.smith@example.org"
+			}
+		]
+	`))
+}
--- a/server/model/user.go
+++ b/server/model/user.go
@ -0,0 +1,37 @@
+package model
+
+import "git.phc.dm.unipi.it/phc/website/libs/db"
+
+type User struct {
+	// Id è l'id unico di questo utente, non è modificabile una volta creato
+	// l'utente.
+	Id db.Ref[User] `db:"id"`
+
+	// Username è il nome leggibile di questo utente utilizzato anche per le
+	// route per singolo utente, deve essere unico nel sito.
+	//
+	// NOTE: Quando un utente accede per la prima volta di default gli viene
+	// chiesto se usare quello dell'account che sta usando o se cambiarlo
+	// (in teoria non dovrebbe essere un problema poterlo modificare
+	// successivamente).
+	Username string `db:"username"`
+
+	// FullName da mostrare in giro per il sito
+	FullName db.Option[string] `db:"full_name"`
+
+	// Email per eventuale contatto
+	Email db.Option[string] `db:"email"`
+}
+
+type ProviderType string
+
+const AteneoProvider ProviderType = "ateneo"
+const PoissonProvider ProviderType = "poisson"
+
+type Account struct {
+	Id       db.Ref[Account] `db:"id"`       // Id of this entity
+	UserId   db.Ref[User]    `db:"user_id"`  // UserId tells the owner of this account binding
+	Provider ProviderType    `db:"provider"` // Provider is the name of the authentication method
+
+	Token string `db:"token"` // Token to use to make requests on behalf of this user
+}
--- a/server/server.go
+++ b/server/server.go
@ -0,0 +1,37 @@
+package server
+
+import (
+	"log"
+
+	"git.phc.dm.unipi.it/phc/website/libs/sl"
+	"git.phc.dm.unipi.it/phc/website/server/config"
+
+	"github.com/gofiber/fiber/v2"
+)
+
+type Server struct{ Router *fiber.App }
+
+var Slot = sl.NewSlot[*Server]()
+
+var ApiRoutesHook = sl.NewHook[fiber.Router]()
+
+func Configure(l *sl.ServiceLocator) (*Server, error) {
+	cfg, err := sl.Use(l, config.Slot)
+	if err != nil {
+		return nil, err
+	}
+
+	r := fiber.New(fiber.Config{})
+	r.Static("/assets", "./out/frontend/assets")
+
+	api := r.Group("/api")
+	if err := sl.UseHook(l, ApiRoutesHook, api); err != nil {
+		return nil, err
+	}
+
+	go func() {
+		log.Fatal(r.Listen(cfg.Host))
+	}()
+
+	return &Server{r}, nil
+}
--- a/src/assets/gallery/001-cluster-fra-luca@4x3.jpg
+++ b/src/assets/gallery/001-cluster-fra-luca@4x3.jpg
--- a/src/assets/gallery/002-tastiera-2@3x4.jpg
+++ b/src/assets/gallery/002-tastiera-2@3x4.jpg
--- a/src/assets/gallery/003-tastiera-1@4x3.jpg
+++ b/src/assets/gallery/003-tastiera-1@4x3.jpg
--- a/src/assets/gallery/004-computer-luca@4x3.jpg
+++ b/src/assets/gallery/004-computer-luca@4x3.jpg
--- a/src/assets/gallery/005-website-development@3x4.jpg
+++ b/src/assets/gallery/005-website-development@3x4.jpg
--- a/src/assets/gallery/006-pulizie@3x4.jpg
+++ b/src/assets/gallery/006-pulizie@3x4.jpg
--- a/src/assets/gallery/007-porta@4x3.jpg
+++ b/src/assets/gallery/007-porta@4x3.jpg
--- a/src/assets/icon.png
+++ b/src/assets/icon.png
--- a/src/client/Appunti.jsx
+++ b/src/client/Appunti.jsx
@ -1,30 +0,0 @@
-/**
- * @typedef {{
- *    image?: string,
- *    course?: string,
- *    title?: string,
- *    author: string,
- *    courseYear: string
- *  }} AppuntiCardProps
- */
-
-/**
- *
- * @param {AppuntiCardProps} param0
- * @returns
- */
-export const AppuntiCard = ({ course, title, author, courseYear }) => {
-    return (
-        <div class="appunti-item">
-            <div class="thumbnail"></div>
-            {title && <div class="title">{title}</div>}
-            {course && <div class="course">{course}</div>}
-            <div class="author">@{author}</div>
-            <div class="course-year">{courseYear}</div>
-        </div>
-    )
-}
-
-export const AppuntiList = ({ children }) => {
-    return <div class="appunti-list">{children}</div>
-}
--- a/src/client/ComboBox.tsx
+++ b/src/client/ComboBox.tsx
@ -1,65 +0,0 @@
-import { type ComponentChildren } from 'preact'
-import { useState, useRef, useEffect } from 'preact/hooks'
-import { clsx, isMobile } from './lib/util'
-
-export const ComboBox = ({
-    value,
-    setValue,
-    children,
-}: {
-    value: string
-    setValue: (s: string) => void
-    children: Record<string, ComponentChildren>
-}) => {
-    const [cloak, setCloak] = useState(true)
-    const [open, setOpen] = useState(true)
-    const comboRef = useRef<HTMLDivElement>(null)
-
-    useEffect(() => {
-        const handleClick = (e: MouseEvent) => {
-            if (comboRef.current && !comboRef.current.contains(e.target as Node)) {
-                setOpen(false)
-            }
-        }
-        document.addEventListener('mousedown', handleClick)
-        return () => document.removeEventListener('mousedown', handleClick)
-    }, [])
-
-    const [itemWidth, setItemWidth] = useState<number>(200)
-
-    useEffect(() => {
-        setOpen(false)
-        setCloak(false)
-    }, [])
-
-    return (
-        <div
-            class="combobox"
-            ref={comboRef}
-            style={{ width: isMobile() ? undefined : itemWidth + 48 + 'px' }}
-        >
-            <div class="selected" onClick={() => setOpen(!open)}>
-                <div class="content">{children[value]}</div>
-                <span class="material-symbols-outlined">expand_more</span>
-            </div>
-            {open && (
-                <div
-                    class={clsx('dropdown', cloak && 'invisible')}
-                    ref={el => el && setItemWidth(el.offsetWidth)}
-                >
-                    {Object.keys(children).map(key => (
-                        <div
-                            class="option"
-                            onClick={() => {
-                                setValue(key)
-                                setOpen(false)
-                            }}
-                        >
-                            {children[key]}
-                        </div>
-                    ))}
-                </div>
-            )}
-        </div>
-    )
-}
--- a/src/client/Counter.jsx
+++ b/src/client/Counter.jsx
@ -1,13 +0,0 @@
-import { useState } from 'preact/hooks'
-
-export const Counter = ({}) => {
-    const [count, setCount] = useState(0)
-
-    return (
-        <div class="counter">
-            <button onClick={() => setCount(value => value - 1)}>-</button>
-            <div class="value">{count}</div>
-            <button onClick={() => setCount(value => value + 1)}>+</button>
-        </div>
-    )
-}
--- a/src/client/Paginate.tsx
+++ b/src/client/Paginate.tsx
@ -1,29 +0,0 @@
-import { useComputed, useSignal, type ReadonlySignal } from '@preact/signals'
-import type { JSX } from 'preact/jsx-runtime'
-
-export const ShowMore = <T extends any>({
-    items,
-    pageSize,
-    children,
-}: {
-    items: ReadonlySignal<T[]>
-    pageSize: number
-    children: (item: T) => JSX.Element
-}) => {
-    const $shownItems = useSignal(pageSize)
-
-    const $paginatedItems = useComputed(() => {
-        return items.value.slice(0, $shownItems.value)
-    })
-
-    return (
-        <>
-            {$paginatedItems.value.map(children)}
-            <div class="show-more">
-                {$shownItems.value < items.value.length && (
-                    <button onClick={() => ($shownItems.value += pageSize)}>Mostra altri</button>
-                )}
-            </div>
-        </>
-    )
-}
--- a/src/client/UtentiPage.tsx
+++ b/src/client/UtentiPage.tsx
@ -1,155 +0,0 @@
-import { useComputed, useSignal } from '@preact/signals'
-import Fuse from 'fuse.js'
-import { useEffect } from 'preact/hooks'
-import { ShowMore } from './Paginate'
-import { ComboBox } from './ComboBox'
-
-type User = {
-    uid: string
-    gecos: string
-}
-
-const FILTERS = {
-    utenti: {
-        icon: 'person',
-        label: 'Utenti',
-    },
-    macchinisti: {
-        icon: 'construction',
-        label: 'Macchinisti',
-    },
-    rappstud: {
-        icon: 'account_balance',
-        label: 'Rappresentanti',
-    },
-}
-
-function applyPatches(users: User[]) {
-    users.forEach(user => {
-        // strip ",+" from the end of the gecos field
-        user.gecos = user.gecos.replace(/,+$/, '')
-
-        // capitalize the first letter of each word
-        user.gecos = user.gecos.replace(/\b\w/g, c => c.toUpperCase())
-    })
-
-    // reverse the order of the users
-    users.reverse()
-}
-
-const MACCHINISTI = ['delucreziis', 'minnocci', 'baldino', 'manicastri', 'llombardo', 'serdyuk']
-
-const RAPPSTUD = [
-    'smannella',
-    'lotti',
-    'rotolo',
-    'saccani',
-    'carbone',
-    'mburatti',
-    'ppuddu',
-    'marinari',
-    'evsilvestri',
-    'tateo',
-    'graccione',
-    'dilella',
-    'rocca',
-    'odetti',
-    'borso',
-    'numero',
-]
-
-export const UtentiPage = () => {
-    const $utentiData = useSignal<User[]>([])
-
-    const $filter = useSignal('utenti')
-
-    const $filteredData = useComputed(() =>
-        $filter.value === 'macchinisti'
-            ? $utentiData.value.filter(user => MACCHINISTI.includes(user.uid))
-            : $filter.value === 'rappstud'
-            ? $utentiData.value.filter(user => RAPPSTUD.includes(user.uid))
-            : $utentiData.value
-    )
-
-    const $fuse = useComputed(
-        () =>
-            new Fuse($filteredData.value, {
-                keys: ['gecos', 'uid'],
-            })
-    )
-
-    const $searchText = useSignal('')
-    const $searchResults = useComputed(() =>
-        $searchText.value.trim().length > 0
-            ? $fuse.value?.search($searchText.value).map(result => result.item) ?? []
-            : $filteredData.value
-    )
-
-    useEffect(() => {
-        fetch('https://poisson.phc.dm.unipi.it/users.json')
-            .then(response => response.json())
-            .then(data => {
-                applyPatches(data)
-
-                $utentiData.value = data
-
-                $fuse.value.setCollection(data)
-            })
-    }, [])
-
-    return (
-        <>
-            <div class="search-bar">
-                <ComboBox value={$filter.value} setValue={s => ($filter.value = s)}>
-                    {Object.fromEntries(
-                        Object.entries(FILTERS).map(([k, v]) => [
-                            k,
-                            <>
-                                <span class="material-symbols-outlined">{v.icon}</span> {v.label}
-                            </>,
-                        ])
-                    )}
-                </ComboBox>
-                <div class="search">
-                    <input
-                        type="text"
-                        placeholder="Cerca un utente Poisson..."
-                        onInput={e => ($searchText.value = e.currentTarget.value)}
-                        value={$searchText.value}
-                    />
-                    <span class="material-symbols-outlined">search</span>
-                </div>
-            </div>
-            <div class="search-results">
-                {$searchResults.value ? (
-                    <ShowMore items={$searchResults} pageSize={100}>
-                        {poissonUser => (
-                            <div class="search-result">
-                                <div class="icon">
-                                    <span class="material-symbols-outlined">
-                                        {RAPPSTUD.includes(poissonUser.uid)
-                                            ? 'account_balance'
-                                            : MACCHINISTI.includes(poissonUser.uid)
-                                            ? 'construction'
-                                            : 'person'}
-                                    </span>
-                                </div>
-                                <div class="text">{poissonUser.gecos}</div>
-                                <div class="right">
-                                    <a
-                                        href={`https://poisson.phc.dm.unipi.it/~${poissonUser.uid}`}
-                                        target="_blank"
-                                    >
-                                        <span class="material-symbols-outlined">open_in_new</span>
-                                    </a>
-                                </div>
-                            </div>
-                        )}
-                    </ShowMore>
-                ) : (
-                    <>Nessun risultato</>
-                )}
-            </div>
-        </>
-    )
-}
--- a/src/client/lib/hooks.tsx
+++ b/src/client/lib/hooks.tsx
--- a/src/client/lib/util.ts
+++ b/src/client/lib/util.ts
@ -1,69 +0,0 @@
-import { useEffect, useState } from 'preact/hooks'
-
-export const trottleDebounce = <T extends any[], R>(
-    fn: (...args: T) => R,
-    delay: number,
-    options: { leading?: boolean; trailing?: boolean } = {}
-): ((...args: T) => R | undefined) => {
-    let lastCall = 0
-    let lastResult: R | undefined
-    let lastArgs: T | undefined
-    let timeout: NodeJS.Timeout | undefined
-
-    const leading = options.leading ?? true
-    const trailing = options.trailing ?? true
-
-    return (...args: T): R | undefined => {
-        lastArgs = args
-        if (leading && Date.now() - lastCall >= delay) {
-            lastCall = Date.now()
-            lastResult = fn(...args)
-        } else {
-            if (timeout) {
-                clearTimeout(timeout)
-            }
-            timeout = setTimeout(() => {
-                if (trailing && lastArgs) {
-                    lastCall = Date.now()
-                    lastResult = fn(...lastArgs)
-                }
-            }, delay)
-        }
-        return lastResult
-    }
-}
-
-export type ClassValue = string | ClassValue[] | Record<string, boolean> | false | undefined
-
-export function clsx(...args: ClassValue[]): string {
-    return args
-        .flatMap(arg => {
-            if (typeof arg === 'string') {
-                return arg
-            } else if (Array.isArray(arg)) {
-                return clsx(...arg)
-            } else if (typeof arg === 'boolean') {
-                return []
-            } else if (typeof arg === 'object') {
-                return Object.entries(arg).flatMap(([key, value]) => (value ? key : []))
-            } else {
-                return []
-            }
-        })
-        .join(' ')
-}
-
-export const isMobile = () => {
-    const [windowWidth, setWindowWidth] = useState(0)
-
-    useEffect(() => {
-        setWindowWidth(window.innerWidth)
-
-        const handleResize = () => setWindowWidth(window.innerWidth)
-        window.addEventListener('resize', handleResize)
-
-        return () => window.removeEventListener('resize', handleResize)
-    }, [])
-
-    return windowWidth < 1024
-}
--- a/src/components/Card.astro
+++ b/src/components/Card.astro
@ -1,15 +0,0 @@
---
-import type { AstroBuiltinProps } from 'astro'
-import type { AstroComponentFactory } from 'astro/runtime/server/index.js'
-
-type Props = {
-    large?: boolean
-    style?: string
-}
-
-const { large, ...props } = Astro.props
---
-
-<div class:list={['card', large && 'large']} {...props}>
-    <slot />
-</div>
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@ -1,9 +0,0 @@
-<footer>
-    <div class="text">
-        <p>
-            &copy; PHC 2024 &nbsp;&bull;&nbsp; <a href="mailto:macchinisti@lists.dm.unipi.it"
-                >macchinisti@lists.dm.unipi.it</a
-            >
-        </p>
-    </div>
-</footer>
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@ -1,32 +0,0 @@
-<header>
-    <a href="/" class="logo">
-        <img src="/images/phc-logo-2024-11@x8.png" alt="phc logo" />
-    </a>
-    <input type="checkbox" id="header-menu-toggle" />
-    <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> -->
-    </div>
-    <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>
-        </label>
-        <label id="header-menu-toggle-close" role="button" class="flat icon" for="header-menu-toggle">
-            <span class="material-symbols-outlined">close</span>
-        </label>
-    </div>
-    <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> -->
-        </div>
-    </div>
-</header>
--- a/src/components/HomepageZigZag.astro
+++ b/src/components/HomepageZigZag.astro
@ -1,26 +0,0 @@
---
-type Props = {
-    color: string
-}
-
-const { color } = Astro.props
-
-const patternId = 'zig-zag-' + color.slice(1)
---
-
-<div class="zig-zag">
-    <svg
-        width="100%"
-        height="2rem"
-        viewBox="0 0 1 1"
-        xmlns="http://www.w3.org/2000/svg"
-        preserveAspectRatio="xMinYMid meet"
-    >
-        <defs>
-            <pattern id={patternId} x="0" y="0" width="2" height="1" patternUnits="userSpaceOnUse">
-                <path fill={color} d="M 0,1 L 1,0 L 2,1 L 0,1"></path>
-            </pattern>
-        </defs>
-        <rect fill={`url(#${patternId})`} x="0" y="0" width="1000" height="1"></rect>
-    </svg>
-</div>
--- a/src/components/ProjectCard.astro
+++ b/src/components/ProjectCard.astro
@ -1,24 +0,0 @@
---
-// Card.astro
-export interface Props {
-    title: string
-    href: string
-
-    imgSrc?: string
-    style?: string
-}
-
-const { href, imgSrc, style, title } = Astro.props
---
-
-<a target="_blank" href={href} style={style}>
-    <div class="project">
-        <div class="image">
-            {imgSrc ? <img src={imgSrc} alt={'logo for ' + title.toLowerCase()} /> : <div class="box" />}
-        </div>
-        <div class="title">{title}</div>
-        <div class="description">
-            <slot />
-        </div>
-    </div>
-</a>
--- a/src/components/Timeline.astro
+++ b/src/components/Timeline.astro
@ -1,14 +0,0 @@
---
-const { year, title } = Astro.props
---
-
-<div class="timeline-item">
-    <div class="content">
-        <div class="card">
-            <div class="title">{year} &bull; {title}</div>
-            <div class="text">
-                <slot />
-            </div>
-        </div>
-    </div>
-</div>
--- a/src/components/meta/CodeBlockPreview.astro
+++ b/src/components/meta/CodeBlockPreview.astro
@ -1,14 +0,0 @@
---
-import { JSDOM } from 'jsdom'
-import Container from './Container.astro'
-
-const language = Astro.props['data-language'] ?? 'text'
-
-const html = await Astro.slots.render('default')
-
-const rawCode = new JSDOM(html).window.document.body.textContent
---
-
-<pre {...Astro.props}><slot /></pre>
-
-{language === 'astro' && <Container set:html={rawCode} />}
--- a/src/components/meta/Container.astro
+++ b/src/components/meta/Container.astro
@ -1,9 +0,0 @@
---
-const { size, ...rest } = Astro.props
---
-
-<div class:list={['container', size ?? 'normal']} {...rest}>
-    <div class="content">
-        <slot />
-    </div>
-</div>
--- a/src/components/meta/Palette.astro
+++ b/src/components/meta/Palette.astro
@ -1,20 +0,0 @@
---
-type Props = {
-    colors: string[]
-}
-
-const { colors } = Astro.props
---
-
-<div class="palette">
-    {
-        colors.map(value => (
-            <>
-                <div class="color">
-                    <div class="region" style={{ backgroundColor: value }} />
-                </div>
-                <div class="label">{value}</div>
-            </>
-        ))
-    }
-</div>
--- a/src/content/config.ts
+++ b/src/content/config.ts
@ -1,52 +0,0 @@
-import { z, defineCollection } from 'astro:content'
-
-// Una notizia ha una data di pubblicazione ma non ha un autore in quanto sono
-// notizie generiche sul PHC e non sono scritte da un autore specifico
-const newsCollection = defineCollection({
-    type: 'content',
-    schema: z.object({
-        title: z.string(),
-        description: z.string(),
-        publishDate: z.date(),
-        image: z
-            .object({
-                url: z.string(),
-                alt: z.string(),
-            })
-            .optional(),
-    }),
-})
-
-// Una guida ha un autore ma non ha una data di pubblicazione in quanto è un
-// contenuto statico e non è importante sapere quando è stata pubblicata
-const guidesCollection = defineCollection({
-    type: 'content',
-    schema: z.object({
-        id: z.string(),
-        title: z.string(),
-        description: z.string(),
-        author: z.string(),
-        series: z.string().optional(),
-        tags: z.array(z.string()),
-    }),
-})
-
-// Per ora sono su un sito a parte ma prima o poi verranno migrati qui
-const seminariettiCollection = defineCollection({
-    type: 'content',
-    schema: z.object({
-        title: z.string(),
-        description: z.string(),
-        author: z.string(),
-        publishDate: z.date(),
-        eventDate: z.date(),
-        tags: z.array(z.string()),
-    }),
-})
-
-// Export a single `collections` object to register your collection(s)
-export const collections = {
-    news: newsCollection,
-    guides: guidesCollection,
-    seminarietti: seminariettiCollection,
-}
--- a/src/content/guides/2024-02-29-git-101.md
+++ b/src/content/guides/2024-02-29-git-101.md
@ -1,353 +0,0 @@
---
-id: git-101
-title: Git 101
-description: Una guida introduttiva alle basi di Git
-author: Luca Lombardo
-tags: [git, gitea]
---
-
-Git è un sistema di controllo di versione distribuito creato per gestire progetti di qualsiasi dimensione, mantenendo traccia delle modifiche al codice sorgente. Questa guida ci accompagnerà dai concetti di base fino alle funzionalità avanzate.
-
---
-
-## **1. Introduzione a Git**
-
-### **Cos'è Git?**
-
-   **Sistema di controllo di versione**: Gestisce le modifiche al codice sorgente nel tempo.
-
-   **Distribuito**: Ogni sviluppatore ha una copia del repository.
-
-   **Veloce e leggero**: Ottimizzato per la velocità e le prestazioni.
-
-### **Perché usare Git?**
-
-   **Tracciabilità**: Ogni modifica è tracciata e reversibile.
-
-   **Collaborazione**: Più persone possono lavorare sullo stesso progetto.
-
-   **Backup**: Repository remoto per il backup del codice.
-
-   **Branching**: Lavoriamo su nuove funzionalità senza influenzare il codice principale.
-
---
-
-## **2. Installazione**
-
-> Se ci troviamo al dipartimento di matematica a Pisa, è già installato su tutte le macchine dell'aula 3 ed aula 4!
-
-### **Windows**
-
-1. Scarichiamo [Git for Windows](https://git-scm.com/download/win).
-
-2. Seguiamo il wizard di installazione.
-
-3. Durante l'installazione:
-
-    - Selezioniamo "Git Bash" come terminale.
-
-    - Configuriamo un editor di testo (es. Vim o Nano).
-
-### **macOS**
-
-1. Usiamo `brew` per installare Git:
-
-    ```bash
-    brew install git
-    ```
-
-### **Linux**
-
-1. Installiamo Git usando il nostro gestore di pacchetti:
-
-    - **Debian/Ubuntu**:
-
-        ```bash
-        sudo apt update
-        sudo apt install git
-        ```
-
-    - **Arch Linux**:
-
-        ```bash
-        sudo pacman -S git
-        ```
-
---
-
-## **3. Configurazione iniziale**
-
-Una volta installato, configuriamo Git con il nostro nome e indirizzo email:
-
-```bash
-git config --global user.name "Il Nostro Nome"
-git config --global user.email "nostro@email.com"
-```
-
-### **Verifica configurazione**
-
-```bash
-git config --list
-```
-
---
-
-## **4. Concetti fondamentali**
-
-### **Repository**
-
-   **Repository locale**: Una cartella sul nostro computer che contiene il nostro progetto.
-
-   **Repository remoto**: Una versione del progetto ospitata su un server (es. GitHub, GitLab).
-
-### **Branch**
-
-Un ramo permette di lavorare su modifiche isolate rispetto al codice principale (branch `main` o `master`).
-
-### **Commit**
-
-Una snapshot del nostro codice in un determinato momento.
-
---
-
-## **5. Creazione e gestione di un repository**
-
-### **Inizializzare un nuovo repository**
-
-Se stiamo iniziando un nuovo progetto, possiamo creare un nuovo repository con il comando:
-
-```bash
-git init
-```
-
-### **Clonare un repository esistente**
-
-Se invece vogliamo lavorare su un progetto esistente, possiamo clonare da remoto con:
-
-```bash
-git clone <URL>
-```
-
---
-
-## **6. Lavorare con Git**
-
-### **Aggiungere file**
-
-Aggiungiamo file allo stage per includerli nel prossimo commit:
-
-```bash
-git add <nome-file>
-# Oppure, per aggiungere tutti i file:
-git add .
-```
-
---
-
-### **Commit**
-
-Il comando **`git commit`** è utilizzato per registrare le modifiche nel repository locale. Ogni commit è una snapshot del progetto, contenente tutte le modifiche che sono state aggiunte tramite `git add`.
-
-#### Come funziona:
-
-1. **Aggiungiamo modifiche all'area di staging**:
-   Prima di fare un commit, dobbiamo aggiungere i file che vogliamo includere al prossimo commit usando `git add`. Questo comando prepara i file per essere salvati nella cronologia del repository.
-
-    Esempio:
-
-    ```bash
-    git add <nome-file>
-    # Oppure per aggiungere tutti i file modificati
-    git add .
-    ```
-
-2. **Effettuiamo il commit**:
-   Una volta che i file sono nell'area di staging, possiamo fare un commit. Ogni commit dovrebbe avere un messaggio descrittivo che spieghi cosa è stato cambiato nel progetto.
-
-    Comando per fare un commit:
-
-    ```bash
-    git commit -m "Descrizione chiara del cambiamento"
-    ```
-
-    L'opzione `-m` permette di aggiungere il messaggio direttamente dalla linea di comando. Se omettiamo `-m`, Git aprirà un editor di testo per scrivere il messaggio di commit.
-
-#### Cosa succede dietro le quinte:
-
-   Git salva lo stato dei file nell'area di staging in un commit, che viene aggiunto alla cronologia del repository locale.
-
-   Ogni commit ha un identificatore unico (hash) che consente di risalire facilmente alle modifiche in qualsiasi momento.
-
---
-
-### **Push**
-
-**`git push`** è il comando che ci permette di inviare le modifiche dal nostro repository locale a un repository remoto (ad esempio su GitHub, GitLab, Bitbucket, ecc.).
-
-#### Come funziona:
-
-1. Dopo aver fatto uno o più commit locali, dobbiamo inviare queste modifiche al repository remoto.
-
-2. Per fare questo, usiamo il comando **`git push`** seguito dal nome del remoto (di solito `origin` per il repository remoto di default) e dal nome del branch (di solito `main` o `master`, ma potrebbe essere qualsiasi altro nome di branch che stiamo utilizzando).
-
-    Comando per inviare le modifiche:
-
-    ```bash
-    git push origin main
-    ```
-
-#### Cosa succede dietro le quinte:
-
-   Git confronta il nostro branch locale con il branch remoto. Se ci sono nuovi commit nel branch remoto che non sono ancora nel nostro branch locale, ci verrà richiesto di fare un **pull** per aggiornare prima di fare il push.
-
-   Il nostro repository locale viene sincronizzato con il remoto, rendendo le modifiche visibili a tutti gli altri che hanno accesso al repository remoto.
-
-#### Errori comuni:
-
-   Se il repository remoto è stato aggiornato nel frattempo da qualcun altro (ad esempio, con un altro push), riceveremo un errore che ci avvisa che dobbiamo fare prima un `git pull` per sincronizzare il nostro lavoro.
-
---
-
-### **Pull**
-
-**`git pull`** è il comando che ci permette di scaricare e integrare le modifiche dal repository remoto al nostro repository locale. È una combinazione di due comandi: **`git fetch`** (scarica i cambiamenti dal remoto) e **`git merge`** (integra questi cambiamenti nel nostro branch attuale).
-
-#### Come funziona:
-
-1. Se altri collaboratori hanno fatto modifiche al repository remoto, possiamo ottenere queste modifiche con **`git pull`**. Questo comando aggiorna il nostro branch locale con le modifiche più recenti dal repository remoto.
-
-2. Eseguiamo il comando:
-
-    ```bash
-    git pull origin main
-    ```
-
-    In questo caso, `origin` è il nome del repository remoto (il nome predefinito quando cloni un repository), e `main` è il branch che vogliamo aggiornare.
-
-#### Cosa succede dietro le quinte:
-
-   **`git fetch`** scarica tutte le modifiche dal repository remoto, ma non le integra ancora nel nostro codice.
-
-   **`git merge`** unisce le modifiche scaricate al nostro branch attuale, risolvendo eventuali conflitti, se necessario.
-
-#### Errori comuni:
-
-   Se ci sono conflitti tra il nostro lavoro e quello degli altri, Git ci avviserà che dovremo risolverli manualmente. Dopo aver risolto i conflitti, dovremo aggiungere i file risolti (`git add`) e completare il merge con un commit.
-
-## **7. Lavorare con branch**
-
-### Creare un nuovo branch
-
-Per creare un nuovo branch in Git, utilizziamo il comando:
-
-```bash
-git branch <nome-branch>
-```
-
-Sostituiamo `<nome-branch>` con il nome desiderato per il nuovo branch.
-
-### Spostarsi su un branch
-
-Per spostarci su un branch esistente, usiamo:
-
-```bash
-git checkout <nome-branch>
-```
-
-Oppure, per creare e spostarci su un nuovo branch in un solo comando:
-
-```bash
-git switch -c <nome-branch>
-```
-
-### Unire un branch nel branch principale
-
-Per unire un branch nel branch principale (di solito chiamato `main`):
-
-1. Spostiamoci sul branch principale:
-
-    ```bash
-    git checkout main
-    ```
-
-2. Eseguiamo il merge del branch desiderato:
-
-    ```bash
-    git merge <nome-branch>
-    ```
-
-    Sostituiamo `<nome-branch>` con il nome del branch che vogliamo unire.
-
-### Risoluzione dei conflitti
-
-Quando due persone modificano lo stesso file, Git può generare un conflitto. Ecco come risolverlo:
-
-1. Identifichiamo il file in conflitto:
-
-    ```bash
-    git status
-    ```
-
-2. Modifichiamo manualmente il file per risolvere il conflitto. Cerchiamo i segni di conflitto (`<<<<<<<`, `=======`, `>>>>>>>`) e scegliamo quali modifiche mantenere.
-
-3. Aggiungiamo il file risolto allo stage:
-
-    ```bash
-    git add <file>
-    ```
-
-4. Concludiamo con un commit per salvare le modifiche risolte:
-
-    ```bash
-    git commit
-    ```
-
---
-
-## **9. Comandi utili**
-
-### **Visualizzare le differenze**
-
-```bash
-git diff
-```
-
-### **Annullare modifiche**
-
-1. **Prima del commit**:
-
-    ```bash
-    git checkout -- <file>
-    ```
-
-2. **Dopo il commit**:
-
-    ```bash
-    git reset --soft HEAD~1
-    ```
-
-### **Eliminare un branch**
-
-```bash
-git branch -d <nome-branch>
-```
-
---
-
-## **10. Best practices**
-
-   Scriviamo messaggi di commit chiari e descrittivi.
-
-   Creiamo branch per nuove funzionalità o bugfix.
-
-   Sincronizziamo frequentemente il nostro repository locale con quello remoto.
-
---
-
-## **11. Risorse aggiuntive**
-
-   [Documentazione ufficiale di Git](https://git-scm.com/doc)
-
-   [Guida interattiva Learn Git Branching](https://learngitbranching.js.org/)
-
-   [GitHub Docs](https://docs.github.com/)
--- a/src/content/guides/2024-07-30-pagina-poisson-con-astro.md
+++ b/src/content/guides/2024-07-30-pagina-poisson-con-astro.md
@ -1,80 +0,0 @@
---
-id: pagina-poisson-con-astro
-title: Pagina Poisson con Astro
-description: Vediamo come creare una pagina Poisson moderna con Astro
-author: Antonio De Lucreziis
-tags: [astro, website]
---
-
-In questa guida vedremo come creare una pagina Poisson moderna utilizzando Astro, un nuovo framework di sviluppo web statico. Per prima cosa installeremo NodeJS sul nostro computer, poi creeremo un nuovo progetto Astro e infine dopo averlo generato, lo caricheremo su Poisson.
-
-## Setup
-
-Se siete sul vostro pc installate VSCode ed il plugin di Astro.
-
-Poi installiamo NodeJS (se siete su Windows è consigliato [installare WSL con `wsl --install`](https://learn.microsoft.com/en-us/windows/wsl/install) e poi installare i seguenti pacchetti nell'ambiente Linux)
-
-> NodeJS: https://nodejs.org/en/download/package-manager
-
-```bash
-curl -fsSL https://fnm.vercel.app/install | bash
-source ~/.bashrc
-
-fnm use --install-if-missing 20
-node -v
-npm -v
-```
-
-## Creazione di un nuovo progetto Astro
-
-Per prima cosa dobbiamo creare un nuovo progetto di Astro sul nostro computer, possiamo scegliere [uno dei tanti temi disponibili per Astro](https://astro.build/themes/) o partire da un blog di esempio con il seguente comando:
-
-```bash
-npm create astro@latest -- --template blog
-cd nome-del-progetto
-npm install
-```
-
-Se ad esempio volessimo usare un tema come "[Astro Nano](https://github.com/markhorn-dev/astro-nano)" possiamo fare così:
-
-```bash
-git clone https://github.com/markhorn-dev/astro-nano sito-poisson
-cd sito-poisson
-npm install
-```
-
-L'ultima cosa importante che c'è da cambiare è che le pagine Poisson sono hostate su `https://poisson.phc.dm.unipi.it/~nomeutente/` che non è la radice del dominio del sito. Quindi dobbiamo cambiare il file `astro.config.mjs`:
-
-```javascript
-export default defineConfig({
-    ...
-    base: '/~nomeutente/',
-    trailingSlash: 'always',
-    ...
-});
-```
-
-## Lavorare con Astro
-
-Per vedere il nostro progetto in locale possiamo eseguire il comando:
-
-```bash
-npm run dev
-```
-
-A questo punto in base al tema scelto possiamo modificare i file dentro `src/pages` per cambiare il contenuto delle pagine. Molti temi sono preimpostati per scrivere contenuti in Markdown, ad esempio per il _template blog_ possiamo scrivere gli articoli per il nostro blog in `src/content/blog/{nome_post}.md`.
-
-## Appunti
-
-Una volta creato il progetto possiamo caricare appunti e dispense nella cartella `/public`
-
-## Deploy
-
-Per caricare il nostro sito su Poisson possiamo usare il comando `rsync`:
-
-```bash
-npm run build
-rsync -avz dist/ username@poisson.phc.dm.unipi.it:public_html/
-```
-
-Dove `username` è il nostro username Poisson. Da notare che gli `/` alla fine di `dist/` e `public_html/` sono importanti per evitare di creare delle cartelle per errore.
--- a/src/content/guides/2024-11-03-deploy-with-github-actions.md
+++ b/src/content/guides/2024-11-03-deploy-with-github-actions.md
@ -1,111 +0,0 @@
---
-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
-author: Antonio De Lucreziis
-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? 
-
-Vediamo come automatizzare questo processo utilizzando le GitHub Actions.
-
-## Setup
-
-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
-$ rsync -avz dist/ <username>@poisson.phc.dm.unipi.it:public_html/
-```
-
-(osserviamo che gli `/` alla fine di `dist/` e `public_html/` sono importanti per evitare di creare delle cartelle per errore)
-
-## GitHub Actions
-
-Per automatizzare questo processo possiamo caricare il nostro progetto su GitHub ed aggiungere un _workflow_ che esegue il build e il deploy ogni volta che facciamo un push sul branch `main`. Ad esempio, possiamo creare un file `.github/workflows/deploy-poison.yaml` con quanto segue:
-
-```yaml
-name: Deploy to Poisson
-on:
-  push:
-    branches:
-      - main
-jobs:
-  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: Setup Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: '23'
-
-      - name: Install dependencies
-        run: npm install
-
-      - name: Build
-        run: npm run build
-
-      - 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)
-
- `-a` per copiare ricorsivamente i file e mantenere i permessi
-
- `-v` per mostrare i file copiati
-
- `-z` per comprimere i file durante il trasferimento
-
-## SSH Segreti
-
-Per stabilire una connessione SSH a Poisson dalle GitHub Actions in modo sicuro, dobbiamo aggiungere alcuni segreti alla nostra repository. Vediamo meglio il workflow:
-
-```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
-```
-
-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:
-
-```bash
-$ ssh-keygen -t ed25519 -C "deploy@github-actions" -f actions-deploy-key
-$ 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, per evitare che la connessione venga rifiutata, eseguiamo in locale anche uno scan delle chiavi SSH di Poisson:
-
-```bash
-$ 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`. 
-
-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!
--- a/src/content/guides/2024-11-17-attivazione-poisson.md
+++ b/src/content/guides/2024-11-17-attivazione-poisson.md
@ -1,82 +0,0 @@
---
-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
-author: Luca Lombardo
-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.
-
-## Come richiedere un account
-
-Se non si è mai creato un account Poisson, è necessario inviare una richiesta via email a **macchinisti@lists.dm.unipi.it** includendo:
-
-   Nome
-
-   Cognome
-
-   Username di ateneo (quello associato alla propria email istituzionale)
-
-Nella mail è sufficiente specificare che si desidera attivare un account Poisson. I "macchinisti" si occuperanno di attivare l'account il prima possibile.
-
-### Come ottenere le credenziali
-
-Dopo l'attivazione, le credenziali del proprio account saranno disponibili accedendo al seguente sito:
-
-<p align="center">
-    <a href="https://credenziali.phc.dm.unipi.it/">https://credenziali.phc.dm.unipi.it/</a>
-</p>
-
-Assicuriamoci di accedere con le credenziali di ateneo per recuperare username e password assegnati.
-
-## Primo accesso al server
-
-Per accedere a Poisson via SSH, è necessario:
-
-1. Aprire un terminale (su Linux/Mac) o utilizzare un client SSH come PuTTY (su Windows).
-
-2. Eseguire il comando:
-
-    ```bash
-    ssh <username>@poisson.phc.dm.unipi.it
-    ```
-
-    Dove `<username>` è il proprio username che è stato fornito con le credenziali.
-
-## Configurazione della pagina web
-
-Dopo aver effettuato il primo accesso, è possibile configurare la propria pagina web personale. Nella home directory del proprio account, è presente una cartella `public_html` in cui è possibile inserire i file necessari per la propria pagina web.
-
-Vediamo un piccolo esempio di file `index.html` che possiamo creare:
-
-```html
-<!DOCTYPE html>
-<html lang="it">
-    <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Sergio Steffè</title>
-    </head>
-    <body>
-        <h1>Sergio Steffè</h1>
-        <img
-            src="https://people.cs.dm.unipi.it/steffe/sergio.jpg"
-            alt="Foto di Sergio Steffè"
-            style="max-width: 300px; border-radius: 10px;"
-        />
-        <p>Ciao! Sono Sergio Steffè.</p>
-        <p>Email: <a href="mailto:sergio.steffe@example.com">sergio.steffe@example.com</a></p>
-    </body>
-</html>
-```
-
-Una volta salvato il file `index.html` nella cartella `public_html`, sarà possibile visualizzarlo accedendo al seguente indirizzo:
-
-    https://poisson.phc.dm.unipi.it/~<username>
-
-Dove `<username>` è il proprio username.
-
-### Creazione di pagine web più complesse
-
-Per creare pagine web più complesse, suggeriamo di utilizzare il framework [Astro](https://astro.build/), che permette di creare siti web statici in modo semplice e veloce. [Abbiamo scritto una guida](/guide/pagina-poisson-con-astro) su come iniziare a utilizzare Astro per creare la nostra pagina web e caricarla su Poisson.
--- a/src/content/guides/2024-11-17-recupero-password-poisson.md
+++ b/src/content/guides/2024-11-17-recupero-password-poisson.md
@ -1,21 +0,0 @@
---
-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!
-author: Luca Lombardo
-tags: [poisson, password]
---
-
-Se per qualche strano motivo hai dimenticato la tua password Poisson, niente paura! La procedura è super semplice:
-
-1. Scrivi una mail a **macchinisti@lists.dm.unipi.it**.
-
-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.
-
-E voilà, in un batter d'occhio sarai di nuovo pronto a entrare nel fantastico mondo di Poisson.
-
---
-
-**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/) 😉
--- a/src/content/meta/design.mdx
+++ b/src/content/meta/design.mdx
@ -1,209 +0,0 @@
-import Container from '../../components/meta/Container.astro'
-import Palette from '../../components/meta/Palette.astro'
-
-# Meta > Design
-
-In questa pagina tento di spiegare come funziona il design di questo sito. I blocchi di codice con sfondo arancione chiaro sono esempi di codice Astro e sotto hanno un'anteprima del risultato _generata automaticamente_. Ad esempio
-
-```astro
-<p>Questo è un paragrafo</p>
-```
-
-Molti di questi esempi hanno alcuni stili impostati in `style` per mostrare come funzionano. Nella pratica invece è consigliato create una classe per ogni tipo di componente ed impostare le proprietà via CSS, ad esempio
-
-```css
-.my-custom-form {
-    --card-base: var(--palette-red);
-    max-width: 25rem;
-}
-```
-
-```html
-<div class="my-custom-form card">
-    <p>Questo è un paragrafo</p>
-</div>
-```
-
-## Card
-
-Le card sono uno dei componenti più importanti di questo sito. Sono utilizzate per mostrare i post, i progetti e le pagine. Ecco alcuni esempi per dare un'idea
-
-### Esempio di base
-
-Una card semplice ha un titolo ed una descrizione.
-
-```astro
-<div class="card" style="--card-base: var(--guide-base); max-width: 25rem;">
-    <div class="title">Titolo</div>
-    <div class="text">
-        Descrizione lorem ipsum dolor sit amet consectetur
-        adipisicing elit. Aspernatur, labore?
-    </div>
-</div>
-```
-
-### Varianti
-
-#### Grande
-
-Le card possono essere di dimensioni diverse. Questa è una card grande.
-
-```astro
-<div class="card large" style="--card-base: lightgreen; max-width: 25rem;">
-    <div class="title">Titolo</div>
-    <div class="text">
-        Descrizione lorem ipsum dolor sit amet consectetur
-        adipisicing elit. Aspernatur, labore?
-    </div>
-</div>
-```
-
-### Low Level: Mixin SCSS
-
-Non dovrebbe essere mai necessario usarlo direttamente ma l'effetto di ombra delle card è ottenuto con questo mixin SCSS (che si trova in `src/styles/mixins.scss`).
-
-```scss
-@mixin neo-brutalist-card($size: 3px, $offset: $size + 1, $shadow: true, $hoverable: false) {
-    border: $size solid #222;
-    border-radius: $size * 2;
-
-    @if $shadow {
-        box-shadow: $offset $offset 0 0 #222;
-    }
-
-    @if $hoverable {
-        transition: all 64ms linear;
-
-        &:hover {
-            transform: translate(-1px, -1px);
-            box-shadow: $offset + 1 $offset + 1 0 0 #222;
-        }
-    }
-}
-```
-
-Ad esempio tutti i bottoni utilizzano direttamente questo mixin senza cambiare i parametri di default.
-
-### Sotto-componenti
-
-#### Titolo
-
-```astro
-<div class="card">
-    <div class="title">Titolo</div>
-</div>
-```
-
-#### Testo & Modificatori
-
-Se c'è poco testo, può essere inserito direttamente nella card.
-
-```astro
-<div class="card">
-    <div class="text">
-        Descrizione lorem ipsum dolor sit amet consectetur
-        adipisicing elit. Aspernatur, labore?
-    </div>
-</div>
-```
-
-Altrimenti può essere inserito in un tag `<p>`.
-
-```astro
-<div class="card">
-    <div class="text">
-        <p>
-            Lorem ipsum dolor sit amet consectetur, adipisicing elit.
-            Distinctio, vel! Veritatis est sit beatae eveniet.
-        </p>
-        <p>
-            Error, minus, asperiores quaerat nulla cumque, nisi ipsam
-            assumenda consectetur accusamus tempore consequatur quae. Fugit?
-        </p>
-        <p>
-            Quos sapiente amet numquam quis, libero odit eum, eius
-            perspiciatis repellat nesciunt cupiditate asperiores maiores?
-        </p>
-    </div>
-</div>
-```
-
-C'è anche il modificatore `small` e `dimmed` per ridurre la grandezza del testo e renderlo grigio rispettivamente.
-
-```astro
-<div class="card" style="max-width: 25rem;">
-    <div class="text">
-        Some normal text, this is a very long
-        text that should wrap on the next line
-    </div>
-    <div class="text small">
-        This is some small text
-    </div>
-    <div class="text dimmed">
-        This is some dimmed text
-    </div>
-    <div class="text small dimmed">
-        This is some small dimmed text
-    </div>
-</div>
-```
-
-#### Tags
-
-I tag sono una lista di link con `display: flex` e `flex-wrap: wrap`.
-
-```astro
-<div class="card" style="max-width: 25rem;">
-    <div class="tags">
-        <a href="#">#tag1</a>
-        <a href="#">#tagg2</a>
-        <a href="#">#tag3</a>
-        <a href="#">#taggg4</a>
-        <a href="#">#tagg5</a>
-        <a href="#">#taggg6</a>
-        <a href="#">#tag7</a>
-        <a href="#">#taggg8</a>
-        <a href="#">#tag9</a>
-        <a href="#">#taggggg10</a>
-    </div>
-</div>
-```
-
-## Palette
-
-Varie sezioni del sito utilizzano diverse palette di colori. Questa è la palette di base.
-
-### Guide
-
-<Palette
-    colors={[
-        'var(--guide-base)',
-        'var(--guide-darkest)',
-        'var(--guide-darker)',
-        'var(--guide-dark)',
-        'var(--guide-light)',
-        'var(--guide-lighter)',
-        'var(--guide-lightest)',
-    ]}
-/>
-
-## Combo Box
-
-I combo box sono un componente per fare dropdown scritto in Preact. Questo è un esempio di come funzionano.
-
-```js
-import { ComboBox } from '@/lib/components/ComboBox'
-
-const [value, setValue] = useState('option-1')
-```
-
-
-```jsx
-<ComboBox value={value} setValue={setValue}>
-  {{
-    'option-1': <>Option 1</>
-    'option-2': <>Option 2</>
-    'option-3': <>Option 3</>
-  }}
-</ComboBox>
-```
--- a/src/content/meta/whats-phc.md
+++ b/src/content/meta/whats-phc.md
@ -1,12 +0,0 @@
---
-# Questo documento è utilizzato nella homepage del sito nella card principale
-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.
-
-La sede del PHC è la [stanza 106](https://www.dm.unipi.it/mappa/?sel=638cd24b50cf34e03924a00c) del Dipartimento, dove si trovano i **macchinisti** per discutere e realizzare progetti [hardware](http://steffe.cs.dm.unipi.it/) e [software](https://lab.phc.dm.unipi.it/orario), e occuparsi di server autogestiti.
-
-Le macchine del PHC girano principalmente Linux/Unix come sistemi operativi e i macchinisti sono grandi sostenitori di software [FOSS](https://it.wikipedia.org/wiki/Free_and_Open_Source_Software) (che loro stessi sviluppano sull'[istanza Gitea del PHC](https://git.phc.dm.unipi.it/phc)).
-
-La lista dei vari macchinisti e di altri eventi notevoli si trova nella [pagina della storia](/storia) del PHC.
--- a/src/content/news/2024-07-28-nuovo-sito.md
+++ b/src/content/news/2024-07-28-nuovo-sito.md
@ -1,38 +0,0 @@
---
-title: Il Nuovo Sito del PHC
-description: Benvenuti nel nuovo sito web del PHC, realizzato in Astro. Vediamo le feature principali e cosa abbiamo in serbo per il futuro.
-publishDate: 2024-10-05
---
-
-# Il Nuovo Sito del PHC
-
-Questo è il nuovo sito del PHC, realizzato in [Astro](https://astro.build/), un nuovo framework per realizzare siti web.
-
-## Perché Astro?
-
-Astro è un framework statico che ci consente di creare siti web veloci e performanti. Per ora il sito è completamente statico, ma Astro ci permetterà di passare facilmente a un modello di sito ibrido, con funzionalità dinamiche e interattive.
-
-A differenza di altri framework, di base Astro non richiede JavaScript per funzionare, il che lo rende una scelta ideale per siti web leggeri e veloci.
-
-## Caratteristiche del Nuovo Sito
-
-Il nuovo sito unifica varie funzionalità che prima erano sparse in diversi siti web. I contenuti del sito dei Seminarietti verranno integrati nella sezione guide che ospiterà anche molte altre risorse utili. 
-
- **Lista Utenti**: La lista degli utenti di Poisson precedentemente presente sul sito era ordinata per nome e non era facile cercare un utente specifico. Ora la lista è ordinata in base alla data di creaizone dell'account e c'è una barra di ricerca fuzzy per cercare un utente e la sua pagina Poisson.
-
- **Guide**: La sezione guide ospiterà articoli, tutorial e risorse utili per gli studenti. Questa sezione sarà in costante aggiornamento con nuovi contenuti.
-
- **News**: La sezione news ospiterà gli novità e annunci importanti riguardanti il PHC.
-
- **Storia**: Questa sezione raccoglie la storia del PHC fin dalla creazione di Poisson nel lontano 1994, includendo tutti i vari macchinisti nel corso della tempo. 
-
-## Cooming Soon
-
- **Appunti**: Stiamo lavorando ad una nuova sezione appunti unificata che raccoglierà tutte le dispense presenti su Poisson. Gli utenti potranno cercare gli appunti per corso e per professore e scaricarli in formato PDF.
-
- **Account Utente**: Prossimamente sarà possibile accedere al sito del PHC sia con un account Poisson che con un account di Ateneo. Gli utenti potranno recuperare le proprie credenziali Poisson (precedentemente esisteva il sito separato https://credenziali.phc.dm.unipi.it/ per questo scopo), modificare la propria password e visualizzare i propri appunti caricati.
-
-## Conclusioni
-
-Speriamo che il nuovo sito vi piaccia e vi sia utile. Se avete suggerimenti o richieste, non esitate a contattarci. Buona navigazione, magari iniziando dalla [pagina sulla storia del PHC](/storia)!
-
--- a/src/env.d.ts
+++ b/src/env.d.ts
@ -1,2 +0,0 @@
-/// <reference path="../.astro/types.d.ts" />
-/// <reference types="astro/client" />
--- a/src/layouts/ArticleLayout.astro
+++ b/src/layouts/ArticleLayout.astro
@ -1,16 +0,0 @@
---
-import BaseLayout from './BaseLayout.astro'
-
-import Header from '../components/Header.astro'
-import Footer from '../components/Footer.astro'
---
-
-<BaseLayout {...Astro.props}>
-    <Header />
-    <main class="article card large">
-        <div class="text">
-            <slot />
-        </div>
-    </main>
-    <Footer />
-</BaseLayout>
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@ -1,78 +0,0 @@
---
-import 'katex/dist/katex.min.css'
-
-import '@fontsource/open-sans/latin.css'
-import '@fontsource/source-sans-pro/latin.css'
-import '@fontsource/source-code-pro/latin.css'
-import '@fontsource/space-mono/latin.css'
-import '@fontsource/iosevka/latin.css'
-
-import '@fontsource-variable/material-symbols-outlined/full.css'
-
-import '../styles/main.scss'
-
-type Props = {
-    title?: string
-    description?: string
-    thumbnail?: string
-
-    /** Tags for the page, used for styling */
-    pageTags?: string | string[]
-}
-
-import phcIcon from '../assets/icon.png'
-
-const { title, description, thumbnail, pageTags } = Astro.props
---
-
-<!doctype html>
-<html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-
-        <meta property="og:title" content={title ?? 'PHC'} />
-        <meta property="og:description" content={description ?? 'Sito web del PHC'} />
-        <meta name="description" content={description ?? 'Sito web del PHC'} />
-        <meta property="og:type" content="website" />
-        <meta property="og:url" content="https://phc.dm.unipi.it/" />
-        {thumbnail && <meta property="og:image" content={thumbnail} />}
-
-        <link rel="icon" type="image/png" sizes="512x512" href={phcIcon.src} />
-        <link rel="apple-touch-icon" href={phcIcon.src} />
-
-        <script>
-            import renderMathInElement from 'katex/contrib/auto-render'
-
-            document.addEventListener('DOMContentLoaded', function () {
-                renderMathInElement(document.body, {
-                    delimiters: [
-                        { left: '$$', right: '$$', display: true },
-                        { left: '$', right: '$', display: false },
-                        { left: '\\(', right: '\\)', display: false },
-                        { left: '\\[', right: '\\]', display: true },
-                    ],
-                    throwOnError: false,
-                })
-            })
-        </script>
-
-        <script is:inline>
-            window.goatcounter = {
-                path(p) {
-                    return location.host + p
-                },
-            }
-        </script>
-        <script
-            is:inline
-            async
-            src="//analytics.phc.dm.unipi.it/count.js"
-            data-goatcounter="https://analytics.phc.dm.unipi.it/count"></script>
-
-        <title>{title ?? 'PHC'}</title>
-    </head>
-    <body class:list={typeof pageTags === 'string' ? [pageTags] : pageTags}>
-        <slot />
-    </body>
-</html>
--- a/src/layouts/PageLayout.astro
+++ b/src/layouts/PageLayout.astro
@ -1,14 +0,0 @@
---
-import BaseLayout from './BaseLayout.astro'
-
-import Header from '../components/Header.astro'
-import Footer from '../components/Footer.astro'
---
-
-<BaseLayout {...Astro.props}>
-    <Header />
-    <main>
-        <slot />
-    </main>
-    <Footer />
-</BaseLayout>
--- a/src/pages/appunti/index.astro
+++ b/src/pages/appunti/index.astro
@ -1,64 +0,0 @@
---
-import PageLayout from '@layouts/PageLayout.astro'
-
-import { AppuntiList, AppuntiCard } from '@client/Appunti'
---
-
-<PageLayout title="Appunti | PHC" pageTags="appunti">
-    <h1>Appunti & Dispense</h1>
-
-    <div class="search">
-        <input type="text" />
-        <span class="material-symbols-outlined">search</span>
-    </div>
-
-    <h2>In primo piano</h2>
-
-    <div class="appunti-scrollable center">
-        <AppuntiList>
-            <AppuntiCard client:load title="Appunti 1" author="someuser" courseYear="2023/2024" />
-            <AppuntiCard client:load course="Geometria 1" author="exampleuser" courseYear="2023/2024" />
-            <AppuntiCard client:load course="Algebra 1" author="anotheruser" courseYear="2023/2024" />
-        </AppuntiList>
-    </div>
-
-    <!-- <h2>Categorie</h2>
-
-    <h3>Analisi</h3>
-
-    <div class="appunti-scrollable">
-        <AppuntiList>
-            <AppuntiCard client:load title="Appunti 1" author="example" courseYear="2023/2024" />
-            <AppuntiCard client:load title="Appunti 1" author="example" courseYear="2023/2024" />
-            <AppuntiCard client:load title="Appunti 1" author="example" courseYear="2023/2024" />
-            <AppuntiCard client:load title="Appunti 1" author="example" courseYear="2023/2024" />
-            <AppuntiCard client:load title="Appunti 1" author="example" courseYear="2023/2024" />
-            <AppuntiCard client:load title="Appunti 1" author="example" courseYear="2023/2024" />
-            <AppuntiCard client:load title="Appunti 1" author="example" courseYear="2023/2024" />
-            <AppuntiCard client:load title="Appunti 1" author="example" courseYear="2023/2024" />
-        </AppuntiList>
-    </div>
-
-    <h3>Algebra Lineare</h3>
-
-    <div class="appunti-scrollable">
-        <AppuntiList>
-            <AppuntiCard client:load title="Appunti 1" author="example" courseYear="2023/2024" />
-            <AppuntiCard client:load title="Appunti 1" author="example" courseYear="2023/2024" />
-            <AppuntiCard client:load title="Appunti 1" author="example" courseYear="2023/2024" />
-            <AppuntiCard client:load title="Appunti 1" author="example" courseYear="2023/2024" />
-        </AppuntiList>
-    </div>
-
-    <h3>Geometria</h3>
-
-    <div class="appunti-scrollable">
-        <AppuntiList>
-            <AppuntiCard client:load title="Appunti 1" author="example" courseYear="2023/2024" />
-            <AppuntiCard client:load title="Appunti 1" author="example" courseYear="2023/2024" />
-            <AppuntiCard client:load title="Appunti 1" author="example" courseYear="2023/2024" />
-            <AppuntiCard client:load title="Appunti 1" author="example" courseYear="2023/2024" />
-            <AppuntiCard client:load title="Appunti 1" author="example" courseYear="2023/2024" />
-        </AppuntiList>
-    </div> -->
-</PageLayout>
--- a/src/pages/guide/[id].astro
+++ b/src/pages/guide/[id].astro
@ -1,41 +0,0 @@
---
-import { getCollection } from 'astro:content'
-
-import ArticleLayout from '@/layouts/ArticleLayout.astro'
-
-export async function getStaticPaths() {
-    const guides = await getCollection('guides')
-
-    return guides.map(entry => ({
-        params: { id: entry.data.id },
-        props: { entry },
-    }))
-}
-
-const { entry } = Astro.props
-const { Content } = await entry.render()
---
-
-<ArticleLayout
-    {...entry.data}
-    title={entry.data.title + ' | Guide | PHC'}
-    pageTags={['guida', entry.data.id, entry.data.series && 'series']}
->
-    <h1>{entry.data.title}</h1>
-
-    {entry.data.series && <div class="series">Serie: {entry.data.series}</div>}
-    <Content />
-
-    <div class="metadata">
-        <div class="metadata-item">
-            <strong>Autore</strong>
-            {entry.data.author}
-        </div>
-        <div class="metadata-item">
-            <strong>Tags</strong>
-            <div class="tags">
-                {entry.data.tags.map(tag => <a href={`/guide/tags/${tag}`}>#{tag}</a>)}
-            </div>
-        </div>
-    </div>
-</ArticleLayout>
--- a/src/pages/guide/index.astro
+++ b/src/pages/guide/index.astro
@ -1,30 +0,0 @@
---
-import { getCollection } from 'astro:content'
-
-import PageLayout from '@layouts/PageLayout.astro'
-
-const guides = await getCollection('guides')
---
-
-<PageLayout title="Guide | PHC" pageTags="guide">
-    <h1>
-        <a href="/guide">Guide</a>
-    </h1>
-    <div class="card-list">
-        {
-            guides.toReversed().map(guide => (
-                <div class="card">
-                    <div class="title">
-                        <a href={`/guide/${guide.data.id}`}>{guide.data.title}</a>
-                    </div>
-                    <div class="text">{guide.data.description}</div>
-                    <div class="tags">
-                        {guide.data.tags.map((tag: string) => (
-                            <a href={`/guide/tags/${tag}`}>#{tag}</a>
-                        ))}
-                    </div>
-                </div>
-            ))
-        }
-    </div>
-</PageLayout>
--- a/src/pages/guide/tags/[tag].astro
+++ b/src/pages/guide/tags/[tag].astro
@ -1,55 +0,0 @@
---
-import { getCollection } from 'astro:content'
-import type { CollectionEntry } from 'astro:content'
-import PageLayout from '@/layouts/PageLayout.astro'
-
-export async function getStaticPaths() {
-    const guides = await getCollection('guides')
-
-    const tags: string[] = []
-
-    guides.forEach(post => {
-        post.data.tags.forEach((tag: string) => {
-            tags.push(tag)
-        })
-    })
-
-    return Array.from(new Set(tags)).map(tag => {
-        return {
-            params: { tag },
-            props: {
-                tag,
-                guides: guides.filter(post => post.data.tags.includes(tag)),
-            },
-        }
-    })
-}
-
-interface Props {
-    tag: string
-    guides: CollectionEntry<'guides'>[]
-}
-
-const { tag, guides } = Astro.props
---
-
-<PageLayout title={`#${tag} | Guide | PHC`} pageTags="guide tag">
-    <h1><a href="/guide">Guide</a> > <a href={`/guide/tags/${tag}`}>#{tag}</a></h1>
-    <div class="card-list">
-        {
-            guides.map(guide => (
-                <div class="card">
-                    <div class="title">
-                        <a href={`/guide/${guide.data.id}`}>{guide.data.title}</a>
-                    </div>
-                    <div class="text">{guide.data.description}</div>
-                    <div class="tags">
-                        {guide.data.tags.map((tag: string) => (
-                            <a href={`/guide/tags/${tag}`}>#{tag}</a>
-                        ))}
-                    </div>
-                </div>
-            ))
-        }
-    </div>
-</PageLayout>
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@ -1,208 +0,0 @@
---
-import { getCollection } from 'astro:content'
-import PageLayout from '@/layouts/PageLayout.astro'
-import { Content as WhatPhcContent, frontmatter as whatsPhcFrontmatter } from '@/content/meta/whats-phc.md'
-import { Image } from 'astro:assets'
-import ProjectCard from '@/components/ProjectCard.astro'
-import HomepageZigZag from '@/components/HomepageZigZag.astro'
-import Card from '@/components/Card.astro'
-
-const news = await getCollection('news')
-
-const galleryCollage = await Astro.glob('@/assets/gallery/*.jpg')
---
-
-<PageLayout title="PHC" pageTags="homepage">
-    <section class="principal">
-        <div class="circuit-layer">
-            <canvas id="circuits-art"></canvas>
-            <script src="../scripts/circuits-art.ts"></script>
-        </div>
-        <div class="logo">
-            <img src="/images/phc-logo-2024-11@x8.png" alt="phc logo" />
-        </div>
-        <div class="whats-phc card large">
-            <input type="checkbox" class="hide" id="mobile-whats-phc-read-more" checked />
-            <div class="title">{whatsPhcFrontmatter.title}</div>
-            <div class="text">
-                <WhatPhcContent />
-            </div>
-            <div class="mobile-only">
-                <label for="mobile-whats-phc-read-more">
-                    <div class="button">
-                        <span>Mostra di più</span>
-                        <span>Mostra meno</span>
-                    </div>
-                </label>
-            </div>
-        </div>
-    </section>
-
-    <section class="news">
-        <HomepageZigZag color="#C2A8EB" />
-
-        <div class="title">Ultime Notizie</div>
-
-        <div class="card-list">
-            {
-                news.map(newsItem => (
-                    <Card>
-                        <a href={`/notizie/${newsItem.slug}`} class="title">
-                            {newsItem.data.title}
-                        </a>
-                        <div class="text small dimmed">
-                            {new Date(newsItem.data.publishDate).toLocaleDateString('it-IT', {
-                                year: 'numeric',
-                                month: 'long',
-                                day: 'numeric',
-                            })}
-                        </div>
-                        <div class="text">{newsItem.data.description}</div>
-                    </Card>
-                ))
-            }
-        </div>
-
-        <a class="primary" href="/notizie" role="button">Vai all'Archivio</a>
-    </section>
-
-    <section class="projects" id="projects">
-        <HomepageZigZag color="#f5f2cc" />
-
-        <div class="title">Progetti</div>
-
-        <div class="project-list">
-            <ProjectCard
-                title="Gitea"
-                href="https://git.phc.dm.unipi.it/"
-                imgSrc="https://upload.wikimedia.org/wikipedia/commons/b/bb/Gitea_Logo.svg"
-                style="--card-bg: rgb(150, 197, 150); --masonry-height: 2;"
-            >
-                <p>Gitea è un servizio di hosting per progetti software, come GitHub ma autogestito.</p>
-                <p>
-                    Qui puoi trovare i progetti del PHC, e accedendo con un account di Ateneo potrai crearne
-                    di nuovi.
-                </p>
-            </ProjectCard>
-            <!-- <ProjectCard
-                title="PHC-Bot"
-                href="#"
-                style="--card-bg: #c55; --masonry-height: 1;"
-            >
-                <p>Un bot con cui chattare per chiedere informazioni o supporto tecnico.</p>
-            </ProjectCard> -->
-            <ProjectCard
-                title="Orario"
-                href="https://lab.phc.dm.unipi.it/orario/"
-                style="--card-bg: #75ca75; --masonry-height: 1;"
-                imgSrc="https://lab.phc.dm.unipi.it/orario/icon.png"
-            >
-                <p>
-                    Questo sito permette di visualizzare il proprio orario delle lezioni, con informazioni sui
-                    docenti e le aule.
-                </p>
-            </ProjectCard>
-            <ProjectCard
-                title="Problemi"
-                href="https://lab.phc.dm.unipi.it/problemi/"
-                style="--card-bg: #aa88c0; --masonry-height: 2;"
-                imgSrc="https://lab.phc.dm.unipi.it/problemi/favicon/android-chrome-512x512.png"
-            >
-                <p>Bacheca di problemi di Matematica da risolvere, inviandone le soluzioni in LaTeX.</p>
-                <p>Di sera, puoi leggere i problemi sullo schermo del Dipartimento in atrio.</p>
-            </ProjectCard>
-            <ProjectCard
-                title='Cluster "Steffè"'
-                href="http://steffe.cs.dm.unipi.it/"
-                style="--masonry-height: 2;"
-                imgSrc="https://steffe.lb.cs.dm.unipi.it/assets/img/logo.png"
-            >
-                <p>
-                    Cluster progettato ed assemblato durante il progetto speciale per la didattica "Calcolo
-                    Parallelo dall'Infrastruttura alla Matematica".
-                </p>
-            </ProjectCard>
-            <ProjectCard
-                title="Seminarietti"
-                href="https://seminarietti.phc.dm.unipi.it/"
-                style="--card-bg: #bd9fec; --masonry-height: 2;"
-                imgSrc="https://seminarietti.phc.dm.unipi.it/favicon.png"
-            >
-                <p>Varie conferenze del PHC su argomenti di informatica, matematica e tecnologia.</p>
-            </ProjectCard>
-            <ProjectCard
-                title="Tutorato"
-                href="https://tutorato.phc.dm.unipi.it/"
-                style="--card-bg: #c55; --masonry-height: 2;"
-                imgSrc="https://tutorato.phc.dm.unipi.it/favicon.svg"
-            >
-                <p>
-                    Un sito con tutte le informazioni sui tutorati di Matematica, con tanto di archivio degli
-                    anni passati.
-                </p>
-            </ProjectCard>
-        </div>
-    </section>
-    <section class="wanna-be-macchinista">
-        <HomepageZigZag color="#888" />
-
-        <div class="title"></div>
-
-        <Card large style="--card-base: #ddd;">
-            <div class="title" title="recentemente, anche il caffè">E cosa si fa in PHC?</div>
-            <div class="text">
-                <p>Nessuno lo sa di preciso, ma facciamo molte cose:</p>
-                <ul>
-                    <li>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>
-                        organizzazione di seminari 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.
-                </p>
-            </div>
-        </Card>
-        <div class="gallery-collage">
-            {
-                galleryCollage.map((module, i) => {
-                    const src = module.default.src
-                    const filename = src.split('/').at(-1).split('?').at(0).split('.').at(0)
-
-                    const [rows, cols] = filename.includes('@')
-                        ? filename
-                              .split('@')
-                              .at(-1)
-                              .split('x')
-                              .map((s: string) => parseInt(s))
-                        : [1, 1]
-
-                    return (
-                        <Card style={`--rows: ${rows}; --cols: ${cols};`}>
-                            <Image src={module.default} alt={`gallery image ${i}`} />
-                        </Card>
-                    )
-                })
-            }
-        </div>
-
-        <Card large style="--card-base: #ddd;">
-            <div class="title">Vuoi diventare macchinista?</div>
-            <div class="text">
-                <p>
-                    <strong>Macchinista non si nasce, si diventa:</strong> se sei uno studente di Matematica e
-                    vuoi diventare un macchinista, vienici a trovare!
-                </p>
-                <p>
-                    L'unico prerequisito è la voglia di imparare! Di solito, c'è un periodo di "apprendistato"
-                    nel quale si apprendono le basi; una volta superato potrai diventare un macchinista a
-                    tutti gli effetti.
-                </p>
-            </div>
-        </Card>
-    </section>
-</PageLayout>
--- a/src/pages/login.astro
+++ b/src/pages/login.astro
@ -1,22 +0,0 @@
---
-import PageLayout from '../layouts/PageLayout.astro'
---
-
-<PageLayout title="Login | PHC" pageTags="login">
-    <h1>Login</h1>
-
-    <!-- form with username and password, and a button for oauth login -->
-    <form action="/login" method="post">
-        <h3 class="center">Accedi con Poisson</h3>
-        <input type="text" id="username" placeholder="Username" name="username" required />
-        <input type="password" id="password" placeholder="Password" name="password" required />
-
-        <button class="primary center" type="submit">Login</button>
-
-        <hr />
-
-        <h3 class="center">Accedi con Ateneo</h3>
-        <a href="/auth/ateneo" class="primary center" role="button">Login</a>
-    </form>
-    <!-- <span class="material-symbols-outlined">person</span> -->
-</PageLayout>
--- a/src/pages/meta/design.astro
+++ b/src/pages/meta/design.astro
@ -1,34 +0,0 @@
---
-import BaseLayout from '../../layouts/BaseLayout.astro'
-
-import Header from '../../components/Header.astro'
-import Footer from '../../components/Footer.astro'
-
-import CodeBlockPreview from '../../components/meta/CodeBlockPreview.astro'
-
-import { Content, getHeadings } from '../../content/meta/design.mdx'
-
-const headings = getHeadings()
---
-
-<BaseLayout {...Astro.props} pageTags="design">
-    <Header />
-    <aside>
-        <nav>
-            <h3>Indice</h3>
-            <ul>
-                {
-                    headings.map(heading => (
-                        <li style={{ '--depth': heading.depth }}>
-                            <a href={`#${heading.slug}`}>{heading.text}</a>
-                        </li>
-                    ))
-                }
-            </ul>
-        </nav>
-    </aside>
-    <main class="text">
-        <Content components={{ pre: CodeBlockPreview }} />
-    </main>
-    <Footer />
-</BaseLayout>
--- a/src/pages/notizie/[id].astro
+++ b/src/pages/notizie/[id].astro
@ -1,20 +0,0 @@
---
-import { getCollection } from 'astro:content'
-
-import ArticleLayout from '../../layouts/ArticleLayout.astro'
-
-export async function getStaticPaths() {
-    const guides = await getCollection('news')
-    return guides.map(entry => ({
-        params: { id: entry.slug },
-        props: { entry },
-    }))
-}
-
-const { entry } = Astro.props
-const { Content } = await entry.render()
---
-
-<ArticleLayout {...entry.data} title={entry.data.title + ' | Notizie | PHC'} pageTags={['notizia']}>
-    <Content />
-</ArticleLayout>
--- a/src/pages/notizie/index.astro
+++ b/src/pages/notizie/index.astro
@ -1,30 +0,0 @@
---
-import { getCollection } from 'astro:content'
-
-import PageLayout from '@layouts/PageLayout.astro'
-
-const news = await getCollection('news')
---
-
-<PageLayout title="Notizie | PHC" pageTags="notizie">
-    <h1><a href="/notizie">Notizie</a></h1>
-    <div class="card-list">
-        {
-            news.map(newsItem => (
-                <div class="card">
-                    <a href={`/notizie/${newsItem.slug}`} class="title">
-                        {newsItem.data.title}
-                    </a>
-                    <div class="text small dimmed">
-                        {new Date(newsItem.data.publishDate).toLocaleDateString('it-IT', {
-                            year: 'numeric',
-                            month: 'long',
-                            day: 'numeric',
-                        })}
-                    </div>
-                    <div class="text">{newsItem.data.description}</div>
-                </div>
-            ))
-        }
-    </div>
-</PageLayout>
--- a/src/pages/storia.astro
+++ b/src/pages/storia.astro
@ -1,140 +0,0 @@
---
-import BaseLayout from '../layouts/BaseLayout.astro'
-
-import Header from '../components/Header.astro'
-import Footer from '../components/Footer.astro'
-import Timeline from '../components/Timeline.astro'
-
-import imgPulizie from '@/assets/gallery/006-pulizie@3x4.jpg'
-import imgCluster from '@/assets/gallery/001-cluster-fra-luca@4x3.jpg'
-import WebSite from '@/assets/gallery/005-website-development@3x4.jpg'
---
-
-<BaseLayout title="Storia | PHC" pageTags={'storia'}>
-    <Header />
-    <main>
-        <div class="card large" style={{ '--card-base': '#ffd3a0' }}>
-            <div class="title">Storia</div>
-            <div class="text">
-                <p>
-                    Il PHC nasce quasi venti anni fa, nel lontano 1999 ed ha perciò una ricca storia. Qui
-                    proveremo ad annoverare la storia del PHC, in una timeline con gli eventi più salienti del
-                    progetto.
-                </p>
-                <img
-                    class="small flat"
-                    src="https://media.tenor.com/MRCIli40TYoAAAAj/under-construction90s-90s.gif"
-                    alt="Work in progress"
-                />
-                <p>
-                    Per delle note storiche un po' più dettagliate, si legga l'ottima pagina sul <a
-                        href="http://betti.dm.unipi.it/servizi/PHC.html">sito del dipartimento</a
-                    >.
-                </p>
-            </div>
-        </div>
-        <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>.
-                </p>
-                <img class="fill" src={WebSite.src} alt="Sviluppo del sito" />
-            </Timeline>
-            <Timeline title="Luca e le grandi pulizie" year="Apr 2024">
-                <p>
-                    Nel 2024, <strong>Luca Lombardo</strong> entra a far parte del PHC. Questo stesso anno vengono
-                    effettuate delle grandi pulizie nella stanza del PHC, come non si faceva dal lontano 2006.
-                </p>
-                <img class="fill" src={imgPulizie.src} alt="pulizie phc" />
-            </Timeline>
-            <Timeline title="Il cluster di Raspberry Pi" year="2023">
-                <p>
-                    Il dipartimento acquista in due fasi diverse 34 (cloni) di Raspberry Pi 4, che vengono
-                    assemblati in un cluster per il progetto "High Performance Mathematics". Il cluster è
-                    stato assemblato, configurato e messo in funzione con la forte collaborazione macchinisti
-                    del PHC, che ancora oggi ne curano la manutenzione.
-                </p>
-                <img class="fill" src={imgCluster.src} alt="cluster di raspberry pi" />
-            </Timeline>
-            <Timeline title="Tanti Francesco" year="2022">
-                <p>
-                    Nel 2022, entrano a far parte del PHC <strong>Francesco Minnocci</strong>, <strong
-                        >Francesco Manicastri</strong
-                    > e <strong>Francesco Baldino</strong>
-                </p>
-            </Timeline>
-            <Timeline title="Nuovi macchinisti" year="2019">
-                <p>
-                    Nel 2019, entrano a far parte del PHC <strong>Antonio De Lucreziis</strong> e <strong
-                        >Illya Serdyuk</strong
-                    >
-                </p>
-            </Timeline>
-            <Timeline title="Nuovi macchinisti" year="2018">
-                <p>
-                    Nel 2018, entrano a far parte del PHC <strong>Francesco Caporali</strong> e <strong
-                        >Letizia D'Achille</strong
-                    >
-                </p>
-            </Timeline>
-            <Timeline title="Rinnovo del sito" year="2004">
-                <p>
-                    Dopo un periodo di inattività del progetto, il sito del PHC viene riscritto in PHP e
-                    trasferito sul dominio <a
-                        href="https://web.archive.org/web/20040823112401/http://poisson.phc.unipi.it/"
-                        >poisson.phc.unipi.it</a
-                    >, il cui design è caratterizzato da un <a
-                        href="https://web.archive.org/web/20060609003904im_/http://poisson.phc.unipi.it/logo_studenti.orig.png"
-                        >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"
-                    alt="Logo"
-                />
-            </Timeline>
-            <Timeline title="Seminari del PHC" year="2000">
-                <p>
-                    Nel primo semestre del 2000, vengono tenuti diversi <a
-                        href="https://web.archive.org/web/20010430151939/http://www.phc.unipi.it/seminari2000/"
-                        >seminari</a
-                    > su temi quali: installazione di programmi e sistemi operativi (come Linux), sicurezza informatica,
-                    esperimenti con matematica e musica e creazione di pagine web.
-                </p>
-            </Timeline>
-            <Timeline title="Rete del PHC e DNS" year="1999">
-                <p>
-                    Nel maggio del 1999 viene attivata la rete 131.114.10.0, con tanto di nameserver sul
-                    dominio <a href="https://web.archive.org/web/20010410215451/http://www.phc.unipi.it/"
-                        >phc.unipi.it</a
-                    >.
-                </p>
-            </Timeline>
-            <Timeline title="Fondazione del PHC" year="1999">
-                <p>
-                    In seguito alla proposta del prof. <strong>Sergio Steffè</strong>, in data 26 febbraio
-                    1999 il Dipartimento di Matematica approva una delibera per stanziare la stanza 106 ed
-                    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>
-            </Timeline>
-            <Timeline title="Apertura di Poisson" year="~1994">
-                <p>
-                    Nell'attuale Aula 4, allora semplice Aula studenti, nasce il sito web <strong
-                        >poisson.dm.unipi.it</strong
-                    >
-                    su dei computer messi a disposizione agli studenti da Vinicio Villani. Una versione del 1996
-                    di tale sito si trova nel <a
-                        href="https://web.archive.org/web/19971017065805/http://poisson.dm.unipi.it/"
-                        >Web Archive</a
-                    >
-                </p>
-            </Timeline>
-        </div>
-    </main>
-    <Footer />
-</BaseLayout>
--- a/src/pages/utenti.astro
+++ b/src/pages/utenti.astro
@ -1,10 +0,0 @@
---
-import PageLayout from '../layouts/PageLayout.astro'
-
-import { UtentiPage } from '../client/UtentiPage.tsx'
---
-
-<PageLayout title="Utenti | PHC" pageTags="utenti">
-    <h1>Utenti</h1>
-    <UtentiPage client:load />
-</PageLayout>
--- a/src/styles/components.scss
+++ b/src/styles/components.scss
@ -1,821 +0,0 @@
-// $news-bg: #fffbeb;
-// $news-accent-bg: #f8e8b1;
-
-@import './mixins.scss';
-
-@layer component {
-    //
-    // Components - for complex parts of the UI like search bars or compound buttons
-    //
-
-    .material-symbols-outlined {
-        font-family: 'Material Symbols Outlined Variable';
-        font-weight: normal;
-        font-style: normal;
-        line-height: 1;
-        text-transform: none;
-        letter-spacing: normal;
-        word-wrap: normal;
-        white-space: nowrap;
-        direction: ltr;
-
-        display: inline-grid;
-        place-content: center;
-
-        font-size: 24px;
-        font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
-
-        max-width: 32px;
-    }
-
-    .title {
-        font-family: 'Iosevka', monospace;
-        font-weight: 700;
-        font-size: 28px;
-    }
-
-    .search {
-        width: 100%;
-        height: 2.5rem;
-
-        @include neo-brutalist-card;
-
-        display: grid;
-        grid-template-columns: 1fr auto;
-        align-items: center;
-
-        cursor: pointer;
-
-        background: #fff;
-
-        &:hover,
-        &:hover input[type='text'] {
-            background: #f8f8f8;
-        }
-
-        input[type='text'] {
-            border: none;
-            box-shadow: none;
-            outline: none;
-            height: 100%;
-
-            padding: 0;
-            padding-left: 0.35rem;
-        }
-
-        .material-symbols-outlined {
-            padding: 0 0.5rem;
-        }
-    }
-
-    .flex-column {
-        display: flex;
-        flex-direction: column;
-        gap: 1rem;
-    }
-
-    .flex-row {
-        display: flex;
-        flex-direction: row;
-        gap: 1rem;
-    }
-
-    // just to know for reference
-    .fake-masonry {
-        display: grid;
-        grid-template-columns: repeat(var(--columns), 1fr);
-        grid-auto-flow: dense;
-
-        & > * {
-            grid-row: span var(--masonry-height);
-        }
-    }
-
-    .search-results {
-        width: 100%;
-
-        display: flex;
-        flex-direction: column;
-        gap: 1rem;
-
-        .search-result {
-            width: 100%;
-
-            display: grid;
-            grid-template-columns: auto auto 1fr auto;
-            grid-template-areas: 'icon text . right';
-
-            align-items: center;
-
-            gap: 0.5rem;
-
-            padding: 0.5rem;
-
-            background: #fff;
-
-            @include neo-brutalist-card;
-
-            a {
-                display: contents;
-            }
-
-            & > .icon {
-                grid-area: icon;
-                display: grid;
-            }
-
-            & > .text {
-                grid-area: text;
-                display: grid;
-            }
-
-            & > .right {
-                grid-area: right;
-                display: grid;
-            }
-        }
-    }
-
-    .appunti-scrollable {
-        display: flex;
-        overflow-x: auto;
-
-        .appunti-list {
-            padding: 2px;
-            padding-bottom: 1rem;
-        }
-    }
-
-    .appunti-list {
-        display: grid;
-        grid-auto-flow: column;
-
-        gap: 3rem;
-
-        overflow-x: auto;
-
-        max-width: 100%;
-    }
-
-    .appunti-item {
-        display: flex;
-        flex-direction: column;
-        gap: 0.25rem;
-
-        color: #444;
-
-        & > .thumbnail {
-            width: 10rem;
-            aspect-ratio: 10 / 14;
-            background: #d0d0d0;
-
-            @include neo-brutalist-card($hoverable: true);
-        }
-
-        & > .thumbnail + * {
-            font-weight: 700;
-            padding-top: 0.25rem;
-        }
-
-        & > .title,
-        & > .course,
-        & > .author,
-        & > .course-year {
-            padding-left: 0.5rem;
-            font-size: 16px;
-        }
-    }
-
-    .article-list {
-        display: grid;
-        grid-auto-flow: row;
-
-        max-width: 100%;
-
-        gap: 2rem;
-        grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
-        grid-auto-rows: auto;
-
-        .article {
-            display: grid;
-            grid-template-rows: auto auto auto;
-
-            background: var(--card-bg, var(--project-card-bg));
-            color: #000e;
-
-            @include neo-brutalist-card($size: 3px, $offset: 9px);
-
-            row-gap: 0.5rem;
-            padding: 1rem;
-
-            .description {
-                font-size: 16px;
-            }
-
-            .tags {
-                display: flex;
-                gap: 0.5rem;
-                flex-wrap: wrap;
-                font-size: 14px;
-                font-weight: 600;
-                color: #555;
-            }
-        }
-    }
-
-    .news-list {
-        display: grid;
-        grid-auto-flow: column;
-
-        // .news-item {
-        //     background: $news-bg;
-        //     color: #111;
-
-        //     @include neo-brutalist-card($size: 3px, $offset: 9px);
-
-        //     display: flex;
-        //     flex-direction: column;
-
-        //     width: 22rem;
-        //     max-height: 27rem;
-
-        //     overflow: hidden;
-
-        //     ::-webkit-scrollbar {
-        //         width: 10px;
-        //     }
-
-        //     ::-webkit-scrollbar-thumb {
-        //         background-color: #c67e14;
-        //         border: 2px solid #222;
-
-        //         &:hover {
-        //             background-color: #e69419;
-        //         }
-        //     }
-
-        //     a {
-        //         font-weight: 600;
-        //         text-decoration: none;
-        //         color: #c67e14;
-
-        //         &:hover {
-        //             text-decoration: underline solid 2px;
-        //         }
-        //     }
-
-        //     & > .title {
-        //         padding: 1rem;
-        //         background: $news-accent-bg;
-        //         line-height: 1;
-        //         font-size: 26px;
-        //     }
-
-        //     a.title {
-        //         color: #83530c;
-        //     }
-
-        //     & > .abstract {
-        //         flex-grow: 1;
-
-        //         padding: 1rem;
-
-        //         overflow-y: auto;
-
-        //         @extend .text;
-        //     }
-
-        //     & > .content {
-        //         display: flex;
-        //         padding: 1rem;
-        //         flex-direction: column;
-        //         gap: 0.5rem;
-
-        //         background: #fff8da;
-
-        //         & > .continue {
-        //             padding: 1rem;
-
-        //             display: grid;
-        //             align-items: end;
-        //             justify-content: end;
-        //         }
-
-        //         & > .description {
-        //             font-size: 16px;
-        //             line-height: 1.5;
-
-        //             flex-grow: 1;
-        //         }
-
-        //         & > .tags {
-        //             display: flex;
-        //             gap: 0.5rem;
-        //             flex-wrap: wrap;
-        //             font-size: 14px;
-        //             color: #555;
-        //         }
-
-        //         & > .date {
-        //             font-size: 14px;
-        //             font-style: italic;
-        //             font-weight: 600;
-        //             color: #0008;
-        //         }
-
-        //         & > .author {
-        //             font-weight: 600;
-        //             font-size: 15px;
-        //             color: #555;
-        //         }
-        //     }
-        // }
-    }
-
-    .timeline {
-        display: grid;
-
-        --timeline-track-size: 6rem;
-        --timeline-thickness: 6px;
-        --timeline-color: #333;
-
-        max-width: 120ch;
-        grid-template-columns: 1fr var(--timeline-track-size) 1fr;
-
-        @media screen and (max-width: $screen-desktop-min) {
-            --timeline-track-size: 3rem;
-            grid-template-columns: var(--timeline-track-size) 1fr;
-        }
-
-        & > .timeline-item {
-            position: relative;
-            display: grid;
-
-            & > .content {
-                display: grid;
-                grid-template-columns: auto;
-                padding: 2rem 1rem;
-
-                @media screen and (max-width: $screen-desktop-min) {
-                    padding: 1rem 1rem 1rem 0;
-                }
-
-                & > .title {
-                    font-size: 20px;
-                    font-weight: 700;
-                }
-
-                & > .date {
-                    font-size: 32px;
-                    font-weight: 400;
-                    color: #555;
-                }
-            }
-
-            // timeline vertical line
-            &::before {
-                content: '';
-
-                position: absolute;
-                top: 0;
-                bottom: 0;
-                left: 50%;
-                transform: translateX(-50%);
-                width: var(--timeline-thickness);
-
-                background: var(--timeline-color);
-            }
-
-            &:first-child::before {
-                top: 50%;
-            }
-
-            &:last-child::before {
-                bottom: 50%;
-            }
-
-            // timeline circle
-            &::after {
-                content: '';
-
-                position: absolute;
-                top: 50%;
-                left: 50%;
-                transform: translate(-50%, -50%);
-                width: 1rem;
-                height: 1rem;
-                border-radius: 50%;
-
-                background: var(--timeline-color);
-            }
-
-            &::before,
-            &::after {
-                grid-column: 1 / span 1;
-            }
-
-            @media screen and (min-width: $screen-desktop-min) {
-                &:nth-child(odd)::before {
-                    grid-column: 2 / span 1;
-                }
-
-                &:nth-child(even)::before {
-                    grid-column: 1 / span 1;
-                }
-
-                &:nth-child(odd)::after {
-                    grid-column: 2 / span 1;
-                }
-
-                &:nth-child(even)::after {
-                    grid-column: 1 / span 1;
-                }
-            }
-
-            .dropdown {
-                @include neo-brutalist-card;
-
-                max-width: 15rem;
-                position: absolute;
-                bottom: calc(-10rem - 1px);
-                left: 50%;
-                transform: translateX(calc(-50% - var(--timeline-track-size) / 2));
-                border-top: none;
-                border-radius: 0 0 0.5rem 0.5rem;
-
-                @media screen and (max-width: $screen-desktop-min) {
-                    @include neo-brutalist-card;
-
-                    position: static;
-                    transform: none;
-                    margin-left: auto;
-                    margin-right: auto;
-                }
-            }
-            @media screen and (min-width: $screen-desktop-min) {
-                &:nth-child(odd) {
-                    grid-column: 1 / span 2;
-                    grid-template-columns: 1fr var(--timeline-track-size);
-
-                    & > .content {
-                        grid-column: 1;
-                    }
-
-                    .dropdown {
-                        left: auto;
-                        right: 50%;
-                        transform: translateX(calc(50% - var(--timeline-track-size) / 2));
-                    }
-                }
-
-                &:nth-child(even) {
-                    grid-column: 2 / span 2;
-                    grid-template-columns: var(--timeline-track-size) 1fr;
-
-                    & > .content {
-                        grid-column: 2;
-                    }
-
-                    .dropdown {
-                        left: 50%;
-                        transform: translateX(calc(-50% + var(--timeline-track-size) / 2));
-                    }
-                }
-            }
-
-            @media screen and (max-width: $screen-desktop-min) {
-                grid-column: 1 / span 2;
-
-                grid-template-columns: var(--timeline-track-size) 1fr;
-
-                & > .content {
-                    grid-column: 2;
-                }
-            }
-        }
-    }
-
-    //
-    // Cards
-    //
-
-    .card {
-        display: grid;
-
-        --card-base-internal: var(--card-base, #f8f8f8);
-
-        background: var(--card-base-internal);
-        color: color-mix(in srgb, var(--card-base-internal), #000 80%);
-
-        @include neo-brutalist-card($size: 3px, $offset: 9px);
-
-        row-gap: 0.5rem;
-        padding: 1rem;
-
-        // Variants
-
-        &.large {
-            padding: 2rem;
-
-            @include neo-brutalist-card($size: 4px, $offset: 8px);
-
-            row-gap: 1rem;
-
-            & > .title {
-                font-size: 36px;
-                font-weight: 700;
-            }
-
-            & > .text {
-                font-size: 18px;
-            }
-        }
-
-        // Child Items
-
-        & > .title {
-            color: color-mix(in srgb, var(--card-base-internal), #000 75%);
-            font-size: 26px;
-            font-weight: 700;
-        }
-
-        & > .text {
-            font-size: 16px;
-
-            &.small {
-                color: color-mix(in srgb, var(--card-base-internal), #000 75%);
-                font-size: 14px;
-                font-weight: 600;
-            }
-
-            &.dimmed {
-                color: color-mix(in srgb, var(--card-base-internal), #000 50%);
-            }
-        }
-
-        & > .tags {
-            display: flex;
-            gap: 0.5rem;
-            flex-wrap: wrap;
-            font-size: 14px;
-            font-weight: 600;
-            color: #555;
-
-            a {
-                color: color-mix(in srgb, var(--card-base-internal), #000 60%);
-                font-weight: 600;
-
-                &:hover {
-                    text-decoration: underline solid 2px;
-                }
-            }
-        }
-
-        a:hover {
-            text-decoration: underline solid 2px;
-        }
-
-        a.title {
-            &:hover {
-                text-decoration: underline solid 3px;
-            }
-        }
-
-        @media screen and (max-width: $screen-desktop-min) {
-            padding: 0.9rem;
-
-            &.large {
-                padding: 1.25rem;
-
-                & > .title {
-                    font-size: 32px;
-                }
-
-                & > .text {
-                    font-size: 16px;
-                }
-            }
-        }
-    }
-
-    //
-    // Card List
-    //
-
-    .card-list {
-        display: grid;
-        grid-auto-flow: row;
-
-        width: 100%;
-        max-width: 100%;
-
-        gap: 2rem;
-        grid-template-columns: repeat(auto-fit, minmax(25rem, auto));
-        grid-auto-rows: auto;
-
-        justify-content: center;
-
-        & > .card {
-            max-width: 25rem;
-        }
-
-        @media screen and (max-width: $screen-desktop-min) {
-            grid-template-columns: 1fr;
-        }
-    }
-
-    .show-more {
-        place-self: center;
-    }
-
-    .search-bar {
-        display: grid;
-        grid-template-columns: auto 1fr;
-
-        width: 100%;
-
-        gap: 1rem;
-
-        @media screen and (max-width: $screen-desktop-min) {
-            grid-template-columns: 1fr;
-
-            & > .search {
-                grid-row: 1;
-            }
-        }
-    }
-
-    /* .filter-select {
-        width: 100%;
-        height: 2.5rem;
-
-        @include neo-brutalist-card;
-
-        display: grid;
-        align-items: center;
-        grid-auto-flow: column;
-
-        cursor: pointer;
-
-        --filter-bg-color-hover: color-mix(in srgb, var(--filter-bg-color, #ddd), #000 10%);
-
-        background: var(--filter-bg-color, #ddd);
-
-        &:hover,
-        &:hover select {
-            background: var(--filter-bg-color-hover);
-        }
-
-        .material-symbols-outlined {
-            padding: 0 0.35rem;
-        }
-
-        select {
-            border: none;
-            box-shadow: none;
-            outline: none;
-            height: 100%;
-            appearance: none;
-
-            cursor: pointer;
-
-            padding: 0;
-
-            background: var(--filter-bg-color, #ddd);
-        }
-    } */
-
-    .combobox {
-        width: 100%;
-        height: 2.5rem;
-        position: relative;
-        padding: 0 0.25rem 0 0.25rem;
-
-        @include neo-brutalist-card;
-
-        cursor: pointer;
-
-        --filter-bg-color-hover: color-mix(in srgb, var(--filter-bg-color, #ddd), #000 10%);
-
-        background: var(--filter-bg-color, #ddd);
-
-        .material-symbols-outlined {
-            padding: 0 0.35rem;
-        }
-
-        .selected {
-            height: 100%;
-            gap: 0.25rem;
-            display: grid;
-            grid-auto-flow: column;
-            grid-template-columns: 1fr auto;
-            align-items: center;
-
-            .content {
-                display: grid;
-                grid-auto-flow: column;
-                align-items: center;
-                justify-content: start;
-            }
-        }
-
-        .dropdown {
-            position: absolute;
-            z-index: 10;
-            top: calc(100% + 8px);
-            left: -3px;
-
-            @include neo-brutalist-card;
-
-            background: #fff;
-
-            .option {
-                height: 2rem;
-                padding: 0 0.5rem 0 0.25rem;
-                display: grid;
-                grid-auto-flow: column;
-                align-items: center;
-                justify-content: start;
-                &:hover {
-                    background: #ddd;
-                }
-            }
-        }
-
-        @media screen and (max-width: $screen-desktop-min) {
-            .dropdown {
-                left: 3px;
-                right: 3px;
-
-                top: calc(100% + 9px);
-            }
-        }
-    }
-
-    .gallery-collage {
-        // display: flex;
-        // flex-wrap: wrap;
-
-        // width: 64rem;
-
-        width: 100%;
-        max-width: 100%;
-
-        --cell-size: 6rem;
-
-        display: grid;
-        grid-template-columns: repeat(auto-fit, calc(var(--cell-size)));
-        grid-auto-rows: calc(var(--cell-size));
-
-        grid-auto-flow: dense;
-        gap: 1rem;
-
-        place-content: center;
-        // align-items: center;
-
-        @media screen and (max-width: $screen-desktop-min) {
-            grid-template-columns: auto;
-            grid-template-rows: auto;
-            grid-auto-rows: auto;
-        }
-
-        & > .card {
-            padding: 3px;
-
-            overflow: hidden;
-
-            width: 100%;
-            height: 100%;
-
-            grid-column: span var(--cols, 1);
-            grid-row: span var(--rows, 1);
-
-            @media screen and (max-width: $screen-desktop-min) {
-                max-width: 100%;
-
-                grid-column: span 1;
-                grid-row: span 1;
-            }
-
-            img {
-                display: grid;
-
-                width: 100%;
-                height: 100%;
-
-                overflow: hidden;
-
-                border-radius: 3px;
-
-                object-fit: cover;
-
-                @media screen and (max-width: $screen-desktop-min) {
-                    max-height: none;
-
-                    width: 25rem;
-                    max-width: 100%;
-                }
-            }
-        }
-    }
-}
--- a/src/styles/controls.scss
+++ b/src/styles/controls.scss
@ -1,132 +0,0 @@
-@import './mixins.scss';
-
-//
-// Controls - for things like buttons, input, select
-//
-
-@layer common {
-    button,
-    .button,
-    [role='button'] {
-        appearance: none;
-
-        background: #fff;
-
-        @include neo-brutalist-card;
-
-        transition: all 64ms linear;
-
-        display: grid;
-        place-content: center;
-
-        &:hover {
-            transform: translate(-1px, -1px);
-            box-shadow: 5px 5px 0 0 #222;
-        }
-
-        &:active {
-            transform: translate(2px, 2px);
-            box-shadow: 2px 2px 0 0 #222;
-        }
-
-        & {
-            padding: 0.25rem 1.5rem;
-
-            text-decoration: none;
-            color: #222;
-
-            font-family: 'Source Sans Pro', sans-serif;
-            font-weight: 600;
-
-            cursor: pointer;
-        }
-
-        &.primary {
-            background: #1e6733;
-            color: #f4fef7;
-
-            &:hover {
-                background: #2b8b47;
-            }
-        }
-
-        &.icon {
-            padding: 0.25rem;
-            margin-right: 0.25rem;
-            margin-bottom: 0.25rem;
-        }
-
-        &.flat {
-            background: transparent;
-            color: #222;
-
-            border: none;
-            box-shadow: none;
-
-            &:hover {
-                background: #0002;
-            }
-        }
-    }
-
-    input[type='text'],
-    input[type='password'] {
-        width: 100%;
-        height: 2.5rem;
-
-        @include neo-brutalist-card;
-
-        padding: 0 0.25rem;
-
-        &:hover {
-            background: #fdfdfd;
-        }
-    }
-
-    form {
-        display: grid;
-        gap: 1rem;
-        padding: 2rem;
-
-        background: #38adc1;
-
-        min-width: 40ch;
-
-        @include neo-brutalist-card($size: 3px, $offset: 9px);
-
-        button,
-        .button,
-        [role='button'] {
-            padding-left: 3rem;
-            padding-right: 3rem;
-
-            &.primary {
-                background: #1c7f90;
-                color: #f4fef7;
-
-                &:hover {
-                    background: #4ea2b1;
-                }
-            }
-        }
-
-        hr {
-            border: none;
-            width: 100%;
-            height: 2px;
-            background: #0003;
-
-            margin-top: 1rem;
-        }
-
-        .right {
-            justify-self: end;
-        }
-        .left {
-            justify-self: start;
-        }
-        .center {
-            justify-self: center;
-        }
-    }
-}
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@ -1,304 +0,0 @@
-$screen-desktop-min: 1024px;
-
-:root {
-    --palette-black: #222;
-    --border-large: 4px solid var(--palette-black);
-
-    --header-bg: #fff;
-
-    --footer-bg: #444;
-    --footer-fg: #fdfdfd;
-
-    --homepage-principal-bg: #ecffe3;
-    --homepage-whatsphc-bg: #e4c5ff;
-    --homepage-news-bg: #c2a8eb;
-    --homepage-projects-bg: #f5f2cc;
-    --homepage-macchinisti-bg: #888;
-
-    --project-card-bg: #a2d4f3;
-}
-
-@layer common, typography, component, page;
-
-@import './mixins.scss';
-@import './typography.scss';
-
-@layer common {
-    *,
-    *::before,
-    *::after {
-        box-sizing: border-box;
-        font: inherit;
-        margin: 0;
-    }
-
-    html {
-        height: 100%;
-    }
-
-    html,
-    body {
-        min-height: 100%;
-        margin: 0;
-
-        font-family: 'Open Sans', sans-serif;
-        font-size: 18px;
-        color: #222;
-    }
-
-    // html {
-    //     scroll-snap-type: y mandatory;
-    //     scroll-padding-top: 4rem;
-    // }
-
-    img {
-        display: block;
-    }
-
-    a {
-        color: inherit;
-        text-decoration: none;
-    }
-}
-
-//
-// Typography
-//
-
-@import './controls.scss';
-@import './components.scss';
-
-//
-// Custom Page Styles
-//
-
-body {
-    // for the header spacing
-    // padding-top: 6rem;
-
-    display: grid;
-    grid-template-rows: auto 1fr auto;
-
-    header {
-        z-index: 10;
-
-        height: 6rem;
-        border-bottom: var(--border-large);
-        background: var(--header-bg);
-
-        grid-column: 1 / -1;
-
-        top: 0;
-        position: sticky;
-        width: 100%;
-
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-
-        .logo {
-            padding-left: 1rem;
-
-            img {
-                height: 3.5rem;
-            }
-        }
-
-        .links {
-            display: flex;
-            align-items: center;
-            gap: 1.5rem;
-
-            padding: 0 1.5rem;
-
-            a {
-                font-family: 'Iosevka', monospace;
-                font-size: 18px;
-                font-weight: 500;
-                letter-spacing: 1px;
-                color: #333;
-            }
-
-            @media screen and (max-width: $screen-desktop-min) {
-                flex-direction: column;
-            }
-        }
-
-        .side-menu {
-            position: fixed;
-
-            // top: 0;
-            // right: 0;
-            // bottom: 0;
-            // left: 3rem;
-
-            top: 5rem;
-            right: 0;
-            bottom: 0;
-            left: 0;
-
-            background: #f0f0f0;
-
-            display: grid;
-            // grid-template-rows: auto 1fr;
-            grid-template-rows: 1fr;
-
-            gap: 1.5rem;
-            padding: 1.5rem;
-
-            justify-content: center;
-
-            // & > :first-child {
-            //     justify-self: end;
-            // }
-
-            .links {
-                display: grid;
-                grid-template-columns: 1fr;
-
-                align-content: start;
-
-                width: calc(100vw - 3rem);
-                max-width: 100%;
-
-                gap: 1.5rem;
-
-                padding: 0;
-            }
-        }
-
-        #header-menu-toggle {
-            display: none;
-
-            &:not(:checked) ~ .side-menu {
-                display: none;
-            }
-        }
-
-        &:has(#header-menu-toggle:checked) #header-menu-toggle-menu {
-            display: none;
-        }
-
-        &:has(#header-menu-toggle:not(:checked)) #header-menu-toggle-close {
-            display: none;
-        }
-
-        @media screen and (max-width: $screen-desktop-min) {
-            height: 5rem;
-            padding: 0 0.5rem;
-
-            .logo {
-                padding-left: 0;
-
-                img {
-                    height: 3rem;
-                }
-            }
-        }
-    }
-
-    main {
-        width: 100%;
-
-        @media screen and (max-width: $screen-desktop-min) {
-            padding: 3rem 1rem;
-            gap: 3rem;
-        }
-    }
-
-    footer {
-        z-index: 10;
-        padding: 1rem 0;
-        --paragraph-margin: 0.5rem;
-        --zone-color: #aaa;
-
-        min-height: 6rem;
-        border-top: var(--border-large);
-        background: var(--footer-bg);
-        color: var(--footer-fg);
-
-        display: grid;
-        place-content: center;
-
-        font-family: 'Source Sans Pro', sans-serif;
-        font-size: 20px;
-
-        scroll-snap-align: end;
-
-        @media screen and (max-width: $screen-desktop-min) {
-            min-height: 5rem;
-            font-size: 18px;
-        }
-    }
-}
-
-@import './pages.scss';
-
-//
-// Misc
-//
-
-::-webkit-scrollbar-track:vertical {
-    background-color: #f0f0f0;
-    border-left: 2px solid #222;
-    border-top: 2px solid #222;
-    border-bottom: 2px solid #222;
-}
-
-::-webkit-scrollbar-track:horizontal {
-    background-color: #f0f0f0;
-    border-top: 2px solid #222;
-    border-left: 2px solid #222;
-    border-right: 2px solid #222;
-}
-
-::-webkit-scrollbar-thumb {
-    background-color: #1e6733;
-    border: 2px solid #222;
-}
-
-::-webkit-scrollbar-thumb:hover {
-    background-color: #2b8b47;
-}
-
-::-webkit-scrollbar-corner {
-    background-color: #f0f0f0;
-    // border-left: 2px solid #222;
-    // border-top: 2px solid #222;
-}
-
-::-webkit-scrollbar {
-    width: 15px;
-}
-
-::selection {
-    background: #0002;
-}
-
-body:has(#header-menu-toggle:checked) {
-    overflow: hidden;
-}
-
-//
-// Utility Classes
-//
-
-.hide {
-    display: none !important;
-}
-
-.invisible {
-    opacity: 0 !important;
-}
-
-@media screen and (min-width: $screen-desktop-min) {
-    .mobile-only {
-        display: none !important;
-    }
-}
-
-@media screen and (max-width: $screen-desktop-min) {
-    .desktop-only {
-        display: none !important;
-    }
-}
--- a/src/styles/mixins.scss
+++ b/src/styles/mixins.scss
@ -1,17 +0,0 @@
-@mixin neo-brutalist-card($size: 3px, $offset: $size + 1, $shadow: true, $hoverable: false) {
-    border: $size solid #222;
-    border-radius: $size * 2;
-
-    @if $shadow {
-        box-shadow: $offset $offset 0 0 #222;
-    }
-
-    @if $hoverable {
-        transition: all 64ms linear;
-
-        &:hover {
-            transform: translate(-1px, -1px);
-            box-shadow: $offset + 1 $offset + 1 0 0 #222;
-        }
-    }
-}
--- a/src/styles/pages.scss
+++ b/src/styles/pages.scss
@ -1,829 +0,0 @@
-:root {
-    --guide-base: #a2d4f3;
-
-    --guide-darkest: color-mix(in srgb, var(--guide-base), #000 75%);
-    --guide-darker: color-mix(in srgb, var(--guide-base), #000 50%);
-    --guide-dark: color-mix(in srgb, var(--guide-base), #000 25%);
-
-    --guide-light: color-mix(in srgb, var(--guide-base), #fff 25%);
-    --guide-lighter: color-mix(in srgb, var(--guide-base), #fff 50%);
-    --guide-lightest: color-mix(in srgb, var(--guide-base), #fff 75%);
-
-    --news-base: #f8e8b1;
-}
-
-@layer page {
-    .homepage {
-        header:has(#header-menu-toggle:not(:checked)) .logo {
-            visibility: hidden;
-        }
-
-        section {
-            position: relative;
-
-            width: 100%;
-            min-height: calc(100vh - 6rem);
-
-            &:last-of-type {
-                min-height: calc(100vh - 10rem);
-            }
-
-            // display: flex;
-            // flex-direction: column;
-            // align-items: center;
-            & {
-                display: grid;
-                grid-auto-flow: row;
-                justify-items: center;
-                align-content: start;
-
-                gap: 2rem;
-
-                scroll-snap-align: start;
-            }
-
-            & > .title {
-                font-size: 48px;
-                padding-top: 4rem;
-
-                @media screen and (max-width: $screen-desktop-min) {
-                    padding-top: 2rem;
-                }
-            }
-        }
-
-        .zig-zag {
-            z-index: 5;
-
-            position: absolute;
-            width: 100%;
-
-            display: flex;
-
-            &:first-child {
-                bottom: 100%;
-            }
-        }
-
-        section.principal {
-            z-index: 2;
-
-            min-height: calc(100vh - 7rem);
-
-            display: flex;
-            flex-direction: row;
-            flex-wrap: wrap;
-
-            align-items: center;
-            place-content: center;
-
-            gap: 4rem;
-
-            padding: 3rem 2rem 6rem;
-
-            background: var(--homepage-principal-bg);
-
-            position: relative;
-
-            .circuit-layer {
-                pointer-events: none;
-
-                z-index: 1;
-                position: absolute;
-                left: 0;
-                top: 0;
-                width: 100%;
-                height: 100%;
-
-                canvas {
-                    width: 100%;
-                    height: 100%;
-                }
-            }
-
-            & > .logo {
-                z-index: 2;
-
-                width: 32rem;
-
-                position: relative;
-
-                user-select: none;
-
-                img {
-                    width: 100%;
-                    // filter: drop-shadow(6px 6px 0 var(--palette-black))
-                    //     drop-shadow(4px 0 0 var(--palette-black)) drop-shadow(0 4px 0 var(--palette-black))
-                    //     drop-shadow(-4px 0 0 var(--palette-black)) drop-shadow(0 -4px 0 var(--palette-black));
-                }
-
-                max-width: calc(100vw - 3rem);
-                @media screen and (max-width: $screen-desktop-min) {
-                }
-            }
-
-            & > .whats-phc {
-                z-index: 2;
-                background: #e4c5ff;
-
-                --zone-color: color-mix(in lab, #e4c5ff, #000 75%);
-
-                max-width: 37rem;
-
-                .title {
-                    text-align: center;
-                }
-
-                a {
-                    text-decoration: underline 2px solid;
-
-                    &:hover {
-                        --zone-color: color-mix(in lab, #e4c5ff, #000 60%);
-                    }
-                }
-            }
-        }
-
-        section.news {
-            --card-base: color-mix(in lab, var(--news-base), #fff 25%);
-            --zone-color: color-mix(in lab, var(--news-base), #000 50%);
-
-            background: var(--homepage-news-bg);
-
-            gap: 3rem;
-
-            padding-bottom: 6rem;
-
-            & > .news-list {
-                display: flex;
-                flex-direction: row;
-                gap: 3rem;
-
-                align-items: flex-start;
-
-                padding: 0 3rem;
-
-                justify-content: center;
-                flex-wrap: wrap;
-            }
-
-            [role='button'] {
-                padding: 0.5rem 2rem;
-
-                &.primary {
-                    background: #ffdd6e;
-                    color: #000d;
-                }
-            }
-        }
-
-        section.projects {
-            background: var(--homepage-projects-bg);
-
-            padding-bottom: 6rem;
-
-            .project-list {
-                // width: calc(20rem * 3 + 1.5rem * 2 + 6rem * 2);
-                // max-width: calc(100vw - 2rem); // HACK: capire come si propagano le width per bene
-
-                max-width: calc(20rem * 3 + 1.5rem * 2 + 1rem * 2);
-
-                display: grid;
-                grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
-                grid-auto-flow: dense;
-
-                gap: 1.5rem;
-                padding: 0 1rem;
-
-                & > * {
-                    grid-row: span var(--masonry-height);
-                }
-
-                .project {
-                    width: 100%;
-                    height: 100%;
-
-                    // background: #fcddff;
-                    // background: #ffa89c;
-                    background: var(--card-bg, var(--project-card-bg));
-                    color: #000e;
-
-                    @include neo-brutalist-card($size: 3px, $offset: 9px);
-
-                    padding: 1rem;
-
-                    display: grid;
-                    grid-template-columns: auto 1fr;
-                    grid-template-rows: auto 1fr;
-
-                    gap: 0.25rem 1rem;
-
-                    transition: all 128ms ease-out;
-
-                    .title {
-                        font-size: 32px;
-
-                        @media screen and (max-width: $screen-desktop-min) {
-                            font-size: 24px;
-                        }
-                    }
-
-                    .image {
-                        grid-row: span 2;
-                        // place-self: center;
-
-                        .box {
-                            background: #0003;
-                            border: 3px solid #0006;
-                            border-radius: 6px;
-                            width: 4rem;
-                            height: 4rem;
-                        }
-
-                        img {
-                            object-fit: cover;
-                            width: 4rem;
-                        }
-
-                        // &.auto {
-                        //     img {
-                        //         width: auto;
-                        //         height: auto;
-                        //     }
-                        // }
-                    }
-
-                    .description {
-                        font-size: 16px;
-                        @extend .text;
-                    }
-
-                    &:hover {
-                        transform: translate(0, -4px);
-                        box-shadow: 9px 13px 0 0 #222;
-                    }
-                }
-
-                @media screen and (max-width: $screen-desktop-min) {
-                    padding: 0 1rem;
-
-                    grid-template-columns: 1fr;
-
-                    .project {
-                        padding: 0.8rem;
-                    }
-                }
-            }
-        }
-
-        section.wanna-be-macchinista {
-            background: var(--homepage-macchinisti-bg);
-            color: #fdfdfd;
-
-            padding-bottom: 6rem;
-
-            .card {
-                max-width: 40rem;
-            }
-
-            .content {
-                @extend .text;
-            }
-        }
-
-        @media screen and (max-width: $screen-desktop-min) {
-            & > main {
-                padding: 0 !important;
-            }
-
-            section.principal {
-                padding: 3rem 0 6rem;
-
-                .whats-phc {
-                    padding: 1.5rem;
-
-                    margin: 0 1rem;
-                }
-
-                #mobile-whats-phc-read-more {
-                    &:checked ~ .text {
-                        max-height: 7lh;
-                        overflow: hidden;
-
-                        position: relative;
-
-                        &::after {
-                            content: '';
-                            position: absolute;
-                            bottom: 0;
-                            left: 0;
-                            right: 0;
-                            height: 3lh;
-
-                            background: linear-gradient(to bottom, transparent, #e4c5ff);
-                        }
-                    }
-
-                    &:not(:checked) ~ * .button span:nth-child(1) {
-                        display: none;
-                    }
-                    &:checked ~ * .button span:nth-child(2) {
-                        display: none;
-                    }
-                }
-            }
-
-            section.news {
-                & > .news-list {
-                    padding: 0 1rem;
-                }
-            }
-
-            section.projects {
-                .project-list {
-                    padding: 0 1rem;
-                }
-            }
-
-            section.wanna-be-macchinista {
-                .content {
-                    padding: 0 1rem;
-                }
-            }
-
-            section {
-                padding: 1rem 1rem 4rem;
-            }
-        }
-    }
-
-    .utenti {
-        background: #ffffe4;
-
-        --filter-bg-color: #ffd270;
-
-        main {
-            justify-self: center;
-
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-
-            padding: 5rem 0;
-
-            gap: 5rem;
-
-            max-width: 80ch;
-
-            .search-result {
-                background: #ffeabc;
-            }
-
-            button {
-                background: #ffd270;
-            }
-        }
-    }
-
-    .appunti {
-        main {
-            background: #e8e8e8;
-
-            justify-self: center;
-
-            display: grid;
-            grid-auto-flow: row;
-
-            justify-items: center;
-
-            padding: 3rem;
-
-            gap: 3rem;
-
-            width: 100%;
-
-            position: relative;
-
-            &::after {
-                content: '';
-                width: 100%;
-                height: 80vh;
-
-                background: linear-gradient(to bottom, transparent, #e8e8e8);
-
-                position: absolute;
-                bottom: 0;
-                left: 0;
-            }
-
-            .search {
-                max-width: 80ch;
-            }
-
-            .appunti-scrollable {
-                justify-self: stretch;
-
-                &.center {
-                    justify-self: center;
-                }
-            }
-        }
-    }
-
-    // .login {
-    //     background: #ddfaff;
-
-    //     main {
-    //         justify-self: center;
-
-    //         display: flex;
-    //         flex-direction: column;
-    //         align-items: center;
-
-    //         max-width: 80ch;
-    //         padding: 3rem 0;
-
-    //         gap: 3rem;
-
-    //         h3 {
-    //             font-size: 28px;
-    //             font-weight: 600;
-    //         }
-    //     }
-    // }
-
-    //
-    // Notizie
-    //
-
-    .notizie,
-    .notizia {
-        --card-base: color-mix(in lab, var(--news-base), #fff 25%);
-        --zone-color: color-mix(in lab, var(--news-base), #000 75%);
-        background: color-mix(in lab, var(--news-base), #fff 90%);
-    }
-
-    .notizie {
-        h1 > a {
-            &:hover {
-                text-decoration: underline 3px solid;
-            }
-        }
-
-        main {
-            justify-self: center;
-
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-
-            padding: 5rem;
-            gap: 5rem;
-        }
-    }
-
-    .notizia {
-        main {
-            --card-base: color-mix(in lab, var(--news-base), #fff 25%);
-
-            max-width: calc(46rem + 2rem * 2);
-            justify-self: center;
-            padding: 3rem 2rem 2rem;
-
-            margin-top: 3rem;
-            margin-bottom: 6rem;
-
-            @media screen and (max-width: $screen-desktop-min) {
-                box-shadow: none;
-                border: none;
-                border-radius: 0;
-                max-width: none;
-
-                margin: 0 auto;
-            }
-        }
-    }
-
-    //
-    // Guide
-    //
-
-    .guide,
-    .guida {
-        --card-base: color-mix(in lab, var(--guide-base), #fff 25%);
-        --zone-color: color-mix(in lab, var(--guide-base), #000 75%);
-        background: color-mix(in lab, var(--guide-base), #fff 90%);
-    }
-
-    .guide {
-        h1 > a {
-            &:hover {
-                text-decoration: underline 3px solid;
-            }
-        }
-
-        main {
-            justify-self: center;
-
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-
-            padding: 5rem;
-            gap: 5rem;
-        }
-    }
-
-    .guida {
-        main {
-            --card-base: color-mix(in lab, var(--guide-base), #fff 50%);
-
-            max-width: calc(46rem + 2rem * 2);
-            justify-self: center;
-            padding: 3rem 2rem 2rem;
-
-            margin-top: 3rem;
-            margin-bottom: 6rem;
-
-            position: relative;
-
-            .metadata {
-                position: absolute;
-                top: -2px;
-                left: calc(100% + 2rem);
-                width: 15rem;
-
-                display: grid;
-                grid-auto-flow: row;
-                gap: 1rem;
-
-                justify-items: start;
-
-                .metadata-item {
-                    background: var(--card-base);
-
-                    display: grid;
-                    grid-template-rows: auto auto;
-                    justify-items: start;
-                    gap: 0.25rem;
-
-                    padding: 0.75rem 1rem;
-
-                    @include neo-brutalist-card($size: 3px);
-
-                    .tags {
-                        display: flex;
-                        flex-wrap: wrap;
-                        gap: 0.5rem;
-                    }
-                }
-            }
-
-            @media screen and (max-width: $screen-desktop-min) {
-                box-shadow: none;
-                border: none;
-                border-radius: 0;
-                max-width: none;
-
-                margin: 0 auto;
-
-                .metadata {
-                    position: static;
-                    padding: 0;
-                    width: auto;
-                    margin: 0;
-
-                    --card-base: color-mix(in lab, var(--guide-base), #fff 30%);
-                }
-            }
-        }
-    }
-
-    .tag {
-        main {
-            justify-self: center;
-
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-
-            padding: 5rem 0;
-            gap: 5rem;
-        }
-    }
-
-    .storia {
-        --card-base: #e4c5ff;
-
-        main {
-            justify-self: center;
-
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-
-            padding: 5rem 0;
-            gap: 3rem;
-
-            // background horizontal linear gradient that is black in the center
-            background: linear-gradient(
-                to right,
-                #ffe4c544 0%,
-                // #ffe4c599 25%,
-                #ffe4c5ff 50%,
-                // #ffe4c599 75%,
-                #ffe4c544 100%
-            );
-        }
-    }
-
-    //
-    // Meta
-    //
-
-    .design {
-        grid-template-columns: minmax(15rem, 2fr) 10fr;
-
-        @media screen and (max-width: 1400px) {
-            grid-template-columns: 1fr;
-        }
-
-        aside {
-            margin: 1rem;
-            padding: 1rem;
-
-            @include neo-brutalist-card();
-
-            background: #f0f0f0;
-
-            align-self: start;
-            position: sticky;
-            top: 7rem;
-            height: calc(100dvh - 8rem - 6rem);
-
-            nav {
-                display: flex;
-                flex-direction: column;
-                gap: 0.25rem;
-
-                ul {
-                    list-style: none;
-                    padding: 0;
-                    margin: 0;
-
-                    display: flex;
-                    flex-direction: column;
-                    gap: 0.25rem;
-
-                    li {
-                        padding-left: calc((var(--depth) - 1) * 1rem);
-
-                        display: flex;
-
-                        a {
-                            display: block;
-
-                            font-size: 16px;
-                            font-weight: 600;
-
-                            transform: translate(-0.25rem, 0);
-
-                            padding: 0.125rem 0.25rem;
-                            border-radius: 0.125rem;
-
-                            color: #444;
-
-                            &:hover {
-                                background: #00000018;
-                            }
-                        }
-                    }
-                }
-            }
-
-            @media screen and (max-width: 1400px) {
-                display: none;
-            }
-        }
-
-        footer {
-            grid-column: 1 / -1;
-        }
-
-        main {
-            justify-self: center;
-
-            @media screen and (min-width: $screen-desktop-min) {
-                padding: 3rem 0;
-            }
-        }
-
-        pre[data-language='astro'] {
-            --code-bg: #fff7ef;
-
-            width: 100%;
-            max-width: 46rem;
-        }
-
-        .container {
-            margin: 2rem auto;
-
-            border: 2px dashed #ddd;
-
-            position: relative;
-            z-index: 1;
-
-            &.large {
-                min-width: calc(100% - 4rem);
-            }
-
-            &:not(.large) {
-                & > .content {
-                    display: grid;
-                    place-content: center;
-                }
-            }
-
-            & > .content {
-                padding: 2rem;
-
-                overflow: auto;
-            }
-
-            // label in the top left corner
-            &::before {
-                content: 'Preview';
-                position: absolute;
-
-                bottom: 100%;
-                left: 0;
-
-                padding: 0.125rem 0.5rem;
-
-                background: #eee;
-                color: #000;
-
-                font-family: 'Iosevka', monospace;
-                font-size: 14px;
-
-                border-radius: 0.25rem;
-
-                z-index: -1;
-
-                transform: translate(-2px, -4px);
-
-                opacity: 0;
-                transition: opacity 64ms ease-in;
-            }
-
-            &:hover {
-                border-color: #bbb;
-
-                &::before {
-                    opacity: 1;
-                }
-            }
-        }
-
-        .palette {
-            margin: 2rem auto;
-
-            display: grid;
-            grid-template-columns: auto auto;
-
-            gap: 1rem;
-
-            place-content: center;
-
-            & > .color {
-                width: 2rem;
-                height: 2rem;
-                border-radius: 0.25rem;
-
-                border: 2px solid #000;
-                box-shadow: 4px 4px 0 0 #000;
-
-                overflow: hidden;
-
-                & > .region {
-                    width: 100%;
-                    height: 100%;
-
-                    border: 2px solid #fff;
-
-                    border-radius: 4px;
-                }
-            }
-
-            & > .label {
-                display: grid;
-                align-content: center;
-
-                font-family: 'JetBrains Mono', monospace;
-                font-size: 16px;
-
-                user-select: all;
-            }
-        }
-    }
-}
--- a/Show More
+++ b/Show More