.dockerignore

@@ -1,3 +0,0 @@
-Dockerfile
-node_modules
-.git

.drone.yml

@@ -0,0 +1,54 @@
+# 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
+type: docker
+
+steps:
+  - name: deploy
+    image: node:22-alpine
+    volumes:
+      - name: host-website-dist
+        path: /mnt/website
+    commands:
+      - uname -a
+      - node -v
+      - npm ci
+      - node -e 'import Sharp from "sharp"; console.log(Sharp)'
+      - 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
+name: caddy-permissions
+type: exec # this job is executed on the host machine
+
+depends_on:
+  - default
+
+steps:
+  - name: chown
+    commands:
+      - chown -R caddy:caddy /var/www/website
+
+trigger:
+  branch:
+    - main
+  event:
+    - push

.env.dev

@@ -1,15 +0,0 @@
-# Server config
-MODE=development
-HOST=localhost:8000
-
-# Separate services
-GIT_URL=https://git.phc.dm.unipi.it
-CHAT_URL=https://chat.phc.dm.unipi.it
-
-# Other
-EMAIL=macchinisti@lists.dm.unipi.it
-
-USER_PAGES_BASE_URL=https://poisson.phc.dm.unipi.it/~
-
-# AuthService
-AUTH_SERVICE_HOST=:memory:

.gitignore

@@ -1,19 +1,23 @@
-# Environment files
+# build output
-.env
+dist/
+# generated types
+.astro/
 
-# Miscellaneous
+# dependencies
-tags
+node_modules/
 
-# Local files
+# logs
-*.local*
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
 
-# NodeJS
+# local data
-dist/
+*.local*
-node_modules/
 
-# Don't version generated files
+# environment variables
-public/css/
+.env
-public/js/
+.env.production
 
-# Executables
+# macOS-specific files
-phc-website-server
+.DS_Store

.prettierrc.mjs

@@ -0,0 +1,27 @@
+/** @type {import("prettier").Config} */
+export default {
+    printWidth: 120,
+    singleQuote: true,
+    quoteProps: 'consistent',
+    tabWidth: 4,
+    useTabs: false,
+    semi: false,
+    arrowParens: 'avoid',
+
+    plugins: ['prettier-plugin-astro'],
+    overrides: [
+        {
+            files: '*.astro',
+            options: {
+                parser: 'astro',
+            },
+        },
+        {
+            files: '*.{yml,yaml,json}',
+            excludeFiles: 'package-lock.json',
+            options: {
+                tabWidth: 2,
+            },
+        },
+    ],
+}

.vscode/settings.json

@@ -0,0 +1,11 @@
+{
+  "npm.packageManager": "bun",
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[astro]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[yaml]": {
+    "editor.tabSize": 2,
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
+}

Dockerfile

@@ -1,25 +0,0 @@
-FROM node:18 AS frontend-builder
-WORKDIR /frontend
-COPY ./frontend/package.json ./package.json
-COPY ./frontend/package-lock.json ./package-lock.json
-RUN npm install
-COPY ./frontend .
-RUN make
-
-FROM golang:1.18-alpine AS backend-builder
-WORKDIR /backend
-COPY go.mod go.sum ./
-RUN go mod download -x
-COPY . .
-RUN go build -buildvcs=false -o website-server -v .
-
-FROM alpine:latest AS runner
-WORKDIR /app
-COPY --from=frontend-builder /frontend/dist ./frontend/dist
-COPY --from=backend-builder /backend/website-server ./website-server
-COPY ./views ./views
-COPY ./news ./news
-COPY ./public ./public
-COPY ./.env ./.env
-EXPOSE 8000
-CMD ["./website-server"]

Makefile

@@ -1,37 +0,0 @@
-
-GO_SOURCES = $(shell find . -name '*.go')
-GO_EXECUTABLE = phc-website-server
-
-.PHONY: all
-all: frontend go
-
-# 
-# Build Frontend
-# 
-
-.PHONY: setup
-setup:
-	mkdir -p public/js
-	mkdir -p public/css
-
-.PHONY: frontend
-frontend: setup
-	$(MAKE) -C frontend/
-	cp frontend/dist/*.min.js public/js/
-	cp frontend/dist/*.css public/css/
-
-#
-# Build Server
-#
-
-.PHONY: go
-go: $(GO_EXECUTABLE)
-	@echo "Compiled Server"
-
-$(GO_EXECUTABLE): $(GO_SOURCES)
-	go build -o $(GO_EXECUTABLE) .
-
-.PHONY: debug
-debug:
-	@echo "GO_SOURCES = $(GO_SOURCES)"
-	@echo "GO_EXECUTABLE = $(GO_EXECUTABLE)"

README.md

@@ -1,99 +1,35 @@
-# Nuovo Sito PHC
+# PHC Website
 
-Repo del server del nuovo sito per il PHC.
+Questo è il repository del sito web del PHC. Il sito è costruito utilizzando Astro, un framework statico per la generazione di siti web.
 
-## Dipendenze
+## Installazione
-
--   **Golang**
-
-    -   `github.com/alecthomas/chroma`
-
-    -   `github.com/alecthomas/repr`
-
-    -   `github.com/go-chi/chi/v5`
-
-    -   `github.com/joho/godotenv`
-
-    -   `github.com/litao91/goldmark-mathjax`
-
-    -   `github.com/yuin/goldmark`
-
-    -   `github.com/yuin/goldmark-highlighting`
-
-    -   `gopkg.in/yaml.v3`
-
--   **NodeJS**
-
-    -   AlpineJS
-
-    -   FuseJS
-
-## Setup
-
-Per ottenere il progetto basta fare
 
 ```bash
-$ git clone https://git.phc.dm.unipi.it/phc/website
+bun install
-$ cd frontend/
-frontend/ $ npm install
-frontend/ $ cd ..
-$ make frontend
 ```
 
-## Development
+## Sviluppo
-
-### Setup
 
-Copiare il file `.env.dev` in `.env` per dire al server di lavorare in modalità di development e su quale indirizzo servire il sito, poi avviare il server.
+```bash
-
+bun dev
-```bash shell
-$ cp .env.dev .env
-$ go run .
-```
-
-### Server
-
-Un comando comodo in fase di development che usa [`entr`](https://github.com/eradman/entr) è
-
-```bash shell
-$ find . -type f -name '*.go' | entr -r go run .
-# O anche con fd...
-$ fd -e go | entr -r go run .
 ```
 
-### Frontend
+## Build
-
-Se si sta anche modificando codice dentro `frontend/`, in contemporanea serve anche fare
 
-```bash shell
+```bash
-$ make frontend
+bun run build
-# O anche con un watcher...
-$ fd -e js | entr make frontend
 ```
 
-### Environment Variables
+## Deploy
-
--   `MODE`
-
-    Può essere `production` (default) o `development`.
-
--   `HOST`
-
-    Indirizzo (locale) sul quale servire il sito, di default è `localhost:8000`.
-
--   `MAIL`
-
-    Indirizzo di posta elettronica per contattare gli ammistratori del sito,
-    che compare nel footer di ogni pagina.
 
--   `<SERVIZIO>_URL`
+Per ora c'è un file `.drone.yml` che viene usato per il deploy su un server remoto utilizzando Drone per il CD. Al momento il sito è solo statico e non ha ancora una backend.
 
-    Rappresentano link ad altri servizi forniti, è comodo impostarli per testare tutto in locale su varie porte (e poi in produzione i vari url diventano link a sotto-domini del sito principale).
+## Come Contribuire
 
-    Per ora ci sono `GIT_URL`, `CHAT_URL` e `USER_PAGES_BASE_URL`.
+**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ì.
 
-## Altri Servizi
+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.
 
-Questo servizio dipende dal servizio di autenticazione per permettere agli utenti di autenticarsi usando vari meccanismi.
+### Cose da fare
 
-Il servizio di autenticazione di default girerà su `localhost:3535` ed è documentato [sulla repo auth-service](https://git.phc.dm.unipi.it/phc/auth-service/)
+- Aggiungere guide in [src/content/guides/](./src/content/guides/)

articles/article.go

@@ -1,113 +0,0 @@
-package articles
-
-import (
-	"bytes"
-	"os"
-	"strings"
-	"time"
-
-	"git.phc.dm.unipi.it/phc/website/config"
-	"gopkg.in/yaml.v3"
-)
-
-type Article struct {
-	Id          string
-	Title       string
-	Description string
-	Tags        []string
-	PublishDate time.Time
-
-	ArticlePath    string
-	markdownSource string
-	renderedHTML   string
-}
-
-func (article *Article) HasTag(tag string) bool {
-	for _, t := range article.Tags {
-		if t == tag {
-			return true
-		}
-	}
-
-	return false
-}
-
-func NewArticle(articlePath string) (*Article, error) {
-	article := &Article{
-		ArticlePath: articlePath,
-	}
-
-	err := article.load()
-	if err != nil {
-		return nil, err
-	}
-
-	return article, nil
-}
-
-func trimAll(vs []string) []string {
-	r := []string{}
-	for _, v := range vs {
-		r = append(r, strings.TrimSpace(v))
-	}
-	return r
-}
-
-func (article *Article) load() error {
-	fileBytes, err := os.ReadFile(article.ArticlePath)
-	if err != nil {
-		return err
-	}
-
-	source := string(fileBytes)
-
-	// TODO: Ehm bugia pare che esista "https://github.com/yuin/goldmark-meta" però non penso valga la pena aggiungerlo
-	parts := strings.SplitN(source, "---", 3)[1:]
-
-	frontMatterSource := parts[0]
-	markdownSource := parts[1]
-
-	var frontMatter struct {
-		Id          string `yaml:"id"`
-		Title       string `yaml:"title"`
-		Description string `yaml:"description"`
-		Tags        string `yaml:"tags"`
-		PublishDate string `yaml:"publish_date"`
-	}
-	if err := yaml.Unmarshal([]byte(frontMatterSource), &frontMatter); err != nil {
-		return err
-	}
-
-	publishDate, err := time.Parse("2006/01/02 15:04", frontMatter.PublishDate)
-	if err != nil {
-		return err
-	}
-
-	article.Id = frontMatter.Id
-	article.Title = frontMatter.Title
-	article.Description = frontMatter.Description
-	article.Tags = trimAll(strings.Split(frontMatter.Tags, ","))
-	article.PublishDate = publishDate
-
-	article.markdownSource = markdownSource
-	article.renderedHTML = ""
-
-	return nil
-}
-
-func (article *Article) Render() (string, error) {
-	if config.Mode == "development" {
-		article.load()
-	}
-
-	if article.renderedHTML == "" {
-		var buf bytes.Buffer
-		if err := articleMarkdown.Convert([]byte(article.markdownSource), &buf); err != nil {
-			return "", err
-		}
-
-		article.renderedHTML = buf.String()
-	}
-
-	return article.renderedHTML, nil
-}

articles/articles.go

@@ -1,77 +0,0 @@
-package articles
-
-import (
-	"fmt"
-	"os"
-	"path"
-	"sort"
-)
-
-type Registry struct {
-	RootPath     string
-	ArticleCache map[string]*Article
-}
-
-func NewRegistry(rootPath string) *Registry {
-	return &Registry{
-		rootPath,
-		map[string]*Article{},
-	}
-}
-
-func (registry *Registry) loadArticles() error {
-	entries, err := os.ReadDir(registry.RootPath)
-	if err != nil {
-		return err
-	}
-
-	for _, entry := range entries {
-		if !entry.IsDir() {
-			article, err := NewArticle(path.Join(registry.RootPath, entry.Name()))
-			if err != nil {
-				return err
-			}
-
-			registry.ArticleCache[article.Id] = article
-		}
-	}
-
-	return nil
-}
-
-func (registry *Registry) GetArticle(id string) (*Article, error) {
-	article, present := registry.ArticleCache[id]
-	if !present {
-		err := registry.loadArticles()
-		if err != nil {
-			return nil, err
-		}
-
-		article, present := registry.ArticleCache[id]
-		if !present {
-			return nil, fmt.Errorf(`no article with id "%s"`, id)
-		}
-
-		return article, nil
-	}
-
-	return article, nil
-}
-
-func (registry *Registry) GetArticles() ([]*Article, error) {
-	err := registry.loadArticles()
-	if err != nil {
-		return nil, err
-	}
-
-	articles := []*Article{}
-	for _, article := range registry.ArticleCache {
-		articles = append(articles, article)
-	}
-
-	sort.Slice(articles, func(i, j int) bool {
-		return articles[i].PublishDate.After(articles[j].PublishDate)
-	})
-
-	return articles, nil
-}

articles/markdown.go

@@ -1,60 +0,0 @@
-package articles
-
-import (
-	"fmt"
-
-	"github.com/yuin/goldmark"
-	"github.com/yuin/goldmark/extension"
-	"github.com/yuin/goldmark/parser"
-	"github.com/yuin/goldmark/renderer/html"
-	"github.com/yuin/goldmark/util"
-
-	chromahtml "github.com/alecthomas/chroma/formatters/html"
-	mathjax "github.com/litao91/goldmark-mathjax"
-	highlighting "github.com/yuin/goldmark-highlighting"
-)
-
-var articleMarkdown goldmark.Markdown
-
-// https://github.com/yuin/goldmark-highlighting/blob/9216f9c5aa010c549cc9fc92bb2593ab299f90d4/highlighting_test.go#L27
-func customCodeBlockWrapper(w util.BufWriter, c highlighting.CodeBlockContext, entering bool) {
-	lang, ok := c.Language()
-	if entering {
-		if ok {
-			w.WriteString(fmt.Sprintf(`<pre class="%s"><code>`, lang))
-			return
-		}
-		w.WriteString("<pre><code>")
-	} else {
-		if ok {
-			w.WriteString("</pre></code>")
-			return
-		}
-		w.WriteString("</pre></code>")
-	}
-}
-
-func init() {
-	articleMarkdown = goldmark.New(
-		goldmark.WithExtensions(
-			extension.GFM,
-			extension.Typographer,
-			// Questo pacchetto ha un nome stupido perché in realtà si occupa solo del parsing lato server del Markdown mentre lato client usiamo KaTeX.
-			mathjax.NewMathJax(),
-			highlighting.NewHighlighting(
-				highlighting.WithStyle("github"),
-				highlighting.WithWrapperRenderer(customCodeBlockWrapper),
-				highlighting.WithFormatOptions(
-					chromahtml.PreventSurroundingPre(true),
-				),
-			),
-		),
-		goldmark.WithParserOptions(
-			parser.WithAutoHeadingID(),
-		),
-		goldmark.WithRendererOptions(
-			html.WithHardWraps(),
-			html.WithXHTML(),
-		),
-	)
-}

astro.config.mjs

@@ -0,0 +1,32 @@
+import { defineConfig } from 'astro/config'
+import preact from '@astrojs/preact'
+
+import mdx from '@astrojs/mdx'
+import remarkMath from 'remark-math'
+
+import yaml from '@rollup/plugin-yaml'
+
+// https://astro.build/config
+export default defineConfig({
+    vite: {
+        plugins: [yaml()],
+    },
+    server: {
+        port: 3000,
+    },
+    markdown: {
+        remarkPlugins: [remarkMath],
+        shikiConfig: {
+            theme: 'github-light',
+        },
+    },
+    integrations: [
+        preact({
+            compat: true,
+        }),
+        mdx({
+            remarkPlugins: [remarkMath],
+        }),
+    ],
+    output: 'static',
+})

auth/auth.go

@@ -1,52 +0,0 @@
-package auth
-
-import (
-	"fmt"
-
-	"git.phc.dm.unipi.it/phc/website/model"
-)
-
-// ErrInvalidSession is thrown when an AuthenticatorService is given a missing
-// or invalid session token
-var ErrInvalidSession = fmt.Errorf(`invalid session token`)
-
-// Service is an authentication service abstraction. When a user is logged in a
-// new session token is returned, this can be used to read and modify user
-// properties without having to re-send the user password. (TODO: implement
-// token renewal)
-type Service interface {
-	// GetUser retrieves the user info given the username
-	GetUser(username string) (*model.User, error)
-	// GetUsers retrieves the full user list from the authentication service
-	GetUsers() ([]*model.User, error)
-	// GetSession retrieves the user session associated to a session token
-	GetSession(token string) (*model.Session, error)
-	// Login tries to log in a user given username and password and if successful returns a new user session
-	Login(username, password string) (*model.Session, error)
-}
-
-// UserForSession returns the user linked to the given session token, this is just a shortcut for calling [AuthenticatorService.GetSession] and then [AuthenticatorService.GetUser]
-func UserForSession(as Service, token string) (*model.User, error) {
-	session, err := as.GetSession(token)
-	if err != nil {
-		return nil, err
-	}
-
-	user, err := as.GetUser(session.Username)
-	if err != nil {
-		return nil, err
-	}
-
-	return user, nil
-}
-
-// NewDefaultService create an AuthenticatorService given an "host" string,
-// If host is ":memory:" then this uses the [auth.Memory] implementation,
-// otherwise for now this defaults to [auth.LDAPAuthService]
-func NewDefaultService(host string) Service {
-	if host == ":memory:" {
-		return exampleMemoryUsers
-	}
-
-	return &LDAPAuthService{host}
-}

auth/ldap.go

@@ -1,136 +0,0 @@
-package auth
-
-import (
-	"bytes"
-	"encoding/json"
-	"fmt"
-	"log"
-	"net/http"
-	"path"
-
-	"git.phc.dm.unipi.it/phc/website/model"
-)
-
-// ldapUser represents an LDAP User, most fields are inherited from [auth.User]
-type ldapUser struct {
-	Uid       string `json:"username"`
-	NumericId int    `json:"id"`
-	Name      string `json:"name"`
-	Surname   string `json:"surname"`
-	Email     string `json:"email"`
-	Role      string `json:"role"`
-	Gecos     string `json:"gecos"`
-}
-
-// AsUser converts an [ldapUser] to an instance of [auth.User]
-func (u ldapUser) AsUser() *model.User {
-	return &model.User{
-		Username: u.Uid,
-		Name:     u.Name,
-		Surname:  u.Surname,
-		Email:    u.Email,
-		FullName: u.Gecos,
-	}
-}
-
-// LDAPAuthService just holds the remote host of the HTTP LDAP service to make requests to
-type LDAPAuthService struct {
-	Host string
-}
-
-func NewLDAPAuthService(host string) Service {
-	return &LDAPAuthService{host}
-}
-
-// doGetRequest is a utility to make HTTP GET requests
-func (a *LDAPAuthService) doGetRequest(url string, response interface{}) error {
-	req, err := http.NewRequest(
-		"GET", path.Join(a.Host, "poisson-ldap", url), bytes.NewBuffer([]byte("")),
-	)
-
-	if err != nil {
-		log.Printf(`GET %q resulted in %v`, url, err)
-		return err
-	}
-
-	res, err := http.DefaultClient.Do(req)
-	if err != nil {
-		log.Printf(`GET %q resulted in %v`, url, err)
-		return err
-	}
-
-	if err := json.NewDecoder(res.Body).Decode(response); err != nil {
-		log.Printf(`GET %q resulted in %v`, url, err)
-		return err
-	}
-
-	return nil
-}
-
-// doPostRequest is a utility to make HTTP POST requests
-func (a *LDAPAuthService) doPostRequest(url string, request interface{}, response interface{}) error {
-	jsonStr, err := json.Marshal(request)
-	if err != nil {
-		return err
-	}
-
-	req, err := http.NewRequest("POST", path.Join(a.Host, "ldap", url), bytes.NewBuffer(jsonStr))
-	if err != nil {
-		return err
-	}
-
-	req.Header.Set("Content-Type", "application/json")
-
-	res, err := http.DefaultClient.Do(req)
-	if err != nil {
-		return err
-	}
-
-	return json.NewDecoder(res.Body).Decode(response)
-}
-
-func (a *LDAPAuthService) GetUser(username string) (*model.User, error) {
-	var user ldapUser
-	if err := a.doGetRequest(fmt.Sprintf("/user/%s", username), &user); err != nil {
-		return nil, err
-	}
-
-	return user.AsUser(), nil
-}
-
-func (a *LDAPAuthService) GetUsers() ([]*model.User, error) {
-	ldapUsers := []*ldapUser{}
-	if err := a.doGetRequest("/users", &ldapUsers); err != nil {
-		return nil, err
-	}
-
-	users := make([]*model.User, len(ldapUsers))
-	for i, u := range ldapUsers {
-		users[i] = u.AsUser()
-	}
-
-	return users, nil
-}
-
-func (a *LDAPAuthService) GetSession(token string) (*model.Session, error) {
-	var response model.Session
-	if err := a.doGetRequest(fmt.Sprintf("/session/%s", token), &response); err != nil {
-		return nil, err
-	}
-
-	return &response, nil
-}
-
-func (a *LDAPAuthService) Login(username, password string) (*model.Session, error) {
-	reqBody := map[string]interface{}{
-		"username": username,
-		"password": password,
-	}
-
-	var response model.Session
-	if err := a.doPostRequest("/login", reqBody, &response); err != nil {
-		return nil, err
-	}
-
-	return &response, nil
-}

auth/memory.go

@@ -1,109 +0,0 @@
-package auth
-
-import (
-	"fmt"
-
-	"git.phc.dm.unipi.it/phc/website/model"
-	"git.phc.dm.unipi.it/phc/website/util"
-)
-
-var exampleMemoryUsers = &Memory{
-	Users: map[string]*memoryUser{
-		"aziis98": {
-			User: model.User{
-				Username: "aziis98",
-				Name:     "Antonio",
-				Surname:  "De Lucreziis",
-				Email:    "aziis98@example.org",
-			}.WithDefaultFullName(),
-			Password: "123",
-		},
-		"bachoseven": {
-			User: model.User{
-				Username: "bachoseven",
-				Name:     "Francesco",
-				Surname:  "Minnocci",
-				Email:    "bachoseven@example.org",
-			}.WithDefaultFullName(),
-			Password: "234",
-		},
-	},
-	Sessions: map[string]*memorySession{},
-}
-
-type memoryUser struct {
-	model.User
-	Password string `json:"-"`
-}
-
-func (u memoryUser) AsUser() *model.User {
-	return &model.User{
-		Username: u.Username,
-		Name:     u.Name,
-		Surname:  u.Surname,
-		FullName: u.FullName,
-		Email:    u.Email,
-	}
-}
-
-type memorySession struct {
-	Username string
-	Token    string
-}
-
-func (s memorySession) AsSession() *model.Session {
-	return &model.Session{
-		Username: s.Username,
-		Token:    s.Token,
-	}
-}
-
-type Memory struct {
-	Users    map[string]*memoryUser
-	Sessions map[string]*memorySession
-}
-
-func (m *Memory) GetUser(username string) (*model.User, error) {
-	user, ok := m.Users[username]
-	if !ok {
-		return nil, fmt.Errorf(`no user with that username`)
-	}
-
-	return user.AsUser(), nil
-}
-
-func (m *Memory) GetUsers() ([]*model.User, error) {
-	users := make([]*model.User, len(m.Users))
-	i := 0
-	for _, u := range m.Users {
-		users[i] = u.AsUser()
-		i++
-	}
-
-	return users, nil
-}
-
-func (m *Memory) GetSession(token string) (*model.Session, error) {
-	session, ok := m.Sessions[token]
-	if !ok {
-		return nil, ErrInvalidSession
-	}
-
-	return session.AsSession(), nil
-}
-
-func (m *Memory) Login(username string, password string) (*model.Session, error) {
-	user, ok := m.Users[username]
-	if !ok {
-		return nil, fmt.Errorf(`no user with that username`)
-	}
-
-	if user.Password != password {
-		return nil, fmt.Errorf(`invalid credentials`)
-	}
-
-	session := &memorySession{username, util.GenerateRandomString(15)}
-	m.Sessions[session.Token] = session
-
-	return session.AsSession(), nil
-}

config/config.go

@@ -1,70 +0,0 @@
-package config
-
-import (
-	"log"
-	"os"
-	"strings"
-
-	"git.phc.dm.unipi.it/phc/website/util"
-	"github.com/joho/godotenv"
-)
-
-var Mode string
-var Host string
-
-var GitUrl string
-var ChatUrl string
-var Email string
-
-var UserPagesBaseUrl string
-
-var AuthServiceHost string
-
-func loadEnv(target *string, name, defaultValue string) {
-	value := os.Getenv(name)
-	if len(strings.TrimSpace(value)) == 0 {
-		*target = defaultValue
-	} else {
-		*target = value
-	}
-
-	log.Printf("%s = %v", name, *target)
-}
-
-func Load() {
-	if err := godotenv.Load(); err != nil {
-		panic(err)
-	}
-
-	log.SetFlags(log.Ldate | log.Ltime | log.Lshortfile)
-
-	// Production
-	loadEnv(&Mode, "MODE", "production")
-	loadEnv(&Host, "HOST", ":8080")
-
-	// Services
-	loadEnv(&GitUrl, "GIT_URL", "https://git.example.org")
-	loadEnv(&ChatUrl, "CHAT_URL", "https://chat.example.org")
-	loadEnv(&Email, "EMAIL", "mail@example.org")
-
-	// Poisson
-	loadEnv(&UserPagesBaseUrl, "USER_PAGES_BASE_URL", "https://poisson.phc.dm.unipi.it/~")
-
-	// AuthService
-	loadEnv(&AuthServiceHost, "AUTH_SERVICE_HOST", "http://localhost:3535")
-}
-
-func Object() util.H {
-	return util.H{
-		"Mode": Mode,
-		"Host": Host,
-
-		"GitUrl":  GitUrl,
-		"ChatUrl": ChatUrl,
-		"Email":   Email,
-
-		"UserPagesBaseUrl": UserPagesBaseUrl,
-
-		"AuthServiceHost": AuthServiceHost,
-	}
-}

frontend/Makefile

@@ -1,23 +0,0 @@
-
-STYLES_SOURCES = $(wildcard src/styles/*.scss)
-SCRIPTS_SOURCES = $(wildcard src/*.js)
-
-.PHONY: all
-all: scripts styles	
-
-.PHONY: styles
-styles: $(STYLES_SOURCES)
-	npm run build:styles
-
-.PHONY: scripts
-scripts: $(SCRIPTS_SOURCES)
-	npm run build:scripts
-
-.PHONY: clean
-clean:
-	rm -rf dist/
-
-.PHONY: debug
-debug:
-	@echo "STYLES_SOURCES = $(STYLES_SOURCES)"
-	@echo "SCRIPTS_SOURCES = $(SCRIPTS_SOURCES)"

frontend/package.json

@@ -1,22 +0,0 @@
-{
-    "name": "frontend",
-    "version": "1.0.0",
-    "description": "Package to generate frontend files for phc/website",
-    "scripts": {
-        "build:scripts": "rollup -c",
-        "build:styles": "sass -s compressed --no-source-map src/styles/main.scss dist/main.css"
-    },
-    "keywords": [],
-    "author": "",
-    "license": "MIT",
-    "devDependencies": {
-        "@rollup/plugin-node-resolve": "^13.3.0",
-        "rollup": "^2.75.3",
-        "rollup-plugin-terser": "^7.0.2",
-        "sass": "^1.52.3"
-    },
-    "dependencies": {
-        "alpinejs": "^3.10.2",
-        "fuse.js": "^6.6.2"
-    }
-}

frontend/rollup.config.js

@@ -1,31 +0,0 @@
-import { defineConfig } from 'rollup'
-import { terser } from 'rollup-plugin-terser'
-
-export default defineConfig([
-    {
-        input: 'src/utenti.js',
-        external: ['alpinejs', 'fuse.js'], // libraries to not bundle
-        output: {
-            file: 'dist/utenti.min.js',
-            format: 'iife',
-            globals: {
-                // map library names to global constants
-                alpinejs: 'Alpine',
-                'fuse.js': 'Fuse',
-            },
-        },
-        plugins: [terser()],
-    },
-    {
-        input: 'src/profilo.js',
-        external: ['alpinejs'],
-        output: {
-            file: 'dist/profilo.min.js',
-            format: 'iife',
-            globals: {
-                alpinejs: 'Alpine',
-            },
-        },
-        plugins: [terser()],
-    },
-])

frontend/src/profilo.js

@@ -1,16 +0,0 @@
-import Alpine from 'alpinejs'
-
-Alpine.data('profilo', () => ({
-    init() {
-        console.log('Profilo!')
-    },
-}))
-
-Alpine.data('passwordForm', () => ({
-    password: '',
-    passwordAgain: '',
-    passwordSame: true,
-    onUpdate() {
-        this.passwordSame = this.password === this.passwordAgain
-    },
-}))

frontend/src/styles/main.scss

@@ -1,69 +0,0 @@
-/* TODO: Don't use CDN and serve as static files */
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap');
-
-:root {
-    --fg-300: #777;
-    --fg-400: #666;
-    --fg-500: #333;
-    --fg-600: #222;
-
-    --bg-000: #f0f0f0;
-    --bg-100: #f0f0f0;
-    --bg-500: #eaeaea;
-    --bg-550: #ecedee;
-    --bg-600: #e4e5e7;
-    --bg-700: #d5d5d5;
-    --bg-750: #c8c8c8;
-    --bg-800: #c0c0c0;
-    --bg-850: #b8b8b8;
-
-    --accent-300: #5cc969;
-    --accent-400: #4eaa59;
-    --accent-500: #278542;
-    --accent-600: #2e974c;
-    --accent-700: #154d24;
-    --accent-800: #002d0d;
-
-    --ft-ss: 'Inter', sans-serif;
-    --ft-ss-wt-light: 300;
-    --ft-ss-wt-normal: 400;
-    --ft-ss-wt-medium: 500;
-    --ft-ss-wt-bold: 700;
-
-    --shadow-500: 0 0 16px 0 #00000018;
-
-    // Components
-    --text-input-bg: var(--bg-000);
-    --text-input-readonly-bg: var(--bg-600);
-    --text-input-readonly-fg: var(--fg-300);
-}
-
-* {
-    box-sizing: border-box;
-}
-
-html,
-body {
-    margin: 0;
-}
-
-html {
-    height: 100%;
-    width: 100%;
-}
-
-body {
-    background: var(--bg-500);
-    color: var(--fg-500);
-
-    font-family: var(--ft-ss);
-    font-size: 17px;
-    font-weight: var(--ft-ss-wt-normal);
-
-    width: 100%;
-    min-height: 100%;
-
-    position: relative;
-}
-
-@import './typography.scss';

