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