Compare commits

..

50 Commits

Author SHA1 Message Date
Francesco Minnocci 0179e7a858 minor fixes
Francesco Minnocci 5c7342c91e ciao, ho pushato
Francesco Minnocci 3ed6cbf57a fix
Francesco Minnocci 1ab42ed2e2 add GTD
Antonio De Lucreziis 419b0c6ab5 cmd: updated prettier config and reformatted content
Antonio De Lucreziis f85991c409 updated readme
Antonio De Lucreziis d115d69b1b added phc chat icon in homepage, fixed exam question
Antonio De Lucreziis 18563979a2 chore: changed name of esami section
Antonio De Lucreziis 4b7a867a19 fix: centered text
Antonio De Lucreziis 517a8ee8f1 some fixes
Antonio De Lucreziis 0b4bf289d4 Merge branch 'feat-domande-esami'
Antonio De Lucreziis db083e20c2 updated questions and style
Antonio De Lucreziis fa564754f2 simplified tagging selection
Antonio De Lucreziis ae70cfc5e3 last checks
Antonio De Lucreziis d46f62dd3f added initial batch of questions
Antonio De Lucreziis 4757c3e0a9 prototype mostly finished
Antonio De Lucreziis 7c36f87149 finished minimal working prototype
Antonio De Lucreziis 58d0378d49 chore: better layout for macchinisti page, founder badge
Antonio De Lucreziis 84caa87951 initial commit of domande esami branch
Luca Lombardo 23baa758cf add: Riccardo Murri to macchinisti and update history details
Luca Lombardo 1a3948a8eb add: Antonio Spanu
Luca Lombardo 4fca2f8b14 Aggiunto Francesco Manicastri
Luca Lombardo 3173968f0e aggiunto francesco caporali, manca foto
Luca Lombardo 6330a13d92 macchinisti
Antonio De Lucreziis 2d0d34c4ff fix: wrong news title
Antonio De Lucreziis af4f3d35f0 chore: support images in markdown files, reversed news list ordering
Luca Lombardo 9684ff98ea feat: add incident report for Poisson server outage on January 2, 2025
Luca Lombardo 5feab1ba69 typos
Luca Lombardo 0a2df372d5 feat: add new macchinisti entries with social links and descriptions
Antonio De Lucreziis e037e46bd3 fix: .card-list too large on some viewport sizes
Luca Lombardo c2ba681cb8 Aggiornata immagine Luca
Luca Lombardo e34663edca Delete 'src/assets/macchinisti/luca-lombardo.jpg'
Luca Lombardo 7dde9b1c22 Aggiornata descrizione per Luca
Francesco Minnocci b93e7223f5 reword poisson deletion article, add content to macchinisti.yaml, homepage
Francesco Minnocci 21f5d319c3
update whatsphc
Francesco Minnocci 86935b8eb5
update articles, upload pic, rewrite whatsphc and some guides
Antonio De Lucreziis 8a71252eba Merge branch 'dev' of git.phc.dm.unipi.it:phc/website into dev
Antonio De Lucreziis 119f356dc1 chore: minor changes to guides
Antonio De Lucreziis 7c34ed2600 new: guida rimozione sito da google
Luca Lombardo b10c50d9f2 Aggiunta la descrizione per Luca
Antonio De Lucreziis e59bc41035 chore: upgraded to Astro 5
Antonio De Lucreziis d511ce3663 chore: some refactoring and added phosphor icons
Antonio De Lucreziis e49e2ff0c5 chore: fixed bugs in macchinisti page and some refactoring
Luca Lombardo 2dbdf99827 new: add current and past macchinisti data with dynamic rendering
todo: fix the fallback image and make a general function to render the bubbles
Francesco Minnocci 810e07bff1 remove comment
Francesco Minnocci f608ea4f93 Add macchinisti page (WIP)
Francesco Minnocci 39133d8aed Minor edits to storia and home
Antonio De Lucreziis 1dcd0705b5 chore: more fonts refactoring
Antonio De Lucreziis 0abd1c4886 new: added link to ggwp website
Antonio De Lucreziis 177b469b19 refactor: css variables for fonts

@ -1,6 +1,6 @@
# 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.
@ -9,26 +9,26 @@ kind: pipeline
name: default
steps:
- name: deploy
image: node:latest
volumes:
- name: host-website-dist
path: /mnt/website
commands:
- npm install
- npm run build
- cp -rT ./dist /mnt/website
- name: deploy
image: node:latest
volumes:
- name: host-website-dist
path: /mnt/website
commands:
- npm install
- npm run build
- cp -rT ./dist /mnt/website
volumes:
- name: host-website-dist
host: # this volume is mounted on the host machine
path: /var/www/website
- name: host-website-dist
host: # this volume is mounted on the host machine
path: /var/www/website
trigger:
branch:
- main
- main
event:
- push
- push
---
kind: pipeline
@ -36,15 +36,15 @@ type: exec # this job is executed on the host machine
name: caddy-permissions
depends_on:
- default
- default
steps:
- name: chown
commands:
- chown -R caddy:caddy /var/www/website
- name: chown
commands:
- chown -R caddy:caddy /var/www/website
trigger:
branch:
- main
- main
event:
- push
- push

@ -1,9 +0,0 @@
{
"printWidth": 110,
"singleQuote": true,
"quoteProps": "consistent",
"tabWidth": 4,
"useTabs": false,
"semi": false,
"arrowParens": "avoid"
}

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

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

@ -17,19 +17,12 @@ bun dev
## Build
```bash
bun build
bun run build
```
## Deploy [TODO]
## Deploy
Il progetto contiene un `Dockerfile` che viene usato per il deploy (del server prodotto da Astro).
```bash
docker build -t phc-website .
docker run -p 3000:3000 phc-website
```
C'è anche un `.drone.yml` che viene usato per il deploy su un server remoto utilizzando Drone per il CD.
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.
## Come Contribuire
@ -39,4 +32,4 @@ Sentitevi liberi di aprire una PR per qualsiasi modifica o aggiunta al sito web.
### Cose da fare
- Aggiungere guide in [src/content/guides/](./src/content/guides/)
- Aggiungere guide in [src/content/guides/](./src/content/guides/)

@ -3,8 +3,13 @@ import preact from '@astrojs/preact'
import mdx from '@astrojs/mdx'
import yaml from '@rollup/plugin-yaml'
// https://astro.build/config
export default defineConfig({
vite: {
plugins: [yaml()],
},
server: {
port: 3000,
},
@ -13,6 +18,11 @@ export default defineConfig({
theme: 'github-light',
},
},
integrations: [preact(), mdx()],
output: 'static'
integrations: [
preact({
compat: true,
}),
mdx(),
],
output: 'static',
})

Binary file not shown.

