add notizie, rework homepage and fill with content

dev
Francesco Minnocci 4 months ago
parent 13b0c03e5f
commit 8f1d6cfff1

@ -5,19 +5,19 @@ Questo è il repository del sito web del PHC. Il sito è costruito utilizzando A
## Installazione ## Installazione
```bash ```bash
pnpm install bun install
``` ```
## Sviluppo ## Sviluppo
```bash ```bash
pnpm dev bun dev
``` ```
## Build ## Build
```bash ```bash
pnpm build bun build
``` ```
## Deploy [TODO] ## Deploy [TODO]

@ -3,11 +3,11 @@
<img src="/images/logo-circuit-board.svg" alt="phc logo" /> <img src="/images/logo-circuit-board.svg" alt="phc logo" />
</a> </a>
<div class="links"> <div class="links">
<a role="button" href="/utenti">Utenti</a> <!-- <a role="button" href="/utenti">Utenti</a> -->
<a role="button" href="/appunti">Appunti</a> <!-- <a role="button" href="/appunti">Appunti</a> -->
<a role="button" href="/notizie">Notizie</a> <a role="button" href="/notizie">Notizie</a>
<a role="button" href="/guide">Guide</a> <a role="button" href="/guide">Guide</a>
<a role="button" href="/about">About</a> <a role="button" href="/storia">Storia</a>
<a class="primary" role="button" href="/login">Login</a> <!-- <a class="primary" role="button" href="/login">Login</a> -->
</div> </div>
</header> </header>