frontend/src/styles/typography.scss

@@ -1,78 +0,0 @@
-h1,
-h2,
-h3,
-h4 {
-    margin: 0;
-    margin-top: 1rem;
-    margin-bottom: 0.5rem;
-
-    font-weight: var(--font-weight-light);
-}
-
-h1 {
-    font-size: 2rem;
-}
-
-h2 {
-    font-size: 1.5rem;
-}
-
-h3 {
-    font-size: 1.35rem;
-}
-
-h4 {
-    font-size: 1.2rem;
-    font-weight: var(--font-weight-bold);
-}
-
-p,
-ul,
-ol,
-li {
-    margin: 0;
-    width: 70ch;
-    max-width: 100%;
-    line-height: 1.8;
-}
-
-p + p {
-    padding-top: 0.5rem;
-}
-
-ul,
-ol {
-    padding: 0 0 0 1.5rem;
-}
-
-hr {
-    width: 50ch;
-    height: 1px;
-    margin: 0;
-
-    border: none;
-    background-color: var(--bg-darker-2);
-}
-
-pre {
-    margin: 0.5rem 0;
-
-    background: var(--bg-lighter);
-    border: 1px solid #cbcbcb;
-    border-radius: 2px;
-    box-shadow: 0 2px 4px 0 #00000033;
-
-    font-size: 90%;
-
-    display: flex;
-    overflow-x: auto;
-}
-
-pre > code {
-    display: block;
-    margin: 0.25rem;
-}
-
-p.center {
-    text-align: center;
-}

frontend/src/utenti.js

@@ -1,81 +0,0 @@
-import Alpine from 'alpinejs'
-import Fuse from 'fuse.js'
-
-const SHOW_MORE_INCREMENT = 15
-const FUSE_OPTIONS = {
-    includeScore: true,
-    keys: [
-        'nome',
-        'cognome',
-        'tags',
-        { name: 'nomeCompleto', getFn: user => `${user.nome} ${user.cognome}` },
-    ],
-}
-
-const SORT_MODES = {
-    chronological: () => 0,
-    name: (a, b) => (a.nome < b.nome ? -1 : 1),
-    surname: (a, b) => (a.cognome < b.cognome ? -1 : 1),
-}
-
-function getSortedUserList(original, mode) {
-    return [...original].sort(SORT_MODES[mode])
-}
-
-Alpine.data('utenti', () => ({
-    searchField: '', // two-way binding for the search input field
-    sortMode: 'chronological', // two-way binding for the sorting mode
-    fetchedUsers: [], // hold complete user list
-    sortedUserBuffer: [], // Yet another buffer of the user list for the sort mode
-    fuse: new Fuse([], FUSE_OPTIONS), // current fuse instance, used to filter the list above
-    searchResultsBuffer: [], // stores the full current search
-    searchResults: [], // list to renderer on screen with a subset of the whole search results buffer
-    async init() {
-        // Get user list from server
-        const response = await fetch('/api/utenti')
-        this.fetchedUsers = await response.json()
-
-        // This will call the function "showMore()" when the user is near the end of the list
-        new IntersectionObserver(entries => {
-            entries.forEach(entry => {
-                if (entry.isIntersecting) {
-                    console.log('Near the bottom of the page')
-                    this.showMore()
-                }
-            })
-        }).observe(this.$refs.spinner)
-
-        // Initialize with an empty query
-        this.updateSortMode()
-        this.updateSearch()
-    },
-    showMore() {
-        // setTimeout(() => {
-        // Updates the final "searchResults" list with more items from the previous buffer
-        const newCount = this.searchResults.length + SHOW_MORE_INCREMENT
-        this.searchResults = this.searchResultsBuffer.slice(0, newCount)
-        // }, 250) // For fun
-    },
-    setResults(list) {
-        this.searchResultsBuffer = list.filter(
-            entry => entry.score === undefined || entry.score <= 0.25
-        )
-        this.searchResults = this.searchResultsBuffer.slice(0, SHOW_MORE_INCREMENT)
-    },
-    updateSortMode() {
-        this.sortedUserBuffer = getSortedUserList(this.fetchedUsers, this.sortMode)
-        this.fuse.setCollection(this.sortedUserBuffer)
-        this.updateSearch()
-    },
-    updateSearch() {
-        console.time('search')
-        if (this.searchField.trim().length === 0) {
-            // Reset the result list
-            this.setResults(this.sortedUserBuffer.map(user => ({ item: user })))
-        } else {
-            // Update the result list with the new results
-            this.setResults(this.fuse.search(this.searchField))
-        }
-        console.timeEnd('search')
-    },
-}))

go.mod

@@ -1,25 +0,0 @@
-module git.phc.dm.unipi.it/phc/website
-
-go 1.18
-
-require (
-	github.com/alecthomas/chroma v0.9.4
-	github.com/gofiber/fiber/v2 v2.34.0
-	github.com/gofiber/redirect/v2 v2.1.23
-	github.com/joho/godotenv v1.4.0
-	github.com/litao91/goldmark-mathjax v0.0.0-20210217064022-a43cf739a50f
-	github.com/yuin/goldmark v1.4.4
-	github.com/yuin/goldmark-highlighting v0.0.0-20210516132338-9216f9c5aa01
-	golang.org/x/exp v0.0.0-20220602145555-4a0574d9293f
-	gopkg.in/yaml.v3 v3.0.0-20210107192922-496545a6307b
-)
-
-require (
-	github.com/andybalholm/brotli v1.0.4 // indirect
-	github.com/dlclark/regexp2 v1.4.0 // indirect
-	github.com/klauspost/compress v1.15.6 // indirect
-	github.com/valyala/bytebufferpool v1.0.0 // indirect
-	github.com/valyala/fasthttp v1.37.0 // indirect
-	github.com/valyala/tcplisten v1.0.0 // indirect
-	golang.org/x/sys v0.0.0-20220520151302-bc2c85ada10a // indirect
-)