11125
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -1,44 +1,51 @@
{
"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": "^8.3.4",
"@astrojs/preact": "^3.5.3",
"@fontsource-variable/material-symbols-outlined": "^5.1.1",
"@fontsource/iosevka": "^5.0.11",
"@fontsource/mononoki": "^5.0.11",
"@fontsource/open-sans": "^5.0.24",
"@fontsource/source-code-pro": "^5.0.16",
"@fontsource/source-sans-pro": "^5.0.8",
"@fontsource/space-mono": "^5.0.20",
"@preact/signals": "^1.3.0",
"@types/jsdom": "^21.1.7",
"astro": "^4.15.11",
"fuse.js": "^7.0.0",
"katex": "^0.16.9",
"preact": "^10.19.6",
"typescript": "^5.3.3"
},
"devDependencies": {
"@astrojs/mdx": "^3.1.7",
"@types/katex": "^0.16.7",
"jsdom": "^24.1.1",
"linkedom": "^0.18.4",
"npm-run-all": "^4.1.5",
"rehype-autolink-headings": "^7.1.0",
"rehype-slug": "^6.0.0",
"remark-math": "^6.0.0",
"remark-toc": "^9.0.0",
"sass": "^1.71.1",
"tsx": "^4.7.1"
}
"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.0.0",
"@astrojs/preact": "4.0.0",
"@fontsource-variable/material-symbols-outlined": "^5.1.1",
"@fontsource/iosevka": "^5.0.11",
"@fontsource/mononoki": "^5.0.11",
"@fontsource/open-sans": "^5.0.24",
"@fontsource/source-code-pro": "^5.0.16",
"@fontsource/source-sans-pro": "^5.0.8",
"@fontsource/space-mono": "^5.0.20",
"@phosphor-icons/core": "^2.1.1",
"@phosphor-icons/react": "^2.1.7",
"@preact/signals": "^1.3.0",
"@types/jsdom": "^21.1.7",
"astro": "5.1.0",
"fuse.js": "^7.0.0",
"katex": "^0.16.9",
"lucide-static": "^0.468.0",
"marked": "^15.0.6",
"preact": "^10.19.6",
"typescript": "^5.3.3"
},
"devDependencies": {
"@astrojs/mdx": "4.0.2",
"@rollup/plugin-yaml": "^4.1.2",
"@types/katex": "^0.16.7",
"jsdom": "^24.1.1",
"linkedom": "^0.18.4",
"npm-run-all": "^4.1.5",
"prettier": "^3.5.0",
"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.71.1",
"tsx": "^4.7.1"
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 82 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 645 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 262 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 49 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 342 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 113 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 608 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 295 KiB

@ -1,6 +1,7 @@
import { type ComponentChildren } from 'preact'
import { useState, useRef, useEffect } from 'preact/hooks'
import { clsx, isMobile } from './lib/util'
import { PhosphorIcon } from './Icon'
export const ComboBox = ({
value,
@ -33,20 +34,14 @@ export const ComboBox = ({
}, [])
return (
<div
class="combobox"
ref={comboRef}
style={{ width: isMobile() ? undefined : itemWidth + 48 + 'px' }}
>
<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>
{/* <span class="material-symbols-outlined">expand_more</span> */}
<PhosphorIcon name="caret-down" />
</div>
{open && (
<div
class={clsx('dropdown', cloak && 'invisible')}
ref={el => el && setItemWidth(el.offsetWidth)}
>
<div class={clsx('dropdown', cloak && 'invisible')} ref={el => el && setItemWidth(el.offsetWidth)}>
{Object.keys(children).map(key => (
<div
class="option"

@ -0,0 +1,119 @@
import { useEffect, useState } from 'preact/hooks'
import { Funnel } 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">
<Funnel />
<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>
</>
)
}

@ -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} />
}

@ -3,6 +3,7 @@ import Fuse from 'fuse.js'
import { useEffect } from 'preact/hooks'
import { ShowMore } from './Paginate'
import { ComboBox } from './ComboBox'
import { PhosphorIcon } from './Icon'
type User = {
uid: string
@ -11,15 +12,15 @@ type User = {
const FILTERS = {
utenti: {
icon: 'person',
icon: 'user',
label: 'Utenti',
},
macchinisti: {
icon: 'construction',
icon: 'wrench',
label: 'Macchinisti',
},
rappstud: {
icon: 'account_balance',
icon: 'bank',
label: 'Rappresentanti',
},
}
@ -67,22 +68,22 @@ export const UtentiPage = () => {
$filter.value === 'macchinisti'
? $utentiData.value.filter(user => MACCHINISTI.includes(user.uid))
: $filter.value === 'rappstud'
? $utentiData.value.filter(user => RAPPSTUD.includes(user.uid))
: $utentiData.value
? $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
? ($fuse.value?.search($searchText.value).map(result => result.item) ?? [])
: $filteredData.value,
)
useEffect(() => {
@ -105,9 +106,11 @@ export const UtentiPage = () => {
Object.entries(FILTERS).map(([k, v]) => [
k,
<>
<span class="material-symbols-outlined">{v.icon}</span> {v.label}
{/* <span class="material-symbols-outlined">{v.icon}</span> {v.label} */}
<PhosphorIcon name={v.icon} />
{v.label}
</>,
])
]),
)}
</ComboBox>
<div class="search">
@ -117,7 +120,8 @@ export const UtentiPage = () => {
onInput={e => ($searchText.value = e.currentTarget.value)}
value={$searchText.value}
/>
<span class="material-symbols-outlined">search</span>
{/* <span class="material-symbols-outlined">search</span> */}
<PhosphorIcon name="magnifying-glass" />
</div>
</div>
<div class="search-results">
@ -126,21 +130,28 @@ export const UtentiPage = () => {
{poissonUser => (
<div class="search-result">
<div class="icon">
<span class="material-symbols-outlined">
{/* <span class="material-symbols-outlined">
{RAPPSTUD.includes(poissonUser.uid)
? 'account_balance'
: MACCHINISTI.includes(poissonUser.uid)
? 'construction'
: 'person'}
</span>
</span> */}
<PhosphorIcon
name={
RAPPSTUD.includes(poissonUser.uid)
? 'bank'
: MACCHINISTI.includes(poissonUser.uid)
? 'wrench'
: 'user'
}
/>
</div>
<div class="text">{poissonUser.gecos}</div>
<div class="right">
<a
href={`https://poisson.phc.dm.unipi.it/~${poissonUser.uid}`}
target="_blank"
>
<span class="material-symbols-outlined">open_in_new</span>
<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>

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

@ -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()
}

@ -3,7 +3,7 @@ import { useEffect, useState } from 'preact/hooks'
export const trottleDebounce = <T extends any[], R>(
fn: (...args: T) => R,
delay: number,
options: { leading?: boolean; trailing?: boolean } = {}
options: { leading?: boolean; trailing?: boolean } = {},
): ((...args: T) => R | undefined) => {
let lastCall = 0
let lastResult: R | undefined

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

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

@ -1,16 +1,37 @@
---
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: '/storia', text: 'Storia' },
// { href: '/login', text: 'Login' },
]
---
<header>
<!-- main logo on the left -->
<a href="/" class="logo">
<img src="/images/phc-logo-2024-11@x8.png" alt="phc logo" />
</a>
<!-- hidden checkbox for mobile js-less sidebar interaction -->
<input type="checkbox" id="header-menu-toggle" />
<!-- desktop navbar links -->
<div class="links desktop-only">
<a role="button" href="/utenti">Utenti</a>
<!-- <a role="button" href="/appunti">Appunti</a> -->
<a role="button" href="/notizie">Notizie</a>
<a role="button" href="/guide">Guide</a>
<a role="button" href="/storia">Storia</a>
<!-- <a class="primary" role="button" href="/login">Login</a> -->
{
links.map(link => (
<a role="button" href={link.href}>
{link.text}
</a>
))
}
</div>
<!-- sidebar menu for mobile -->
<div class="mobile-only">
<label id="header-menu-toggle-menu" role="button" class="flat icon" for="header-menu-toggle">
<span class="material-symbols-outlined">menu</span>
@ -19,14 +40,17 @@
<span class="material-symbols-outlined">close</span>
</label>
</div>
<!-- sidebar menu only visible on mobile when #header-menu-toggle is checked -->
<div class="side-menu">
<div class="links">
<a role="button" href="/utenti">Utenti</a>
<!-- <a role="button" href="/appunti">Appunti</a> -->
<a role="button" href="/notizie">Notizie</a>
<a role="button" href="/guide">Guide</a>
<a role="button" href="/storia">Storia</a>
<!-- <a class="primary" role="button" href="/login">Login</a> -->
{
links.map(link => (
<a role="button" href={link.href}>
{link.text}
</a>
))
}
</div>
</div>
</header>

@ -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} />

@ -44,9 +44,15 @@ const seminariettiCollection = defineCollection({
}),
})
const metaCollection = defineCollection({
type: 'content',
schema: z.any(),
})
// Export a single `collections` object to register your collection(s)
export const collections = {
news: newsCollection,
guides: guidesCollection,
seminarietti: seminariettiCollection,
meta: metaCollection,
}

@ -1,7 +1,7 @@
---
id: git-101
title: Git 101
description: Una guida introduttiva alle basi di Git
description: Una guida 📚 introduttiva alle basi di Git
author: Luca Lombardo
tags: [git, gitea]
---
@ -14,21 +14,21 @@ Git è un sistema di controllo di versione distribuito creato per gestire proget
### **Cos'è Git?**
- **Sistema di controllo di versione**: Gestisce le modifiche al codice sorgente nel tempo.
- **Sistema di controllo di versione**: Gestisce le modifiche al codice sorgente nel tempo.
- **Distribuito**: Ogni sviluppatore ha una copia del repository.
- **Distribuito**: Ogni sviluppatore ha una copia del repository.
- **Veloce e leggero**: Ottimizzato per la velocità e le prestazioni.
- **Veloce e leggero**: Ottimizzato per la velocità e le prestazioni.
### **Perché usare Git?**
- **Tracciabilità**: Ogni modifica è tracciata e reversibile.
- **Tracciabilità**: Ogni modifica è tracciata e reversibile.
- **Collaborazione**: Più persone possono lavorare sullo stesso progetto.
- **Collaborazione**: Più persone possono lavorare sullo stesso progetto.
- **Backup**: Repository remoto per il backup del codice.
- **Backup**: Repository remoto per il backup del codice.
- **Branching**: Lavoriamo su nuove funzionalità senza influenzare il codice principale.
- **Branching**: Lavoriamo su nuove funzionalità senza influenzare il codice principale.
---
@ -96,9 +96,9 @@ git config --list
### **Repository**
- **Repository locale**: Una cartella sul nostro computer che contiene il nostro progetto.
- **Repository locale**: Una cartella sul nostro computer che contiene il nostro progetto.
- **Repository remoto**: Una versione del progetto ospitata su un server (es. GitHub, GitLab).
- **Repository remoto**: Una versione del progetto ospitata su un server (es. GitHub, GitLab).
### **Branch**
@ -174,9 +174,9 @@ Il comando **`git commit`** è utilizzato per registrare le modifiche nel reposi
#### Cosa succede dietro le quinte:
- Git salva lo stato dei file nell'area di staging in un commit, che viene aggiunto alla cronologia del repository locale.
- Git salva lo stato dei file nell'area di staging in un commit, che viene aggiunto alla cronologia del repository locale.
- Ogni commit ha un identificatore unico (hash) che consente di risalire facilmente alle modifiche in qualsiasi momento.
- Ogni commit ha un identificatore unico (hash) che consente di risalire facilmente alle modifiche in qualsiasi momento.
---
@ -198,13 +198,13 @@ Il comando **`git commit`** è utilizzato per registrare le modifiche nel reposi
#### Cosa succede dietro le quinte:
- Git confronta il nostro branch locale con il branch remoto. Se ci sono nuovi commit nel branch remoto che non sono ancora nel nostro branch locale, ci verrà richiesto di fare un **pull** per aggiornare prima di fare il push.
- Git confronta il nostro branch locale con il branch remoto. Se ci sono nuovi commit nel branch remoto che non sono ancora nel nostro branch locale, ci verrà richiesto di fare un **pull** per aggiornare prima di fare il push.
- Il nostro repository locale viene sincronizzato con il remoto, rendendo le modifiche visibili a tutti gli altri che hanno accesso al repository remoto.
- Il nostro repository locale viene sincronizzato con il remoto, rendendo le modifiche visibili a tutti gli altri che hanno accesso al repository remoto.
#### Errori comuni:
- Se il repository remoto è stato aggiornato nel frattempo da qualcun altro (ad esempio, con un altro push), riceveremo un errore che ci avvisa che dobbiamo fare prima un `git pull` per sincronizzare il nostro lavoro.
- Se il repository remoto è stato aggiornato nel frattempo da qualcun altro (ad esempio, con un altro push), riceveremo un errore che ci avvisa che dobbiamo fare prima un `git pull` per sincronizzare il nostro lavoro.
---
@ -226,13 +226,13 @@ Il comando **`git commit`** è utilizzato per registrare le modifiche nel reposi
#### Cosa succede dietro le quinte:
- **`git fetch`** scarica tutte le modifiche dal repository remoto, ma non le integra ancora nel nostro codice.
- **`git fetch`** scarica tutte le modifiche dal repository remoto, ma non le integra ancora nel nostro codice.
- **`git merge`** unisce le modifiche scaricate al nostro branch attuale, risolvendo eventuali conflitti, se necessario.
- **`git merge`** unisce le modifiche scaricate al nostro branch attuale, risolvendo eventuali conflitti, se necessario.
#### Errori comuni:
- Se ci sono conflitti tra il nostro lavoro e quello degli altri, Git ci avviserà che dovremo risolverli manualmente. Dopo aver risolto i conflitti, dovremo aggiungere i file risolti (`git add`) e completare il merge con un commit.
- Se ci sono conflitti tra il nostro lavoro e quello degli altri, Git ci avviserà che dovremo risolverli manualmente. Dopo aver risolto i conflitti, dovremo aggiungere i file risolti (`git add`) e completare il merge con un commit.
## **7. Lavorare con branch**
@ -336,18 +336,18 @@ git branch -d <nome-branch>
## **10. Best practices**
- Scriviamo messaggi di commit chiari e descrittivi.
- Scriviamo messaggi di commit chiari e descrittivi.
- Creiamo branch per nuove funzionalità o bugfix.
- Creiamo branch per nuove funzionalità o bugfix.
- Sincronizziamo frequentemente il nostro repository locale con quello remoto.
- Sincronizziamo frequentemente il nostro repository locale con quello remoto.
---
## **11. Risorse aggiuntive**
- [Documentazione ufficiale di Git](https://git-scm.com/doc)
- [Documentazione ufficiale di Git](https://git-scm.com/doc)
- [Guida interattiva Learn Git Branching](https://learngitbranching.js.org/)
- [Guida interattiva Learn Git Branching](https://learngitbranching.js.org/)
- [GitHub Docs](https://docs.github.com/)
- [GitHub Docs](https://docs.github.com/)

@ -1,7 +1,7 @@
---
id: pagina-poisson-con-astro
title: Pagina Poisson con Astro
description: Vediamo come creare una pagina Poisson moderna con Astro
description: Vediamo come creare una pagina Poisson moderna con Astro
author: Antonio De Lucreziis
tags: [astro, website]
---

@ -1,18 +1,18 @@
---
id: deploy-with-github-actions
title: Deploy automatico per Poisson da GitHub
description: Come impostare il deploy automatico per la propria pagina Poisson utilizzando le GitHub Actions
description: Come impostare il deploy automatico per la propria pagina Poisson tramite le GitHub Actions
author: Antonio De Lucreziis
tags: [github, deploy, poisson]
tags: [github, poisson, sito]
---
Supponiamo di avere un sito web statico che vogliamo caricare su Poisson, ad esempio un progetto NodeJS che genera in `dist/` o `out/` i file da caricare. Come possiamo automatizzare il processo di deploy su Poisson?
Supponiamo di avere un sito web statico che vogliamo caricare su Poisson, ad esempio un progetto NodeJS che genera in `dist/` o `out/` i file da caricare. Come possiamo automatizzare il processo di deploy su Poisson?
Vediamo come automatizzare questo processo utilizzando le GitHub Actions.
Vedremo come deployare il nostro sito, e successivamente come automatizzare il deployment con le GitHub Actions.
## Setup
## Setup manuale
Manualmente, possiamo costruire il nostro progetto in locale e poi caricare i file su Poisson utilizzando `rsync`, ad esempio come segue:
Come primo approccio, potremmo compilare il nostro progetto in locale e poi caricare i file su Poisson utilizzando `rsync`, ad esempio come segue:
```bash
$ npm run build
@ -28,36 +28,36 @@ Per automatizzare questo processo possiamo caricare il nostro progetto su GitHub
```yaml
name: Deploy to Poisson
on:
push:
branches:
- main
push:
branches:
- main
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v4
- name: Write SSH keys
run: |
install -m 600 -D /dev/null ~/.ssh/known_hosts
install -m 600 -D /dev/null ~/.ssh/id_ed25519
echo "${{ secrets.SSH_KNOWN_HOSTS }}" > ~/.ssh/known_hosts
echo "${{ secrets.SSH_PRIVATE_KEY }}" > ~/.ssh/id_ed25519
- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: '23'
- name: Install dependencies
run: npm install
- name: Build
run: npm run build
- name: Deploy
run: rsync -cavz dist/ ${{ secrets.SSH_USER }}@poisson.phc.dm.unipi.it:public_html/
deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v4
- name: Write SSH keys
run: |
install -m 600 -D /dev/null ~/.ssh/known_hosts
install -m 600 -D /dev/null ~/.ssh/id_ed25519
echo "${{ secrets.SSH_KNOWN_HOSTS }}" > ~/.ssh/known_hosts
echo "${{ secrets.SSH_PRIVATE_KEY }}" > ~/.ssh/id_ed25519
- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: '23'
- name: Install dependencies
run: npm install
- name: Build
run: npm run build
- name: Deploy
run: rsync -cavz dist/ ${{ secrets.SSH_USER }}@poisson.phc.dm.unipi.it:public_html/
```
## Comando rsync
@ -79,13 +79,13 @@ Per stabilire una connessione SSH a Poisson dalle GitHub Actions in modo sicuro,
```yaml
- name: Write SSH keys
run: |
install -m 600 -D /dev/null ~/.ssh/known_hosts
install -m 600 -D /dev/null ~/.ssh/id_ed25519
echo "${{ secrets.SSH_KNOWN_HOSTS }}" > ~/.ssh/known_hosts
echo "${{ secrets.SSH_PRIVATE_KEY }}" > ~/.ssh/id_ed25519
install -m 600 -D /dev/null ~/.ssh/known_hosts
install -m 600 -D /dev/null ~/.ssh/id_ed25519
echo "${{ secrets.SSH_KNOWN_HOSTS }}" > ~/.ssh/known_hosts
echo "${{ secrets.SSH_PRIVATE_KEY }}" > ~/.ssh/id_ed25519
```
Questa è la parte più importante del workflow, che permette di autenticarsi su Poisson senza dover inserire la password ogni volta (cosa che non possiamo materialmente fare dall GitHub Actions).
Questa è la parte più importante del workflow, che permette di autenticarsi su Poisson senza dover inserire la password ogni volta (cosa che non possiamo materialmente fare dall GitHub Actions).
Per farlo, creiamo in locale una coppia di chiavi SSH apposta per le GitHub Actions e aggiungiamo la chiave pubblica su Poisson. Per farlo, possiamo seguire questi passaggi:
@ -96,7 +96,7 @@ $ ssh-copy-id -i actions-deploy-key <username>@poisson.phc.dm.unipi.it
Qui generiamo una chiave ssh utilizzando l'algoritmo `ed25519` (leggermente più consigliato rispetto a `rsa`, in particolare ha anche chiavi più corte), `-C` aggiunge semplicemente un commento alla chiave e `-f` specifica il file in cui salvare la chiave.
Poi eseguendo `cat actions-deploy-key` possiamo copiare il contenuto della chiave privata ed aggiungiamo il contenuto in un segreto chiamato `SSH_PRIVATE_KEY` nella nostra repository.
Poi eseguendo `cat actions-deploy-key` possiamo copiare il contenuto della chiave privata ed aggiungiamo il contenuto in un segreto chiamato `SSH_PRIVATE_KEY` nella nostra repository GitHub.
Poi, per evitare che la connessione venga rifiutata, eseguiamo in locale anche uno scan delle chiavi SSH di Poisson:
@ -104,8 +104,8 @@ Poi, per evitare che la connessione venga rifiutata, eseguiamo in locale anche u
$ ssh-keyscan poisson.phc.dm.unipi.it
```
(se l'output è vuoto riprovare con `ssh-keyscan -4 ...`) e copiamo l'output in un segreto della nostra repository chiamato `SSH_KNOWN_HOSTS`.
(se l'output è vuoto riprovare con `ssh-keyscan -4 ...`) e copiamo l'output in un segreto della nostra repository chiamato `SSH_KNOWN_HOSTS`.
Infine possiamo aggiungere anche un segreto `SSH_USER` con il nostro username o modificare anche direttamente il workflow ed inserire l'username direttamente nel file.
Ora ogni volta che facciamo un push sul branch `main` il nostro sito verrà automaticamente costruito e caricato su Poisson!
Ora ogni volta che facciamo un push sul branch `main` il nostro sito verrà automaticamente costruito e caricato su Poisson!

@ -1,9 +1,9 @@
---
id: attivazione-poisson
title: Come attivare il proprio account Poisson
description: Guida per l'attivazione dell'account Poisson, con le istruzioni per il primo accesso e la configurazione del proprio spazio web
description: Guida all'attivazione dell'account Poisson, con istruzioni per il primo accesso e configurazione del proprio sito
author: Luca Lombardo
tags: [poisson]
tags: [poisson, sito, ssh]
---
Poisson è un server autogestito dalla comunità studentesca di matematica, da sempre gestito con cura dai membri del PHC. Ogni studentə ha la possibilità di attivare un account personale, che consente l'accesso alla macchina via SSH e la creazione di uno spazio web personale.
@ -12,11 +12,11 @@ Poisson è un server autogestito dalla comunità studentesca di matematica, da s
Se non si è mai creato un account Poisson, è necessario inviare una richiesta via email a **macchinisti@lists.dm.unipi.it** includendo:
- Nome
- Nome
- Cognome
- Cognome
- Username di ateneo (quello associato alla propria email istituzionale)
- Username di ateneo (quello associato alla propria email istituzionale)
Nella mail è sufficiente specificare che si desidera attivare un account Poisson. I "macchinisti" si occuperanno di attivare l'account il prima possibile.
@ -66,7 +66,10 @@ Vediamo un piccolo esempio di file `index.html` che possiamo creare:
style="max-width: 300px; border-radius: 10px;"
/>
<p>Ciao! Sono Sergio Steffè.</p>
<p>Email: <a href="mailto:sergio.steffe@example.com">sergio.steffe@example.com</a></p>
<p>
Email:
<a href="mailto:sergio.steffe@example.com">sergio.steffe@example.com</a>
</p>
</body>
</html>
```

@ -1,7 +1,7 @@
---
id: recupero-password
title: MI SONO SCORDATO LA PASSWORD DI POISSON COME FACCIO ORA?
description: Hai dimenticato la tua password Poisson? Niente paura, ecco cosa fare!
description: Hai dimenticato la tua password Poisson? Niente paura, vediamo cosa fare! 💪
author: Luca Lombardo
tags: [poisson, password]
---
@ -12,10 +12,23 @@ Se per qualche strano motivo hai dimenticato la tua password Poisson, niente pau
2. Nella mail, specifica il tuo nome, cognome, username di ateneo (quello della tua email istituzionale) e se lo ricordi, anche il tuo username Poisson.
3. Attendi pazientemente la risposta dei macchinisti, che ti resetteranno la password e ti invieranno una nuova via email.
3. Attendi pazientemente la risposta dei macchinisti, che ti resetteranno la password e ti invieranno una nuova.
E voilà, in un batter d'occhio sarai di nuovo pronto a entrare nel fantastico mondo di Poisson.
## Template Email di Recupero
**Oggetto**: Recupero Password Poisson
```
Salve,
sono NOME COGNOME, la mia email istituzionale è
N.COGNOME@studenti.unipi.it {ed il mio username Poisson
è USERNAME / ma non ricordo il mio username Poisson}.
Grazie mille!
```
---
**Nota:** Non preoccuparti, capita a tutti di dimenticare una password ogni tanto. Se vuoi evitare che succeda di nuovo, prova ad usare un password manager come [Bitwarden](https://bitwarden.com/) 😉

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

@ -35,10 +35,7 @@ Una card semplice ha un titolo ed una descrizione.
```astro
<div class="card" style="--card-base: var(--guide-base); max-width: 25rem;">
<div class="title">Titolo</div>
<div class="text">
Descrizione lorem ipsum dolor sit amet consectetur
adipisicing elit. Aspernatur, labore?
</div>
<div class="text">Descrizione lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur, labore?</div>
</div>
```
@ -51,10 +48,7 @@ Le card possono essere di dimensioni diverse. Questa è una card grande.
```astro
<div class="card large" style="--card-base: lightgreen; max-width: 25rem;">
<div class="title">Titolo</div>
<div class="text">
Descrizione lorem ipsum dolor sit amet consectetur
adipisicing elit. Aspernatur, labore?
</div>
<div class="text">Descrizione lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur, labore?</div>
</div>
```
@ -100,10 +94,7 @@ Se c'è poco testo, può essere inserito direttamente nella card.
```astro
<div class="card">
<div class="text">
Descrizione lorem ipsum dolor sit amet consectetur
adipisicing elit. Aspernatur, labore?
</div>
<div class="text">Descrizione lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur, labore?</div>
</div>
```
@ -113,16 +104,15 @@ Altrimenti può essere inserito in un tag `<p>`.
<div class="card">
<div class="text">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Distinctio, vel! Veritatis est sit beatae eveniet.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Distinctio, vel! Veritatis est sit beatae eveniet.
</p>
<p>
Error, minus, asperiores quaerat nulla cumque, nisi ipsam
assumenda consectetur accusamus tempore consequatur quae. Fugit?
Error, minus, asperiores quaerat nulla cumque, nisi ipsam assumenda consectetur accusamus tempore
consequatur quae. Fugit?
</p>
<p>
Quos sapiente amet numquam quis, libero odit eum, eius
perspiciatis repellat nesciunt cupiditate asperiores maiores?
Quos sapiente amet numquam quis, libero odit eum, eius perspiciatis repellat nesciunt cupiditate asperiores
maiores?
</p>
</div>
</div>
@ -132,19 +122,10 @@ C'è anche il modificatore `small` e `dimmed` per ridurre la grandezza del testo
```astro
<div class="card" style="max-width: 25rem;">
<div class="text">
Some normal text, this is a very long
text that should wrap on the next line
</div>
<div class="text small">
This is some small text
</div>
<div class="text dimmed">
This is some dimmed text
</div>
<div class="text small dimmed">
This is some small dimmed text
</div>
<div class="text">Some normal text, this is a very long text that should wrap on the next line</div>
<div class="text small">This is some small text</div>
<div class="text dimmed">This is some dimmed text</div>
<div class="text small dimmed">This is some small dimmed text</div>
</div>
```
@ -197,7 +178,6 @@ import { ComboBox } from '@/lib/components/ComboBox'
const [value, setValue] = useState('option-1')
```
```jsx
<ComboBox value={value} setValue={setValue}>
{{

@ -3,10 +3,8 @@
title: Cos'è il PHC?
---
Il <span title="Pisa Happy Computing">**PHC**</span> è un laboratorio informatico, gestito dagli studenti del **Dipartimento di Matematica** di Pisa e nato nel 1999, che offre vari servizi agli studenti come [Poisson](https://poisson.phc.dm.unipi.it), che ospita le pagine degli studenti.
Il <span class="highlighted" title="Pisa Happy Computing">**PHC**</span> è un laboratorio informatico nato nel 1999 e gestito dagli studenti del **Dipartimento di Matematica** di Pisa; per più informazioni sulla storia del PHC, vedi la [pagina dedicata](/storia).
La sede del PHC è la [stanza 106](https://www.dm.unipi.it/mappa/?sel=638cd24b50cf34e03924a00c) del Dipartimento, dove si trovano i **macchinisti** per discutere e realizzare progetti [hardware](http://steffe.cs.dm.unipi.it/) e [software](https://lab.phc.dm.unipi.it/orario), e occuparsi di server autogestiti.
La sede del PHC è la [stanza 106](https://www.dm.unipi.it/mappa/?sel=638cd24b50cf34e03924a00c) del Dipartimento, dove i <span class="highlighted" title="ovver gli studenti che gestiscono il PHC, vedi fine pagina">**macchinisti**</span> si ritrovano per realizzare progetti [hardware](http://steffe.cs.dm.unipi.it/) o [software](https://lab.phc.dm.unipi.it/orario) e per occuparsi di alcuni servizi per gli studenti, come il server [Poisson](https://poisson.phc.dm.unipi.it) che ospita le pagine degli studenti.
Le macchine del PHC girano principalmente Linux/Unix come sistemi operativi e i macchinisti sono grandi sostenitori di software [FOSS](https://it.wikipedia.org/wiki/Free_and_Open_Source_Software) (che loro stessi sviluppano sull'[istanza Gitea del PHC](https://git.phc.dm.unipi.it/phc)).
La lista dei vari macchinisti e di altri eventi notevoli si trova nella [pagina della storia](/storia) del PHC.
In PHC si usano principalmente sistemi operativi basati su <span class="highlighted" title="ma anche UNIX, Solaris, MacOS...">**Linux**</span>, ed i macchinisti sono grandi sostenitori del <a title="Free and Open Source Software" href="https://it.wikipedia.org/wiki/Free_and_Open_Source_Software">FOSS</a> (che loro stessi sviluppano sulla propria istanza [Gitea](https://git.phc.dm.unipi.it/phc)).

@ -16,7 +16,7 @@ A differenza di altri framework, di base Astro non richiede JavaScript per funzi
## Caratteristiche del Nuovo Sito
Il nuovo sito unifica varie funzionalità che prima erano sparse in diversi siti web. I contenuti del sito dei Seminarietti verranno integrati nella sezione guide che ospiterà anche molte altre risorse utili.
Il nuovo sito unifica varie funzionalità che prima erano sparse in diversi siti web. I contenuti del sito dei Seminarietti verranno integrati nella sezione guide che ospiterà anche molte altre risorse utili.
- **Lista Utenti**: La lista degli utenti di Poisson precedentemente presente sul sito era ordinata per nome e non era facile cercare un utente specifico. Ora la lista è ordinata in base alla data di creaizone dell'account e c'è una barra di ricerca fuzzy per cercare un utente e la sua pagina Poisson.
@ -24,7 +24,7 @@ Il nuovo sito unifica varie funzionalità che prima erano sparse in diversi siti
- **News**: La sezione news ospiterà gli novità e annunci importanti riguardanti il PHC.
- **Storia**: Questa sezione raccoglie la storia del PHC fin dalla creazione di Poisson nel lontano 1994, includendo tutti i vari macchinisti nel corso della tempo.
- **Storia**: Questa sezione raccoglie la storia del PHC fin dalla creazione di Poisson nel lontano 1994, includendo tutti i vari macchinisti nel corso della tempo.
## Cooming Soon
@ -35,4 +35,3 @@ Il nuovo sito unifica varie funzionalità che prima erano sparse in diversi siti
## Conclusioni
Speriamo che il nuovo sito vi piaccia e vi sia utile. Se avete suggerimenti o richieste, non esitate a contattarci. Buona navigazione, magari iniziando dalla [pagina sulla storia del PHC](/storia)!

@ -0,0 +1,31 @@
---
title: Incidente del 2-7 Gennaio 2025
description: Riassunto dell'incidente che ha portato al guasto del server Poisson e delle azioni intraprese per ripristinare i servizi.
publishDate: 2025-01-07
---
# Incidente 2-7 Gennaio 2025
In questi giorni il server fisico principale del PHC, **Poisson**, non è stato operativo. Di conseguenza, i servizi ospitati direttamente su Poisson, come le pagine web degli utenti, l'accesso SSH e Gitea, sono rimasti offline. Al contrario, altri servizi web del PHC che non sono hostati su Poisson non hanno subito interruzioni. La buona notizia è che tutti i dati sono stati recuperati con successo e che l'infrastruttura è tornata pienamente operativa senza ulteriori complicazioni.
## Cosa è successo?
Sospettiamo che la causa principale dell'incidente sia stata una serie di brusche accensioni e spegnimenti, che hanno portato al guasto della scheda madre di Poisson. Il server non riusciva più ad avviarsi, neanche accedendo al BIOS, rendendo evidente che il problema era di natura hardware.
### Diagnosi e sostituzione
La mattina del 7 Gennaio, grazie alla disponibilità del dipartimento, abbiamo trovato una scheda madre di recupero, simile a quella originale ma meno potente. Questa è stata installata immediatamente, permettendo di riportare Poisson in funzione. Dal punto di vista software non è cambiato nulla: l'architettura della CPU è rimasta invariata, sebbene con meno core e la metà della RAM. Gli Hard Disks e una delle schede di rete sono stati riutilizzati senza problemi.
In un futuro prossimo si prevede di aggiornare la scheda madre con una più potente, per garantire le prestazioni di Poisson. Preghiamo per ora quindi di evitare di eseguire operazioni troppo pesanti sul server.
Tutto è stato rimontato nel consueto case bianco che ospita Poisson. Anche se ora è operativo, il server potrebbe essere considerato una nuova incarnazione, sollevando una riflessione interessante: **Poisson è ancora lo stesso server?** Proprio come nel paradosso della nave di Teseo, molti componenti di Poisson sono stati sostituiti nel corso degli anni. Dal 1992, pezzi come HDD, CPU, RAM e schede madri sono stati aggiornati per mantenere il server al passo con i tempi, mentre i dati e le funzionalità sono rimasti intatti.
![Visione vs Visione](/images/misc/meme-vision-vs-vision.webp)
## Ritorno alla normalità
Grazie allintervento, i servizi principali sono tornati online. Gli utenti possono nuovamente accedere alle proprie pagine web, utilizzare SSH e lavorare su Gitea senza alcuna modifica ai dati o alle configurazioni precedenti.
Per chi avesse riscontrato difficoltà nell'accesso, invitiamo a contattare i macchinisti per ricevere supporto.
> Be a System Administrator, they said. It will be fun, they said 🤦‍♂️

File diff suppressed because it is too large Load Diff

@ -0,0 +1,94 @@
# the schema of this file in "@/files.d.ts"
- fullName: Antonio De Lucreziis
entranceDate: 2019
description: |
Appassionato di geometria computazionale, parser, teoria dei linguaggi di programmazione, Smalltalk e Lisp.
social:
github: https://github.com/aziis98
website: https://poisson.phc.dm.unipi.it/~delucreziis/
- fullName: Luca Lombardo
entranceDate: 2024
description: Appassionato di algoritmi e strutture dati, Rust e di quando matematica e informatica si incontrano.
social:
github: https://github.com/lukefleed
website: https://lukefleex.xyz
linkedin: https://www.linkedin.com/in/l-lombardo/
- fullName: Francesco Minnocci
entranceDate: 2022
description: Chitarrista classico ossessionato con la geometria aritmetica, linux e il rock progressivo.
social:
github: https://github.com/BachoSeven
website: https://bachoseven.com
- fullName: Francesco Baldino
entranceDate: 2022
description: Bla bla Star Wars
social:
github: https://github.com/Fran314
website: https://poisson.phc.dm.unipi.it/~baldino
- fullName: Illya Serdyuk
entranceDate: 2020
social:
github: https://github.com/Kratacoa
# Vecchi Macchinisti
- fullName: Francesco Manicastri
entranceDate: 2020
exitDate: 2024
social:
linkedin: https://www.linkedin.com/in/gustavo-sass%C3%ACnculo-phd-92916a202/
- fullName: Cristiano Cricci
entranceDate: 2010
exitDate: 2019
social:
website: https://poisson.phc.dm.unipi.it/~cricci/
- fullName: Tommaso Biannucci
entranceDate: 2019
exitDate: 2022
social:
github: https://gitlab.com/churli
website: https://churli.gitlab.io/
- fullName: Letizia D'Achille
entranceDate: 2018
exitDate: 2022
description: Appassionata di crittografia, teoria dei codici e matematica computazionale.
social:
github: https://github.com/letizia-dachille
website: https://letizia-dachille.github.io/
linkedin: https://www.linkedin.com/in/letizia-dachille/
- fullName: Emiliano Rago
entranceDate: 2000
exitDate: 2006
description: Traviato da Linux in età troppo giovane ha difficoltà ad usare il mouse ma ama gli shortcuts con una decina di tasti.
social:
linkedin: https://www.linkedin.com/in/emiliano-rago-1a8018109/
- fullName: Francesco Caporali
entranceDate: 2018
exitDate: 2022
social:
github: https://github.com/caporali
website: https://caporali.github.io/
linkedin: https://www.linkedin.com/in/francescocaporali
- fullName: Antonio Spanu
entranceDate: 2005
exitDate: 2009
social:
linkedin: https://www.linkedin.com/in/antonio-spanu-609b3516a/
- fullName: Riccardo Murri
entranceDate: 1995
exitDate: 2000
founder: true
social:
github: https://github.com/riccardomurri

44
src/files.d.ts vendored

@ -0,0 +1,44 @@
declare module '*.yaml' {
const value: any // Add type definitions here if desired
export default value
}
declare module '@/data/macchinisti.yaml' {
type Macchinista = {
fullName: string
description: string
entranceDate: number
exitDate?: number
social: Record<string, string>
founder?: boolean
}
const value: Macchinista[]
export default value
}
declare module '@/data/domande-esami.yaml' {
export type Question = {
course: string
content: string
tags: string[]
}
export type Group = {
id: string
name: string
items: Array<string>
}
export type Database = {
names: Record<string, string>
groups: Group[]
questions: Question[]
}
const value: Database
export default value
}

@ -44,7 +44,7 @@ const { title, description, thumbnail, pageTags } = Astro.props
<script>
import renderMathInElement from 'katex/contrib/auto-render'
document.addEventListener('DOMContentLoaded', function () {
const renderMath = () => {
renderMathInElement(document.body, {
delimiters: [
{ left: '$$', right: '$$', display: true },
@ -54,7 +54,12 @@ const { title, description, thumbnail, pageTags } = Astro.props
],
throwOnError: false,
})
})
}
document.addEventListener('DOMContentLoaded', () => renderMath())
// @ts-ignore
window.renderMath = renderMath
</script>
<script is:inline>

@ -1,123 +0,0 @@
---
import Header from '@/components/Header.astro'
import BaseLayout from '@/layouts/BaseLayout.astro'
---
<BaseLayout title="Admin | PHC" pageTags={'admin'}>
<Header />
<div class="layout-admin">
<div class="sidebar">
<nav>
<ul>
<li>
<a href="/admin">
<span class="material-symbols-outlined">dashboard</span>
Dashboard
</a>
</li>
<li>
<a href="/admin/utenti">
<span class="material-symbols-outlined">group</span>
Utenti
</a>
</li>
<li>
<a href="/admin/appunti">
<span class="material-symbols-outlined">book_2</span>
Appunti
</a>
</li>
<li>
<a href="/admin/database">
<span class="material-symbols-outlined">database</span>
Database
</a>
</li>
</ul>
</nav>
</div>
<div class="content">
<div class="admin-dashboard-grid max-width-content">
<div class="card">
<div class="title">
<a href="/admin/utenti">Utenti</a>
</div>
<div class="text">Statistiche degli utenti di Poisson e PHC</div>
<div class="boxes">
<div class="box">
<div class="title">Utenti Poisson</div>
<div class="material-symbols-outlined extra-large">group</div>
<div class="description">1356</div>
</div>
<div class="box">
<div class="title">Utenti PHC</div>
<div class="material-symbols-outlined extra-large">group</div>
<div class="description">345</div>
</div>
<div class="box">
<div class="title">Utenti con account collegato</div>
<div class="material-symbols-outlined extra-large">group</div>
<div class="description">56</div>
</div>
</div>
</div>
<div class="card">
<div class="title">
<a href="/admin/appunti">Appunti</a>
</div>
<div class="text">Statistiche degli Appunti</div>
<div class="boxes">
<div class="box">
<div class="title">Appunti Caricati</div>
<div class="material-symbols-outlined extra-large">book_2</div>
<div class="description">567</div>
</div>
<div class="box">
<div class="title">Appunti Pubblicati</div>
<div class="material-symbols-outlined extra-large">book_2</div>
<div class="description">345</div>
</div>
<div class="box">
<div class="title">In attesa di revisione</div>
<div class="material-symbols-outlined extra-large">book_2</div>
<div class="description">234</div>
</div>
<div class="box">
<div class="title">Spazio Usato (di Minio)</div>
<div class="material-symbols-outlined extra-large">storage</div>
<div class="description">34.5 GB</div>
</div>
</div>
</div>
<div class="card">
<div class="title">
<a href="/admin/database">Database</a>
</div>
<div class="text">Statistiche del Database</div>
<div class="boxes">
<div class="box">
<div class="title">Record nel database</div>
<div class="material-symbols-outlined extra-large">database</div>
<div class="description">3456</div>
</div>
<div class="box">
<div class="title">Record modificati</div>
<div class="material-symbols-outlined extra-large">database</div>
<div class="description">234</div>
</div>
<div class="box">
<div class="title">Record eliminati</div>
<div class="material-symbols-outlined extra-large">database</div>
<div class="description">56</div>
</div>
<div class="box">
<div class="title">Spazio utilizzato</div>
<div class="material-symbols-outlined extra-large">storage</div>
<div class="description">39.5 MB</div>
</div>
</div>
</div>
</div>
</div>
</div>
</BaseLayout>

@ -1,88 +0,0 @@
---
import Header from '@/components/Header.astro'
import BaseLayout from '@/layouts/BaseLayout.astro'
---
<BaseLayout title="Utenti | Admin | PHC" pageTags={'admin'}>
<Header />
<div class="layout-admin">
<div class="sidebar">
<nav>
<ul>
<li>
<a href="/admin">
<span class="material-symbols-outlined">dashboard</span>
Dashboard
</a>
</li>
<li>
<a href="/admin/utenti">
<span class="material-symbols-outlined">group</span>
Utenti
</a>
</li>
<li>
<a href="/admin/appunti">
<span class="material-symbols-outlined">book_2</span>
Appunti
</a>
</li>
<li>
<a href="/admin/database">
<span class="material-symbols-outlined">database</span>
Database
</a>
</li>
</ul>
</nav>
</div>
<div class="content">
<div class="admin-table max-width-content">
<div class="table-header">
<div class="table-title">
<span class="material-symbols-outlined">group</span>
Utenti
</div>
<div class="table-actions">
<a href="/admin/utenti/aggiungi" class="button">Aggiungi</a>
</div>
</div>
<div class="table-filter stack-h">
<input type="text" class="fill-w shrink" placeholder="Cerca utente" />
<button class="icon">
<div class="material-symbols-outlined">search</div>
</button>
</div>
<div class="table-body">
<div class="table-row header">
<div class="table-cell">Nome</div>
<div class="table-cell">Cognome</div>
<div class="table-cell">Email</div>
<div class="table-cell">Ruolo</div>
<div class="table-cell">Azioni</div>
</div>
{
Array.from({ length: 50 }).map(() => (
<Fragment>
<div class="table-row">
<div class="table-cell">Mario</div>
<div class="table-cell">Rossi</div>
<div class="table-cell">mario@rossi.com</div>
<div class="table-cell">studente</div>
<div class="table-cell">
<a href="/admin/utenti/modifica" class="button icon">
<div class="material-symbols-outlined">edit</div>
</a>
<a href="/admin/utenti/elimina" class="button icon">
<div class="material-symbols-outlined">delete</div>
</a>
</div>
</div>
</Fragment>
))
}
</div>
</div>
</div>
</div>
</BaseLayout>

@ -0,0 +1,25 @@
---
import type { GetStaticPaths } from 'astro'
import BaseLayout from '@/layouts/BaseLayout.astro'
import Footer from '@/components/Footer.astro'
import Header from '@/components/Header.astro'
import database from '@/data/domande-esami.yaml'
import { DomandeEsamiCourse } from '@/client/DomandeEsamiCourse'
export const getStaticPaths = (() => {
return Object.keys(database.names).map(course => ({
params: { course },
}))
}) satisfies GetStaticPaths
const { course } = Astro.params
---
<BaseLayout title="Domande Orali | PHC" pageTags={'domande-esami'}>
<Header />
<main>
<DomandeEsamiCourse client:only="preact" course={course} />
</main>
<Footer />
</BaseLayout>

@ -0,0 +1,11 @@
import type { APIRoute } from 'astro'
import database from '@/data/domande-esami.yaml'
export const GET: APIRoute = ({}) => {
return new Response(JSON.stringify(database), {
headers: {
'content-type': 'application/json',
},
})
}

@ -0,0 +1,24 @@
import type { APIRoute, GetStaticPaths } from 'astro'
import database from '@/data/domande-esami.yaml'
export const getStaticPaths = (() => {
return Object.keys(database.names).map(course => ({
params: { course },
}))
}) satisfies GetStaticPaths
export const GET: APIRoute = ({ params: { course } }) => {
return new Response(
JSON.stringify({
groups: [],
names: Object.fromEntries(Object.entries(database.names).filter(([key]) => key === course)),
questions: database.questions.filter(question => question.course === course),
}),
{
headers: {
'content-type': 'application/json',
},
},
)
}

@ -0,0 +1,64 @@
---
import { PhosphorIcon } from '@/client/Icon'
import Footer from '@/components/Footer.astro'
import Header from '@/components/Header.astro'
import BaseLayout from '@/layouts/BaseLayout.astro'
import database from '@/data/domande-esami.yaml'
const courseQuestionCounts = Object.fromEntries(
database.questions.reduce((acc, question) => {
acc.set(question.course, (acc.get(question.course) || 0) + 1)
return acc
}, new Map()),
)
---
<BaseLayout title="Domande Orali | PHC" pageTags={'domande-esami'}>
<Header />
<main>
<h1>Domande Orali</h1>
{
database.groups.map(group => (
<details open>
<summary>
<h2 id={group.id}>
<div class="details-closed">
<PhosphorIcon name="caret-down" />
</div>
<div class="details-openned">
<PhosphorIcon name="caret-up" />
</div>
{group.name}
</h2>
</summary>
<div class="wide-card-list">
{group.items
.filter(course => courseQuestionCounts[course] > 0)
.map(course => (
<a href={`/domande-esami/${course}`}>
<div class="card">
<h2>{database.names[course]}</h2>
<div class="text">
<p>{courseQuestionCounts[course] || 0} domande</p>
</div>
</div>
</a>
))}
</div>
</details>
))
}
<h3>Come Contribuire</h3>
<div class="card large">
<div class="text">
<p>
Se hai raccolto delle domande da un orale, puoi inviarcele per email all'indirizzo
<a href="mailto:macchinisti@lists.dm.unipi.it"> macchinisti@lists.dm.unipi.it</a>.
</p>
</div>
</div>
</main>
<Footer />
</BaseLayout>

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

@ -80,8 +80,7 @@ const galleryCollage = await Astro.glob('@/assets/gallery/*.jpg')
>
<p>Gitea è un servizio di hosting per progetti software, come GitHub ma autogestito.</p>
<p>
Qui puoi trovare i progetti del PHC, e accedendo con un account di Ateneo potrai crearne
di nuovi.
Qui puoi trovare i progetti del PHC, e accedendo con un account di Ateneo potrai crearne di nuovi.
</p>
</ProjectCard>
<!-- <ProjectCard
@ -98,8 +97,8 @@ const galleryCollage = await Astro.glob('@/assets/gallery/*.jpg')
imgSrc="https://lab.phc.dm.unipi.it/orario/icon.png"
>
<p>
Questo sito permette di visualizzare il proprio orario delle lezioni, con informazioni sui
docenti e le aule.
Questo sito permette di visualizzare il proprio orario delle lezioni, con informazioni sui docenti e
le aule.
</p>
</ProjectCard>
<ProjectCard
@ -118,8 +117,8 @@ const galleryCollage = await Astro.glob('@/assets/gallery/*.jpg')
imgSrc="https://steffe.lb.cs.dm.unipi.it/assets/img/logo.png"
>
<p>
Cluster progettato ed assemblato durante il progetto speciale per la didattica "Calcolo
Parallelo dall'Infrastruttura alla Matematica".
Cluster progettato ed assemblato durante il progetto speciale per la didattica "Calcolo Parallelo
dall'Infrastruttura alla Matematica".
</p>
</ProjectCard>
<ProjectCard
@ -128,7 +127,7 @@ const galleryCollage = await Astro.glob('@/assets/gallery/*.jpg')
style="--card-bg: #bd9fec; --masonry-height: 2;"
imgSrc="https://seminarietti.phc.dm.unipi.it/favicon.png"
>
<p>Varie conferenze del PHC su argomenti di informatica, matematica e tecnologia.</p>
<p>Storico degli incontri organizzati dal PHC su argomenti di informatica, matematica e tecnologia.</p>
</ProjectCard>
<ProjectCard
title="Tutorato"
@ -137,10 +136,29 @@ const galleryCollage = await Astro.glob('@/assets/gallery/*.jpg')
imgSrc="https://tutorato.phc.dm.unipi.it/favicon.svg"
>
<p>
Un sito con tutte le informazioni sui tutorati di Matematica, con tanto di archivio degli
anni passati.
Un sito con tutte le informazioni sui tutorati di Matematica, con tanto di archivio degli anni
passati.
</p>
</ProjectCard>
<ProjectCard
title="GGWP"
href="https://ggwp.phc.dm.unipi.it/"
style="--card-bg: rgb(255, 157, 65); --masonry-height: 2;"
imgSrc="https://ggwp.phc.dm.unipi.it/ggwp-icon.png"
>
<p>
Sito per il tabellone del GGWP, utilizzato durante la gara di Novembre 2024 dagli organizzatori per
inserire le risposte alla gara in tempo reale.
</p>
</ProjectCard>
<ProjectCard
title="Chat"
href="https://chat.phc.dm.unipi.it/"
style="--card-bg: #383838; --card-fg: #ddd; --masonry-height: 1;"
imgSrc="https://chat.phc.dm.unipi.it/favicon.png"
>
<p>Istanza di Open-WebUI, una chat stile ChatGPT con alcuni LLM self-hostati dal PHC.</p>
</ProjectCard>
</div>
</section>
<section class="wanna-be-macchinista">
@ -153,17 +171,24 @@ const galleryCollage = await Astro.glob('@/assets/gallery/*.jpg')
<div class="text">
<p>Nessuno lo sa di preciso, ma facciamo molte cose:</p>
<ul>
<li>amministrazione di sistemi Linux/Unix e macchine virtuali</li>
<li>supporto tecnico per installare e usare Linux sul proprio portatile</li>
<li>costruiamo, smontiamo ed aggiustamo computer (antichi e moderni)</li>
<li>sviluppo di software per backend e web development</li>
<li><strong>amministrazione</strong> di sistemi Linux/Unix e di macchine virtuali</li>
<li>
supporto tecnico per installare ed usare <strong>Linux</strong> sul proprio portatile
</li>
<li>
<strong>costruiamo</strong>, <strong>smontiamo</strong> ed <strong>aggiustiamo</strong>
computer (antichi e moderni)
</li>
<li>
<strong>sviluppo software</strong> di backend e frontend per siti web (ma non solo)
</li>
<li>
organizzazione di seminari di divulgazione (vedi <a href="#projects">sopra</a>)
organizzazione di <strong>seminari</strong> di divulgazione (vedi <a href="#projects">sopra</a>)
</li>
</ul>
<p>
Inoltre, il PHC è prima di tutto un luogo dove imparare, trasmettere le proprie conoscenze
e condividere la passione per la tecnologia.
Infine, il PHC è prima di tutto un luogo dove <strong>imparare</strong>, <strong>trasmettere</strong
> le proprie conoscenze e <strong>condividere</strong> la passione per la tecnologia.
</p>
</div>
</Card>
@ -194,13 +219,12 @@ const galleryCollage = await Astro.glob('@/assets/gallery/*.jpg')
<div class="title">Vuoi diventare macchinista?</div>
<div class="text">
<p>
<strong>Macchinista non si nasce, si diventa:</strong> se sei uno studente di Matematica e
vuoi diventare un macchinista, vienici a trovare!
<strong>Macchinista non si nasce, si diventa:</strong> se sei uno studente di Matematica e vuoi diventare
un macchinista, vienici a trovare!
</p>
<p>
L'unico prerequisito è la voglia di imparare! Di solito, c'è un periodo di "apprendistato"
nel quale si apprendono le basi; una volta superato potrai diventare un macchinista a
tutti gli effetti.
L'unico prerequisito è la voglia di imparare! Di solito, c'è un periodo di "apprendistato" nel quale
si apprendono le basi; una volta superato potrai diventare un macchinista a tutti gli effetti.
</p>
</div>
</Card>

@ -0,0 +1,86 @@
---
import BaseLayout from '../layouts/BaseLayout.astro'
import Header from '../components/Header.astro'
import Footer from '../components/Footer.astro'
import Bubble from '../components/Bubble.astro'
import macchinisti from '@/data/macchinisti.yaml'
macchinisti.sort((a, b) => b.entranceDate - a.entranceDate)
// Import all images from assets folder
const images = Object.fromEntries(
Object.entries(
import.meta.glob<{ default: ImageMetadata }>('@/assets/macchinisti/*', {
eager: true,
}),
).map(([path, module]) => [path.split('/').pop()!.split('.')[0], module]),
)
const currentMacchinisti = macchinisti.filter(macchinista => !macchinista.exitDate)
const pastMacchinisti = macchinisti.filter(macchinista => macchinista.exitDate)
const getMacchinistaPicture = (fullName: string) => {
const macchinistaId = fullName.toLowerCase().replace(/\s+/g, '-')
const { default: image } = images[macchinistaId] ?? images['fallback']
return image
}
---
<BaseLayout title="Macchinisti | PHC" pageTags={'macchinisti'}>
<Header />
<main>
<div class="card large" style={{ '--card-base': '#e1766b' }}>
<div class="title">Ecco i Macchinisti!</div>
<div class="text">
<p>
<em>> Chi sono i macchinisti?</em>
<br />
Questo è l'appellativo dato agli studenti che si occupano di gestire l'infrastuttura e i servizi del
PHC (vedi la homepage per informazioni su come diventare un macchinista). Qua sotto trovi i macchinisti
attualmente attivi in PHC.
</p>
</div>
</div>
<div class="bubble-array">
{
currentMacchinisti.map(macchinista => (
<Bubble
image={getMacchinistaPicture(macchinista.fullName)}
fullName={macchinista.fullName}
entranceDate={macchinista.entranceDate}
description={macchinista.description}
social={macchinista.social}
/>
))
}
</div>
<div class="card large" style={{ '--card-base': '#6BD6E1' }}>
<div class="title"><s>Deus</s> Ex Macchinisti</div>
<div class="text">
<p>
Qui raccogliamo qualche informazione sui macchinisti del passato, che hanno contribuito a rendere il
PHC quello che è oggi.
</p>
</div>
</div>
<div class="bubble-array">
{
pastMacchinisti.map(macchinista => (
<Bubble
fullName={macchinista.fullName}
description={macchinista.description}
image={getMacchinistaPicture(macchinista.fullName)}
entranceDate={macchinista.entranceDate}
exitDate={macchinista.exitDate}
founder={macchinista.founder}
social={macchinista.social}
/>
))
}
</div>
</main>
<Footer />
</BaseLayout>

@ -10,7 +10,7 @@ const news = await getCollection('news')
<h1><a href="/notizie">Notizie</a></h1>
<div class="card-list">
{
news.map(newsItem => (
news.toReversed().map(newsItem => (
<div class="card">
<a href={`/notizie/${newsItem.slug}`} class="title">
{newsItem.data.title}

@ -17,9 +17,8 @@ import WebSite from '@/assets/gallery/005-website-development@3x4.jpg'
<div class="title">Storia</div>
<div class="text">
<p>
Il PHC nasce quasi venti anni fa, nel lontano 1999 ed ha perciò una ricca storia. Qui
proveremo ad annoverare la storia del PHC, in una timeline con gli eventi più salienti del
progetto.
Il PHC nasce quasi venti anni fa, nel lontano 1999 ed ha perciò una ricca storia. Qui proveremo ad
annoverare la storia del PHC, in una timeline con gli eventi più salienti del progetto.
</p>
<img
class="small flat"
@ -36,25 +35,25 @@ import WebSite from '@/assets/gallery/005-website-development@3x4.jpg'
<div class="timeline">
<Timeline title="Un nuovo look" year="Nov 2024">
<p>
Dopo mesi di lavoro e di progettazione, il sito del PHC viene riscritto da zero in Astro.
Il progetto è stato voluto principalmente da <strong>Antonio De Lucreziis</strong> (in foto,
in fase di sviluppo), con il supporto di <strong>Francesco Minnocci</strong>.
Dopo <s>mesi</s> anni di lavoro e di progettazione, il sito del PHC viene riscritto da zero in Astro.
Il progetto è stato voluto principalmente da <strong>Antonio De Lucreziis</strong> (in foto, in fase
di sviluppo), con il supporto di <strong>Francesco Minnocci</strong>.
</p>
<img class="fill" src={WebSite.src} alt="Sviluppo del sito" />
</Timeline>
<Timeline title="Luca e le grandi pulizie" year="Apr 2024">
<p>
Nel 2024, <strong>Luca Lombardo</strong> entra a far parte del PHC. Questo stesso anno vengono
effettuate delle grandi pulizie nella stanza del PHC, come non si faceva dal lontano 2006.
Nel 2024, <strong>Luca Lombardo</strong> entra a far parte del PHC. Questo stesso anno vengono effettuate
delle grandi pulizie nella stanza del PHC, come non si faceva dal lontano 2006.
</p>
<img class="fill" src={imgPulizie.src} alt="pulizie phc" />
</Timeline>
<Timeline title="Il cluster di Raspberry Pi" year="2023">
<p>
Il dipartimento acquista in due fasi diverse 34 (cloni) di Raspberry Pi 4, che vengono
assemblati in un cluster per il progetto "High Performance Mathematics". Il cluster è
stato assemblato, configurato e messo in funzione con la forte collaborazione macchinisti
del PHC, che ancora oggi ne curano la manutenzione.
Il dipartimento acquista in due fasi diverse 34 (cloni) di Raspberry Pi 4, che vengono assemblati in
un cluster per il progetto "High Performance Mathematics". Il cluster è stato assemblato,
configurato e messo in funzione con la forte collaborazione macchinisti del PHC, che ancora oggi ne
curano la manutenzione.
</p>
<img class="fill" src={imgCluster.src} alt="cluster di raspberry pi" />
</Timeline>
@ -81,16 +80,14 @@ import WebSite from '@/assets/gallery/005-website-development@3x4.jpg'
</Timeline>
<Timeline title="Rinnovo del sito" year="2004">
<p>
Dopo un periodo di inattività del progetto, il sito del PHC viene riscritto in PHP e
trasferito sul dominio <a
href="https://web.archive.org/web/20040823112401/http://poisson.phc.unipi.it/"
Dopo un periodo di inattività del progetto, il sito del PHC viene riscritto in PHP e trasferito sul
dominio <a href="https://web.archive.org/web/20040823112401/http://poisson.phc.unipi.it/"
>poisson.phc.unipi.it</a
>, il cui design è caratterizzato da un <a
href="https://web.archive.org/web/20060609003904im_/http://poisson.phc.unipi.it/logo_studenti.orig.png"
>logo</a
> creato da <strong>Michele Cerulli</strong>.
</p>
<!-- TODO: Pensare a come mostrare questa immagine su mobile -->
<img
class="fill"
src="https://web.archive.org/web/20060609003904im_/http://poisson.phc.unipi.it/logo_studenti.orig.png"
@ -108,28 +105,28 @@ import WebSite from '@/assets/gallery/005-website-development@3x4.jpg'
</Timeline>
<Timeline title="Rete del PHC e DNS" year="1999">
<p>
Nel maggio del 1999 viene attivata la rete 131.114.10.0, con tanto di nameserver sul
dominio <a href="https://web.archive.org/web/20010410215451/http://www.phc.unipi.it/"
>phc.unipi.it</a
Nel maggio del 1999 viene attivata la rete 131.114.10.0, con tanto di nameserver sul dominio <a
href="https://web.archive.org/web/20010410215451/http://www.phc.unipi.it/">phc.unipi.it</a
>.
</p>
</Timeline>
<Timeline title="Fondazione del PHC" year="1999">
<p>
In seguito alla proposta del prof. <strong>Sergio Steffè</strong>, in data 26 febbraio
1999 il Dipartimento di Matematica approva una delibera per stanziare la stanza 106 ed
alcuni computer ad uso di un gruppo di studenti, così da avere un luogo in cui
"smanettare", dare supporto informatica agli studenti e gestire il sito Poisson.
In seguito alla proposta del prof. <strong>Sergio Steffè</strong>, in data 26 febbraio 1999 il
Dipartimento di Matematica approva una delibera per stanziare la stanza 106, una sottorete, il
dominio DNS phc.dm.unipi.it ed alcuni computer ad uso di un gruppo di studenti (Riccardo Murri e
Massimiliano Sala), così da avere un luogo in cui "smanettare", offrire spazio a progetti
interessanti, dare supporto informatico agli studenti e gestire il sito Poisson
</p>
<img class="fill" src="https://poisson.phc.dm.unipi.it/~steffe/sergio.jpg" alt="Sergio Steffè" />
</Timeline>
<Timeline title="Apertura di Poisson" year="~1994">
<Timeline title="Apertura di Poisson" year="~1995">
<p>
Nell'attuale Aula 4, allora semplice Aula studenti, nasce il sito web <strong
>poisson.dm.unipi.it</strong
>
su dei computer messi a disposizione agli studenti da Vinicio Villani. Una versione del 1996
di tale sito si trova nel <a
href="https://web.archive.org/web/19971017065805/http://poisson.dm.unipi.it/"
su dei computer messi a disposizione agli studenti da Vinicio Villani. Una versione del 1996 di tale
sito si trova nel <a href="https://web.archive.org/web/19971017065805/http://poisson.dm.unipi.it/"
>Web Archive</a
>
</p>

@ -75,12 +75,7 @@ function setup() {
const handle = window.setInterval(() => {
const time = new Date().getTime() - startTime.getTime()
update(
state,
g.canvas.width / window.devicePixelRatio,
g.canvas.height / window.devicePixelRatio,
time
)
update(state, g.canvas.width / window.devicePixelRatio, g.canvas.height / window.devicePixelRatio, time)
render(g, state, time)
}, 1000 / RENDERER_FPS)
@ -266,25 +261,16 @@ const DIR_AVAILABLE_PREDICATE: Record<WireDirection, (pos: Point2, grid: Grid<Wi
implies(grid.has([x - 1, y]), () => grid.get([x - 1, y]) !== 'down-right') &&
implies(grid.has([x + 1, y]), () => grid.get([x + 1, y]) !== 'down-left'),
['down-left']: ([x, y], grid) =>
!grid.has([x - 1, y + 1]) &&
implies(grid.has([x - 1, y]), () => grid.get([x - 1, y]) === 'down-left'),
!grid.has([x - 1, y + 1]) && implies(grid.has([x - 1, y]), () => grid.get([x - 1, y]) === 'down-left'),
['down-right']: ([x, y], grid) =>
!grid.has([x + 1, y + 1]) &&
implies(grid.has([x + 1, y]), () => grid.get([x + 1, y]) === 'down-right'),
!grid.has([x + 1, y + 1]) && implies(grid.has([x + 1, y]), () => grid.get([x + 1, y]) === 'down-right'),
}
function pruneDirections(
grid: Grid<WireCell>,
position: Point2,
directions: WireDirection[]
): WireDirection[] {
function pruneDirections(grid: Grid<WireCell>, position: Point2, directions: WireDirection[]): WireDirection[] {
return directions.filter(dir => DIR_AVAILABLE_PREDICATE[dir](position, grid))
}
function generateWire(
grid: Grid<WireCell>,
startingPoint: Point2
): { position: Point2; direction: WireCell }[] {
function generateWire(grid: Grid<WireCell>, startingPoint: Point2): { position: Point2; direction: WireCell }[] {
const segmentLength = Math.floor(1 - Math.random() ** 2) * 10 + 30
let currentPosition = startingPoint
let currentDirection: WireDirection = randomChoice(['down', 'down', 'down', 'down-left', 'down-right'])
@ -292,11 +278,7 @@ function generateWire(
const steps: { position: Point2; direction: WireCell }[] = []
for (let i = 0; i < segmentLength; i++) {
const availableDirections = pruneDirections(grid, currentPosition, [
'down',
'down-left',
'down-right',
])
const availableDirections = pruneDirections(grid, currentPosition, ['down', 'down-left', 'down-right'])
if (availableDirections.length === 0) {
break
} else {

@ -8,6 +8,16 @@
// Components - for complex parts of the UI like search bars or compound buttons
//
.phosphor-icon {
box-sizing: content-box;
width: 22px;
height: 22px;
display: grid inline;
place-content: center;
}
.material-symbols-outlined {
font-family: 'Material Symbols Outlined Variable';
font-weight: normal;
@ -23,17 +33,17 @@
place-content: center;
font-size: 24px;
font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
font-variation-settings:
'FILL' 0,
'wght' 300,
'GRAD' 0,
'opsz' 24;
max-width: 32px;
&.extra-large {
font-size: 48px;
}
}
.title {
font-family: 'Iosevka', monospace;
font-family: var(--font-display);
font-weight: 700;
font-size: 28px;
}
@ -67,34 +77,12 @@
padding-left: 0.35rem;
}
.material-symbols-outlined {
.material-symbols-outlined,
.phosphor-icon {
padding: 0 0.5rem;
}
}
.flex-column {
display: flex;
flex-direction: column;
gap: 1rem;
}
.flex-row {
display: flex;
flex-direction: row;
gap: 1rem;
}
// just to know for reference
.fake-masonry {
display: grid;
grid-template-columns: repeat(var(--columns), 1fr);
grid-auto-flow: dense;
& > * {
grid-row: span var(--masonry-height);
}
}
.search-results {
width: 100%;
@ -539,7 +527,7 @@
& > .title {
color: color-mix(in srgb, var(--card-base-internal), #000 75%);
font-size: 26px;
font-size: 30px;
font-weight: 700;
}
@ -585,6 +573,13 @@
}
}
.metadata {
display: grid;
grid-auto-flow: column;
justify-content: start;
gap: 0.5rem;
}
@media screen and (max-width: $screen-desktop-min) {
padding: 0.9rem;
@ -602,6 +597,38 @@
}
}
.chip {
user-select: none;
display: grid;
place-content: center;
place-items: center;
color: #111;
background: #0004;
padding: 0 0.25rem;
border-radius: 0.25rem;
line-height: 1.5;
font-size: 16px;
font-weight: 500;
&.small {
font-size: 13px;
font-weight: 600;
}
&.disabled {
color: #0004;
background: #0002;
}
}
a:has(> .card) {
display: contents;
}
//
// Card List
//
@ -614,7 +641,7 @@
max-width: 100%;
gap: 2rem;
grid-template-columns: repeat(auto-fit, minmax(25rem, auto));
grid-template-columns: repeat(auto-fit, minmax(auto, 25rem));
grid-auto-rows: auto;
justify-content: center;
@ -622,10 +649,6 @@
& > .card {
max-width: 25rem;
}
@media screen and (max-width: $screen-desktop-min) {
grid-template-columns: 1fr;
}
}
.show-more {
@ -703,7 +726,8 @@
background: var(--filter-bg-color, #ddd);
.material-symbols-outlined {
.material-symbols-outlined,
.phosphor-icon {
padding: 0 0.35rem;
}
@ -823,209 +847,167 @@
}
}
.layout-admin {
display: grid;
grid-template-columns: minmax(12rem, auto) 1fr;
background: #f8f8f8;
.bubble-array {
display: flex;
width: 100%;
flex-wrap: wrap;
justify-content: center;
gap: 3rem 0rem;
> .sidebar {
> .bubble {
display: grid;
gap: 1rem;
padding: 1rem;
padding-right: calc(1rem + 2px);
gap: 0.5rem;
text-align: center;
justify-items: center;
align-content: start;
width: 18rem;
background: #e0e0e0;
border-right: 2px solid var(--palette-black);
.date {
display: grid;
place-content: center;
font-size: 16px;
font-weight: 600;
padding: 0.25rem 0.5rem;
background: #0002;
border-radius: 0.25rem;
}
> nav {
> ul {
display: grid;
gap: 1rem;
padding: 0;
.founder {
display: grid;
place-content: center;
font-size: 15px;
font-weight: 700;
list-style: none;
// gold badge
background: #ffdb12;
color: #725306;
align-content: start;
padding: 0 0.25rem;
> li {
> a {
display: grid;
grid-auto-flow: column;
justify-content: start;
align-items: center;
border: 2px solid #b98c19;
border-radius: 0.25rem;
gap: 0.25rem;
padding: 0.25rem;
box-shadow: 0.125rem 0.125rem 0 0 #664b06;
}
color: #222;
background: #b0b0b0;
font-family: 'Iosevka', monospace;
text-decoration: none;
.description {
font-size: 16px;
text-wrap: balance;
}
@include neo-brutalist-card(2px, 2px);
.social {
display: grid;
grid-auto-flow: column;
gap: 0.5rem;
justify-content: center;
&:hover {
background: #c0c0c0;
}
}
}
.phosphor-icon {
width: 28px;
height: 28px;
}
}
}
> .content {
padding: 3rem 0;
> img {
border-radius: 100%;
border: 4px solid #333;
object-fit: cover;
width: 100%;
aspect-ratio: 1 / 1;
display: grid;
align-content: start;
justify-items: center;
width: 12rem;
}
}
}
.admin-dashboard-grid {
.wide-card-list {
display: grid;
width: 100%;
grid-template-columns: repeat(auto-fit, minmax(auto, 31rem));
grid-auto-rows: auto;
place-content: center;
grid-template-columns: repeat(auto-fit, minmax(auto, 28rem));
gap: 2rem;
padding: 2rem;
--card-base: #ffb6a0;
}
.admin-table {
width: 100%;
@include neo-brutalist-card;
display: grid;
grid-template-rows: auto auto;
padding: 1rem;
gap: 1rem;
background: #b6ffa0;
font-size: 16px;
.table-header {
display: grid;
grid-template-columns: 1fr auto;
.table-title {
display: grid;
grid-auto-flow: column;
align-items: center;
justify-content: start;
gap: 0.5rem;
font-weight: 600;
font-size: 32px;
justify-content: center;
// align-items: start;
> * {
font-size: 32px;
}
}
.text > * {
max-width: none;
}
.table-body {
.card {
display: grid;
grid-template-columns: repeat(5, auto);
grid-auto-rows: auto;
grid-auto-flow: row;
@include neo-brutalist-card;
background: #a0ffb6;
.table-row {
grid-column: 1 / -1;
display: grid;
grid-template-columns: subgrid;
&:not(:last-child) {
border-bottom: 2px solid #0009;
}
&.header {
font-weight: 600;
.table-cell {
background: #5ec576;
}
}
.table-cell {
display: grid;
align-items: center;
grid-auto-flow: column;
justify-content: start;
gap: 0.5rem;
padding: 0.25rem;
grid-template-rows: 1fr auto;
}
&:not(:last-child) {
border-right: 2px solid #0009;
}
}
@media screen and (max-width: $screen-desktop-min) {
grid-template-columns: 1fr;
&:first-child {
.table-cell:first-child {
border-top-left-radius: 0.25rem;
}
.table-cell:last-child {
border-top-right-radius: 0.25rem;
}
}
}
padding: 0;
gap: 1rem;
}
}
.boxes {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
grid-template-rows: auto 1fr auto;
.filter {
min-width: 15rem;
}
gap: 0.25rem 0.5rem;
.flex-column {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
user-select: none;
.flex-row {
display: flex;
flex-direction: row;
gap: 0.5rem;
}
.title,
.description {
font-family: 'Iosevka', monospace;
font-weight: 700;
font-size: 16px;
.flex-row-wrap {
display: flex;
flex-direction: row;
gap: 0.5rem;
flex-wrap: wrap;
}
text-align: center;
}
.grid-h {
display: grid;
grid-auto-flow: column;
justify-content: start;
align-items: center;
> .box {
display: grid;
gap: 0.5rem;
}
grid-column: span 1;
grid-row: 1 / -1;
.grid-v {
display: grid;
justify-items: start;
align-content: start;
grid-template-rows: subgrid;
grid-auto-flow: row;
gap: 0.5rem;
}
place-items: center;
.grid-center {
display: grid;
place-content: center;
place-items: center;
gap: 0.5rem;
grid-auto-flow: row;
}
background: #0002;
border-radius: 0.25rem;
.clickable {
cursor: pointer;
}
padding: 0.5rem;
// just to know for reference
.fake-masonry {
display: grid;
grid-template-columns: repeat(var(--columns), 1fr);
grid-auto-flow: dense;
&:hover {
background: #0003;
}
& > * {
grid-row: span var(--masonry-height);
}
}
}

@ -35,7 +35,7 @@
text-decoration: none;
color: #222;
font-family: 'Source Sans Pro', sans-serif;
font-family: var(--font-secondary);
font-weight: 600;
cursor: pointer;
@ -129,4 +129,47 @@
justify-self: center;
}
}
details {
width: 100%;
summary {
display: grid;
place-content: center;
place-items: center;
list-style: none;
&::-webkit-details-marker {
display: none;
}
}
.details-openned,
.details-closed {
display: contents;
}
&:not([open]) {
.details-openned {
display: none;
}
}
&[open] {
summary {
padding-bottom: 1rem;
}
.details-closed {
display: none;
}
}
@media screen and (max-width: $screen-desktop-min) {
summary {
place-content: stretch;
place-items: stretch;
}
}
}
}

@ -2,7 +2,6 @@ $screen-desktop-min: 1024px;
:root {
--palette-black: #222;
--border-large: 4px solid var(--palette-black);
--header-bg: #fff;
@ -17,6 +16,11 @@ $screen-desktop-min: 1024px;
--homepage-macchinisti-bg: #888;
--project-card-bg: #a2d4f3;
--font-primary: 'Open Sans', sans-serif;
--font-display: 'Iosevka', monospace;
--font-mono: 'Source Code Pro', monospace;
--font-secondary: 'Source Sans Pro', sans-serif;
}
@layer common, typography, component, page;
@ -42,7 +46,7 @@ $screen-desktop-min: 1024px;
min-height: 100%;
margin: 0;
font-family: 'Open Sans', sans-serif;
font-family: var(--font-primary);
font-size: 18px;
color: #222;
}
@ -113,11 +117,13 @@ body {
padding: 0 1.5rem;
a {
font-family: 'Iosevka', monospace;
font-family: var(--font-display);
font-size: 18px;
font-weight: 500;
letter-spacing: 1px;
color: #333;
padding: 0.25rem 1.325rem;
}
@media screen and (max-width: $screen-desktop-min) {
@ -204,6 +210,10 @@ body {
@media screen and (max-width: $screen-desktop-min) {
padding: 3rem 1rem;
gap: 3rem;
.card {
width: 100%;
}
}
}
@ -221,8 +231,8 @@ body {
display: grid;
place-content: center;
font-family: 'Source Sans Pro', sans-serif;
font-size: 20px;
font-family: var(--font-secondary);
font-size: 18px;
scroll-snap-align: end;

@ -15,69 +15,3 @@
}
}
}
.stack-v {
display: flex;
flex-direction: column;
&.fit > * {
flex-grow: 1;
}
&.center {
align-items: center;
}
> * {
flex-shrink: 0;
}
& > .fill {
flex-grow: 1;
}
& > .shrink {
flex-shrink: 1;
}
}
.stack-h {
display: flex;
flex-direction: row;
&.fit > * {
flex-grow: 1;
}
&.center {
align-items: center;
}
> * {
flex-shrink: 0;
}
& > .fill {
flex-grow: 1;
}
& > .shrink {
flex-shrink: 1;
}
}
.fill-w {
width: 100%;
}
.fill-h {
height: 100%;
}
.text-center {
text-align: center;
}
.max-width-content {
max-width: 64rem;
}

@ -141,6 +141,13 @@
--zone-color: color-mix(in lab, #e4c5ff, #000 60%);
}
}
span.highlighted {
background: color-mix(in lab, #e4c5ff, #000 10%);
cursor: default;
border-radius: 0.25rem;
padding: 0.125rem 0.25rem;
}
}
}
@ -206,7 +213,7 @@
// background: #fcddff;
// background: #ffa89c;
background: var(--card-bg, var(--project-card-bg));
color: #000e;
color: var(--card-fg, #000e);
@include neo-brutalist-card($size: 3px, $offset: 9px);
@ -430,6 +437,35 @@
}
}
.domande-esami {
background: hsl(180, 100%, 95%);
--card-base: hsl(180, 100%, 85%);
main {
justify-self: center;
display: flex;
flex-direction: column;
align-items: center;
padding: 4rem 0;
gap: 2rem;
.search {
max-width: 80ch;
}
button {
background: hsl(180, 100%, 72%);
}
.card a {
color: color-mix(in srgb, var(--card-base-internal), #000 80%);
}
}
}
// .login {
// background: #ddfaff;
@ -637,6 +673,20 @@
}
}
.macchinisti {
main {
justify-self: center;
background: linear-gradient(to top, #d5fbff, #ffd9d5);
display: flex;
flex-direction: column;
align-items: center;
padding: 4.5rem 3rem;
gap: 4.5rem;
}
}
//
// Meta
//
@ -763,7 +813,7 @@
background: #eee;
color: #000;
font-family: 'Iosevka', monospace;
font-family: var(--font-display);
font-size: 14px;
border-radius: 0.25rem;
@ -819,7 +869,7 @@
display: grid;
align-content: center;
font-family: 'JetBrains Mono', monospace;
font-family: 'JetBrains Mono', var(--font-mono);
font-size: 16px;
user-select: all;

@ -19,7 +19,7 @@
h#{$i} {
font-size: $base-font-size * $factor;
font-family: 'Iosevka', monospace;
font-family: var(--font-display);
font-weight: 700;
margin-bottom: 0.25rem;
}
@ -33,6 +33,18 @@
@layer typography {
@include geometric-headings;
strong {
font-weight: 600;
}
em {
font-style: italic;
}
.text-center {
text-align: center;
}
.text {
// text-align: justify;
// hyphens: auto;
@ -55,7 +67,7 @@
// background: color-mix(in lab, var(--zone-color), #fff 75%) !important;
// background: var(--code-bg, #00000022) !important;
font-family: 'Source Code Pro', monospace;
font-family: var(--font-mono);
font-weight: 400;
font-size: 16px;
}
@ -129,6 +141,9 @@
display: block;
margin: 0 auto;
width: 50ch;
max-width: 100%;
@include neo-brutalist-card(2px);
&.fill {
@ -201,6 +216,10 @@
}
}
li + li {
margin-top: 0.5rem;
}
a,
a:visited {
color: var(--zone-color, #1e6733);

@ -1,17 +1,17 @@
{
"extends": "astro/tsconfigs/strict",
"compilerOptions": {
"strict": true,
"jsx": "react-jsx",
"jsxImportSource": "preact",
"strictNullChecks": true,
"allowJs": true,
"baseUrl": ".",
"paths": {
"@/*": ["src/*"],
"@layouts/*": ["src/layouts/*"],
"@client/*": ["src/client/*"],
"@components/*": ["src/components/*"]
}
"extends": "astro/tsconfigs/strict",
"compilerOptions": {
"strict": true,
"jsx": "react-jsx",
"jsxImportSource": "preact",
"strictNullChecks": true,
"allowJs": true,
"baseUrl": ".",
"paths": {
"@/*": ["src/*"],
"@layouts/*": ["src/layouts/*"],
"@client/*": ["src/client/*"],
"@components/*": ["src/components/*"]
}
}
}

Loading…
Cancel
Save