phc
/
website
6
4
Fork 0
Code Issues 8 Pull Requests Projects 1 Releases Wiki Activity

chore: minor refactor into some components and updated favicon
continuous-integration/drone/push Build is passing Details

Browse Source
main
Antonio De Lucreziis 1 day ago
parent 1d797e2dbe
commit a5d3edf6db
7 changed files with 161 additions and 165 deletions
Show Stats Download Patch File Download Diff File

BIN
src/assets/icon.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

15
src/components/Card.astro
Unescape Escape View File

@ -0,0 +1,15 @@
---
import type { AstroBuiltinProps } from 'astro'
import type { AstroComponentFactory } from 'astro/runtime/server/index.js'
type Props = {
large?: boolean
style?: string
}
const { large, ...props } = Astro.props
---
<div class:list={['card', large && 'large']} {...props}>
<slot />
</div>

26
src/components/HomepageZigZag.astro
Unescape Escape View File

@ -0,0 +1,26 @@
---
type Props = {
color: string
}
const { color } = Astro.props
const patternId = 'zig-zag-' + color.slice(1)
---
<div class="zig-zag">
<svg
width="100%"
height="2rem"
viewBox="0 0 1 1"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMinYMid meet"
>
<defs>
<pattern id={patternId} x="0" y="0" width="2" height="1" patternUnits="userSpaceOnUse">
<path fill={color} d="M 0,1 L 1,0 L 2,1 L 0,1"></path>
</pattern>
</defs>
<rect fill={`url(#${patternId})`} x="0" y="0" width="1000" height="1"></rect>
</svg>
</div>

24
src/components/ProjectCard.astro
Unescape Escape View File

@ -0,0 +1,24 @@
---
// Card.astro
export interface Props {
title: string
href: string
imgSrc?: string
style?: string
}
const { href, imgSrc, style, title } = Astro.props
---
<a target="_blank" href={href} style={style}>
<div class="project">
<div class="image">
{imgSrc ? <img src={imgSrc} alt={'logo for ' + title.toLowerCase()} /> : <div class="box" />}
</div>
<div class="title">{title}</div>
<div class="description">
<slot />
</div>
</div>
</a>

4
src/layouts/BaseLayout.astro
Unescape Escape View File

@ -20,6 +20,8 @@ type Props = {
pageTags?: string | string[] pageTags?: string | string[]
} }
import phcIcon from '../assets/icon.png'
const { title, description, thumbnail, pageTags } = Astro.props const { title, description, thumbnail, pageTags } = Astro.props
--- ---
@ -36,7 +38,7 @@ const { title, description, thumbnail, pageTags } = Astro.props
<meta property="og:url" content="https://phc.dm.unipi.it/" /> <meta property="og:url" content="https://phc.dm.unipi.it/" />
{thumbnail && <meta property="og:image" content={thumbnail} />} {thumbnail && <meta property="og:image" content={thumbnail} />}
<link rel="icon" type="image/png" sizes="512x512" href="/favicon.svg" /> <link rel="icon" type="image/png" sizes="512x512" href={phcIcon.src} />
<script> <script>
import renderMathInElement from 'katex/contrib/auto-render' import renderMathInElement from 'katex/contrib/auto-render'

249
src/pages/index.astro
Unescape Escape View File

