reworked homepage, prototype storia timeline
This commit is contained in:
+23
-103
@@ -2,13 +2,14 @@
|
||||
import { getCollection } from 'astro:content'
|
||||
|
||||
import PageLayout from '../layouts/PageLayout.astro'
|
||||
import NewsCard from '@/components/NewsCard.astro'
|
||||
|
||||
const posts = await getCollection('posts')
|
||||
const news = await getCollection('news')
|
||||
|
||||
// posts.push(...posts)
|
||||
// posts.push(...posts)
|
||||
// posts.push(...posts)
|
||||
|
||||
import { Content as WhatPhcContent, frontmatter as whatsPhcFrontmatter } from '../content/meta/whats-phc.md'
|
||||
---
|
||||
|
||||
<PageLayout pageName="homepage">
|
||||
@@ -20,33 +21,10 @@ const posts = await getCollection('posts')
|
||||
<div class="logo">
|
||||
<img src="/images/logo-circuit-board.svg" alt="phc logo" />
|
||||
</div>
|
||||
<div class="whats-phc">
|
||||
<div class="title">Cos'è il PHC?</div>
|
||||
<div class="content">
|
||||
<p>
|
||||
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>
|
||||
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>
|
||||
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 class="whats-phc card large">
|
||||
<div class="title">{whatsPhcFrontmatter.title}</div>
|
||||
<div class="text">
|
||||
<WhatPhcContent />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -70,85 +48,27 @@ const posts = await getCollection('posts')
|
||||
|
||||
<div class="title">Ultime Notizie</div>
|
||||
|
||||
<div class="news-list">
|
||||
<div class="card-list">
|
||||
{
|
||||
posts.map(post => (
|
||||
<NewsCard
|
||||
id={post.slug}
|
||||
title={post.data.title}
|
||||
description={post.data.description}
|
||||
tags={post.data.tags}
|
||||
image={post.data.image}
|
||||
date={post.data.publishDate}
|
||||
author={post.data.author}
|
||||
/>
|
||||
news.map(newsItem => (
|
||||
<div class="card">
|
||||
<a href={`/notizie/${newsItem.slug}`} class="title">
|
||||
{newsItem.data.title}
|
||||
</a>
|
||||
<div class="text small dimmed">
|
||||
{new Date(newsItem.data.publishDate).toLocaleDateString('it-IT', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
})}
|
||||
</div>
|
||||
<div class="text">{newsItem.data.description}</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
<!--
|
||||
<div class="news-item">
|
||||
<a href="#" class="title">Nuovo Sito!</a>
|
||||
<div class="abstract">
|
||||
<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
|
||||
cumque. Nemo obcaecati eaque recusandae fugit sed!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="news-item">
|
||||
<div class="title">Tempore provident impedit libero?</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>
|
||||
Impedit ut quod aspernatur vitae vero incidunt cupiditate perferendis explicabo sunt
|
||||
possimus rerum expedita dicta nesciunt enim mollitia iure ullam aut, pariatur, at
|
||||
cumque. Nemo obcaecati eaque recusandae fugit sed!
|
||||
</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
|
||||
cumque. Nemo obcaecati eaque recusandae fugit sed!
|
||||
</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
|
||||
cumque. Nemo obcaecati eaque recusandae fugit sed!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="news-item">
|
||||
<div class="title">Alias molestias consectetur quam</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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="news-item">
|
||||
<div class="title">Inventore dignissimos sapiente nulla</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>
|
||||
Impedit ut quod aspernatur vitae vero incidunt cupiditate perferendis explicabo sunt
|
||||
possimus rerum expedita dicta nesciunt enim mollitia iure ullam aut, pariatur, at
|
||||
cumque. Nemo obcaecati eaque recusandae fugit sed!
|
||||
</p>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<a class="primary" href="#" role="button">Vai all'Archivio</a>
|
||||
<a class="primary" href="/notizie" role="button">Vai all'Archivio</a>
|
||||
</section>
|
||||
<section class="projects">
|
||||
<div class="zig-zag">
|
||||
|
||||
@@ -27,7 +27,7 @@ const headings = getHeadings()
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
<main class="text-content center">
|
||||
<main class="text">
|
||||
<Content components={{ pre: CodeBlockPreview }} />
|
||||
</main>
|
||||
<Footer />
|
||||
|
||||
+65
-5
@@ -5,12 +5,72 @@ import Header from '../components/Header.astro'
|
||||
import Footer from '../components/Footer.astro'
|
||||
---
|
||||
|
||||
<BaseLayout {...Astro.props}>
|
||||
<BaseLayout {...Astro.props} pageName={'storia'}>
|
||||
<Header />
|
||||
<main class="text-content center">
|
||||
<p>
|
||||
Bla bla bla la storia del PHC con tutti i macchinisti che ci sono mai stati su una timeline carina
|
||||
</p>
|
||||
<main>
|
||||
<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">
|
||||
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">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>
|
||||
</main>
|
||||
<Footer />
|
||||
</BaseLayout>
|
||||
|
||||
Reference in New Issue
Block a user