wow such rich history

dev
Francesco Minnocci 2 months ago
parent a87c87eb10
commit d06e731edd

1420
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -12,9 +12,9 @@
"drizzle:migrate": "tsx src/db/migrate.ts" "drizzle:migrate": "tsx src/db/migrate.ts"
}, },
"dependencies": { "dependencies": {
"@astrojs/check": "^0.5.6", "@astrojs/check": "^0.9.4",
"@astrojs/node": "^8.2.1", "@astrojs/node": "^8.3.4",
"@astrojs/preact": "^3.1.1", "@astrojs/preact": "^3.5.3",
"@fontsource-variable/material-symbols-outlined": "^5.0.23", "@fontsource-variable/material-symbols-outlined": "^5.0.23",
"@fontsource/iosevka": "^5.0.11", "@fontsource/iosevka": "^5.0.11",
"@fontsource/mononoki": "^5.0.11", "@fontsource/mononoki": "^5.0.11",
@ -22,7 +22,7 @@
"@fontsource/source-code-pro": "^5.0.16", "@fontsource/source-code-pro": "^5.0.16",
"@fontsource/source-sans-pro": "^5.0.8", "@fontsource/source-sans-pro": "^5.0.8",
"@fontsource/space-mono": "^5.0.20", "@fontsource/space-mono": "^5.0.20",
"astro": "^4.4.6", "astro": "^4.15.11",
"better-sqlite3": "^9.4.3", "better-sqlite3": "^9.4.3",
"drizzle-orm": "^0.29.4", "drizzle-orm": "^0.29.4",
"katex": "^0.16.9", "katex": "^0.16.9",
@ -30,7 +30,7 @@
"typescript": "^5.3.3" "typescript": "^5.3.3"
}, },
"devDependencies": { "devDependencies": {
"@astrojs/mdx": "^3.1.3", "@astrojs/mdx": "^3.1.7",
"@types/better-sqlite3": "^7.6.9", "@types/better-sqlite3": "^7.6.9",
"@types/katex": "^0.16.7", "@types/katex": "^0.16.7",
"drizzle-kit": "^0.20.14", "drizzle-kit": "^0.20.14",

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

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

@ -2,10 +2,10 @@
title: Cos'è il PHC? 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 [1994](http://web.archive.org/web/19971017065805/http://poisson.dm.unipi.it/), che offre vari servizi agli studenti come [Poisson](https://poisson.phc.dm.unipi.it), che ospita le pagine degli studenti. Il <span title="Pisa Happy Computing">**PHC**</span> è un laboratorio informatico, gestito dagli studenti del **Dipartimento di Matematica** di Pisa e nato nel 1999, che offre vari servizi agli studenti come [Poisson](https://poisson.phc.dm.unipi.it), che ospita le pagine degli studenti.
La sede del PHC è la [stanza 106](https://www.dm.unipi.it/mappa/?sel=638cd24b50cf34e03924a00c) del Dipartimento, dove si trovano i **macchinisti** per discutere e realizzare progetti [hardware](http://steffe.cs.dm.unipi.it/) e [software](https://lab.phc.dm.unipi.it/orario), e occuparsi di server autogestiti. La sede del PHC è la [stanza 106](https://www.dm.unipi.it/mappa/?sel=638cd24b50cf34e03924a00c) del Dipartimento, dove si trovano i **macchinisti** per discutere e realizzare progetti [hardware](http://steffe.cs.dm.unipi.it/) e [software](https://lab.phc.dm.unipi.it/orario), e occuparsi di server autogestiti.
Le macchine del PHC girano principalmente Linux/Unix come sistemi operativi e i macchinisti sono grandi sostenitori di software [FOSS](https://it.wikipedia.org/wiki/Free_and_Open_Source_Software) (che loro stessi sviluppano sull'[istanza Gitea del PHC](https://git.phc.dm.unipi.it/phc)). 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 nel corso del tempo e di vari eventi notevoli si trova nella [pagina della storia](/storia) del PHC. La lista dei vari macchinisti e di altri eventi notevoli si trova nella [pagina della storia](/storia) del PHC.

@ -1,7 +1,7 @@
--- ---
title: Il Nuovo Sito del PHC title: Il Nuovo Sito del PHC
description: Benvenuti nel nuovo sito web del PHC, realizzato con la tecnologia web Astro! In questo articolo, ne vedremo le feature principali e cosa serba il futuro. description: Benvenuti nel nuovo sito web del PHC, realizzato con la tecnologia web Astro! In questo articolo, ne vedremo le feature principali e cosa serba il futuro.
publishDate: 2024-07-28 publishDate: 2024-10-05
--- ---
# Il Nuovo Sito del PHC # Il Nuovo Sito del PHC

@ -3,73 +3,98 @@ import BaseLayout from '../layouts/BaseLayout.astro'
import Header from '../components/Header.astro' import Header from '../components/Header.astro'
import Footer from '../components/Footer.astro' import Footer from '../components/Footer.astro'
import Timeline from '../components/Timeline.astro'
--- ---
<BaseLayout {...Astro.props} pageTags={'storia'}> <BaseLayout {...Astro.props} pageTags={'storia'}>
<Header /> <Header />
<main> <main>
<h1>Storia</h1> <h1>Storia</h1>
<div class="timeline">
<div class="timeline-item">
<div class="content">
<div class="card">
<div class="title">1999</div>
<div class="text">Evento 1</div>
<div class="text"> <div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor <p>
incididunt ut labore et dolore magna aliqua. Qui annoverariamo la storia del PHC in una timeline con gli eventi più salienti del progetto.
</div> </p>
</div> <p>
</div> Per delle note storiche un po' più dettagliate, si legga l'ottima pagine sul <a
</div> href="http://betti.dm.unipi.it/servizi/PHC.html">sito del dipartimento</a
<div class="timeline-item"> >.
<div class="content"> </p>
<div class="card">
<div class="title">2005</div>
<div class="text">Evento 2</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
</div>
<div class="timeline-item">
<div class="content">
<div class="card">
<div class="title">2010</div>
<div class="text">Evento 3</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
</div>
<div class="timeline-item">
<div class="content">
<div class="card">
<div class="title">2015</div>
<div class="text">Evento 4</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
</div>
<div class="timeline-item">
<div class="content">
<div class="card">
<div class="title">2020</div>
<div class="text">Evento 5</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
</div> </div>
<div class="timeline">
<Timeline title="Tanti Francesco" year="2022">
<p>
Nel 2022, entrano a far parte del PHC <strong>Francesco Minnocci</strong>, <strong
>Francesco Manicastri</strong
> e <strong>Francesco Baldino</strong>
</p>
</Timeline>
<Timeline title="Nuovi macchinisti" year="2019">
<p>
Nel 2019, entrano a far parte del PHC <strong>Antonio De Lucreziis</strong> e <strong
>Illya Serdyuk</strong
>
</p>
</Timeline>
<Timeline title="Nuovi macchinisti" year="2018">
<p>
Nel 2018, entrano a far parte del PHC <strong>Francesco Caporali</strong> e <strong
>Letizia D'Achille</strong
>
</p>
</Timeline>
<Timeline title="Rinnovo del sito" year="2004">
<p>
Dopo un periodo di inattività del progetto, il sito del PHC viene riscritto in PHP e
trasferito sul dominio <a
href="https://web.archive.org/web/20040823112401/http://poisson.phc.unipi.it/"
>poisson.phc.unipi.it</a
>, il cui design è caratterizzato da un <a
href="https://web.archive.org/web/20060609003904im_/http://poisson.phc.unipi.it/logo_studenti.orig.png"
>logo</a
> creato da <strong>Michele Cerulli</strong>.
</p><img
class="dropdown"
src="https://web.archive.org/web/20060609003904im_/http://poisson.phc.unipi.it/logo_studenti.orig.png"
alt="Logo"
/>
</Timeline>
<Timeline title="Seminari del PHC" year="2000">
<p>
Nel primo semestre del 2000, vengono tenuti diversi <a
href="https://web.archive.org/web/20010430151939/http://www.phc.unipi.it/seminari2000/"
>seminari</a
> su temi quali: installazione di programmi e sistemi operativi (come Linux), sicurezza informatica,
esperimenti con matematica e musica e creazione di pagine web.
</p>
</Timeline>
<Timeline title="Rete del PHC e DNS" year="1999">
<p>
Nel maggio del 1999 viene attivata la rete 131.114.10.0, con tanto di nameserver sul
dominio <a href="https://web.archive.org/web/20010410215451/http://www.phc.unipi.it/"
>phc.unipi.it</a
>.
</p>
</Timeline>
<Timeline title="Fondazione del PHC" year="1999">
<p>
In seguito alla proposta del prof. <strong>Sergio Steffè</strong>, in data 26 febbraio
1999 il Dipartimento di Matematica approva una delibera per stanziare la stanza 106 ed
alcuni computer ad uso di un gruppo di studenti, così da avere un luogo in cui
"smanettare", dare supporto informatica agli studenti e gestire il sito Poisson.
</p>
</Timeline>
<Timeline title="Apertura di Poisson" year="~1994">
<p>
Nell'attuale Aula 4, allora semplice Aula studenti, nasce il sito web <strong
>poisson.dm.unipi.it</strong
>
su dei computer messi a disposizione agli studenti da Vinicio Villani. Una versione del 1996
di tale sito si trova nel <a
href="https://web.archive.org/web/19971017065805/http://poisson.dm.unipi.it/"
>Web Archive</a
>
</p>
</Timeline>
</div> </div>
</main> </main>
<Footer /> <Footer />

@ -13,7 +13,11 @@
place-content: center; place-content: center;
font-size: 24px; 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;
} }
.title { .title {
@ -334,43 +338,12 @@
grid-template-columns: var(--timeline-track-size) 1fr; grid-template-columns: var(--timeline-track-size) 1fr;
} }
max-width: 120rch; max-width: 120ch;
& > .timeline-item { & > .timeline-item {
position: relative;
display: grid; display: grid;
@media screen and (min-width: $screen-desktop-min) {
&:nth-child(odd) {
grid-column: 1 / span 2;
grid-template-columns: 1fr var(--timeline-track-size);
// text-align: right;
& > .content {
grid-column: 1;
}
}
&:nth-child(even) {
grid-column: 2 / span 2;
grid-template-columns: var(--timeline-track-size) 1fr;
& > .content {
grid-column: 2;
}
}
}
@media screen and (max-width: $screen-desktop-min) {
grid-column: 1 / span 2;
grid-template-columns: var(--timeline-track-size) 1fr;
& > .content {
grid-column: 2;
}
}
& > .content { & > .content {
padding: 2rem 1rem; padding: 2rem 1rem;
@ -393,8 +366,6 @@
} }
} }
position: relative;
// timeline vertical line // timeline vertical line
&::before { &::before {
content: ''; content: '';
@ -454,6 +425,67 @@
grid-column: 1 / span 1; grid-column: 1 / span 1;
} }
} }
.dropdown {
@include neo-brutalist-card;
max-width: 15rem;
position: absolute;
bottom: calc(-10rem - 1px);
left: 50%;
transform: translateX(calc(-50% - var(--timeline-track-size) / 2));
border-top: none;
border-radius: 0 0 0.5rem 0.5rem;
@media screen and (max-width: $screen-desktop-min) {
@include neo-brutalist-card;
position: static;
transform: none;
margin-left: auto;
margin-right: auto;
}
}
@media screen and (min-width: $screen-desktop-min) {
&:nth-child(odd) {
grid-column: 1 / span 2;
grid-template-columns: 1fr var(--timeline-track-size);
& > .content {
grid-column: 1;
}
.dropdown {
left: auto;
right: 50%;
transform: translateX(calc(50% - var(--timeline-track-size) / 2));
}
}
&:nth-child(even) {
grid-column: 2 / span 2;
grid-template-columns: var(--timeline-track-size) 1fr;
& > .content {
grid-column: 2;
}
.dropdown {
left: 50%;
transform: translateX(calc(-50% + var(--timeline-track-size) / 2));
}
}
}
@media screen and (max-width: $screen-desktop-min) {
grid-column: 1 / span 2;
grid-template-columns: var(--timeline-track-size) 1fr;
& > .content {
grid-column: 2;
}
}
} }
} }

@ -125,6 +125,9 @@ body {
footer { footer {
z-index: 10; z-index: 10;
padding: 1rem 0;
--paragraph-margin: 0.5rem;
--zone-color: #aaa;
min-height: 6rem; min-height: 6rem;
border-top: $border-large; border-top: $border-large;

@ -412,7 +412,7 @@
} }
.storia { .storia {
--card-base: #70f0a9; --card-base: #e4c5ff;
main { main {
justify-self: center; justify-self: center;
@ -427,11 +427,11 @@
// background horizontal linear gradient that is black in the center // background horizontal linear gradient that is black in the center
background: linear-gradient( background: linear-gradient(
to right, to right,
#70f0a933 0%, #e0ffc511 0%,
#70f0a933 25%, #e0ffc533 25%,
#70f0a999 50%, #e0ffc599 50%,
#70f0a933 75%, #e0ffc533 75%,
#70f0a933 100% #e0ffc511 100%
); );
} }
} }

@ -84,7 +84,7 @@
p { p {
line-height: 1.75; line-height: 1.75;
margin: 1rem auto; margin: var(--paragraph-margin, 1rem) auto;
} }
// p + p { // p + p {

Loading…
Cancel
Save