From 8f1d6cfff1dbe2a3bdfdeaeb5a84b57fd1b8df03 Mon Sep 17 00:00:00 2001 From: Francesco Minnocci Date: Sun, 28 Jul 2024 19:51:13 +0200 Subject: [PATCH] add notizie, rework homepage and fill with content --- README.md | 6 +- src/components/Header.astro | 8 +- src/components/NewsCard.astro | 22 ++++ src/content/posts/2024-07-28-nuovo-sito.md | 39 ++++++ src/pages/guide/index.astro | 4 +- src/pages/index.astro | 90 +++++++++----- src/pages/notizie/[id].astro | 19 +++ src/pages/notizie/index.astro | 25 ++++ src/styles/components.scss | 137 +++++++++++---------- src/styles/main.scss | 50 +++++++- 10 files changed, 293 insertions(+), 107 deletions(-) create mode 100644 src/components/NewsCard.astro create mode 100644 src/content/posts/2024-07-28-nuovo-sito.md create mode 100644 src/pages/notizie/[id].astro create mode 100644 src/pages/notizie/index.astro diff --git a/README.md b/README.md index 44fc9c9..3141e51 100644 --- a/README.md +++ b/README.md @@ -5,19 +5,19 @@ Questo è il repository del sito web del PHC. Il sito è costruito utilizzando A ## Installazione ```bash -pnpm install +bun install ``` ## Sviluppo ```bash -pnpm dev +bun dev ``` ## Build ```bash -pnpm build +bun build ``` ## Deploy [TODO] diff --git a/src/components/Header.astro b/src/components/Header.astro index 2596325..5cb984a 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -3,11 +3,11 @@ phc logo
- Utenti - Appunti + + Notizie Guide - About - Login + Storia +
diff --git a/src/components/NewsCard.astro b/src/components/NewsCard.astro new file mode 100644 index 0000000..d45ea85 --- /dev/null +++ b/src/components/NewsCard.astro @@ -0,0 +1,22 @@ +--- +const { title, tags, description, image, date, author } = Astro.props +--- + +
+
+ {title} +
+
{description}
+
+ {tags.map(tag => #{tag})} +
+ {image && {title}} +
{ + new Date(date).toLocaleDateString('it-IT', { + year: 'numeric', + month: 'long', + day: 'numeric' + }) + }
+
{author}
+
diff --git a/src/content/posts/2024-07-28-nuovo-sito.md b/src/content/posts/2024-07-28-nuovo-sito.md new file mode 100644 index 0000000..ccccd16 --- /dev/null +++ b/src/content/posts/2024-07-28-nuovo-sito.md @@ -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! diff --git a/src/pages/guide/index.astro b/src/pages/guide/index.astro index acc7a5f..b53d9b5 100644 --- a/src/pages/guide/index.astro +++ b/src/pages/guide/index.astro @@ -4,13 +4,13 @@ import { getCollection } from 'astro:content' import PageLayout from '@layouts/PageLayout.astro' import ArticleCard from '@components/ArticleCard.astro' -const blogposts = await getCollection('guides') +const posts = await getCollection('guides') ---
{ - blogposts.map(post => ( + posts.map(post => ( Cos'è il PHC?

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam vero deserunt tempore - reprehenderit atque, voluptate dolorum excepturi libero pariatur sequi? + Il + PHC + è un laboratorio informatico, gestito dagli studenti del Dipartimento di Matematica di Pisa e nato nel 1994, che offre vari servizi agli studenti come questo sito.

- Laboriosam soluta ab a illum mollitia quaerat quia, veniam consequatur expedita dolore - autem reiciendis quae rem excepturi optio? Maiores, hic? + La sede del PHC è la stanza 106 del Dipartimento, dove si trovano i macchinisti per sperimentare con progetti + software ed hardware, e occuparsi dei server autogestiti come Poisson, che ospita le pagine degli studenti.

- Lorem, ipsum dolor sit amet consectetur adipisicing elit. Exercitationem error atque amet. - Tempora earum nemo eveniet aspernatur quam quas, doloribus expedita quisquam dignissimos - cupiditate inventore a modi optio harum veritatis, adipisci ab ullam distinctio odio quod - delectus ipsum, rerum animi. + Le macchine del PHC girano principalmente sistemi operativi Linux/Unix e i macchinisti + usano (e sviluppano) software Open Source. + Per sapere di più sulla storia del PHC, leggi qui.

@@ -53,13 +63,9 @@ import PageLayout from '../layouts/PageLayout.astro'
-
Lorem ipsum dolor sit.
+
Nuovo Sito!
-

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

+

Questo è il nuovo sito del PHC, realizzato con Astro e

Impedit ut quod aspernatur vitae vero incidunt cupiditate perferendis explicabo sunt possimus rerum expedita dicta nesciunt enim mollitia iure ullam aut, pariatur, at @@ -142,19 +148,27 @@ import PageLayout from '../layouts/PageLayout.astro'

Progetti
- -
+ +
-
+ logo Gitea
Gitea
- Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus quam iure - dolor. Excepturi facere, ipsa accusantium labore explicabo quaerat incidunt. +

+ Gitea è un servizio di hosting per progetti software, come GitHub ma autogestito. +

+

+ Qui troverai i progetti del PHC, ma non solo: può accedervi chiunque con un + account di Ateneo. +

- + +
Orario
- Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus quam iure - dolor. Excepturi facere, ipsa accusantium labore explicabo quaerat incidunt. + Questo sito permette di visualizzare il proprio orario delle lezioni, + con informazioni sui docenti e le aule.
- -
+ +
-
+ logo Problemi
Problemi
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, hic libero beatae - voluptatem incidunt. +

+ Bacheca con problemi di Matematica da risolvere + inviando soluzioni in LaTeX. +

+ +

+ La sera i problemi compaiono sullo schermo in atrio. +

@@ -201,7 +224,7 @@ import PageLayout from '../layouts/PageLayout.astro'
- +
@@ -233,5 +256,12 @@ import PageLayout from '../layouts/PageLayout.astro'
Vuoi diventare macchinista?
+ +
+

+ Se sei uno studente del Dipartimento di Matematica e vuoi diventare un macchinista del PHC, + vieni a trovarci in Dipartimento o scrivici a + +

diff --git a/src/pages/notizie/[id].astro b/src/pages/notizie/[id].astro new file mode 100644 index 0000000..fbac4d5 --- /dev/null +++ b/src/pages/notizie/[id].astro @@ -0,0 +1,19 @@ +--- +import { getCollection } from 'astro:content' + +import ArticleLayout from '../../layouts/ArticleLayout.astro' + +const { entry } = Astro.props +const { Content } = await entry.render() +--- + + + + \ No newline at end of file diff --git a/src/pages/notizie/index.astro b/src/pages/notizie/index.astro new file mode 100644 index 0000000..90a4d33 --- /dev/null +++ b/src/pages/notizie/index.astro @@ -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') +--- + + +
+ { + posts.map(post => ( + + )) + } +
+ \ No newline at end of file diff --git a/src/styles/components.scss b/src/styles/components.scss index 9929b43..7801f41 100644 --- a/src/styles/components.scss +++ b/src/styles/components.scss @@ -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 { display: flex; overflow-x: auto; @@ -248,6 +183,7 @@ $news-accent-bg: #f8e8b1; @include neo-brutalist-card($size: 3px, $offset: 9px); + row-gap: 0.5rem; padding: 1rem; .title { font-family: 'Source Sans Pro', sans-serif; @@ -264,8 +200,77 @@ $news-accent-bg: #f8e8b1; gap: 0.5rem; flex-wrap: wrap; font-size: 14px; - padding-top: 0.5rem; 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; + } + } +} \ No newline at end of file diff --git a/src/styles/main.scss b/src/styles/main.scss index b0f1e5d..0474887 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -64,6 +64,24 @@ a { p + p { 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'; @@ -181,7 +199,7 @@ body { } section.principal { - z-index: -2; + z-index: 2; min-height: calc(100vh - 7rem); @@ -199,7 +217,7 @@ body { position: relative; .circuit-layer { - z-index: -1; + z-index: 1; position: absolute; left: 0; top: 0; @@ -213,6 +231,7 @@ body { } & > .logo { + z-index: 2; max-width: 640px; position: relative; @@ -226,6 +245,7 @@ body { } & > .whats-phc { + z-index: 2; background: $homepage-whatsphc-bg; @include neo-brutalist-card($size: 4px, $offset: 8px); @@ -248,6 +268,7 @@ body { .content { @extend .text; + line-height: 1.5; } } } @@ -339,10 +360,16 @@ body { width: 5rem; height: 5rem; } + + img { + width: 5rem; + height: 5rem; + } } .description { font-size: 16px; + @extend .text; } transition: all 128ms ease-out; @@ -358,6 +385,10 @@ body { section.wanna-be-macchinista { background: $homepage-macchinisti-bg; 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 { main { justify-self: center;