i.serdyuk/website
1
0
Fork 0
forked from phc/website
Code Pull Requests Activity

add notizie, rework homepage and fill with content

Browse Source
This commit is contained in:
BachoSeven
2024-07-28 19:51:13 +02:00
parent 13b0c03e5f
commit 8f1d6cfff1
10 changed files with 293 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+3 -3
View File
@@ -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]
src/components/Header.astro
+4 -4
View File
@@ -3,11 +3,11 @@
<img src="/images/logo-circuit-board.svg" alt="phc logo" />
</a>
<div class="links">
<a role="button" href="/utenti">Utenti</a>
<a role="button" href="/appunti">Appunti</a>
<!-- <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="/about">About</a>
<a class="primary" role="button" href="/login">Login</a>
<a role="button" href="/storia">Storia</a>
<!-- <a class="primary" role="button" href="/login">Login</a> -->
</div>
</header>
src/components/NewsCard.astro
+22
View File
@@ -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>
src/content/posts/2024-07-28-nuovo-sito.md
+39
View File
@@ -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!
src/pages/guide/index.astro
+2 -2
View File
@@ -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')
---
<PageLayout pageName="guide">
<div class="article-list">
{
blogposts.map(post => (
posts.map(post => (
<ArticleCard
title={post.data.title}
id={post.data.id}
src/pages/index.astro
+60 -30
View File
@@ -15,18 +15,28 @@ import PageLayout from '../layouts/PageLayout.astro'
<div class="title">Cos'è il PHC?</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam vero deserunt tempore
reprehenderit atque, voluptate dolorum excepturi libero pariatur sequi?
Il <span title="Pisa Happy Computing">
<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>
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 <a href="https://www.dm.unipi.it/mappa/?sel=638cd24b50cf34e03924a00c"
>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>
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 <a href="https://git.phc.dm.unipi.it/phc">sviluppano</a>) software Open Source.
Per sapere di più sulla storia del PHC, leggi <a href="/storia">qui</a>.
</p>
</div>
</div>
@@ -53,13 +63,9 @@ import PageLayout from '../layouts/PageLayout.astro'
<div class="news-list">
<div class="news-item">
<div class="title">Lorem ipsum dolor sit.</div>
<div class="title">Nuovo Sito!</div>
<div class="abstract">
<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>Questo è il nuovo sito del PHC, realizzato con Astro e</p>
<p>
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'
<div class="title">Progetti</div>
<div class="project-list">
<a target="_blank" href="https://git.phc.dm.unipi.it/" style="--masonry-height: 3;">
<div class="project" style="--card-bg: #272;">
<a target="_blank" href="https://git.phc.dm.unipi.it/" style="--masonry-height: 2;">
<div class="project" style="--card-bg: rgb(150, 197, 150);">
<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 class="title">Gitea</div>
<div class="description">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus quam iure
dolor. Excepturi facere, ipsa accusantium labore explicabo quaerat incidunt.
<p>
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>
</a>
<a href="#" style="--masonry-height: 2;">
<!-- <a href="#" style="--masonry-height: 2;">
<div class="project">
<div class="image">
<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.
</div>
</div>
</a>
<a target="_blank" href="https://lab.phc.dm.unipi.it/orario/" style="--masonry-height: 3;">
</a> -->
<a target="_blank" href="https://lab.phc.dm.unipi.it/orario/" style="--masonry-height: 2;">
<div class="project" style="--card-bg: #75ca75;">
<div class="image">
<div class="box"></div>
</div>
<div class="title">Orario</div>
<div class="description">
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.
</div>
</div>
</a>
<a target="_blank" href="https://lab.phc.dm.unipi.it/problemi/" style="--masonry-height: 2;">
<div class="project" style="--card-bg: #8d5fac;">
<a target="_blank" href="https://lab.phc.dm.unipi.it/problemi/" style="--masonry-height: 1;">
<div class="project" style="--card-bg: #aa88c0;">
<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 class="title">Problemi</div>
<div class="description">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, hic libero beatae
voluptatem incidunt.
<p>
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>
</a>
@@ -201,7 +224,7 @@ import PageLayout from '../layouts/PageLayout.astro'
</div>
</div>
</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="image">
<div class="box"></div>
@@ -233,5 +256,12 @@ import PageLayout from '../layouts/PageLayout.astro'
</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>
</PageLayout>
src/pages/notizie/[id].astro
+19
View File
@@ -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>
src/pages/notizie/index.astro
+25
View File
@@ -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>
src/styles/components.scss
+71 -66
View File
@@ -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;
}
}
}
src/styles/main.scss
+48 -2
View File
@@ -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;