go.sum

@@ -1,76 +0,0 @@
-github.com/alecthomas/assert v0.0.0-20170929043011-405dbfeb8e38/go.mod h1:r7bzyVFMNntcxPZXK3/+KdruV1H5KSlyVY0gc+NgInI=
-github.com/alecthomas/chroma v0.7.2-0.20200305040604-4f3623dce67a/go.mod h1:fv5SzZPFJbwp2NXJWpFIX7DZS4HgV1K4ew4Pc2OZD9s=
-github.com/alecthomas/chroma v0.9.4 h1:YL7sOAE3p8HS96T9km7RgvmsZIctqbK1qJ0b7hzed44=
-github.com/alecthomas/chroma v0.9.4/go.mod h1:jtJATyUxlIORhUOFNA9NZDWGAQ8wpxQQqNSB4rjA/1s=
-github.com/alecthomas/colour v0.0.0-20160524082231-60882d9e2721/go.mod h1:QO9JBoKquHd+jz9nshCh40fOfO+JzsoXy8qTHF68zU0=
-github.com/alecthomas/kong v0.2.1-0.20190708041108-0548c6b1afae/go.mod h1:+inYUSluD+p4L8KdviBSgzcqEjUQOfC5fQDRFuc36lI=
-github.com/alecthomas/repr v0.0.0-20180818092828-117648cd9897/go.mod h1:xTS7Pm1pD1mvyM075QCDSRqH6qRLXylzS24ZTpRiSzQ=
-github.com/andybalholm/brotli v1.0.4 h1:V7DdXeJtZscaqfNuAdSRuRFzuiKlHSC/Zh3zl9qY3JY=
-github.com/andybalholm/brotli v1.0.4/go.mod h1:fO7iG3H7G2nSZ7m0zPUDn85XEX2GTukHGRSepvi9Eig=
-github.com/danwakefield/fnmatch v0.0.0-20160403171240-cbb64ac3d964/go.mod h1:Xd9hchkHSWYkEqJwUGisez3G1QY8Ryz0sdWrLPMGjLk=
-github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
-github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
-github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
-github.com/dlclark/regexp2 v1.1.6/go.mod h1:2pZnwuY/m+8K6iRw6wQdMtk+rH5tNGR1i55kozfMjCc=
-github.com/dlclark/regexp2 v1.2.0/go.mod h1:2pZnwuY/m+8K6iRw6wQdMtk+rH5tNGR1i55kozfMjCc=
-github.com/dlclark/regexp2 v1.4.0 h1:F1rxgk7p4uKjwIQxBs9oAXe5CqrXlCduYEJvrF4u93E=
-github.com/dlclark/regexp2 v1.4.0/go.mod h1:2pZnwuY/m+8K6iRw6wQdMtk+rH5tNGR1i55kozfMjCc=
-github.com/gofiber/fiber/v2 v2.34.0 h1:96BJMw6uaxQhJsHY54SFGOtGgp9pgombK5Hbi4JSEQA=
-github.com/gofiber/fiber/v2 v2.34.0/go.mod h1:ozRQfS+D7EL1+hMH+gutku0kfx1wLX4hAxDCtDzpj4U=
-github.com/gofiber/redirect/v2 v2.1.23 h1:MqRyyeKyGqkF4GIFgTB4SuqIeeXviUglgRL2HCOFofM=
-github.com/gofiber/redirect/v2 v2.1.23/go.mod h1:IYF5pPLDLYrrHMcxajDyWV+nHMbyPd6agCXkCnfLxS0=
-github.com/joho/godotenv v1.4.0 h1:3l4+N6zfMWnkbPEXKng2o2/MR5mSwTrBih4ZEkkz1lg=
-github.com/joho/godotenv v1.4.0/go.mod h1:f4LDr5Voq0i2e/R5DDNOoa2zzDfwtkZa6DnEwAbqwq4=
-github.com/klauspost/compress v1.15.0/go.mod h1:/3/Vjq9QcHkK5uEr5lBEmyoZ1iFhe47etQ6QUkpK6sk=
-github.com/klauspost/compress v1.15.6 h1:6D9PcO8QWu0JyaQ2zUMmu16T1T+zjjEpP91guRsvDfY=
-github.com/klauspost/compress v1.15.6/go.mod h1:PhcZ0MbTNciWF3rruxRgKxI5NkcHHrHUDtV4Yw2GlzU=
-github.com/litao91/goldmark-mathjax v0.0.0-20210217064022-a43cf739a50f h1:plCPYXRXDCO57qjqegCzaVf1t6aSbgCMD+zfz18POfs=
-github.com/litao91/goldmark-mathjax v0.0.0-20210217064022-a43cf739a50f/go.mod h1:leg+HM7jUS84JYuY120zmU68R6+UeU6uZ/KAW7cViKE=
-github.com/mattn/go-colorable v0.0.9/go.mod h1:9vuHe8Xs5qXnSaW/c/ABM9alt+Vo+STaOChaDxuIBZU=
-github.com/mattn/go-isatty v0.0.4/go.mod h1:M+lRXTBqGeGNdLjl/ufCoiOlB5xdOkqRJdNxMWT7Zi4=
-github.com/mitchellh/mapstructure v1.1.2/go.mod h1:FVVH3fgwuzCH5S8UJGiWEs2h04kUh9fWfEaFds41c1Y=
-github.com/pkg/errors v0.8.1/go.mod h1:bwawxfHBFNV+L2hUp1rHADufV3IMtnDRdf1r5NINEl0=
-github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
-github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
-github.com/sergi/go-diff v1.0.0/go.mod h1:0CfEIISq7TuYL3j771MWULgwwjU+GofnZX9QAmXWZgo=
-github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
-github.com/stretchr/testify v1.2.2/go.mod h1:a8OnRcib4nhh0OaRAV+Yts87kKdq0PP7pXfy6kDkUVs=
-github.com/stretchr/testify v1.3.0/go.mod h1:M5WIy9Dh21IEIfnGCwXGc5bZfKNJtfHm1UVUgZn+9EI=
-github.com/stretchr/testify v1.6.1/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
-github.com/stretchr/testify v1.7.0 h1:nwc3DEeHmmLAfoZucVR881uASk0Mfjw8xYJ99tb5CcY=
-github.com/stretchr/testify v1.7.0/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
-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.37.0 h1:7WHCyI7EAkQMVmrfBhWTCOaeROb1aCBiTopx63LkMbE=
-github.com/valyala/fasthttp v1.37.0/go.mod h1:t/G+3rLek+CyY9bnIE+YlMRddxVAAGjhxndDB4i4C0I=
-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.3.6/go.mod h1:mwnBkeHKe2W/ZEtQ+71ViKU8L12m81fl3OWwC1Zlc8k=
-github.com/yuin/goldmark v1.4.4 h1:zNWRjYUW32G9KirMXYHQHVNFkXvMI7LpgNW2AgYAoIs=
-github.com/yuin/goldmark v1.4.4/go.mod h1:rmuwmfZ0+bvzB24eSC//bk1R1Zp3hM0OXYv/G2LIilg=
-github.com/yuin/goldmark-highlighting v0.0.0-20210516132338-9216f9c5aa01 h1:0SJnXjE4jDClMW6grE0xpNhwpqbPwkBTn8zpVw5C0SI=
-github.com/yuin/goldmark-highlighting v0.0.0-20210516132338-9216f9c5aa01/go.mod h1:TwKQPa5XkCCRC2GRZ5wtfNUTQ2+9/i19mGRijFeJ4BE=
-golang.org/x/crypto v0.0.0-20220214200702-86341886e292/go.mod h1:IxCIyHEi3zRg3s0A5j5BB6A9Jmi73HwBIUl50j+osU4=
-golang.org/x/exp v0.0.0-20220602145555-4a0574d9293f h1:KK6mxegmt5hGJRcAnEDjSNLxIRhZxDcgwMbcO/lMCRM=
-golang.org/x/exp v0.0.0-20220602145555-4a0574d9293f/go.mod h1:yh0Ynu2b5ZUe3MQfp2nM0ecK7wsgouWTDN0FNeJuIys=
-golang.org/x/net v0.0.0-20211112202133-69e39bad7dc2/go.mod h1:9nx3DQGgdP8bBQD5qxJ1jj9UTztislL4KSBs9R2vV5Y=
-golang.org/x/net v0.0.0-20220225172249-27dd8689420f/go.mod h1:CfG3xpIq0wQ8r1q4Su4UZFWDARRcnwPjda9FqA0JpMk=
-golang.org/x/sys v0.0.0-20181128092732-4ed8d59d0b35/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
-golang.org/x/sys v0.0.0-20201119102817-f84b799fce68/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
-golang.org/x/sys v0.0.0-20210423082822-04245dca01da/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-20211216021012-1d35b9e2eb4e/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.0.0-20220227234510-4e6760a101f9/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.0.0-20220520151302-bc2c85ada10a h1:dGzPydgVsqGcTRVwiLJ1jVbufYwmzD3LfVPLKsKg+0k=
-golang.org/x/sys v0.0.0-20220520151302-bc2c85ada10a/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/text v0.3.6/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
-golang.org/x/text v0.3.7/go.mod h1:u+2+/6zg+i71rQMx5EYifcz6MCKuco9NR6JIITiCfzQ=
-golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
-gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405 h1:yhCVgyC4o1eVCa2tZl7eS0r+SDo693bJlVdllGtEeKM=
-gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
-gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
-gopkg.in/yaml.v3 v3.0.0-20210107192922-496545a6307b h1:h8qDotaEPuJATrMmW04NCwg7v22aHH28wwpauUhK9Oo=
-gopkg.in/yaml.v3 v3.0.0-20210107192922-496545a6307b/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=

main.go

@@ -1,208 +0,0 @@
-package main
-
-import (
-	"fmt"
-	"html/template"
-	"log"
-	"time"
-
-	"git.phc.dm.unipi.it/phc/website/articles"
-	"git.phc.dm.unipi.it/phc/website/auth"
-	"git.phc.dm.unipi.it/phc/website/config"
-	"git.phc.dm.unipi.it/phc/website/model"
-	"git.phc.dm.unipi.it/phc/website/templates"
-	"git.phc.dm.unipi.it/phc/website/util"
-	"github.com/gofiber/fiber/v2"
-	"github.com/gofiber/fiber/v2/middleware/logger"
-	"github.com/gofiber/fiber/v2/middleware/recover"
-	"github.com/gofiber/redirect/v2"
-)
-
-func UserMiddleware(as auth.Service) fiber.Handler {
-	return func(c *fiber.Ctx) error {
-		token := c.Cookies("session-token")
-		user, _ := auth.UserForSession(as, token)
-		c.Locals("user", user)
-		return c.Next()
-	}
-}
-
-func main() {
-	config.Load()
-
-	app := fiber.New()
-
-	app.Use(logger.New())
-	app.Use(recover.New())
-
-	// Remove trailing slash from URLs
-	app.Use(redirect.New(redirect.Config{
-		Rules: map[string]string{
-			"/*/": "/$1",
-		},
-	}))
-
-	// Serve content statically from "./public", mounted on the "/public/" route
-	app.Static("/public/", "./public")
-
-	authService := auth.NewDefaultService(config.AuthServiceHost)
-	app.Use(UserMiddleware(authService))
-
-	// Templates & Renderer
-	renderer := templates.NewRenderer(
-		"./views/",
-		"./views/base.html",
-		"./views/partials/*.html",
-	)
-
-	newsArticlesRegistry := articles.NewRegistry("./news")
-
-	// Routes
-
-	actuallyStaticRoutes := map[string]string{
-		"/":       "home.html",
-		"/link":   "link.html",
-		"/login":  "login.html",
-		"/utenti": "utenti.html",
-	}
-
-	for route, view := range actuallyStaticRoutes {
-		localView := view
-		app.Get(route, func(c *fiber.Ctx) error {
-			c.Type("html")
-			return renderer.Render(c, localView, util.H{
-				"User": c.Locals("user"),
-			})
-		})
-	}
-
-	app.Get("/api/utenti", func(c *fiber.Ctx) error {
-		utenti, err := authService.GetUsers()
-		if err != nil {
-			return err
-		}
-
-		return c.JSON(utenti)
-	})
-
-	app.Get("/api/profilo", func(c *fiber.Ctx) error {
-		user := c.Locals("user")
-		if user == nil {
-			return fmt.Errorf(`user not logged in`)
-		}
-
-		return c.JSON(user)
-	})
-
-	app.Get("/storia", func(c *fiber.Ctx) error {
-		storia, err := GetStoria()
-		if err != nil {
-			return err
-		}
-
-		c.Type("html")
-		return renderer.Render(c, "storia.html", util.H{
-			"User":   c.Locals("user"),
-			"Storia": storia,
-		})
-	})
-
-	app.Get("/appunti", func(c *fiber.Ctx) error {
-		searchQuery := c.Query("q", "")
-
-		c.Type("html")
-		return renderer.Render(c, "appunti.html", util.H{
-			"User":  c.Locals("user"),
-			"Query": searchQuery,
-		})
-	})
-
-	app.Get("/news", func(c *fiber.Ctx) error {
-		articles, err := newsArticlesRegistry.GetArticles()
-		if err != nil {
-			return err
-		}
-
-		c.Type("html")
-		return renderer.Render(c, "news.html", util.H{
-			"User":     c.Locals("user"),
-			"Articles": articles,
-		})
-	})
-
-	app.Post("/login", func(c *fiber.Ctx) error {
-		var loginForm struct {
-			Provider string `form:"provider"`
-			Username string `form:"username"`
-			Password string `form:"password"`
-		}
-
-		if err := c.BodyParser(&loginForm); err != nil {
-			return err
-		}
-
-		session, err := authService.Login(loginForm.Username, loginForm.Password)
-		if err != nil {
-			return err
-		}
-
-		inThreeDays := time.Now().Add(3 * 24 * time.Hour)
-		c.Cookie(&fiber.Cookie{
-			Name:    "session-token",
-			Path:    "/",
-			Value:   session.Token,
-			Expires: inThreeDays,
-		})
-
-		return c.Redirect("/profilo")
-	})
-
-	app.Get("/profilo", func(c *fiber.Ctx) error {
-		user, ok := c.Locals("user").(*model.User)
-		if !ok || user == nil {
-			return fmt.Errorf(`user not logged in`)
-		}
-
-		c.Type("html")
-		return renderer.Render(c, "profilo.html", util.H{
-			"User": c.Locals("user"),
-		})
-	})
-
-	app.Get("/logout", func(c *fiber.Ctx) error {
-		c.Cookie(&fiber.Cookie{
-			Name:    "session-token",
-			Path:    "/",
-			Value:   "",
-			Expires: time.Now(),
-		})
-		return c.Redirect("/")
-	})
-
-	app.Get("/news/:article", func(c *fiber.Ctx) error {
-		articleID := c.Params("article")
-
-		article, err := newsArticlesRegistry.GetArticle(articleID)
-		if err != nil {
-			return err
-		}
-
-		html, err := article.Render()
-		if err != nil {
-			return err
-		}
-
-		c.Type("html")
-		return renderer.Render(c, "news-base.html", util.H{
-			"User":        c.Locals("user"),
-			"Article":     article,
-			"ContentHTML": template.HTML(html),
-		})
-	})
-
-	log.Printf("Starting server on host %q", config.Host)
-	err := app.Listen(config.Host)
-	if err != nil {
-		log.Fatal(err)
-	}
-}

model/user.go

@@ -1,30 +0,0 @@
-package model
-
-// User represents a user returned from AuthenticatorService
-type User struct {
-	Username string `json:"username"`
-	Name     string `json:"name"`
-	Surname  string `json:"surname"`
-	// FullName is a separate field from Name and Surname because for example
-	// ldap stores them all as separate fields.
-	FullName string `json:"fullName"`
-	Email    string `json:"email"`
-}
-
-// WithDefaultFullName is a utility that returns a copy of the given user with the full name set to the concatenation of the name and surname of the user.
-func (u User) WithDefaultFullName() User {
-	return User{
-		Username: u.Username,
-		Name:     u.Name,
-		Surname:  u.Surname,
-		Email:    u.Email,
-
-		FullName: u.Username + " " + u.Surname,
-	}
-}
-
-// Session represents a session returned from AuthenticatorService
-type Session struct {
-	Username string `json:"username"`
-	Token    string `json:"token"`
-}

news/2021-12-22-notizia-1.md