@ -0,0 +1,22 @@
---
const { title, tags, description, image, date, author } = Astro.props
---
<div class="news-item">
<div class="title">
{title}
</div>
<div class="description">{description}</div>
<div class="tags">
{tags.map(tag => <a href={`/notizie/tags/${tag}`}>#{tag}</a>)}
</div>
{image && <img src={image} alt={title} />}
<div class="date">{
new Date(date).toLocaleDateString('it-IT', {
year: 'numeric',
month: 'long',
day: 'numeric'
})
}</div>
<div class="author">{author}</div>
</div>

@ -0,0 +1,39 @@
---
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.
author: Francesco Minnocci
publishDate: 2024-07-28
tags: [astro, web, appunti]
---
# Il Nuovo Sito del PHC
Benvenuti nel nuovo sito web, realizzato con la tecnologia web Astro! In questo articolo, ne vedremo le feature principali e cosa serba il futuro.
## Astro: Un Potente Framework Statico
Astro è un framework statico che ci consente di creare siti web veloci e performanti. Grazie alla sua natura statica, il sito viene generato in anticipo, consentendo un caricamento rapido delle pagine e un'esperienza utente ottimale.
## Caratteristiche del Nuovo Sito
Il nuovo sito web realizzato in Astro offre diverse caratteristiche interessanti:
1. **Interattività**: Grazie all'utilizzo di Astro, siamo in grado di creare pagine web interattive che offrono un'esperienza coinvolgente agli utenti. Questo ci permette di creare una navigazione fluida e dinamica all'interno del sito.
2. **Pagina di Appunti dei Corsi**: Una delle prossime funzionalità che stiamo sviluppando è una pagina di appunti dei corsi interattiva e ricercabile. Questa pagina consentirà agli utenti di cercare e accedere facilmente agli appunti dei corsi, rendendo lo studio più efficiente e organizzato.
3. **Utenti Registrati**: In futuro, prevediamo di implementare un sistema di registrazione degli utenti. Ciò consentirà agli utenti di creare un account personalizzato e accedere a funzionalità esclusive, come mettere mi piace ai propri appunti preferiti o uplodare le proprie risorse.
## Cosa Aspettarsi in Futuro
Il nostro obiettivo è continuare a migliorare il sito web e offrire un'esperienza sempre più completa agli utenti. Alcune delle prossime caratteristiche che stiamo sviluppando includono:
- **Integrazione con Social Media**: Vogliamo consentire agli utenti di condividere facilmente il contenuto del sito web sui social media, ampliando così la visibilità e l'accessibilità del nostro materiale.
- **Miglioramenti dell'Interfaccia Utente**: Stiamo lavorando per migliorare l'aspetto e la sensazione del sito web, rendendolo più intuitivo e piacevole da navigare.
- **Espansione dei Contenuti**: Continueremo ad aggiungere nuovi articoli, tutorial e risorse per fornire agli utenti un'ampia gamma di contenuti di qualità.
## Conclusioni
Il nuovo sito web realizzato in Astro offre un'esperienza interattiva e performante. Con l'aggiunta di una pagina di appunti dei corsi ricercabile e la possibilità di registrarsi come utenti, stiamo lavorando per rendere il sito ancora più utile e coinvolgente. Continuate a seguirci per rimanere aggiornati sulle ultime novità e miglioramenti!

@ -4,13 +4,13 @@ import { getCollection } from 'astro:content'
import PageLayout from '@layouts/PageLayout.astro' import PageLayout from '@layouts/PageLayout.astro'
import ArticleCard from '@components/ArticleCard.astro' import ArticleCard from '@components/ArticleCard.astro'
const blogposts = await getCollection('guides') const posts = await getCollection('guides')
--- ---
<PageLayout pageName="guide"> <PageLayout pageName="guide">
<div class="article-list"> <div class="article-list">
{ {
blogposts.map(post => ( posts.map(post => (
<ArticleCard <ArticleCard
title={post.data.title} title={post.data.title}
id={post.data.id} id={post.data.id}

@ -15,18 +15,28 @@ import PageLayout from '../layouts/PageLayout.astro'
<div class="title">Cos'è il PHC?</div> <div class="title">Cos'è il PHC?</div>
<div class="content"> <div class="content">
<p> <p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam vero deserunt tempore Il <span title="Pisa Happy Computing">
reprehenderit atque, voluptate dolorum excepturi libero pariatur sequi? <strong>PHC</strong>
</span> è un laboratorio informatico, gestito dagli studenti del <strong
>Dipartimento di Matematica</strong
> di Pisa e nato nel <a
href="http://web.archive.org/web/19971017065805/http://poisson.dm.unipi.it/">1994</a
>, che offre vari servizi agli studenti come questo sito.
</p> </p>
<p> <p>
Laboriosam soluta ab a illum mollitia quaerat quia, veniam consequatur expedita dolore La sede del PHC è la <a href="https://www.dm.unipi.it/mappa/?sel=638cd24b50cf34e03924a00c"
autem reiciendis quae rem excepturi optio? Maiores, hic? >stanza 106</a
> del Dipartimento, dove si trovano i <strong>macchinisti</strong> per sperimentare con progetti
<a href="https://lab.phc.dm.unipi.it/orario">software</a> ed <a
href="http://steffe.cs.dm.unipi.it/">hardware</a
>, e occuparsi dei server autogestiti come <a href="https://poisson.phc.dm.unipi.it"
>Poisson</a
>, che ospita le pagine degli studenti.
</p> </p>
<p> <p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Exercitationem error atque amet. Le macchine del PHC girano principalmente sistemi operativi Linux/Unix e i macchinisti
Tempora earum nemo eveniet aspernatur quam quas, doloribus expedita quisquam dignissimos usano (e <a href="https://git.phc.dm.unipi.it/phc">sviluppano</a>) software Open Source.
cupiditate inventore a modi optio harum veritatis, adipisci ab ullam distinctio odio quod Per sapere di più sulla storia del PHC, leggi <a href="/storia">qui</a>.
delectus ipsum, rerum animi.
</p> </p>
</div> </div>
</div> </div>
@ -53,13 +63,9 @@ import PageLayout from '../layouts/PageLayout.astro'
<div class="news-list"> <div class="news-list">
<div class="news-item"> <div class="news-item">
<div class="title">Lorem ipsum dolor sit.</div> <div class="title">Nuovo Sito!</div>
<div class="abstract"> <div class="abstract">
<p> <p>Questo è il nuovo sito del PHC, realizzato con Astro e</p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis reprehenderit porro
omnis enim deleniti esse quos, architecto adipisci veritatis, iusto perferendis
aperiam recusandae exercitationem doloribus, illum commodi voluptatem pariatur eius!
</p>
<p> <p>
Impedit ut quod aspernatur vitae vero incidunt cupiditate perferendis explicabo sunt Impedit ut quod aspernatur vitae vero incidunt cupiditate perferendis explicabo sunt
possimus rerum expedita dicta nesciunt enim mollitia iure ullam aut, pariatur, at possimus rerum expedita dicta nesciunt enim mollitia iure ullam aut, pariatur, at
@ -142,19 +148,27 @@ import PageLayout from '../layouts/PageLayout.astro'
<div class="title">Progetti</div> <div class="title">Progetti</div>
<div class="project-list"> <div class="project-list">
<a target="_blank" href="https://git.phc.dm.unipi.it/" style="--masonry-height: 3;"> <a target="_blank" href="https://git.phc.dm.unipi.it/" style="--masonry-height: 2;">
<div class="project" style="--card-bg: #272;"> <div class="project" style="--card-bg: rgb(150, 197, 150);">
<div class="image"> <div class="image">
<div class="box"></div> <img
src="https://upload.wikimedia.org/wikipedia/commons/b/bb/Gitea_Logo.svg"
alt="logo Gitea"
/>
</div> </div>
<div class="title">Gitea</div> <div class="title">Gitea</div>
<div class="description"> <div class="description">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus quam iure <p>
dolor. Excepturi facere, ipsa accusantium labore explicabo quaerat incidunt. Gitea è un servizio di hosting per progetti software, come GitHub ma autogestito.
</p>
<p>
Qui troverai i progetti del PHC, ma non solo: può accedervi chiunque con un
account di Ateneo.
</p>
</div> </div>
</div> </div>
</a> </a>
<a href="#" style="--masonry-height: 2;"> <!-- <a href="#" style="--masonry-height: 2;">
<div class="project"> <div class="project">
<div class="image"> <div class="image">
<div class="box"></div> <div class="box"></div>
@ -164,28 +178,37 @@ import PageLayout from '../layouts/PageLayout.astro'
Un bot con cui chattare per chiedere informazioni o supporto tecnico. Un bot con cui chattare per chiedere informazioni o supporto tecnico.
</div> </div>
</div> </div>
</a> </a> -->
<a target="_blank" href="https://lab.phc.dm.unipi.it/orario/" style="--masonry-height: 3;"> <a target="_blank" href="https://lab.phc.dm.unipi.it/orario/" style="--masonry-height: 2;">
<div class="project" style="--card-bg: #75ca75;"> <div class="project" style="--card-bg: #75ca75;">
<div class="image"> <div class="image">
<div class="box"></div> <div class="box"></div>
</div> </div>
<div class="title">Orario</div> <div class="title">Orario</div>
<div class="description"> <div class="description">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus quam iure Questo sito permette di visualizzare il proprio orario delle lezioni,
dolor. Excepturi facere, ipsa accusantium labore explicabo quaerat incidunt. con informazioni sui docenti e le aule.
</div> </div>
</div> </div>
</a> </a>
<a target="_blank" href="https://lab.phc.dm.unipi.it/problemi/" style="--masonry-height: 2;"> <a target="_blank" href="https://lab.phc.dm.unipi.it/problemi/" style="--masonry-height: 1;">
<div class="project" style="--card-bg: #8d5fac;"> <div class="project" style="--card-bg: #aa88c0;">
<div class="image"> <div class="image">
<div class="box"></div> <img
src="https://lab.phc.dm.unipi.it/problemi/favicon/android-chrome-512x512.png"
alt="logo Problemi"
/>
</div> </div>
<div class="title">Problemi</div> <div class="title">Problemi</div>
<div class="description"> <div class="description">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, hic libero beatae <p>
voluptatem incidunt. Bacheca con problemi di Matematica da risolvere
inviando soluzioni in LaTeX.
</p>
<p>
La sera i problemi compaiono sullo schermo in atrio.
</p>
</div> </div>
</div> </div>
</a> </a>
@ -201,7 +224,7 @@ import PageLayout from '../layouts/PageLayout.astro'
</div> </div>
</div> </div>
</a> </a>
<a target="_blank" href="https://lab.phc.dm.unipi.it/orario/" style="--masonry-height: 2;"> <a target="_blank" href="https://seminarietti.phc.dm.unipi.it/" style="--masonry-height: 2;">
<div class="project" style="--card-bg: #bd9fec;"> <div class="project" style="--card-bg: #bd9fec;">
<div class="image"> <div class="image">
<div class="box"></div> <div class="box"></div>
@ -233,5 +256,12 @@ import PageLayout from '../layouts/PageLayout.astro'
</div> </div>
<div class="title">Vuoi diventare macchinista?</div> <div class="title">Vuoi diventare macchinista?</div>
<div class="content">
<p>
Se sei uno studente del Dipartimento di Matematica e vuoi diventare un macchinista del PHC,
vieni a trovarci in Dipartimento o scrivici a <a href="mailto:macchinisti@lists.dm.unipi.it">
</div>
</section> </section>
</PageLayout> </PageLayout>

@ -0,0 +1,19 @@
---
import { getCollection } from 'astro:content'
import ArticleLayout from '../../layouts/ArticleLayout.astro'
const { entry } = Astro.props
const { Content } = await entry.render()
---
<ArticleLayout
title={entry.data.title}
description={entry.data.description}
tags={entry.data.tags}
image={entry.data.image}
date={entry.data.publishDate}
author={entry.data.author}
>
<Content />
</ArticleLayout>

@ -0,0 +1,25 @@
---
import { getCollection } from 'astro:content'
import PageLayout from '@layouts/PageLayout.astro'
import NewsCard from '@components/NewsCard.astro'
const posts = await getCollection('posts')
---
<PageLayout pageName="notizie">
<div class="news-list">
{
posts.map(post => (
<NewsCard
title={post.data.title}
description={post.data.description}
tags={post.data.tags}
image={post.data.image}
date={post.data.publishDate}
author={post.data.author}
/>
))
}
</div>
</PageLayout>

@ -117,71 +117,6 @@ $news-accent-bg: #f8e8b1;
} }
} }
.news-item {
background: $news-bg;
@include neo-brutalist-card($size: 3px, $offset: 9px);
display: flex;
flex-direction: column;
width: 22rem;
max-height: 27rem;
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-thumb {
background-color: #c67e14;
border: 2px solid #222;
&:hover {
background-color: #e69419;
}
}
a {
font-weight: 600;
text-decoration: none;
color: #c67e14;
&:hover {
text-decoration: underline solid 2px;
}
}
& > .title {
// border-bottom: 2px solid #222;
border-top-left-radius: 9px;
border-top-right-radius: 9px;
padding: 1rem;
background: $news-accent-bg;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
font-size: 32px;
}
& > .abstract {
flex-grow: 1;
padding: 1rem;
overflow-y: auto;
@extend .text;
}
& > .continue {
padding: 1rem;
display: grid;
align-items: end;
justify-content: end;
}
}
.appunti-scrollable { .appunti-scrollable {
display: flex; display: flex;
overflow-x: auto; overflow-x: auto;
@ -248,6 +183,7 @@ $news-accent-bg: #f8e8b1;
@include neo-brutalist-card($size: 3px, $offset: 9px); @include neo-brutalist-card($size: 3px, $offset: 9px);
row-gap: 0.5rem;
padding: 1rem; padding: 1rem;
.title { .title {
font-family: 'Source Sans Pro', sans-serif; font-family: 'Source Sans Pro', sans-serif;
@ -264,8 +200,77 @@ $news-accent-bg: #f8e8b1;
gap: 0.5rem; gap: 0.5rem;
flex-wrap: wrap; flex-wrap: wrap;
font-size: 14px; font-size: 14px;
padding-top: 0.5rem;
color: #555; color: #555;
} }
} }
} }
.news-list {
display: grid;
grid-auto-flow: column;
.news-item {
background: $news-bg;
@include neo-brutalist-card($size: 3px, $offset: 9px);
display: flex;
flex-direction: column;
width: 22rem;
max-height: 27rem;
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-thumb {
background-color: #c67e14;
border: 2px solid #222;
&:hover {
background-color: #e69419;
}
}
a {
font-weight: 600;
text-decoration: none;
color: #c67e14;
&:hover {
text-decoration: underline solid 2px;
}
}
& > .title {
// border-bottom: 2px solid #222;
border-top-left-radius: 9px;
border-top-right-radius: 9px;
padding: 1rem;
background: $news-accent-bg;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
font-size: 32px;
}
& > .abstract {
flex-grow: 1;
padding: 1rem;
overflow-y: auto;
@extend .text;
}
& > .continue {
padding: 1rem;
display: grid;
align-items: end;
justify-content: end;
}
}
}

@ -64,6 +64,24 @@ a {
p + p { p + p {
margin-top: 0.5rem; margin-top: 0.5rem;
} }
em {
font-style: italic;
}
strong {
font-weight: 600;
}
a,
a:visited {
color: #1e6733;
font-weight: 600;
&:hover {
text-decoration: underline;
}
}
} }
@import './controls.scss'; @import './controls.scss';
@ -181,7 +199,7 @@ body {
} }
section.principal { section.principal {
z-index: -2; z-index: 2;
min-height: calc(100vh - 7rem); min-height: calc(100vh - 7rem);
@ -199,7 +217,7 @@ body {
position: relative; position: relative;
.circuit-layer { .circuit-layer {
z-index: -1; z-index: 1;
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
@ -213,6 +231,7 @@ body {
} }
& > .logo { & > .logo {
z-index: 2;
max-width: 640px; max-width: 640px;
position: relative; position: relative;
@ -226,6 +245,7 @@ body {
} }
& > .whats-phc { & > .whats-phc {
z-index: 2;
background: $homepage-whatsphc-bg; background: $homepage-whatsphc-bg;
@include neo-brutalist-card($size: 4px, $offset: 8px); @include neo-brutalist-card($size: 4px, $offset: 8px);
@ -248,6 +268,7 @@ body {
.content { .content {
@extend .text; @extend .text;
line-height: 1.5;
} }
} }
} }
@ -339,10 +360,16 @@ body {
width: 5rem; width: 5rem;
height: 5rem; height: 5rem;
} }
img {
width: 5rem;
height: 5rem;
}
} }
.description { .description {
font-size: 16px; font-size: 16px;
@extend .text;
} }
transition: all 128ms ease-out; transition: all 128ms ease-out;
@ -358,6 +385,10 @@ body {
section.wanna-be-macchinista { section.wanna-be-macchinista {
background: $homepage-macchinisti-bg; background: $homepage-macchinisti-bg;
color: #fdfdfd; color: #fdfdfd;
.content {
@extend .text;
}
} }
} }
@ -477,6 +508,21 @@ body {
} }
} }
.notizie {
main {
justify-self: center;
display: flex;
flex-direction: column;
align-items: center;
max-width: 80ch;
padding: 5rem 0;
gap: 5rem;
}
}
.tag { .tag {
main { main {
justify-self: center; justify-self: center;

Loading…
Cancel
Save