@ -1,8 +1,11 @@
--- ---
import { getCollection } from 'astro:content' import { getCollection } from 'astro:content'
import PageLayout from '../layouts/PageLayout.astro' import PageLayout from '@/layouts/PageLayout.astro'
import { Content as WhatPhcContent, frontmatter as whatsPhcFrontmatter } from '../content/meta/whats-phc.md' import { Content as WhatPhcContent, frontmatter as whatsPhcFrontmatter } from '@/content/meta/whats-phc.md'
import { Image } from 'astro:assets' import { Image } from 'astro:assets'
import ProjectCard from '@/components/ProjectCard.astro'
import HomepageZigZag from '@/components/HomepageZigZag.astro'
import Card from '@/components/Card.astro'
const news = await getCollection('news') const news = await getCollection('news')
@ -34,30 +37,16 @@ const galleryCollage = await Astro.glob('@/assets/gallery/*.jpg')
</div> </div>
</div> </div>
</section> </section>
<section class="news"> <section class="news">
<div class="zig-zag"> <HomepageZigZag color="#C2A8EB" />
<svg
width="100%"
height="2rem"
viewBox="0 0 1 1"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMinYMid meet"
>
<defs>
<pattern id="zig-zag-1" x="0" y="0" width="2" height="1" patternUnits="userSpaceOnUse">
<path fill="#C2A8EB" d="M 0,1 L 1,0 L 2,1 L 0,1"></path>
</pattern>
</defs>
<rect fill="url(#zig-zag-1)" x="0" y="0" width="1000" height="1"></rect>
</svg>
</div>
<div class="title">Ultime Notizie</div> <div class="title">Ultime Notizie</div>
<div class="card-list"> <div class="card-list">
{ {
news.map(newsItem => ( news.map(newsItem => (
<div class="card"> <Card>
<a href={`/notizie/${newsItem.slug}`} class="title"> <a href={`/notizie/${newsItem.slug}`} class="title">
{newsItem.data.title} {newsItem.data.title}
</a> </a>
@ -69,153 +58,98 @@ const galleryCollage = await Astro.glob('@/assets/gallery/*.jpg')
})} })}
</div> </div>
<div class="text">{newsItem.data.description}</div> <div class="text">{newsItem.data.description}</div>
</div> </Card>
)) ))
} }
</div> </div>
<a class="primary" href="/notizie" role="button">Vai all'Archivio</a> <a class="primary" href="/notizie" role="button">Vai all'Archivio</a>
</section> </section>
<section class="projects" id="projects"> <section class="projects" id="projects">
<div class="zig-zag"> <HomepageZigZag color="#f5f2cc" />
<svg
width="100%"
height="2rem"
viewBox="0 0 1 1"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMinYMid meet"
>
<defs>
<pattern id="zig-zag-2" x="0" y="0" width="2" height="1" patternUnits="userSpaceOnUse">
<path fill="#f5f2cc" d="M 0,1 L 1,0 L 2,1 L 0,1"></path>
</pattern>
</defs>
<rect fill="url(#zig-zag-2)" x="0" y="0" width="1000" height="1"></rect>
</svg>
</div>
<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: 2;"> <ProjectCard
<div class="project" style="--card-bg: rgb(150, 197, 150);"> title="Gitea"
<div class="image"> href="https://git.phc.dm.unipi.it/"
<img imgSrc="https://upload.wikimedia.org/wikipedia/commons/b/bb/Gitea_Logo.svg"
src="https://upload.wikimedia.org/wikipedia/commons/b/bb/Gitea_Logo.svg" style="--card-bg: rgb(150, 197, 150); --masonry-height: 2;"
alt="logo Gitea" >
/> <p>Gitea è un servizio di hosting per progetti software, come GitHub ma autogestito.</p>
</div> <p>
<div class="title">Gitea</div> Qui puoi trovare i progetti del PHC, e accedendo con un account di Ateneo potrai crearne
<div class="description"> di nuovi.
<p> </p>
Gitea è un servizio di hosting per progetti software, come GitHub ma autogestito. </ProjectCard>
</p> <!-- <ProjectCard
<p> title="PHC-Bot"
Qui puoi trovare i progetti del PHC, e accedendo con un account di Ateneo potrai href="#"
crearne di nuovi. style="--card-bg: #c55; --masonry-height: 1;"
</p> >
</div> <p>Un bot con cui chattare per chiedere informazioni o supporto tecnico.</p>
</div> </ProjectCard> -->
</a> <ProjectCard
<!-- <a href="#" style="--masonry-height: 2;"> title="Orario"
<div class="project"> href="https://lab.phc.dm.unipi.it/orario/"
<div class="image"> style="--card-bg: #75ca75; --masonry-height: 1;"
<div class="box"></div> imgSrc="https://lab.phc.dm.unipi.it/orario/icon.png"
</div> >
<div class="title">PHC-Bot</div> <p>
<div class="description"> Questo sito permette di visualizzare il proprio orario delle lezioni, con informazioni sui
Un bot con cui chattare per chiedere informazioni o supporto tecnico. docenti e le aule.
</div> </p>
</div> </ProjectCard>
</a> --> <ProjectCard
<a target="_blank" href="https://lab.phc.dm.unipi.it/orario/" style="--masonry-height: 1;"> title="Problemi"
<div class="project" style="--card-bg: #75ca75;"> href="https://lab.phc.dm.unipi.it/problemi/"
<div class="image"> style="--card-bg: #aa88c0; --masonry-height: 2;"
<img src="https://lab.phc.dm.unipi.it/orario/icon.png" alt="Logo Orario" /> imgSrc="https://lab.phc.dm.unipi.it/problemi/favicon/android-chrome-512x512.png"
</div> >
<div class="title">Orario</div> <p>Bacheca di problemi di Matematica da risolvere, inviandone le soluzioni in LaTeX.</p>
<div class="description"> <p>Di sera, puoi leggere i problemi sullo schermo del Dipartimento in atrio.</p>
Questo sito permette di visualizzare il proprio orario delle lezioni, con informazioni </ProjectCard>
sui docenti e le aule. <ProjectCard
</div> title='Cluster "Steffè"'
</div> href="http://steffe.cs.dm.unipi.it/"
</a> style="--masonry-height: 2;"
<a target="_blank" href="https://lab.phc.dm.unipi.it/problemi/" style="--masonry-height: 2;"> imgSrc="https://steffe.lb.cs.dm.unipi.it/assets/img/logo.png"
<div class="project" style="--card-bg: #aa88c0;"> >
<div class="image"> <p>
<img Cluster progettato ed assemblato durante il progetto speciale per la didattica "Calcolo
src="https://lab.phc.dm.unipi.it/problemi/favicon/android-chrome-512x512.png" Parallelo dall'Infrastruttura alla Matematica".
alt="logo Problemi" </p>
/> </ProjectCard>
</div> <ProjectCard
<div class="title">Problemi</div> title="Seminarietti"
<div class="description"> href="https://seminarietti.phc.dm.unipi.it/"
<p> style="--card-bg: #bd9fec; --masonry-height: 2;"
Bacheca di problemi di Matematica da risolvere, inviandone le soluzioni in LaTeX. imgSrc="https://seminarietti.phc.dm.unipi.it/favicon.png"
</p> >
<p>Varie conferenze del PHC su argomenti di informatica, matematica e tecnologia.</p>
<p>Di sera, puoi leggere i problemi sullo schermo del Dipartimento in atrio.</p> </ProjectCard>
</div> <ProjectCard
</div> title="Tutorato"
</a> href="https://tutorato.phc.dm.unipi.it/"
<a href="http://steffe.cs.dm.unipi.it/" style="--masonry-height: 2;"> style="--card-bg: #c55; --masonry-height: 2;"
<div class="project"> imgSrc="https://tutorato.phc.dm.unipi.it/favicon.svg"
<div class="image cover"> >
<img src="https://steffe.lb.cs.dm.unipi.it/assets/img/logo.png" alt="Logo Cluster" /> <p>
</div> Un sito con tutte le informazioni sui tutorati di Matematica, con tanto di archivio degli
<div class="title">Cluster "Steffè"</div> anni passati.
<div class="description"> </p>
Cluster progettato ed assemblato durante il progetto speciale per la didattica </ProjectCard>
"Calcolo Parallelo dall'Infrastruttura alla Matematica".
</div>
</div>
</a>
<a target="_blank" href="https://seminarietti.phc.dm.unipi.it/" style="--masonry-height: 2;">
<div class="project" style="--card-bg: #bd9fec;">
<div class="image">
<img src="https://seminarietti.phc.dm.unipi.it/favicon.png" alt="Logo Seminarietti" />
</div>
<div class="title">Seminarietti</div>
<div class="description">
Varie conferenze del PHC su argomenti di informatica, matematica e tecnologia.
</div>
</div>
</a>
<a target="_blank" href="https://tutorato.phc.dm.unipi.it/" style="--masonry-height: 2;">
<div class="project" style="--card-bg: #c55;">
<div class="image">
<img src="https://tutorato.phc.dm.unipi.it/favicon.svg" alt="Logo Tutorato" />
</div>
<div class="title">Tutorato</div>
<div class="description">
Un sito con tutte le informazioni sui tutorati di Matematica, con tanto di archivio
degli anni passati.
</div>
</div>
</a>
</div> </div>
</section> </section>
<section class="wanna-be-macchinista"> <section class="wanna-be-macchinista">
<div class="zig-zag"> <HomepageZigZag color="#888" />
<svg
width="100%" <div class="title"></div>
height="2rem"
viewBox="0 0 1 1" <Card large style="--card-base: #ddd;">
xmlns="http://www.w3.org/2000/svg" <div class="title" title="recentemente, anche il caffè">E cosa si fa in PHC?</div>
preserveAspectRatio="xMinYMid meet"
>
<defs>
<pattern id="zig-zag-3" x="0" y="0" width="2" height="1" patternUnits="userSpaceOnUse">
<path fill="#888" d="M 0,1 L 1,0 L 2,1 L 0,1"></path>
</pattern>
</defs>
<rect fill="url(#zig-zag-3)" x="0" y="0" width="1000" height="1"></rect>
</svg>
</div>
<span></span>
<span></span>
<div class="card large" style="--card-base: #ddd;">
<div class="title">E cosa si fa in PHC?</div>
<div class="text"> <div class="text">
<p>Nessuno lo sa di preciso, ma facciamo molte cose:</p> <p>Nessuno lo sa di preciso, ma facciamo molte cose:</p>
<ul> <ul>
@ -232,7 +166,7 @@ const galleryCollage = await Astro.glob('@/assets/gallery/*.jpg')
e condividere la passione per la tecnologia. e condividere la passione per la tecnologia.
</p> </p>
</div> </div>
</div> </Card>
<div class="gallery-collage"> <div class="gallery-collage">
{ {
galleryCollage.map((module, i) => { galleryCollage.map((module, i) => {
@ -248,14 +182,15 @@ const galleryCollage = await Astro.glob('@/assets/gallery/*.jpg')
: [1, 1] : [1, 1]
return ( return (
<div class="card" style={`--rows: ${rows}; --cols: ${cols};`}> <Card style={`--rows: ${rows}; --cols: ${cols};`}>
<Image src={module.default} alt={`gallery image ${i}`} /> <Image src={module.default} alt={`gallery image ${i}`} />
</div> </Card>
) )
}) })
} }
</div> </div>
<div class="card large" style="--card-base: #ddd;">
<Card large style="--card-base: #ddd;">
<div class="title">Vuoi diventare macchinista?</div> <div class="title">Vuoi diventare macchinista?</div>
<div class="text"> <div class="text">
<p> <p>
@ -268,6 +203,6 @@ const galleryCollage = await Astro.glob('@/assets/gallery/*.jpg')
tutti gli effetti. tutti gli effetti.
</p> </p>
</div> </div>
</div> </Card>
</section> </section>
</PageLayout> </PageLayout>

8
src/styles/pages.scss
Unescape Escape View File

@ -241,14 +241,8 @@
} }
img { img {
object-fit: cover;
width: 4rem; width: 4rem;
height: 4rem;
}
&.cover {
img {
object-fit: cover;
}
} }
// &.auto { // &.auto {

Write Preview
Loading…
Cancel
Save