@@ -1,91 +0,0 @@
----
-id: 2021-12-22-notizia-1
-title: "Notizia 1"
-tags: important, prova, test, foo, bar
-publish_date: 2021/12/22 22:00
-description: |
-    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis nemo aperiam, voluptas quam alias esse sed natus tempore suscipit fugiat sit delectus exercitationem numquam ipsum assumenda recusandae consequatur...
----
-
-## Heading 2
-
-### Heading 3
-
-#### Heading 4
-
-Lorem ipsum dolor, sit amet consectetur "adipisicing" elit. Repudiandae -- optio ad, consequatur **distinctio possimus** laudantium molestias similique placeat, dolore omnis et aperiam rem delectus tempora $1 + 1$ ea, cupiditate explicabo vel! Porro?
-
-$$
-\int_0^1 x^2 \mathrm d x
-$$
-
-Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae optio ad, consequatur distinctio possimus _laudantium molestias similique placeat_, dolore omnis et aperiam rem [delectus tempora ea,](#) cupiditate explicabo vel! Porro?
-
-![testing](https://picsum.photos/400/300)
-
-Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae optio ad, consequatur distinctio possimus laudantium molestias similique placeat, dolore omnis et aperiam rem delectus tempora ea, cupiditate explicabo vel! Porro?
-
-- Item 1
-    - Item 2
-        - Item 3
-    - Item 4
-- Item 5
-- Item 5
-- Item 5
-
-- foo
-    ```  
-    type Article struct {
-        Id          string
-        Title       string
-        Description string
-        Tags        []string
-        PublishDate time.Time
-
-        MarkdownSource string
-        renderedHTML   string
-    }
-    ```
-    - bar with some `code`
-        ```go   
-        type Article struct {
-            Id          string
-            Title       string
-            Description string
-            Tags        []string
-            PublishDate time.Time
-
-            MarkdownSource string
-            renderedHTML   string
-        }
-        ```
-
-#### Tables
-
-<https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#tables>
-
-Colons can be used to align columns.
-
-| Tables        | Are           | Cool  |
-| ------------- |:-------------:| -----:|
-| col 3 is      | right-aligned | $1600 |
-| col 2 is      | centered      |   $12 |
-| zebra stripes | are neat      |    $1 |
-
-There must be at least 3 dashes separating each header cell.
-The outer pipes (|) are optional, and you don't need to make the 
-raw Markdown line up prettily. You can also use inline Markdown.
-
-Markdown | Less | Pretty
---- | --- | ---
-*Still* | `renders` | **nicely**
-1 | 2 | 3
-
-
-| Expression | Derivative | Integral  |
-| :---: | :---: | :---: |
-| $x^a$ | $a x^{a-1}$ | $\displaystyle \frac{1}{a+1} x^{a+1} + c$ se $a \neq -1$ |
-| $\sin x$ | $\cos x$ | $\displaystyle -\cos x + c$ |
-| $e^x$ | $e^x$ | $\displaystyle e^x + c$ |
-
-

news/2021-12-23-notizia-2.md

@@ -1,37 +0,0 @@
----
-id: 2021-12-23-notizia-2
-title: "Notizia 2"
-tags: prova, test, foo, bar
-publish_date: 2021/12/23 22:00
-description: |
-    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis nemo aperiam, voluptas quam alias esse sed natus tempore suscipit fugiat sit delectus exercitationem numquam ipsum assumenda recusandae consequatur...
----
-
-## Heading 2
-
-### Heading 3
-
-#### Heading 4
-
-Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae optio ad, consequatur **distinctio possimus** laudantium molestias similique placeat, dolore omnis et aperiam rem delectus tempora ea, cupiditate explicabo vel! Porro?
-
-Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae optio ad, consequatur distinctio possimus _laudantium molestias similique placeat_, dolore omnis et aperiam rem [delectus tempora ea,](#) cupiditate explicabo vel! Porro?
-
-![testing](https://picsum.photos/200/300)
-
-Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae optio ad, consequatur distinctio possimus laudantium molestias similique placeat, dolore omnis et aperiam rem delectus tempora ea, cupiditate explicabo vel! Porro?
-
-- Item 1
-    - Item 2
-        - Item 3
-    - Item 4
-- Item 5
-- Item 5
-- Item 5
-
-- foo
-  -  bar
-     ```Makefile
-     foo
-     	foo
-     ```

news/2021-12-24-notizia-3.md

@@ -1,37 +0,0 @@
----
-id: 2021-12-24-notizia-3
-title: "Notizia 3"
-tags: prova, test, foo, bar
-publish_date: 2021/12/24 18:00
-description: |
-    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis nemo aperiam, voluptas quam alias esse sed natus tempore suscipit fugiat sit delectus exercitationem numquam ipsum assumenda recusandae consequatur...
----
-
-## Heading 2
-
-### Heading 3
-
-#### Heading 4
-
-Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae optio ad, consequatur **distinctio possimus** laudantium molestias similique placeat, dolore omnis et aperiam rem delectus tempora ea, cupiditate explicabo vel! Porro?
-
-Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae optio ad, consequatur distinctio possimus _laudantium molestias similique placeat_, dolore omnis et aperiam rem [delectus tempora ea,](#) cupiditate explicabo vel! Porro?
-
-![testing](https://picsum.photos/200/300)
-
-Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae optio ad, consequatur distinctio possimus laudantium molestias similique placeat, dolore omnis et aperiam rem delectus tempora ea, cupiditate explicabo vel! Porro?
-
-- Item 1
-    - Item 2
-        - Item 3
-    - Item 4
-- Item 5
-- Item 5
-- Item 5
-
-- foo
-  -  bar
-     ```Makefile
-     foo
-     	foo
-     ```

package.json

@@ -0,0 +1,54 @@
+{
+  "name": "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"
+  },
+  "dependencies": {
+    "@astrojs/check": "^0.9.4",
+    "@astrojs/node": "^9.4.3",
+    "@astrojs/preact": "^4.1.1",
+    "@fontsource-variable/material-symbols-outlined": "^5.2.21",
+    "@fontsource/iosevka": "^5.2.5",
+    "@fontsource/mononoki": "^5.2.5",
+    "@fontsource/open-sans": "^5.2.6",
+    "@fontsource/source-code-pro": "^5.2.6",
+    "@fontsource/source-sans-pro": "^5.2.5",
+    "@fontsource/space-mono": "^5.2.8",
+    "@phosphor-icons/core": "^2.1.1",
+    "@phosphor-icons/react": "^2.1.10",
+    "@preact/signals": "^1.3.2",
+    "@types/jsdom": "^21.1.7",
+    "astro": "^5.13.7",
+    "fuse.js": "^7.1.0",
+    "katex": "^0.16.22",
+    "lucide-static": "^0.468.0",
+    "marked": "^15.0.12",
+    "node-addon-api": "^8.5.0",
+    "node-gyp": "^11.4.2",
+    "preact": "^10.27.2",
+    "sharp": "^0.34.3",
+    "typescript": "^5.9.2"
+  },
+  "devDependencies": {
+    "@astrojs/mdx": "^4.3.5",
+    "@rollup/plugin-yaml": "^4.1.2",
+    "@types/katex": "^0.16.7",
+    "jsdom": "^24.1.3",
+    "linkedom": "^0.18.12",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^3.6.2",
+    "prettier-plugin-astro": "^0.14.1",
+    "rehype-autolink-headings": "^7.1.0",
+    "rehype-slug": "^6.0.0",
+    "remark-math": "^6.0.0",
+    "remark-toc": "^9.0.0",
+    "sass": "^1.92.1",
+    "tsx": "^4.20.5"
+  }
+}

public/favicon.svg

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

public/home.js

@@ -1,342 +0,0 @@
-
-function pointInInterval(a, b, x) {
-  return a <= x && x <= b;
-}
-
-function intervalIntersectsInterval(a, b, c, d) {
-  if (c <= a) {
-    return a <= d;
-  }
-
-  return pointInInterval(a, b, c);
-}
-
-function rectIntersectRect(x1, y1, x2, y2, x3, y3, x4, y4) {
-  return intervalIntersectsInterval(x1, x2, x3, x4) && intervalIntersectsInterval(y1, y2, y3, y4);
-}
-
-function intersects(x1, y1, x2, y2, x3, y3, x4, y4) {
-  const a_minx = Math.min(x1, x2);
-  const a_maxx = Math.max(x1, x2);
-  const a_miny = Math.min(y1, y2);
-  const a_maxy = Math.max(y1, y2);
-
-  const b_minx = Math.min(x3, x4);
-  const b_maxx = Math.max(x3, x4);
-  const b_miny = Math.min(y3, y4);
-  const b_maxy = Math.max(y3, y4);
-
-  if (!rectIntersectRect(a_minx, a_miny, a_maxx, a_maxy, b_minx, b_miny, b_maxx, b_maxy))
-    return false;
-
-  const a_dx = x2 - x1;
-  const a_dy = y2 - y1;
-
-  const b_dx = x4 - x3;
-  const b_dy = y4 - y3;
-
-  const det = -b_dx * a_dy + a_dx * b_dy;
-
-  if (Math.abs(det) === 0 && -a_dy * (x3 - x1) + a_dx * (y3 - y1) === 0) {
-    return y1 <= y3 <= y2 || y1 <= y4 <= y2;
-  }
-
-  const s = (-a_dy * (x1 - x3) + a_dx * (y1 - y3)) / det;
-  const t = (+b_dx * (y1 - y3) - b_dy * (x1 - x3)) / det;
-
-  return s >= 0 && s <= 1 && t >= 0 && t <= 1;
-}
-
-const $canvas = document.querySelector('#circuit-pattern');
-let g = $canvas.getContext('2d');
-
-let WIDTH = $canvas.offsetWidth;
-let HEIGHT = $canvas.offsetHeight;
-
-const TS = 20;
-
-let ROWS = HEIGHT / TS;
-let COLS = WIDTH / TS;
-
-function updateCanvasDimensions() {
-  g = $canvas.getContext('2d');
-
-  WIDTH = $canvas.offsetWidth;
-  HEIGHT = $canvas.offsetHeight;
-
-  ROWS = HEIGHT / TS;
-  COLS = WIDTH / TS;
-
-  $canvas.width = WIDTH * devicePixelRatio;
-  $canvas.height = HEIGHT * devicePixelRatio;
-  g.scale(devicePixelRatio, devicePixelRatio);
-}
-
-window.addEventListener('resize', () => updateCanvasDimensions());
-updateCanvasDimensions();
-
-const state = {
-  wires: [], // :: [(Int, Int)]
-  nextWire: null,
-  nextWireIndex: 0,
-  nextSegmentLen: 0,
-  t: 0,
-};
-
-function randomFloat(min, max) {
-  return Math.random() * (max - min) + min;
-}
-
-function randomInt(min, max) {
-  return Math.floor(Math.random() * (max - min + 1) + min);
-}
-
-function randomChoice(list) {
-  return list[randomInt(0, list.length - 1)];
-}
-
-const DIRS = {
-  left: [-1, 1],
-  center: [0, 1],
-  right: [+1, 1],
-};
-
-const NEXT_DIRS = {
-  left: ['center'],
-  center: ['left', 'right'],
-  right: ['center'],
-};
-
-function canPlaceSegment([[p1x, p1y], [p2x, p2y]]) {
-  return state.wires.every(wire => {
-    return everyWireSegment(wire, ([[sx, sy], [lx, ly]]) => {
-      return !intersects(sx, sy, lx, ly, p1x, p1y, p2x, p2y);
-    });
-  })
-}
-
-function everyWireSegment(wire, segmentFn) {
-  let [start, ...rest] = wire;
-
-  return rest.every((pt) => {
-    const r = segmentFn([start, pt]);
-    start = pt;
-    return r;
-  });
-}
-
-function generateWire() {
-  const pieceCount = Math.pow(randomFloat(1, 2.5), 2) | 0;
-  const startPoint = [
-    randomInt(0, COLS),
-    Math.pow(randomFloat(0, ROWS / 12), 2) | 0,
-  ];
-  const sizes = Array(pieceCount).fill(0).map(() => randomInt(2, 4) | 0);
-
-  const dirs = [randomChoice(Object.keys(DIRS))];
-  for (let i = 0; i < pieceCount - 1; i++) {
-    const last = dirs[dirs.length - 1];
-    dirs.push(randomChoice(NEXT_DIRS[last]));
-  }
-
-  const wire = [startPoint];
-  for (let i = 0; i < pieceCount; i++) {
-    const [lpx, lpy] = wire[wire.length - 1];
-    const [dx, dy] = DIRS[dirs[i]];
-    const s = sizes[i];
-
-    const s_bonus = (dirs[i] === 'center' ? s * 2 : s) | 0;
-
-    wire.push([lpx + dx * s_bonus, lpy + dy * s_bonus]);
-  }
-
-  const ok = everyWireSegment(wire, segment => {
-    return canPlaceSegment(segment);
-  });
-
-  if (!ok)
-    return null;
-
-  return wire;
-}
-
-// // LinearintERPolation
-function lerp(a, b, t) {
-  return t * (b - a) + a;
-}
-function lerpPoint([x1, y1], [x2, y2], t) {
-  return [lerp(x1, x2, t), lerp(y1, y2, t)];
-}
-
-const CELLS_PER_SECOND = 15;
-
-let lastTime = new Date().getTime();
-
-function update() {
-  const now = new Date().getTime();
-  const delta = (now - lastTime) / 1000;
-  lastTime = now;
-
-  if (state.nextWire) {
-    state.t += CELLS_PER_SECOND * delta;
-
-    if (state.t >= 1.0) {
-      const [[x1, y1], [x2, y2]] = state.nextWire.slice(state.nextWireIndex - 2, state.nextWireIndex);
-      const dx = Math.abs(x2 - x1);
-      const dy = Math.abs(y2 - y1);
-      state.t = 0;
-      state.nextSegmentLen = Math.sqrt(dx * dx + dy * dy);
-
-      state.nextWireIndex++;
-    }
-
-    if (state.nextWireIndex > state.nextWire.length) {
-      state.wires.push(state.nextWire);
-      state.nextWire = null;
-    }
-  } else {
-    const wire = generateWire();
-    if (wire) {
-      state.nextWire = wire;
-      state.nextWireIndex = 2;
-
-      const [[x1, y1], [x2, y2]] = state.nextWire.slice(state.nextWireIndex - 2, state.nextWireIndex);
-      const dx = Math.abs(x2 - x1);
-      const dy = Math.abs(y2 - y1);
-      state.t = 0;
-      state.nextSegmentLen = Math.sqrt(dx * dx + dy * dy);
-    }
-  }
-}
-
-function getColors() {
-  if (document.body.classList.contains('dark-mode')) {
-    return {
-      BACKGROUND: '#282828',
-      CIRCUIT: '#38302e',
-    }
-  } else {
-    return {
-      BACKGROUND: '#eaeaea',
-      CIRCUIT: '#d4d4d4',
-    };
-  }
-}
-
-function render() {
-  const { BACKGROUND, CIRCUIT } = getColors();
-
-  g.clearRect(0, 0, WIDTH, HEIGHT);
-
-  g.strokeStyle = CIRCUIT;
-  g.lineWidth = 3;
-
-  state.wires.forEach(wire => {
-    const [[sx, sy], ...rest] = wire;
-
-    function renderDot(x, y) {
-      if (y === 0) {
-        return;
-      }
-
-      g.beginPath();
-      g.ellipse(x * TS, y * TS, TS / 5, TS / 5, 0, 0, Math.PI * 2);
-      g.stroke();
-    }
-
-    renderDot(sx, sy);
-
-    g.beginPath();
-    g.moveTo(sx * TS, sy * TS);
-    rest.forEach(([x, y]) => {
-      g.lineTo(x * TS, y * TS);
-    });
-    g.stroke();
-
-    const [lx, ly] = wire[wire.length - 1];
-
-    renderDot(lx, ly);
-
-    [wire[0], wire[wire.length - 1]].forEach(([x, y]) => {
-      if (y === 0) {
-        return;
-      }
-
-      g.fillStyle = BACKGROUND;
-      g.beginPath();
-      g.ellipse(x * TS, y * TS, TS / 5 - 1, TS / 5 - 1, 0, 0, Math.PI * 2);
-      g.fill();
-    });
-  });
-
-  if (state.nextWire) {
-    const wirePart = state.nextWire.slice(0, state.nextWireIndex);
-    const wire = [
-      ...wirePart.slice(0, wirePart.length - 1),
-      lerpPoint(
-        wirePart[wirePart.length - 2],
-        wirePart[wirePart.length - 1],
-        state.t
-      )
-    ];
-    const [[sx, sy], ...rest] = wire;
-
-    function renderDot(x, y) {
-      if (y === 0) {
-        return;
-      }
-
-      g.beginPath();
-      g.ellipse(x * TS, y * TS, TS / 5, TS / 5, 0, 0, Math.PI * 2);
-      g.stroke();
-    }
-
-    renderDot(sx, sy);
-
-    g.beginPath();
-    g.moveTo(sx * TS, sy * TS);
-    rest.forEach(([x, y]) => {
-      g.lineTo(x * TS, y * TS);
-    });
-    g.stroke();
-
-    const [lx, ly] = wire[wire.length - 1];
-
-    renderDot(lx, ly);
-
-    [wire[0], wire[wire.length - 1]].forEach(([x, y]) => {
-      if (y === 0) {
-        return;
-      }
-
-      g.fillStyle = BACKGROUND;
-      g.beginPath();
-      g.ellipse(x * TS, y * TS, TS / 5 - 1, TS / 5 - 1, 0, 0, Math.PI * 2);
-      g.fill();
-    });
-  }
-
-  requestAnimationFrame(render);
-}
-
-// g.translate(0.5, 0.5);
-
-window.addEventListener('DOMContentLoaded', () => {
-  // $canvas.classList.remove('hide');
-
-  render();
-
-  let i = 20;
-  while (i > 0) {
-    const wire = generateWire();
-
-    if (wire) {
-      state.wires.push(wire);
-      i--;
-    }
-  }
-
-  setInterval(() => {
-    update();
-  }, 1000 / 30);
-})

public/images/zigzag.svg

@@ -0,0 +1,8 @@
+<svg width="100%" height="2rem" viewBox="0 0 1 1" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <pattern id="zig-zag" x="0" y="0" width="2" height="1">
+            <path fill="#C2A8EB" d="M 0,0 L 1,1 L 2,0 L 0,0"/>
+        </pattern> 
+    </defs>
+    <rect fill="url(#zig-zag)" x="0" y="0" width="100%" height="1" />
+</svg>

public/style.css

@@ -1,945 +0,0 @@
-/* TODO: Don't use CDN and serve as static files */
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap');
-
-:root {
-    --bg: #eaeaea;
-    --fg: #333;
-
-    --bg-lighter: #f0f0f0;
-
-    --bg-dark: hsl(220, 5%, 93%);
-    --bg-darker: hsl(220, 5%, 90%);
-    --bg-darker-2: #d5d5d5;
-    --bg-darker-2-1: #c8c8c8;
-    --bg-darker-3: #c0c0c0;
-    --bg-darker-4: #b8b8b8;
-
-    --accent-1: #278542;
-    --accent-1-fg: #154d24;
-
-    --card-date: #666;
-    --card-content: #222;
-
-    --font-sf: 'Inter', sans-serif;
-    --font-weight-light: 300;
-    --font-weight-normal: 400;
-    --font-weight-medium: 500;
-    --font-weight-bold: 700;
-
-    --shadow-1: 0 0 16px 0 #00000018;
-
-    --text-input-bg: #fff;
-    --text-input-readonly-bg: #e4e4e4;
-    --text-input-readonly-fg: #777;
-
-    --accent-2-lighter: #5cc969;
-    --accent-2: #4eaa59;
-    --accent-2-darker: #2e974c;
-    --accent-2-darkest: #002d0d;
-}
-
-* {
-    box-sizing: border-box;
-}
-
-html,
-body {
-    margin: 0;
-}
-
-html {
-    height: 100%;
-    width: 100%;
-}
-
-body {
-    background: var(--bg);
-    color: var(--fg);
-
-    font-family: var(--font-sf);
-    font-size: 17px;
-    font-weight: var(--font-weight-normal);
-
-    width: 100%;
-    min-height: 100%;
-
-    position: relative;
-}
-
-.main {
-    max-width: 70ch;
-    margin: 0 auto;
-    padding-bottom: 8rem;
-
-    display: flex;
-    flex-direction: column;
-
-    align-items: center;
-    justify-content: center;
-
-    gap: 3rem;
-}
-
-nav {
-    padding: 1rem 0;
-
-    display: flex;
-    flex-wrap: wrap;
-    gap: 1rem;
-
-    align-items: center;
-    justify-content: center;
-    font-weight: var(--font-weight-medium);
-
-    color: var(--accent-1-fg);
-}
-
-/* Tutti i link dentro la navbar sono speciali e non sembrano link */
-nav .nav-element {
-    display: flex;
-    width: 100%;
-    height: 100%;
-
-    align-items: center;
-    justify-content: center;
-
-    text-decoration: none;
-    color: inherit;
-
-    gap: 0.5rem;
-}
-
-nav a:hover {
-    color: var(--accent-1-fg);
-    text-decoration: none;
-}
-
-nav .nav-logo {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0.25rem 0;
-
-    background: var(--bg-dark);
-    border-radius: 4px;
-    border: 1px solid var(--bg-darker-2);
-    box-shadow: var(--shadow-1);
-
-    transition: transform 150ms ease-in-out;
-}
-
-nav .nav-logo:hover {
-    transform: scale(1.05);
-}
-
-nav .nav-logo img {
-    width: 150px;
-    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.5));
-}
-
-nav .nav-main {
-    display: flex;
-    /* grid-template-columns: repeat(5, 1fr) 1fr auto 1fr; */
-
-    background: var(--bg-dark);
-    border-radius: 4px;
-    border: 1px solid var(--bg-darker-2);
-    box-shadow: var(--shadow-1);
-
-    z-index: 1;
-}
-
-nav .nav-item.filler {
-    width: 6rem;
-}
-
-nav .nav-main .nav-element {
-    padding: 1rem 1.25rem;
-    cursor: pointer;
-}
-
-nav .nav-main .nav-button {
-    margin: 0 0.5rem;
-    /* padding: 0.5rem; */
-
-    aspect-ratio: 1;
-    width: 2rem;
-    height: 2rem;
-
-    /* background: var(--bg-darker-2); */
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    border: 1px solid var(--bg-darker-2);
-    border-radius: 1rem;
-
-    cursor: pointer;
-}
-
-nav .nav-main .nav-item {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    background: var(--bg-dark);
-
-    user-select: none;
-
-    z-index: 2;
-}
-
-nav .nav-main .nav-element:hover,
-nav .nav-main .nav-button:hover {
-    background: var(--bg-darker);
-}
-
-nav .nav-main .nav-item.dropdown {
-    position: relative;
-
-    z-index: 1;
-}
-
-nav .nav-main .nav-item.dropdown .nav-items .nav-item:last-child {
-    border-bottom-left-radius: 4px;
-    border-bottom-right-radius: 4px;
-}
-
-nav .nav-main .nav-item.dropdown .name {
-    width: 100%;
-    height: 100%;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    background: var(--bg-dark);
-
-    z-index: 3;
-}
-
-nav .nav-main .nav-item.dropdown .name:hover {
-    background: var(--bg-darker);
-}
-
-nav .nav-main .nav-item.dropdown .nav-items {
-    position: absolute;
-    top: 100%;
-    width: 100%;
-
-    display: none;
-
-    background: var(--bg-dark);
-    border-radius: 4px;
-    border: 1px solid var(--bg-darker-2);
-    box-shadow: var(--shadow-1);
-}
-/*
-nav .nav-main .nav-item.dropdown .nav-items::before {
-    position: absolute;
-    content: '';
-    top: -2px;
-    height: 2px;
-    left: 0;
-    right: 0;
-    width: 100%;
-
-    background: var(--bg-darker);
-} */
-
-nav .nav-main .nav-item.dropdown .name:hover + .nav-items,
-nav .nav-main .nav-item.dropdown .name + .nav-items:hover {
-    display: flex;
-    flex-direction: column;
-}
-
-/* .nav-main borders */
-.nav-main > .nav-item:first-child {
-    border-top-left-radius: 4px;
-    border-bottom-left-radius: 4px;
-}
-.nav-main > .nav-item:last-child {
-    border-top-right-radius: 4px;
-    border-bottom-right-radius: 4px;
-}
-
-footer {
-    position: absolute;
-    bottom: 0;
-    left: 50%;
-    height: 3rem;
-
-    width: 80ch;
-
-    transform: translate(-50%, 0);
-
-    background: var(--bg-dark);
-    border-radius: 4px;
-    border: 1px solid var(--bg-darker-2);
-    border-bottom: none;
-    box-shadow: var(--shadow-1);
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
-}
-
-/* Components */
-
-section {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-.card-list {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    gap: 1rem;
-
-    margin-top: 1rem;
-}
-
-.card {
-    background: var(--bg-dark);
-    border-radius: 4px;
-    border: 1px solid var(--bg-darker-2);
-    box-shadow: var(--shadow-1);
-
-    max-width: 60ch;
-
-    padding: 1rem;
-
-    display: flex;
-    flex-direction: column;
-}
-
-.card .title {
-    font-size: 22px;
-    font-weight: var(--font-weight-bold);
-
-    padding-bottom: 0.5rem;
-}
-
-.card .date {
-    font-size: 15px;
-    color: var(--card-date);
-
-    padding-bottom: 0.5rem;
-}
-
-.card .description {
-    font-weight: var(--font-weight-light);
-    color: var(--card-content);
-}
-
-.tags {
-    display: flex;
-    flex-direction: row;
-    gap: 0 0.5rem;
-
-    padding-top: 0.5rem;
-}
-
-.tags .tag {
-    height: 1.5rem;
-    border-radius: calc(1.5rem / 2);
-    padding: 0 calc(1.5rem / 2);
-
-    background: var(--bg-darker-2);
-    color: var(--card-date);
-
-    font-size: 15px;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-/* Typography */
-
-h1,
-h2,
-h3,
-h4 {
-    margin: 0;
-    margin-top: 1rem;
-    margin-bottom: 0.5rem;
-
-    font-weight: var(--font-weight-light);
-}
-
-h1 {
-    font-size: 2rem;
-}
-
-h2 {
-    font-size: 1.5rem;
-}
-
-h3 {
-    font-size: 1.35rem;
-}
-
-h4 {
-    font-size: 1.2rem;
-    font-weight: var(--font-weight-bold);
-}
-
-p,
-ul,
-ol,
-li {
-    margin: 0;
-    width: 70ch;
-    max-width: 100%;
-    line-height: 1.8;
-}
-
-p + p {
-    padding-top: 0.5rem;
-}
-
-ul,
-ol {
-    padding: 0 0 0 1.5rem;
-}
-
-hr {
-    width: 50ch;
-    height: 1px;
-    margin: 0;
-
-    border: none;
-    background-color: var(--bg-darker-2);
-}
-
-pre {
-    margin: 0.5rem 0;
-
-    background: var(--bg-lighter);
-    border: 1px solid #cbcbcb;
-    border-radius: 2px;
-    box-shadow: 0 2px 4px 0 #00000033;
-
-    font-size: 90%;
-
-    display: flex;
-    overflow-x: auto;
-}
-
-pre > code {
-    display: block;
-    margin: 0.25rem;
-}
-
-p.center {
-    text-align: center;
-}
-
-/* Controls */
-
-a:not(.button) {
-    color: var(--accent-1-fg);
-    font-weight: var(--font-weight-medium);
-    text-decoration: none;
-}
-
-a:not(.button):hover {
-    color: var(--accent-1);
-    text-decoration: underline;
-}
-
-a.button {
-    text-decoration: none;
-}
-
-/* Buttons */
-
-button,
-.button {
-    display: inline-block;
-
-    font-family: var(--font-sf);
-    font-weight: var(--font-weight-medium);
-    font-size: 17px;
-
-    /* gray variant #b3b3b3 */
-    border: 1px solid var(--bg-darker-3);
-    /* gray variant #bfbfbf */
-    background: var(--bg-darker-2);
-    /* gray variant #333333 */
-    color: var(--fg);
-
-    height: 2rem;
-
-    border-radius: 4px;
-
-    padding: 0 1rem;
-
-    transition: all 100ms ease-in-out;
-
-    box-shadow: 0 4px 8px 0 #00000022;
-
-    cursor: pointer;
-}
-
-button:hover,
-.button:hover {
-    background: var(--bg-darker-2-1);
-    box-shadow: 0 4px 8px 0 #00000033;
-}
-
-button.primary {
-    border: 1px solid var(--accent-2-darker);
-    background: var(--accent-2);
-    color: var(--accent-2-darkest);
-}
-
-button.primary:hover {
-    background: var(--accent-2-lighter);
-}
-
-button.icon {
-    padding: 0;
-    width: 2rem;
-}
-
-select {
-    font-family: var(--font-sf);
-    font-weight: var(--font-weight-medium);
-    font-size: 16px;
-
-    /* gray variant #b3b3b3 */
-    border: 1px solid var(--bg-darker-3);
-    /* gray variant #bfbfbf */
-    background: var(--bg-darker-2);
-    /* gray variant #333333 */
-    color: var(--fg);
-
-    height: 2rem;
-
-    border-radius: 4px;
-
-    padding: 0 0.25rem;
-
-    transition: all 100ms ease-in-out;
-
-    box-shadow: 0 4px 8px 0 #00000022;
-
-    cursor: pointer;
-}
-
-/* Text Fields */
-
-input[type='text'],
-input[type='password'] {
-    border: none;
-    background: none;
-
-    height: 2rem;
-    padding: 0 0.5rem;
-
-    font-size: 17px;
-
-    background: var(--text-input-bg);
-    color: var(--fg);
-
-    border-radius: 4px;
-    border: 1px solid var(--bg-darker-2);
-    box-shadow: 0 0 8px 0 #00000020;
-
-    font-family: var(--font-sf);
-    font-size: 17px;
-    font-weight: var(--font-weight-normal);
-}
-
-input[type='password'] {
-    font-family: caption;
-}
-
-input[type='text']:read-only,
-input[type='password']:read-only {
-    background: var(--text-input-readonly-bg);
-    color: var(--text-input-readonly-fg);
-    box-shadow: 0 0 8px 0 #00000010;
-}
-
-input[type='text'].error,
-input[type='password'].error {
-    background: #faa;
-    color: #311;
-}
-
-/* Compound Controls */
-
-.compound {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    border-radius: 4px;
-    box-shadow: 0 0 8px 0 #00000022;
-
-    border: 1px solid var(--bg-darker-3);
-    background: var(--bg-darker-2);
-    color: var(--fg);
-}
-
-.compound > .divider {
-    height: 2rem;
-    width: 1px;
-
-    background: var(--bg-darker-4);
-}
-
-.compound .icon {
-    width: 2.5rem;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.compound > select {
-    background: none;
-
-    margin-right: 0.25rem;
-}
-
-.compound > button,
-.compound > .button,
-.compound > input,
-.compound > select {
-    border: none;
-    box-shadow: none;
-}
-
-.compound > :not(:first-child) {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-}
-
-.compound > :not(:last-child) {
-    border-right: none;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-}
-
-/* Forms */
-
-form .field {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-}
-
-form .field-set {
-    display: grid;
-    grid-template-columns: auto 1fr;
-    grid-auto-rows: auto;
-
-    gap: 0.5rem 1rem;
-    padding: 1rem;
-}
-
-form .field-set .fill {
-    grid-column: 1 / span 2;
-}
-
-form .field-set label {
-    grid-column: 1 / 2;
-    align-self: center;
-    justify-self: end;
-
-    font-weight: var(--font-weight-medium);
-}
-
-form .field-set input {
-    grid-column: 2 / 3;
-}
-
-/* Pages */
-
-.page-home {
-    /* TODO: Sarebbe meglio se si riuscisse a capire come farlo senza */
-    overflow-x: hidden;
-}
-
-.page-home .nav-logo {
-    display: none;
-}
-
-.page-home .super {
-    position: absolute;
-    left: 50vw;
-    top: 50vh;
-
-    width: 90vw;
-
-    transform: translate(-50%, -50%);
-
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-
-    align-items: center;
-    justify-content: center;
-
-    gap: 2vmin;
-}
-
-.page-home canvas {
-    position: absolute;
-    width: 100vw;
-    height: 100vh;
-    top: 0;
-    right: 0;
-
-    pointer-events: none;
-    z-index: -1;
-
-    transition: opacity 1000ms ease-in-out;
-    opacity: 1;
-}
-
-.page-home canvas.hide {
-    opacity: 0;
-}
-
-.page-home .super .block.text {
-    max-width: 40ch;
-    font-size: 1.25rem;
-}
-
-.page-home .super .block.text h1 {
-    font-weight: var(--font-weight-medium);
-}
-
-.page-home .super .block.text p {
-    font-weight: var(--font-weight-light);
-}
-
-.page-home .super .block.image {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.page-home .super .block.image img {
-    max-width: 80ch;
-    max-height: 50vh;
-    filter: drop-shadow(0 0 64px rgba(0, 0, 0, 0.2)) drop-shadow(0 0 8px rgba(0, 0, 0, 0.35));
-}
-
-.page-home .main {
-    padding-top: calc(100vh - 6rem);
-}
-
-.page-utenti .user-list {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-}
-
-.page-utenti .user-item {
-    flex-direction: row;
-    width: 100%;
-}
-
-.page-utenti .user-item .icon {
-    width: 1.75rem;
-    display: grid;
-    place-content: center;
-}
-
-.page-utenti .spinner {
-    display: flex;
-
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-
-    height: 5rem;
-
-    color: var(--fg);
-
-    animation: rotate 1s linear infinite;
-}
-
-.page-storia .history-container {
-    --bar-size: 6px;
-
-    display: flex;
-    flex-direction: row;
-
-    margin: 5rem 0;
-
-    position: relative;
-}
-
-.page-storia .history-container .timeline-bar {
-    position: absolute;
-
-    top: 0;
-    bottom: 0;
-    left: -2rem;
-    width: var(--bar-size);
-
-    background: var(--bg-darker-4);
-}
-
-.page-storia .history-container .timeline-bar::before {
-    content: '';
-    position: absolute;
-
-    top: -3rem;
-    bottom: -3rem;
-    left: 0;
-    border-left: var(--bar-size) dashed var(--bg-darker-4);
-}
-
-.page-storia .history-container .events {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-}
-
-.page-storia .history-container .events .event::before {
-    --size: 1rem;
-
-    content: '';
-    position: absolute;
-    left: calc(-2rem + var(--bar-size) / 2 - var(--size) / 2);
-    transform: translate(0, 1rem);
-
-    width: var(--size);
-    height: var(--size);
-
-    border-radius: 100%;
-
-    background: var(--bg-darker-4);
-}
-
-.page-storia .history-container .events .event .title {
-    font-size: 22px;
-
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
-}
-
-.page-storia .history-container .events .event .date {
-    color: var(--card-date);
-    font-size: 18px;
-}
-
-.page-storia .history-container .events .spacer {
-    height: calc(var(--size) * 1rem);
-}
-
-@keyframes rotate {
-    0% {
-        transform: rotate(0deg);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
-}
-
-.search {
-    margin: 2rem 0;
-    display: flex;
-    flex-direction: row;
-
-    gap: 1rem;
-}
-
-.search input[type='text'] {
-    width: 50ch;
-    height: 2.5rem;
-}
-
-.search button {
-    width: 2.5rem;
-    height: 2.5rem;
-}
-
-/* Rendered Markdown */
-
-.news-content p {
-    margin: 0.5rem 0;
-}
-
-.news-content {
-    display: block;
-}
-
-.news-content h1 {
-    text-align: center;
-}
-
-.news-content img {
-    display: block;
-    margin: 1rem auto;
-
-    background: var(--bg-dark);
-    border-radius: 4px;
-    border: 1px solid var(--bg-darker-2);
-    box-shadow: 0 2px 8px 0 #00000033;
-}
-
-.news-content .date {
-    font-size: 15px;
-    color: var(--card-date);
-
-    display: flex;
-    justify-content: center;
-}
-
-.news-content .tags,
-.news-content .date {
-    justify-content: center;
-}
-
-.news-content table {
-    margin: 1rem auto;
-}
-
-/* Math */
-
-.katex-display {
-    margin: 1rem 0;
-    font-size: 105%;
-}
-
-/* Tables */
-
-table {
-    border-collapse: collapse;
-}
-
-table td,
-table th {
-    padding: 0.5rem;
-}
-
-table td:not(:first-child),
-table th:not(:first-child) {
-    border-left: 1px solid var(--bg-darker-3);
-}
-
-table td {
-    border-top: 1px solid var(--bg-darker-3);
-}
-
-table tbody tr:hover {
-    background: var(--bg-darker);
-}

public/theme-dark.css

@@ -1,92 +0,0 @@
-body.dark-mode {
-    --bg: #282828;
-    --fg: #a6cc92;
-    /* --fg: #6eac4d; */
-    /* Magari questo: */
-    /* --fg: #a3b09c; */
-
-    --bg-dark: hsl(10, 10%, 20%);
-    --bg-darker: hsl(10, 10%, 17%);
-    --bg-darker-2: #1d2021;
-    --bg-darker-3: #101111;
-
-    --accent-1: #154d24;
-    --accent-1-fg: #278542;
-
-    --card-date: #928374;
-    --card-content: #d4be98;
-
-    --font-sf: 'Inter', sans-serif;
-    --font-weight-light: 300;
-    --font-weight-normal: 400;
-    --font-weight-medium: 500;
-    --font-weight-bold: 700;
-
-    --shadow-1: 0 0 16px 0 #16182077;
-
-    --text-input-bg: var(--bg-darker);
-    --text-input-readonly-bg: hsl(10, 10%, 22%);
-    --text-input-readonly-fg: hsl(10, 10%, 40%);
-
-    --bg-darker-2-1: #c8c8c8;
-    --accent-2-lighter: #5cc969;
-    --accent-2: #4eaa59;
-    --accent-2-darker: #2e974c;
-    --accent-2-darkest: #002d0d;
-}
-
-.dark-mode button {
-    border: 1px solid var(--bg-darker-2);
-    background: var(--bg-darker);
-    color: #afafaf;
-}
-
-.dark-mode button:hover {
-    background: var(--bg-dark);
-}
-
-.dark-mode button.primary {
-    border: 1px solid #113a1c;
-    background: #1e6732;
-    color: #b7e3c3;
-}
-
-.dark-mode button.primary:hover {
-    background: #23773a;
-}
-
-.dark-mode nav .nav-logo img {
-    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.4));
-}
-
-.dark-mode input[type] {
-    background: #4b4342;
-}
-
-.dark-mode input[type='text']:read-only,
-.dark-mode input[type='password']:read-only {
-    background: var(--text-input-readonly-bg);
-    color: var(--text-input-readonly-fg);
-    box-shadow: 0 0 8px 0 #00000010;
-}
-
-.dark-mode input[type='text'].error,
-.dark-mode input[type='password'].error {
-    background: #633;
-    color: #faa;
-}
-
-.dark-mode pre {
-    background: var(--bg-darker);
-    border: 1px solid var(--bg-darker-2);
-}
-
-/* Trick molto molto malvagio per non dover rendere il colorscheme dei blocchi di codice dinamici rispetto alla dark mode */
-.dark-mode pre > code > span {
-    filter: invert(1);
-}
-
-.dark-mode table td,
-.dark-mode table th {
-    border-color: var(--fg);
-}

src/client/Appunti.jsx

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

src/client/ComboBox.tsx

@@ -0,0 +1,66 @@
+import { type ComponentChildren } from 'preact'
+import { useState, useRef, useEffect } from 'preact/hooks'
+import { clsx, isMobile } from './lib/util'
+import { PhosphorIcon } from './Icon'
+
+export const ComboBox = ({
+    value,
+    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> */}
+                <PhosphorIcon name="caret-down" />
+            </div>
+            {open && (
+                <div
+                    class={clsx('dropdown', cloak && 'invisible')}
+                    ref={el => {
+                        if (!el) return
+                        setItemWidth(el.offsetWidth)
+                    }}
+                >
+                    {Object.keys(children).map(key => (
+                        <div
+                            class="option"
+                            onClick={() => {
+                                setValue(key)
+                                setOpen(false)
+                            }}
+                        >
+                            {children[key]}
+                        </div>
+                    ))}
+                </div>
+            )}
+        </div>
+    )
+}

src/client/Counter.jsx

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

src/client/DomandeEsamiCourse.tsx

@@ -0,0 +1,119 @@
+import { useEffect, useState } from 'preact/hooks'
+import { FunnelIcon } from '@phosphor-icons/react'
+import { marked } from 'marked'
+
+import extendedLatex from '@/client/lib/marked-latex'
+
+marked.use(
+    extendedLatex({
+        lazy: false,
+        render: (formula: string, display: boolean) => {
+            return display ? '$$' + formula + '$$' : '$' + formula + '$'
+        },
+    }),
+)
+
+import type { Database } from '@/data/domande-esami.yaml'
+
+const useRemoteValue = <T,>(url: string): T | null => {
+    const [value, setValue] = useState<T | null>(null)
+
+    useEffect(() => {
+        fetch(url)
+            .then(response => response.json())
+            .then(value => setValue(value))
+            .catch(error => console.error(error))
+    }, [url])
+
+    return value
+}
+
+type Props = {
+    course: string
+}
+
+export const DomandeEsamiCourse = ({ course }: Props) => {
+    const database = useRemoteValue<Database>(`/domande-esami/api/${course}.json`)
+    if (!database) {
+        return <>Loading...</>
+    }
+
+    if ('requestIdleCallback' in window) {
+        // @ts-ignore
+        requestIdleCallback(() => window.renderMath())
+    } else {
+        // @ts-ignore
+        setTimeout(() => window.renderMath(), 100)
+    }
+
+    const courseTags = [
+        ...new Set(
+            database.questions.filter(question => question.course === course).flatMap(question => question.tags),
+        ),
+    ]
+
+    const [selectedTag, setSelectedTag] = useState<string | null>(null)
+
+    const filteredQuestions = database.questions
+        .filter(question => question.course === course)
+        .filter(question => (selectedTag ? question.tags.includes(selectedTag) : true))
+
+    return (
+        <>
+            <div class="grid-center text-center">
+                <h3>
+                    <a href="/domande-esami">Domande Orali</a>
+                </h3>
+                <h1>{database.names[course]}</h1>
+            </div>
+
+            {courseTags.length > 1 && (
+                <div class="card filter">
+                    <div class="grid-h">
+                        <FunnelIcon />
+                        <strong>Filtra Tag</strong>
+                    </div>
+                    <div class="flex-row-wrap">
+                        {!selectedTag
+                            ? courseTags.map(tag => (
+                                  <div class="chip clickable" onClick={() => setSelectedTag(tag)}>
+                                      {tag}
+                                  </div>
+                              ))
+                            : courseTags.map(tag => (
+                                  <div
+                                      class={tag === selectedTag ? 'chip clickable' : 'chip clickable disabled'}
+                                      onClick={() => setSelectedTag(tag === selectedTag ? null : tag)}
+                                  >
+                                      {tag}
+                                  </div>
+                              ))}
+                    </div>
+                </div>
+            )}
+            <div class="wide-card-list" id="questions">
+                {filteredQuestions.length === 0 ? (
+                    <div class="grid-center">
+                        <em>No questions found</em>
+                    </div>
+                ) : (
+                    filteredQuestions.map(question => (
+                        <div class="card">
+                            <div
+                                class="text"
+                                dangerouslySetInnerHTML={{
+                                    __html: marked(question.content, { async: false }),
+                                }}
+                            />
+                            <div class="metadata">
+                                {question.tags.map(tag => (
+                                    <div class="chip small">{tag}</div>
+                                ))}
+                            </div>
+                        </div>
+                    ))
+                )}
+            </div>
+        </>
+    )
+}

src/client/Icon.tsx

@@ -0,0 +1,21 @@
+const icons = Object.fromEntries(
+    Object.entries(
+        import.meta.glob<{ default: ImageMetadata }>(`node_modules/@phosphor-icons/core/assets/light/*.svg`, {
+            eager: true,
+        }),
+    ).map(([path, module]) => [path.split('/').pop()!.split('.')[0].replace('-light', ''), module]),
+)
+
+type Props = {
+    name: string
+}
+
+export const PhosphorIcon = ({ name }: Props) => {
+    const icon = icons[name]
+
+    if (!icon) {
+        throw new Error(`Icon "${name}" not found`)
+    }
+
+    return <img class="phosphor-icon" src={icon.default.src} alt={name} />
+}

src/client/MediaPesataApp.tsx

@@ -0,0 +1,765 @@
+import { useState, useEffect } from 'preact/hooks'
+
+// Tipi per la gestione dei dati
+type TipoStudente = 'triennale' | 'magistrale'
+
+interface Corso {
+    nome: string
+    anno: '1' | '2' | '3' | 'M' | 'istituzioni'
+    cfu: number
+    passFailOnly?: boolean // Per materie senza voto (pass/fail)
+}
+
+interface CorsoSelezionato {
+    id: string
+    nome: string
+    cfu: number
+    voto: number | null
+    lode: boolean
+    passFailOnly?: boolean // Per materie senza voto (pass/fail)
+}
+
+interface CorsoCustom {
+    nome: string
+    cfu: number
+}
+
+// Dati dei corsi aggiornati dalla tabella ufficiale
+const CORSI_DISPONIBILI: Corso[] = [
+    // Primo Anno
+    { nome: 'Analisi matematica 1', anno: '1', cfu: 15 },
+    { nome: 'Aritmetica', anno: '1', cfu: 9 },
+    { nome: 'Fisica I con laboratorio', anno: '1', cfu: 9 },
+    { nome: 'Fondamenti di programmazione con laboratorio', anno: '1', cfu: 9 },
+    { nome: 'Geometria 1', anno: '1', cfu: 15 },
+    { nome: 'Laboratorio di introduzione alla matematica computazionale', anno: '1', cfu: 6, passFailOnly: true },
+    { nome: 'Laboratorio di comunicazione mediante calcolatore', anno: '1', cfu: 3, passFailOnly: true },
+
+    // Secondo Anno
+    { nome: 'Algebra 1', anno: '2', cfu: 6 },
+    { nome: 'Algoritmi e strutture dati', anno: '2', cfu: 6 },
+    { nome: 'Analisi matematica 2', anno: '2', cfu: 12 },
+    { nome: 'Analisi numerica con laboratorio', anno: '2', cfu: 9 },
+    { nome: 'Elementi di probabilità e statistica', anno: '2', cfu: 6 },
+    { nome: 'Geometria 2', anno: '2', cfu: 12 },
+    { nome: 'Inglese scientifico', anno: '2', cfu: 6, passFailOnly: true },
+    { nome: 'Laboratorio didattico di matematica computazionale', anno: '2', cfu: 3, passFailOnly: true },
+
+    // Terzo Anno
+    { nome: 'Algebra 2', anno: '3', cfu: 6 },
+    { nome: 'Analisi matematica 3', anno: '3', cfu: 6 },
+    { nome: 'Analisi reale', anno: '3', cfu: 6 },
+    { nome: 'Calcolo scientifico', anno: '3', cfu: 6 },
+    { nome: 'Elementi di analisi complessa', anno: '3', cfu: 6 },
+    { nome: 'Elementi di calcolo delle variazioni', anno: '3', cfu: 6 },
+    { nome: 'Elementi di geometria algebrica', anno: '3', cfu: 6 },
+    { nome: 'Elementi di meccanica celeste', anno: '3', cfu: 6 },
+    { nome: 'Elementi di teoria degli insiemi', anno: '3', cfu: 6 },
+    { nome: 'Elementi di teoria delle rappresentazioni', anno: '3', cfu: 6 },
+    { nome: 'Elementi di topologia algebrica', anno: '3', cfu: 6 },
+    { nome: 'Equazioni alle derivate parziali', anno: '3', cfu: 6 },
+    { nome: 'Fisica II', anno: '3', cfu: 9 },
+    { nome: 'Fisica III', anno: '3', cfu: 6 },
+    { nome: 'Geometria e topologia differenziale', anno: '3', cfu: 6 },
+    { nome: 'Gruppi e rappresentazioni', anno: '3', cfu: 6 },
+    { nome: 'Laboratorio computazionale', anno: '3', cfu: 6, passFailOnly: true },
+    { nome: 'Laboratorio sperimentale di matematica computazionale', anno: '3', cfu: 6, passFailOnly: true },
+    { nome: 'Linguaggi di programmazione con laboratorio', anno: '3', cfu: 9 },
+    { nome: 'Logica matematica', anno: '3', cfu: 6 },
+    { nome: 'Matematiche elementari da un punto di vista superiore: aritmetica', anno: '3', cfu: 6 },
+    { nome: 'Matematiche elementari da un punto di vista superiore: geometria', anno: '3', cfu: 6 },
+    { nome: 'Meccanica razionale', anno: '3', cfu: 6 },
+    { nome: 'Metodi numerici per equazioni differenziali ordinarie', anno: '3', cfu: 6 },
+    { nome: 'Metodi topologici in analisi globale', anno: '3', cfu: 6 },
+    { nome: 'Ottimizzazione non lineare', anno: '3', cfu: 6 },
+    { nome: 'Probabilità', anno: '3', cfu: 6 },
+    { nome: 'Ricerca operativa', anno: '3', cfu: 6 },
+    { nome: 'Sistemi dinamici', anno: '3', cfu: 6 },
+    { nome: 'Spazi di Sobolev', anno: '3', cfu: 6 },
+    { nome: 'Statistica matematica', anno: '3', cfu: 6 },
+    { nome: 'Storia della matematica', anno: '3', cfu: 6 },
+    { nome: 'Teoria algebrica dei numeri 1', anno: '3', cfu: 6 },
+    { nome: 'Teoria dei campi e teoria di Galois', anno: '3', cfu: 6 },
+    { nome: 'Teoria dei numeri elementare', anno: '3', cfu: 6 },
+    { nome: 'Teoria della misura', anno: '3', cfu: 6 },
+
+    // Istituzioni (Magistrale)
+    { nome: 'Istituzioni di algebra', anno: 'istituzioni', cfu: 11 },
+    { nome: 'Istituzioni di analisi matematica', anno: 'istituzioni', cfu: 11 },
+    { nome: 'Istituzioni di analisi numerica', anno: 'istituzioni', cfu: 11 },
+    { nome: 'Istituzioni di didattica della matematica', anno: 'istituzioni', cfu: 11 },
+    { nome: 'Istituzioni di fisica matematica', anno: 'istituzioni', cfu: 11 },
+    { nome: 'Istituzioni di geometria', anno: 'istituzioni', cfu: 11 },
+    { nome: 'Istituzioni di probabilità', anno: 'istituzioni', cfu: 11 },
+
+    // Materie a scelta (Magistrale)
+    { nome: '4-varietà', anno: 'M', cfu: 6 },
+    { nome: 'Algebra superiore A', anno: 'M', cfu: 6 },
+    { nome: 'Algebre e gruppi di Lie', anno: 'M', cfu: 6 },
+    { nome: 'Analisi armonica', anno: 'M', cfu: 6 },
+    { nome: 'Analisi complessa A', anno: 'M', cfu: 6 },
+    { nome: 'Analisi complessa B', anno: 'M', cfu: 6 },
+    { nome: 'Analisi convessa', anno: 'M', cfu: 6 },
+    { nome: 'Analisi dei dati', anno: 'M', cfu: 6 },
+    { nome: 'Analisi non standard', anno: 'M', cfu: 6 },
+    { nome: 'Analisi reale', anno: 'M', cfu: 6 },
+    { nome: 'Analisi su spazi gaussiani', anno: 'M', cfu: 6 },
+    { nome: 'Analisi superiore', anno: 'M', cfu: 6 },
+    { nome: 'Analisi superiore A', anno: 'M', cfu: 6 },
+    { nome: 'Analisi superiore B', anno: 'M', cfu: 6 },
+    { nome: 'Aspetti matematici nella computazione quantistica', anno: 'M', cfu: 6 },
+    { nome: 'Calcolo delle variazioni B', anno: 'M', cfu: 6 },
+    { nome: 'Calcolo della variazioni A', anno: 'M', cfu: 6 }, // Variante nome
+    { nome: 'Combinatoria algebrica', anno: 'M', cfu: 6 },
+    { nome: 'Complementi di analisi funzionale', anno: 'M', cfu: 6 },
+    { nome: 'Complementi di meccanica razionale', anno: 'M', cfu: 6 },
+    { nome: 'Crittografia post-quantistica', anno: 'M', cfu: 6 },
+    { nome: 'Curve ellittiche', anno: 'M', cfu: 6 },
+    { nome: 'Determinazione orbitale', anno: 'M', cfu: 6 },
+    { nome: 'Didattica della matematica e nuove tecnologie', anno: 'M', cfu: 6 },
+    { nome: 'Dinamica del sistema solare', anno: 'M', cfu: 6 },
+    { nome: 'Dinamica iperbolica', anno: 'M', cfu: 6 },
+    { nome: 'Dinamica olomorfa', anno: 'M', cfu: 6 },
+    { nome: 'Elementi di calcolo in gruppi omogenei', anno: 'M', cfu: 6 },
+    { nome: 'Equazioni della fluidodinamica', anno: 'M', cfu: 6 },
+    { nome: 'Equazioni differenziali stocastiche e applicazioni', anno: 'M', cfu: 6 },
+    { nome: 'Equazioni ellittiche', anno: 'M', cfu: 6 },
+    { nome: 'Finanza matematica', anno: 'M', cfu: 6 },
+    { nome: 'Fisica matematica', anno: 'M', cfu: 6 },
+    { nome: 'Forme modulari', anno: 'M', cfu: 6 },
+    { nome: 'Geometria algebrica B', anno: 'M', cfu: 6 },
+    { nome: 'Geometria algebrica C', anno: 'M', cfu: 6 },
+    { nome: 'Geometria algebrica complessa', anno: 'M', cfu: 6 },
+    { nome: 'Geometria algebrica D', anno: 'M', cfu: 6 },
+    { nome: 'Geometria algebrica E', anno: 'M', cfu: 6 },
+    { nome: 'Geometria algebrica F', anno: 'M', cfu: 6 },
+    { nome: 'Geometria algebrica G', anno: 'M', cfu: 6 },
+    { nome: 'Geometria e analisi complessa', anno: 'M', cfu: 6 },
+    { nome: 'Geometria differenziale complessa', anno: 'M', cfu: 6 },
+    { nome: 'Geometria iperbolica', anno: 'M', cfu: 6 },
+    { nome: 'Geometria riemanniana', anno: 'M', cfu: 6 },
+    { nome: 'Gruppi algebrici lineari', anno: 'M', cfu: 6 },
+    { nome: 'Gruppi di Coxeter', anno: 'M', cfu: 6 },
+    { nome: 'Gruppi di Galois e gruppi fondamentali', anno: 'M', cfu: 6 },
+    { nome: 'Meccanica celeste', anno: 'M', cfu: 6 },
+    { nome: 'Meccanica spaziale', anno: 'M', cfu: 6 },
+    { nome: 'Meccanica superiore', anno: 'M', cfu: 6 },
+    { nome: 'Metodi di analisi armonica in analisi non lineare', anno: 'M', cfu: 6 },
+    { nome: 'Metodi di approssimazione', anno: 'M', cfu: 6 },
+    { nome: 'Metodi matematici della crittografia', anno: 'M', cfu: 6 },
+    { nome: 'Metodi matematici della meccanica quantistica', anno: 'M', cfu: 6 },
+    { nome: 'Metodi numerici per catene di Markov', anno: 'M', cfu: 6 },
+    { nome: 'Metodi numerici per equazioni alle derivate parziali', anno: 'M', cfu: 6 },
+    { nome: 'Metodi numerici per il calcolo tensoriale', anno: 'M', cfu: 6 },
+    { nome: 'Metodi numerici per il controllo ottimo', anno: 'M', cfu: 6 },
+    { nome: 'Metodi numerici per la grafica', anno: 'M', cfu: 6 },
+    { nome: 'Metodi numerici per problemi inversi', anno: 'M', cfu: 6 },
+    { nome: "Metodi probabilistici per l'algebra lineare numerica", anno: 'M', cfu: 6 },
+    { nome: 'Modelli matematici in biomedicina e fisica matematica', anno: 'M', cfu: 6 },
+    { nome: 'Origini e sviluppo delle matematiche moderne', anno: 'M', cfu: 6 },
+    { nome: 'Probabilità superiore', anno: 'M', cfu: 6 },
+    { nome: 'Problemi e metodi della ricerca in didattica della matematica', anno: 'M', cfu: 6 },
+    { nome: 'Problemi e metodi in storia della matematica', anno: 'M', cfu: 6 },
+    { nome: 'Sistemi dinamici aleatori', anno: 'M', cfu: 6 },
+    { nome: 'Statistica superiore', anno: 'M', cfu: 6 },
+    { nome: 'Storia della matematica antica e della sua tradizione', anno: 'M', cfu: 6 },
+    { nome: 'Superfici di Riemann e curve algebriche', anno: 'M', cfu: 6 },
+    { nome: 'Tecnologie per la didattica', anno: 'M', cfu: 6 },
+    { nome: 'Teoria algebrica dei numeri 2', anno: 'M', cfu: 6 },
+    { nome: 'Teoria analitica dei numeri A', anno: 'M', cfu: 6 },
+    { nome: 'Teoria dei giochi', anno: 'M', cfu: 6 },
+    { nome: 'Teoria dei modelli', anno: 'M', cfu: 6 },
+    { nome: 'Teoria dei nodi A', anno: 'M', cfu: 6 },
+    { nome: 'Teoria degli insiemi', anno: 'M', cfu: 6 },
+    { nome: 'Teoria degli insiemi A', anno: 'M', cfu: 6 },
+    { nome: 'Teoria degli insiemi B', anno: 'M', cfu: 6 },
+    { nome: 'Teoria delle categorie', anno: 'M', cfu: 6 },
+    { nome: 'Teoria delle rappresentazioni A', anno: 'M', cfu: 6 },
+    { nome: "Teoria e metodi dell'ottimizzazione", anno: 'M', cfu: 6 },
+    { nome: 'Teoria ergodica', anno: 'M', cfu: 6 },
+    { nome: 'Teoria geometrica della misura', anno: 'M', cfu: 6 },
+    { nome: 'Topologia algebrica', anno: 'M', cfu: 6 },
+    { nome: 'Topologia algebrica A', anno: 'M', cfu: 6 },
+    { nome: 'Topologia algebrica B', anno: 'M', cfu: 6 },
+    { nome: 'Topologia differenziale', anno: 'M', cfu: 6 },
+    { nome: 'Topologia e geometria in bassa dimensione', anno: 'M', cfu: 6 },
+    { nome: 'Ultrafiltri e metodi non-standard', anno: 'M', cfu: 6 },
+]
+
+export function MediaPesataApp() {
+    // Funzioni per localStorage
+    const loadFromStorage = () => {
+        try {
+            const savedData = localStorage.getItem('media-pesata-data')
+            if (savedData) {
+                const parsed = JSON.parse(savedData)
+                return {
+                    tipoStudente: parsed.tipoStudente || 'triennale',
+                    corsiSelezionati: parsed.corsiSelezionati || [],
+                    sezioniAperte: parsed.sezioniAperte || {},
+                    mostraRisultati: parsed.mostraRisultati || false,
+                }
+            }
+        } catch (error) {
+            console.warn('Errore nel caricamento dei dati salvati:', error)
+        }
+        return {
+            tipoStudente: 'triennale' as TipoStudente,
+            corsiSelezionati: [],
+            sezioniAperte: {},
+            mostraRisultati: false,
+        }
+    }
+
+    const saveToStorage = (data: any) => {
+        try {
+            localStorage.setItem('media-pesata-data', JSON.stringify(data))
+        } catch (error) {
+            console.warn('Errore nel salvataggio dei dati:', error)
+        }
+    }
+
+    // Inizializzazione con dati salvati
+    // const initialData = loadFromStorage()
+    const [tipoStudente, setTipoStudente] = useState<TipoStudente>('triennale')
+    const [corsiSelezionati, setCorsiSelezionati] = useState<CorsoSelezionato[]>([])
+    const [showCustomForm, setShowCustomForm] = useState(false)
+    const [customCorso, setCustomCorso] = useState<CorsoCustom>({ nome: '', cfu: 0 })
+    const [sezioniAperte, setSezioniAperte] = useState<Record<string, boolean>>({})
+    const [mostraRisultati, setMostraRisultati] = useState(false)
+
+    // Load data from localStorage on mount
+    useEffect(() => {
+        const initialData = loadFromStorage()
+        setTipoStudente(initialData.tipoStudente)
+        setCorsiSelezionati(initialData.corsiSelezionati)
+        setSezioniAperte(initialData.sezioniAperte)
+        setMostraRisultati(initialData.mostraRisultati)
+    }, [])
+
+    // Salva automaticamente quando cambiano i dati importanti
+    useEffect(() => {
+        const dataToSave = {
+            tipoStudente,
+            corsiSelezionati,
+            sezioniAperte,
+            mostraRisultati,
+        }
+        saveToStorage(dataToSave)
+    }, [tipoStudente, corsiSelezionati, sezioniAperte, mostraRisultati])
+
+    const toggleSezione = (nomeSezione: string) => {
+        setSezioniAperte(prev => ({
+            ...prev,
+            [nomeSezione]: !prev[nomeSezione],
+        }))
+    }
+
+    const calcolaMedia = () => {
+        const corsiConVoto = corsiSelezionati.filter(corso => corso.voto !== null && !corso.passFailOnly)
+        if (corsiConVoto.length === 0) {
+            alert('Inserisci almeno un voto per calcolare la media!')
+            return
+        }
+        setMostraRisultati(true)
+    }
+
+    // Funzioni per la gestione dei corsi
+    const aggiungiCorso = (corso: Corso) => {
+        // Controlla se la materia esiste già
+        const materiaEsiste = corsiSelezionati.some(c => c.nome.toLowerCase() === corso.nome.toLowerCase())
+        if (materiaEsiste) {
+            alert('Questa materia è già stata aggiunta')
+            return
+        }
+
+        // Controllo per magistrali: massimo 3 istituzioni
+        if (tipoStudente === 'magistrale' && corso.anno === 'istituzioni') {
+            const istituzioniAttuali = corsiSelezionati.filter(c => c.nome.toLowerCase().includes('istituzioni')).length
+            if (istituzioniAttuali >= 3) {
+                alert('Puoi selezionare al massimo 3 istituzioni per la magistrale')
+                return
+            }
+        }
+
+        const id = Date.now().toString()
+        const nuovoCorso: CorsoSelezionato = {
+            id,
+            nome: corso.nome,
+            cfu: corso.cfu,
+            voto: null,
+            lode: false,
+            passFailOnly: corso.passFailOnly,
+        }
+        setCorsiSelezionati([...corsiSelezionati, nuovoCorso])
+    }
+
+    const aggiungiCorsoCustom = () => {
+        // Validazioni
+        if (!customCorso.nome.trim()) {
+            alert('Il nome della materia non può essere vuoto')
+            return
+        }
+        if (customCorso.cfu <= 0 || customCorso.cfu > 30) {
+            alert('I CFU devono essere tra 1 e 30')
+            return
+        }
+        if (!Number.isInteger(customCorso.cfu)) {
+            alert('I CFU devono essere un numero intero')
+            return
+        }
+
+        // Controlla se la materia esiste già
+        const materiaEsiste = corsiSelezionati.some(
+            corso => corso.nome.toLowerCase().trim() === customCorso.nome.toLowerCase().trim(),
+        )
+        if (materiaEsiste) {
+            alert('Questa materia è già stata aggiunta')
+            return
+        }
+
+        const id = Date.now().toString()
+        const nuovoCorso: CorsoSelezionato = {
+            id,
+            nome: customCorso.nome.trim(),
+            cfu: customCorso.cfu,
+            voto: null,
+            lode: false,
+        }
+        setCorsiSelezionati([...corsiSelezionati, nuovoCorso])
+        setCustomCorso({ nome: '', cfu: 0 })
+        setShowCustomForm(false)
+    }
+
+    const rimuoviCorso = (id: string) => {
+        setCorsiSelezionati(corsiSelezionati.filter(corso => corso.id !== id))
+    }
+
+    const aggiornaVoto = (id: string, voto: number | null) => {
+        // Validazione voto: deve essere tra 18 e 30 e intero
+        if (voto !== null && (voto < 18 || voto > 30 || !Number.isInteger(voto))) {
+            return // Ignora valori non validi
+        }
+
+        setCorsiSelezionati(
+            corsiSelezionati.map(corso =>
+                corso.id === id ? { ...corso, voto, lode: voto !== 30 ? false : corso.lode } : corso,
+            ),
+        )
+    }
+
+    const aggiornaLode = (id: string, lode: boolean) => {
+        setCorsiSelezionati(corsiSelezionati.map(corso => (corso.id === id ? { ...corso, lode } : corso)))
+    }
+
+    const resetTutto = () => {
+        if (corsiSelezionati.length > 0) {
+            if (confirm('Sei sicuro di voler cancellare tutte le materie selezionate?')) {
+                setCorsiSelezionati([])
+                setCustomCorso({ nome: '', cfu: 0 })
+                setShowCustomForm(false)
+                setSezioniAperte({})
+                setMostraRisultati(false)
+                // Pulisce anche il localStorage
+                try {
+                    localStorage.removeItem('media-pesata-data')
+                } catch (error) {
+                    console.warn('Errore nella pulizia del localStorage:', error)
+                }
+            }
+        }
+    }
+
+    // Calcoli della media pesata
+    const calcolaMediaPesata = () => {
+        // Escludi le materie pass/fail dal calcolo
+        const corsiConVoto = corsiSelezionati.filter(corso => corso.voto !== null && !corso.passFailOnly)
+        if (corsiConVoto.length === 0) {
+            return {
+                mediaPesata: 0,
+                votoAmmissione: 0,
+                massimoVotoLaurea: 0,
+                conLode: false,
+                bonusLodi: 0,
+                errore: 'Nessun voto inserito per il calcolo della media',
+            }
+        }
+
+        // Calcola CFU totali con voto
+        const cfuTotaliConVoto = corsiConVoto.reduce((sum, corso) => sum + corso.cfu, 0)
+        const cfuDaEscludere = tipoStudente === 'triennale' ? 15 : 9
+
+        // Se i CFU sono insufficienti per l'esclusione, avvisa l'utente
+        if (cfuTotaliConVoto < cfuDaEscludere) {
+            return {
+                mediaPesata: 0,
+                votoAmmissione: 0,
+                massimoVotoLaurea: 0,
+                conLode: false,
+                bonusLodi: 0,
+                errore: `Hai inserito solo ${cfuTotaliConVoto} CFU con voto. Servono almeno ${cfuDaEscludere} CFU per applicare le regole di esclusione.`,
+            }
+        }
+
+        // Ordina per voto crescente
+        const corsiOrdinati = [...corsiConVoto].sort((a, b) => a.voto! - b.voto!)
+
+        let cfuEsclusi = 0
+        const corsiValidi: CorsoSelezionato[] = []
+
+        for (const corso of corsiOrdinati) {
+            if (cfuEsclusi < cfuDaEscludere) {
+                const cfuRimanentiDaEscludere = cfuDaEscludere - cfuEsclusi
+                if (corso.cfu <= cfuRimanentiDaEscludere) {
+                    // Escludi tutto il corso
+                    cfuEsclusi += corso.cfu
+                } else {
+                    // Escludi solo una parte del corso
+                    const cfuValidi = corso.cfu - cfuRimanentiDaEscludere
+                    corsiValidi.push({ ...corso, cfu: cfuValidi })
+                    cfuEsclusi = cfuDaEscludere
+                }
+            } else {
+                corsiValidi.push(corso)
+            }
+        }
+
+        // Calcola media pesata
+        const sommaPesata = corsiValidi.reduce((sum, corso) => sum + corso.voto! * corso.cfu, 0)
+        const sommaCfu = corsiValidi.reduce((sum, corso) => sum + corso.cfu, 0)
+
+        const mediaPesata = sommaCfu > 0 ? sommaPesata / sommaCfu : 0
+
+        // Calcola bonus lodi
+        const bonusLodi = corsiConVoto.reduce((bonus, corso) => {
+            if (corso.lode) {
+                return bonus + (corso.cfu > 6 ? 0.5 : 0.25)
+            }
+            return bonus
+        }, 0)
+
+        // Cap del bonus lodi basato sul tipo di studente
+        const capBonusLodi = tipoStudente === 'triennale' ? 1.5 : 2
+        const bonusLodiFinal = Math.min(bonusLodi, capBonusLodi)
+
+        // Voto di ammissione alla laurea (media pesata * 11/3)
+        const votoAmmissione = (mediaPesata * 11) / 3
+
+        // Voto di ammissione finale = voto ammissione + bonus lodi
+        const votoAmmissioneFinale = votoAmmissione + bonusLodiFinal
+
+        // Massimo voto di laurea possibile = voto ammissione + 10 (cappato a 110)
+        const massimoVotoLaurea = Math.min(votoAmmissioneFinale + 10, 110)
+        const conLode = massimoVotoLaurea === 110
+
+        return {
+            mediaPesata: Math.round(mediaPesata * 100) / 100,
+            votoAmmissione: Math.round(votoAmmissioneFinale * 100) / 100,
+            massimoVotoLaurea: Math.round(massimoVotoLaurea * 100) / 100,
+            conLode,
+            bonusLodi: Math.round(bonusLodiFinal * 100) / 100,
+            errore: null,
+        }
+    }
+
+    // Filtra corsi disponibili in base al tipo di studente
+    const getCorsiDisponibili = () => {
+        if (tipoStudente === 'triennale') {
+            return CORSI_DISPONIBILI.filter(corso => corso.anno !== 'istituzioni')
+        } else {
+            return CORSI_DISPONIBILI.filter(
+                corso => corso.anno === 'istituzioni' || corso.anno === '3' || corso.anno === 'M',
+            )
+        }
+    }
+
+    // Raggruppa corsi per categoria
+    const raggruppaCorsi = () => {
+        const corsi = getCorsiDisponibili()
+        const gruppi: Record<string, Corso[]> = {}
+
+        if (tipoStudente === 'triennale') {
+            gruppi['Primo Anno'] = corsi.filter(c => c.anno === '1')
+            gruppi['Secondo Anno'] = corsi.filter(c => c.anno === '2')
+            gruppi['Terzo Anno'] = corsi.filter(c => c.anno === '3')
+            gruppi['Materie a Scelta'] = corsi.filter(c => c.anno === 'M')
+        } else {
+            // Per magistrali: prima le istituzioni, poi tutto il resto come "Materie a Scelta"
+            gruppi['Istituzioni'] = corsi.filter(c => c.anno === 'istituzioni')
+            gruppi['Materie a Scelta'] = corsi.filter(c => c.anno === '3' || c.anno === 'M')
+        }
+
+        return gruppi
+    }
+
+    const cambiaTipoStudente = (nuovoTipo: TipoStudente) => {
+        setTipoStudente(nuovoTipo)
+    }
+
+    const gruppiCorsi = raggruppaCorsi()
+    const risultati = calcolaMediaPesata()
+    const totaleCfu = corsiSelezionati.reduce((sum, corso) => sum + corso.cfu, 0)
+    const maxCfu = tipoStudente === 'triennale' ? 171 : 93 // 180 − 9 e 120 − 27 per la tesi
+    const cfuError = totaleCfu > maxCfu
+
+    return (
+        <div class="media-pesata-app">
+            {/* Selezione tipo studente */}
+            <div class="card student-type-switcher wide">
+                <div class="grid-center">
+                    <h2>Corso di Laurea</h2>
+                    <div class="compound-button">
+                        <button
+                            class={tipoStudente === 'triennale' ? 'active' : ''}
+                            onClick={() => cambiaTipoStudente('triennale')}
+                        >
+                            Triennale
+                        </button>
+                        <button
+                            class={tipoStudente === 'magistrale' ? 'active' : ''}
+                            onClick={() => cambiaTipoStudente('magistrale')}
+                        >
+                            Magistrale
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            {/* Counter CFU */}
+            <div class={`cfu-counter wide ${cfuError ? 'error' : ''}`}>
+                <h3>
+                    CFU Totali: {totaleCfu}/{maxCfu}
+                    {tipoStudente === 'triennale' ? ' (+9 tesi)' : ' (+27 tesi)'}
+                </h3>
+                {cfuError && <p class="error-text">⚠️ Hai superato il limite di CFU consentiti!</p>}
+            </div>
+
+            {/* Sezione selezione corsi */}
+            <div class="card">
+                <div class="title">
+                    <h2>Seleziona Materie</h2>
+                </div>
+
+                {Object.entries(gruppiCorsi).map(([categoria, corsi]) => (
+                    <div key={categoria} class="course-category">
+                        <button onClick={() => toggleSezione(categoria)}>
+                            <div class="h-flex">
+                                {categoria}
+                                <div class="spacer"></div>
+                                <span class={`toggle-icon ${sezioniAperte[categoria] ? 'expanded' : ''}`}>▶</span>
+                            </div>
+                        </button>
+
+                        {sezioniAperte[categoria] && (
+                            <div class="course-grid">
+                                {corsi.map((corso, index) => (
+                                    <button
+                                        key={index}
+                                        class="course-button"
+                                        onClick={() => aggiungiCorso(corso)}
+                                        disabled={corsiSelezionati.some(c => c.nome === corso.nome)}
+                                    >
+                                        <span class="course-name">{corso.nome}</span>
+                                        <span class="course-cfu">{corso.cfu} CFU</span>
+                                    </button>
+                                ))}
+                            </div>
+                        )}
+                    </div>
+                ))}
+
+                {/* Form per materia custom */}
+                <div class="custom-course">
+                    <h3>Materia Personalizzata</h3>
+                    {!showCustomForm ? (
+                        <button onClick={() => setShowCustomForm(true)}>+ Aggiungi Materia Personalizzata</button>
+                    ) : (
+                        <div class="custom-form">
+                            <input
+                                type="text"
+                                placeholder="Nome materia"
+                                value={customCorso.nome}
+                                onChange={e =>
+                                    setCustomCorso({ ...customCorso, nome: (e.target as HTMLInputElement).value })
+                                }
+                            />
+                            <input
+                                type="number"
+                                placeholder="CFU"
+                                min="1"
+                                max="30"
+                                step="1"
+                                value={customCorso.cfu || ''}
+                                onChange={e =>
+                                    setCustomCorso({
+                                        ...customCorso,
+                                        cfu: parseInt((e.target as HTMLInputElement).value) || 0,
+                                    })
+                                }
+                            />
+                            <button onClick={aggiungiCorsoCustom}>Aggiungi</button>
+                            <button onClick={() => setShowCustomForm(false)}>Annulla</button>
+                        </div>
+                    )}
+                </div>
+            </div>
+
+            {/* Sezione lista corsi selezionati */}
+            <div class="card">
+                <div class="h-flex">
+                    <div class="title">
+                        <h2>Materie Selezionate</h2>
+                    </div>
+                    <div class="spacer"></div>
+                    {corsiSelezionati.length > 0 && <button onClick={resetTutto}>🗑️ Cancella Tutto</button>}
+                </div>
+
+                {corsiSelezionati.length === 0 ? (
+                    <p>Nessuna materia selezionata</p>
+                ) : (
+                    <div class="courses-list">
+                        {corsiSelezionati.map(corso => (
+                            <div key={corso.id} class="course-item">
+                                <span class="course-name">{corso.nome}</span>
+                                <span class="course-cfu">{corso.cfu} CFU</span>
+
+                                {!corso.passFailOnly && (
+                                    <div class="course-grade tall">
+                                        <input
+                                            type="number"
+                                            placeholder="Voto"
+                                            min="18"
+                                            max="30"
+                                            step="1"
+                                            value={corso.voto || ''}
+                                            onChange={e =>
+                                                aggiornaVoto(
+                                                    corso.id,
+                                                    parseInt((e.target as HTMLInputElement).value) || null,
+                                                )
+                                            }
+                                        />
+
+                                        <label class={`lode-checkbox ${corso.voto !== 30 ? 'disabled' : ''}`}>
+                                            <input
+                                                class="star"
+                                                type="checkbox"
+                                                checked={corso.lode}
+                                                disabled={corso.voto !== 30}
+                                                onChange={e =>
+                                                    aggiornaLode(corso.id, (e.target as HTMLInputElement).checked)
+                                                }
+                                            />
+                                            Lode
+                                        </label>
+                                    </div>
+                                )}
+
+                                <div class="actions tall">
+                                    <button
+                                        class="icon remove-btn"
+                                        onClick={() => rimuoviCorso(corso.id)}
+                                        title="Rimuovi materia"
+                                    >
+                                        ×
+                                    </button>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                )}
+            </div>
+
+            {/* Pulsante Calcola */}
+            {corsiSelezionati.length > 0 && (
+                <div class="calculate-section wide">
+                    <button onClick={calcolaMedia}>🧮 Calcola Media e Voto di Laurea</button>
+                </div>
+            )}
+
+            {/* Risultati */}
+            {risultati && mostraRisultati && (
+                <div class="results wide">
+                    <h2>Risultati</h2>
+                    {risultati.errore ? (
+                        <div class="error-message">
+                            <p>⚠️ {risultati.errore}</p>
+                        </div>
+                    ) : (
+                        <div class="results-grid">
+                            <div class="result-item">
+                                <span class="label">Media Pesata:</span>
+                                <span class="value">{risultati.mediaPesata}</span>
+                            </div>
+                            <div class="result-item">
+                                <span class="label">Bonus Lodi:</span>
+                                <span class="value">+{risultati.bonusLodi}</span>
+                            </div>
+                            <div class="result-item highlight">
+                                <span class="label">Voto di Ammissione:</span>
+                                <span class="value">{risultati.votoAmmissione}</span>
+                            </div>
+                            <div class="result-item highlight">
+                                <span class="label">Massimo Voto Di Laurea Possibile:</span>
+                                <span class="value">
+                                    {risultati.massimoVotoLaurea}
+                                    {risultati.conLode && <span class="lode-badge">(+lode)</span>}
+                                </span>
+                            </div>
+                        </div>
+                    )}
+                </div>
+            )}
+
+            {/* Nota informativa */}
+            <div class="card wide">
+                <h3>📋 Come viene calcolata la media</h3>
+                <div class="info-content">
+                    <h4>Regole di esclusione CFU:</h4>
+                    <ul>
+                        <li>
+                            <strong>Triennale:</strong> I 15 CFU con i voti più bassi vengono esclusi dalla media
+                        </li>
+                        <li>
+                            <strong>Magistrale:</strong> I 9 CFU con i voti più bassi vengono esclusi dalla media
+                        </li>
+                        <li>Se un corso ha più CFU di quelli da escludere, viene diviso proporzionalmente</li>
+                    </ul>
+
+                    <h4>Calcolo del voto finale:</h4>
+                    <ul>
+                        <li>
+                            <strong>Media pesata:</strong> Somma dei (voto × CFU) diviso per i CFU totali
+                        </li>
+                        <li>
+                            <strong>Bonus lodi:</strong> +0.5 per lodi in materie &gt; 6 CFU, +0.25 per lodi in materie
+                            ≤ 6 CFU (max +1.5 per triennale, max +2 per magistrale)
+                        </li>
+                        <li>
+                            <strong>Voto di laurea:</strong> (Voto finale × 11) ÷ 3
+                        </li>
+                    </ul>
+
+                    <h4>Note:</h4>
+                    <ul>
+                        <li>
+                            Le materie <strong>Pass/Fail</strong> non contribuiscono al calcolo della media
+                        </li>
+                        <li>Il voto finale è limitato a 30</li>
+                        <li>Per i magistrali: massimo 3 istituzioni selezionabili</li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+// Funzione per inizializzare l'app
+// export function initMediaPesataApp() {
+//     const container = document.getElementById('media-pesata-app')
+//     if (container) {
+//         render(<MediaPesataApp />, container)
+//     }
+// }
+
+// export default MediaPesataApp

src/client/Paginate.tsx

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

src/client/UtentiPage.tsx

@@ -0,0 +1,166 @@
+import { useComputed, useSignal } from '@preact/signals'
+import Fuse from 'fuse.js'
+import { useEffect } from 'preact/hooks'
+import { ShowMore } from './Paginate'
+import { ComboBox } from './ComboBox'
+import { PhosphorIcon } from './Icon'
+
+type User = {
+    uid: string
+    gecos: string
+}
+
+const FILTERS = {
+    utenti: {
+        icon: 'user',
+        label: 'Utenti',
+    },
+    macchinisti: {
+        icon: 'wrench',
+        label: 'Macchinisti',
+    },
+    rappstud: {
+        icon: 'bank',
+        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} */}
+                                <PhosphorIcon name={v.icon} />
+                                {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> */}
+                    <PhosphorIcon name="magnifying-glass" />
+                </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> */}
+                                    <PhosphorIcon
+                                        name={
+                                            RAPPSTUD.includes(poissonUser.uid)
+                                                ? 'bank'
+                                                : MACCHINISTI.includes(poissonUser.uid)
+                                                  ? 'wrench'
+                                                  : 'user'
+                                        }
+                                    />
+                                </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> */}
+                                        <PhosphorIcon name="arrow-square-out" />
+                                    </a>
+                                </div>
+                            </div>
+                        )}
+                    </ShowMore>
+                ) : (
+                    <>Nessun risultato</>
+                )}
+            </div>
+        </>
+    )
+}

src/client/lib/debug-console.js

@@ -0,0 +1,27 @@
+const $debugConsole = document.createElement('div')
+
+$debugConsole.style.position = 'fixed'
+$debugConsole.style.bottom = '0'
+$debugConsole.style.left = '0'
+$debugConsole.style.width = '100%'
+$debugConsole.style.height = '25vh'
+$debugConsole.style.backgroundColor = 'black'
+$debugConsole.style.color = 'white'
+$debugConsole.style.overflow = 'auto'
+$debugConsole.style.padding = '10px'
+$debugConsole.style.boxSizing = 'border-box'
+$debugConsole.style.fontFamily = 'monospace'
+$debugConsole.style.zIndex = '9999'
+$debugConsole.style.fontSize = '15px'
+$debugConsole.style.opacity = '0.8'
+
+document.body.appendChild($debugConsole)
+
+function logDebugConsole(...args) {
+    $debugConsole.innerHTML += args.join(' ') + '<br>'
+}
+
+console.error = logDebugConsole
+console.warn = logDebugConsole
+console.log = logDebugConsole
+console.debug = logDebugConsole

src/client/lib/marked-latex.js

@@ -0,0 +1,83 @@
+// took from: https://github.com/sxyazi/marked-extended-latex
+// this has a peer dependency bug
+
+const CLASS_NAME = 'latex-b172fea480b'
+
+const extBlock = options => ({
+    name: 'latex-block',
+    level: 'block',
+    start(src) {
+        return src.match(/\$\$[^\$]/)?.index ?? -1
+    },
+    tokenizer(src, _tokens) {
+        const match = /^\$\$([^\$]+)\$\$/.exec(src)
+        return match ? { type: 'latex-block', raw: match[0], formula: match[1] } : undefined
+    },
+    renderer(token) {
+        if (!options.lazy) return options.render(token.formula, true)
+        return `<span class="${CLASS_NAME}" block>${token.formula}</span>`
+    },
+})
+
+const extInline = options => ({
+    name: 'latex',
+    level: 'inline',
+    start(src) {
+        return src.match(/\$[^\$]/)?.index ?? -1
+    },
+    tokenizer(src, _tokens) {
+        const match = /^\$([^\$]+)\$/.exec(src)
+        return match ? { type: 'latex', raw: match[0], formula: match[1] } : undefined
+    },
+    renderer(token) {
+        if (!options.lazy) return options.render(token.formula, false)
+        return `<span class="${CLASS_NAME}">${token.formula}</span>`
+    },
+})
+
+let observer
+/* istanbul ignore next */
+export default (options = {}) => {
+    /* istanbul ignore next */
+    if (options.lazy && options.env !== 'test') {
+        observer = new IntersectionObserver(
+            (entries, self) => {
+                for (const entry of entries) {
+                    if (!entry.isIntersecting) {
+                        continue
+                    }
+
+                    const span = entry.target
+                    self.unobserve(span)
+
+                    Promise.resolve(options.render(span.innerText, span.hasAttribute('block'))).then(html => {
+                        span.innerHTML = html
+                    })
+                    span.classList.add('latex-rendered')
+                }
+            },
+            { threshold: 1.0 },
+        )
+    }
+
+    return {
+        extensions: [extBlock(options), extInline(options)],
+    }
+}
+
+/* istanbul ignore next */
+export const observe = () => {
+    if (!observer) {
+        return
+    }
+
+    observer.disconnect()
+    document.querySelectorAll(`span.${CLASS_NAME}:not(.latex-rendered)`).forEach(span => {
+        observer.observe(span)
+    })
+}
+
+/* istanbul ignore next */
+export const disconnect = () => {
+    observer?.disconnect()
+}

src/client/lib/util.ts

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

src/components/Bubble.astro

@@ -0,0 +1,50 @@
+---
+import PhosphorIcon from './PhosphorIcon.astro'
+
+const ICONS_MAP: Record<string, string> = {
+    github: 'github-logo',
+    linkedin: 'linkedin-logo',
+    website: 'globe',
+    mail: 'mailbox',
+}
+
+type Props = {
+    fullName: string
+    description: string
+
+    image: ImageMetadata
+
+    entranceDate: number
+    exitDate?: number
+
+    founder?: boolean
+
+    social?: {
+        github?: string
+        linkedin?: string
+        website?: string
+        mail?: string
+    }
+}
+
+const { fullName, description, image, entranceDate, exitDate, founder, social } = Astro.props
+---
+
+<div class="bubble">
+    <img src={image.src} alt={fullName.toLowerCase()} />
+    <div class="title">{fullName}</div>
+    <div class="date">{entranceDate}&mdash;{exitDate ?? 'Presente'}</div>
+    {founder && <div class="founder">Fondatore</div>}
+    <div class="description">{description}</div>
+    {
+        social && (
+            <div class="social">
+                {Object.entries(social).map(([key, value]) => (
+                    <a href={value} target="_blank" rel="noopener noreferrer">
+                        <PhosphorIcon name={ICONS_MAP[key] ?? 'question-mark'} />
+                    </a>
+                ))}
+            </div>
+        )
+    }
+</div>

src/components/Card.astro

@@ -0,0 +1,12 @@
+---
+type Props = {
+    large?: boolean
+    style?: string
+}
+
+const { large, ...props } = Astro.props
+---
+
+<div class:list={['card', large && 'large']} {...props}>
+    <slot />
+</div>

src/components/Footer.astro

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

src/components/Header.astro

@@ -0,0 +1,57 @@
+---
+const links = [
+    { href: '/utenti', text: 'Utenti' },
+    // { href: '/macchinisti', text: 'Macchinisti' },
+    // { href: '/appunti', text: 'Appunti' },
+    { href: '/notizie', text: 'Notizie' },
+    { href: '/guide', text: 'Guide' },
+    { href: '/domande-esami', text: 'Domande Orali' },
+    { href: '/media-pesata', text: 'Calcolo Media' }, // Beta testing - solo URL diretto
+    { href: '/storia', text: 'Storia' },
+    // { href: '/login', text: 'Login' },
+]
+---
+
+<header>
+    <!-- main logo on the left -->
+    <a href="/" class="logo">
+        <img src="/images/phc-logo-2024-11@x8.png" alt="phc logo" />
+    </a>
+
+    <!-- hidden checkbox for mobile js-less sidebar interaction -->
+    <input type="checkbox" id="header-menu-toggle" />
+
+    <!-- desktop navbar links -->
+    <div class="links desktop-only">
+        {
+            links.map(link => (
+                <a role="button" href={link.href}>
+                    {link.text}
+                </a>
+            ))
+        }
+    </div>
+
+    <!-- sidebar menu for mobile -->
+    <div class="mobile-only">
+        <label id="header-menu-toggle-menu" role="button" class="flat icon" for="header-menu-toggle">
+            <span class="material-symbols-outlined">menu</span>
+        </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>
+
+    <!-- sidebar menu only visible on mobile when #header-menu-toggle is checked -->
+    <div class="side-menu">
+        <div class="links">
+            {
+                links.map(link => (
+                    <a role="button" href={link.href}>
+                        {link.text}
+                    </a>
+                ))
+            }
+        </div>
+    </div>
+</header>

src/components/HomepageZigZag.astro

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

src/components/PhosphorIcon.astro

@@ -0,0 +1,21 @@
+---
+import { Image } from 'astro:assets'
+
+type Props = {
+    name: string
+}
+
+const { name } = Astro.props
+
+const icons = Object.fromEntries(
+    Object.entries(
+        import.meta.glob<{ default: ImageMetadata }>(`node_modules/@phosphor-icons/core/assets/light/*.svg`),
+    ).map(([path, module]) => [path.split('/').pop()!.split('.')[0].replace('-light', ''), module]),
+)
+
+if (!icons[name]) {
+    throw new Error(`Icon "${name}" not found`)
+}
+---
+
+<Image class="phosphor-icon" src={icons[name]()} alt={name} />

src/components/ProjectCard.astro

@@ -0,0 +1,24 @@
+---
+// 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 text">
+            <slot />
+        </div>
+    </div>
+</a>

src/components/Timeline.astro

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

src/components/meta/CodeBlockPreview.astro

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

src/components/meta/Container.astro

@@ -0,0 +1,9 @@
+---
+const { size, ...rest } = Astro.props
+---
+
+<div class:list={['container', size ?? 'normal']} {...rest}>
+    <div class="content">
+        <slot />
+    </div>
+</div>

src/components/meta/Palette.astro

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

src/content/config.ts

@@ -0,0 +1,58 @@
+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()),
+//     }),
+// })
+
+const metaCollection = defineCollection({
+    type: 'content',
+    schema: z.any(),
+})
+
+// Export a single `collections` object to register your collection(s)
+export const collections = {
+    news: newsCollection,
+    guides: guidesCollection,
+    // seminarietti: seminariettiCollection,
+    meta: metaCollection,
+}