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

chore: fixed bugs in macchinisti page and some refactoring

Browse Source
This commit is contained in:
aziis98
2024-12-19 20:12:57 +01:00
parent 2dbdf99827
commit e49e2ff0c5
14 changed files with 188 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files
astro.config.mjs
+6 -1
View File
@@ -3,8 +3,13 @@ import preact from '@astrojs/preact'
import mdx from '@astrojs/mdx'
import yaml from '@rollup/plugin-yaml'
// https://astro.build/config
export default defineConfig({
vite: {
plugins: [yaml()],
},
server: {
port: 3000,
},
@@ -14,5 +19,5 @@ export default defineConfig({
},
},
integrations: [preact(), mdx()],
output: 'static'
output: 'static',
})
bun.lockb
BIN
View File
Binary file not shown.
package.json
+1
View File
@@ -31,6 +31,7 @@
},
"devDependencies": {
"@astrojs/mdx": "^3.1.7",
"@rollup/plugin-yaml": "^4.1.2",
"@types/katex": "^0.16.7",
"jsdom": "^24.1.1",
"linkedom": "^0.18.4",
src/assets/macchinisti/francesco-baldino.jpg
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 37 KiB

src/assets/macchinisti/illya-serdyuk.jpg
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 37 KiB

src/components/Bubble.astro
+4 -3
View File
@@ -14,7 +14,8 @@ const ICONS_MAP = {
type Props = {
image: ImageMetadata
fullName: string
date: string
entranceDate: number
exitDate?: number
description: string
social?: {
github?: string
@@ -24,13 +25,13 @@ type Props = {
}
}
const { image, fullName, date, description, social } = Astro.props
const { image, fullName, entranceDate, exitDate, description, social } = Astro.props
---
<div class="bubble">
<img src={image.src} alt={fullName.toLowerCase()} />
<div class="title">{fullName}</div>
<div class="date">{date}</div>
<div class="date">{entranceDate}&mdash;{exitDate ?? 'Presente'}</div>
<div class="description">{description}</div>
{
social && (
src/components/Header.astro
+35 -14
View File
@@ -1,17 +1,36 @@
---
const links = [
{ href: '/utenti', text: 'Utenti' },
// { href: '/macchinisti', text: 'Macchinisti' },
// { href: '/appunti', text: 'Appunti' },
{ href: '/notizie', text: 'Notizie' },
{ href: '/guide', text: 'Guide' },
{ href: '/storia', text: 'Storia' },
// { href: '/login', text: 'Login' },
]
---
<header>
<!-- main logo on the left -->
<a href="/" class="logo">
<img src="/images/phc-logo-2024-11@x8.png" alt="phc logo" />
</a>
<!-- hidden checkbox for mobile js-less sidebar interaction -->
<input type="checkbox" id="header-menu-toggle" />
<!-- desktop navbar links -->
<div class="links desktop-only">
<a role="button" href="/utenti">Utenti</a>
<a role="button" href="/macchinisti">Macchinisti</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="/storia">Storia</a>
<!-- <a class="primary" role="button" href="/login">Login</a> -->
{
links.map(link => (
<a role="button" href={link.href}>
{link.text}
</a>
))
}
</div>
<!-- sidebar menu for mobile -->
<div class="mobile-only">
<label id="header-menu-toggle-menu" role="button" class="flat icon" for="header-menu-toggle">
<span class="material-symbols-outlined">menu</span>
@@ -20,15 +39,17 @@
<span class="material-symbols-outlined">close</span>
</label>
</div>
<!-- sidebar menu only visible on mobile when #header-menu-toggle is checked -->
<div class="side-menu">
<div class="links">
<a role="button" href="/utenti">Utenti</a>
<a role="button" href="/macchinisti">Macchinisti</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="/storia">Storia</a>
<!-- <a class="primary" role="button" href="/login">Login</a> -->
{
links.map(link => (
<a role="button" href={link.href}>
{link.text}
</a>
))
}
</div>
</div>
</header>
src/data/current-macchinisti.json
-47
View File
@@ -1,47 +0,0 @@
[
{
"fullName": "Antonio De Lucreziis",
"dateIn": "2019",
"dateOut": "",
"description": "Description here",
"github": "https://github.com/adelucreziis",
"website": "",
"linkedin": ""
},
{
"fullName": "Luca Lombardo",
"dateIn": "2024",
"dateOut": "",
"description": "Algoritmi e Strutture Dati Bla Bla",
"github": "https://github.com/lukefleed",
"website": "https://lukefleex.xyz",
"linkedin": "https://www.linkedin.com/in/l-lombardo/"
},
{
"fullName": "Francesco Minnocci",
"dateIn": "2022",
"dateOut": "",
"description": "Ho una laurea(?)",
"github": "https://github.com/BachoSeven",
"website": "https://bachoseven.com",
"linkedin": ""
},
{
"fullName": "Francesco Baldino",
"dateIn": "2022",
"dateOut": "",
"description": "Bla Bla",
"github": "",
"website": "",
"linkedin": ""
},
{
"fullName": "Illya Serdyuk",
"dateIn": "2019",
"dateOut": "",
"description": "Bla Bla",
"github": "",
"website": "",
"linkedin": ""
}
]
src/data/macchinisti.yaml
+35
View File
@@ -0,0 +1,35 @@
- fullName: Antonio De Lucreziis
entranceDate: 2019
description: |
Appassionato di geometria computazionale, parser, teoria dei linguaggi di programmazione.
social:
github: https://github.com/aziis98
website: https://poisson.phc.dm.unipi.it/~delucreziis/
- fullName: Luca Lombardo
entranceDate: 2024
description: Algoritmi e Strutture Dati bla bla
social:
github: https://github.com/lukefleed
website: https://lukefleex.xyz
linkedin: https://www.linkedin.com/in/l-lombardo/
- fullName: Francesco Minnocci
entranceDate: 2022
description: Ho una laurea (?), bla bla tastiere meccaniche
social:
github: https://github.com/BachoSeven
website: https://bachoseven.com
- fullName: Francesco Baldino
entranceDate: 2022
description: Bla bla Star Wars
- fullName: Illya Serdyuk
entranceDate: 2020
description: Bla bla Void Linux
- fullName: Francesco Manicastri
entranceDate: 2022
exitDate: 2024
description: Bla bla Keenan Crane
src/data/past-macchinisti.json
-11
View File
@@ -1,11 +0,0 @@
[
{
"fullName": "Francesco Manicastri",
"dateIn": "2022",
"dateOut": "2024",
"description": "Geometria bla bla",
"github": "",
"website": "",
"linkedin": ""
}
]
src/files.d.ts
Vendored
+17
View File
@@ -0,0 +1,17 @@
declare module '*.yaml' {
const value: any // Add type definitions here if desired
export default value
}
declare module '@/data/macchinisti.yaml' {
type Macchinista = {
fullName: string
entranceDate: number
exitDate?: number
description: string
social: Record<string, string>
}
const value: Macchinista[]
export default value
}
src/pages/macchinisti.astro
+45 -45
View File
@@ -4,28 +4,31 @@ import Header from '../components/Header.astro'
import Footer from '../components/Footer.astro'
import Bubble from '../components/Bubble.astro'
import currentMacchinisti from '../data/current-macchinisti.json'
import pastMacchinisti from '../data/past-macchinisti.json'
import macchinisti from '@/data/macchinisti.yaml'
macchinisti.sort((a, b) => b.entranceDate - a.entranceDate)
// Import all images from assets folder
const images = import.meta.glob('@/assets/macchinisti/*.{jpg,jpeg,png,gif}', {
eager: true
})
const images: Record<string, ImageMetadata> = Object.fromEntries(
await Promise.all(
Object.entries(import.meta.glob('@/assets/macchinisti/*')).map(async ([path, module]) => [
path.split('/').pop()!.split('.')[0],
// @ts-ignore
(await module()).default,
])
)
)
// Sort by dateIn
const sortedCurrent = currentMacchinisti.sort((a, b) => parseInt(a.dateIn) - parseInt(b.dateIn))
const sortedPast = pastMacchinisti.sort((a, b) => parseInt(a.dateIn) - parseInt(b.dateIn))
console.log(macchinisti)
console.log(images)
// Define a fallback image metadata
const fallbackImage = { default: 'assets/macchinisti/fallback.jpg' }
const currentMacchinisti = macchinisti.filter(macchinista => !macchinista.exitDate)
const pastMacchinisti = macchinisti.filter(macchinista => macchinista.exitDate)
// Function to get image for a macchinista
const getImage = (fullName: string) => {
const imageName = fullName.toLowerCase().replaceAll(' ', '-')
const imageModule = Object.entries(images).find(([path]) =>
path.includes(imageName)
)?.[1]
return imageModule || fallbackImage
const getMacchinistaPicture = (fullName: string): ImageMetadata => {
const macchinistaId = fullName.toLowerCase().replace(/\s+/g, '-')
console.log(macchinistaId)
return images[macchinistaId] ?? images['fallback']
}
---
@@ -40,43 +43,40 @@ const getImage = (fullName: string) => {
</div>
<div class="bubble-array">
{sortedCurrent.map(async (macchinista) => (
<Bubble
image={(getImage(macchinista.fullName) as { default: string }).default as unknown as ImageMetadata}
fullName={macchinista.fullName}
date={`${macchinista.dateIn}—Presente`}
description={macchinista.description}
social={{
...(macchinista.github && { github: macchinista.github }),
...(macchinista.website && { website: macchinista.website }),
...(macchinista.linkedin && { linkedin: macchinista.linkedin })
}}
/>
))}
{
currentMacchinisti.map(macchinista => (
<Bubble
image={getMacchinistaPicture(macchinista.fullName)}
fullName={macchinista.fullName}
entranceDate={macchinista.entranceDate}
description={macchinista.description}
social={macchinista.social}
/>
))
}
</div>
<div class="card large" style={{ '--card-base': '#6BD6E1' }}>
<div class="title">Ex Macchinisti</div>
<div class="title"><s>Deus</s> Ex Macchinisti</div>
<div class="text">
<p>Gli vogliamo molto bene, hanno fatto grandi cose!</p>
</div>
</div>
<div class="bubble-array">
{sortedPast.map(async (macchinista) => (
<Bubble
image={(getImage(macchinista.fullName) as { default: string }).default as unknown as ImageMetadata}
fullName={macchinista.fullName}
date={`${macchinista.dateIn}—${macchinista.dateOut}`}
description={macchinista.description}
social={{
...(macchinista.github && { github: macchinista.github }),
...(macchinista.website && { website: macchinista.website }),
...(macchinista.linkedin && { linkedin: macchinista.linkedin })
}}
/>
))}
{
pastMacchinisti.map(macchinista => (
<Bubble
image={getMacchinistaPicture(macchinista.fullName)}
fullName={macchinista.fullName}
entranceDate={macchinista.entranceDate}
exitDate={macchinista.exitDate}
description={macchinista.description}
social={macchinista.social}
/>
))
}
</div>
</main>
<Footer />
</BaseLayout>
</BaseLayout>
src/styles/components.scss
+44
View File
@@ -818,4 +818,48 @@
}
}
}
.bubble-array {
display: flex;
width: 100%;
flex-wrap: wrap;
justify-content: center;
gap: 3rem 6rem;
> .bubble {
display: grid;
grid-template-rows: auto auto auto auto;
grid-auto-rows: auto;
gap: 0.5rem;
text-align: center;
justify-items: center;
align-content: start;
width: 25ch;
.date {
display: grid;
place-content: center;
font-size: 16px;
font-weight: 600;
padding: 0.25rem 0.5rem;
background: #0002;
border-radius: 0.25rem;
}
.social {
display: grid;
grid-auto-flow: column;
gap: 0.5rem;
justify-content: center;
}
> img {
border-radius: 100%;
border: 4px solid #333;
object-fit: cover;
width: 100%;
aspect-ratio: 1 / 1;
}
}
}
}
src/styles/pages.scss
+1 -44
View File
@@ -646,52 +646,9 @@
flex-direction: column;
align-items: center;
padding: 6rem 4rem;
padding: 6rem;
gap: 4rem;
}
.bubble-array {
display: flex;
width: 100%;
flex-wrap: wrap;
justify-content: center;
gap: 4rem;
> .bubble {
display: grid;
grid-template-rows: auto auto auto auto;
grid-auto-rows: auto;
gap: 0.5rem;
text-align: center;
justify-items: center;
width: 25ch;
.date {
display: grid;
place-content: center;
font-size: 16px;
font-weight: 600;
padding: 0rem 0.5rem;
background: #0002;
border-radius: 0.25rem;
}
.social {
display: grid;
grid-auto-flow: column;
gap: 0.5rem;
justify-content: center;
}
> img {
border-radius: 100%;
border: 4px solid #333;
object-fit: cover;
width: 100%;
aspect-ratio: 1 / 1;
}
}
}
}
//