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

add: some styles and more organization

Browse Source
This commit is contained in:
aziis98
2024-02-29 12:54:28 +01:00
parent 70ccf24c6b
commit eca5d60fd6
14 changed files with 709 additions and 469 deletions
Download Patch File Download Diff File Expand all files Collapse all files
astro.config.mjs
+12 -8
View File
@@ -3,19 +3,23 @@ import preact from '@astrojs/preact'
import node from '@astrojs/node'
// https://astro.build/config
export default defineConfig({
server: {
port: 3000,
},
markdown: {
shikiConfig: {
theme: 'github-light',
},
},
integrations: [preact()],
adapter: node({
mode: 'standalone',
}),
output: 'hybrid',
outDir: './out/astro',
build: {
client: './out/astro/client',
server: './out/astro/server',
},
server: {
port: 3000,
},
integrations: [preact()],
adapter: node({
mode: 'standalone',
}),
})
package.json
+3
View File
@@ -21,13 +21,16 @@
"astro": "^4.4.6",
"better-sqlite3": "^9.4.3",
"drizzle-orm": "^0.29.4",
"katex": "^0.16.9",
"preact": "^10.19.6",
"typescript": "^5.3.3"
},
"devDependencies": {
"@astrojs/mdx": "^2.1.1",
"@types/better-sqlite3": "^7.6.9",
"drizzle-kit": "^0.20.14",
"npm-run-all": "^4.1.5",
"remark-math": "^6.0.0",
"sass": "^1.71.1",
"tsx": "^4.7.1"
}
pnpm-lock.yaml
Generated
+475 -377
View File
File diff suppressed because it is too large Load Diff
src/client/Counter.jsx
+13
View File
@@ -0,0 +1,13 @@
import { useState } from 'preact/hooks'
export const Counter = ({}) => {
const [count, setCount] = useState(0)
return (
<div class="counter">
<button onClick={() => setCount(value => value - 1)}>-</button>
<div class="value">{count}</div>
<button onClick={() => setCount(value => value + 1)}>+</button>
</div>
)
}
src/components/Footer.astro
+1
View File
@@ -0,0 +1 @@
<footer>&copy; PHC 2023</footer>
src/components/Header.astro
+12
View File
@@ -0,0 +1,12 @@
<header>
<a href="/" class="logo">
<img src="/images/logo-circuit-board.svg" alt="phc logo" />
</a>
<div class="links">
<a role="button" href="/users">Utenti</a>
<a role="button" href="/news">Notizie</a>
<a role="button" href="/projects">Progetti</a>
<a role="button" href="/about">About</a>
<a class="primary" role="button" href="/login">Accedi</a>
</div>
</header>
src/content/guides/2024-02-29-git-101.md
+8 -5
View File
@@ -1,12 +1,11 @@
---
title: Git 101
description: Una guida introduttiva alle basi di Git
title: Git 101 (Esempio)
description: Una guida introduttiva alle basi di Git (Esempio)
slug: git-101-example
author: Copilot
series: git
---
# Git 101 (Guida di esempio)
Benvenuto alla guida introduttiva alle basi di Git. In questa guida imparerai come iniziare a usare Git per il controllo di versione dei tuoi progetti.
## Cos'è Git?
@@ -21,11 +20,15 @@ Per iniziare ad usare Git, devi prima installarlo sul tuo computer. Puoi scarica
Una volta installato Git, puoi inizializzare un nuovo repository in una cartella esistente. Apri il terminale e spostati nella cartella del tuo progetto. Quindi esegui il seguente comando:
$$
\int_0^1 x^2 \ dx
$$
```bash
git init
```
Questo creerà un nuovo repository Git nella cartella del tuo progetto.
Questo creerà un nuovo repository $1+a+\zeta_7-\xi^2$ Git nella cartella del tuo progetto.
## Aggiunta di file
src/layouts/ArticleLayout.astro
+10 -3
View File
@@ -1,7 +1,14 @@
---
import PageLayout from './PageLayout.astro'
import BaseLayout from './BaseLayout.astro'
const { frontmatter } = Astro.props
import Header from '../components/Header.astro'
import Footer from '../components/Footer.astro'
---
<PageLayout {...frontmatter} />
<BaseLayout {...Astro.props}>
<Header />
<main class="text-content">
<slot />
</main>
<Footer />
</BaseLayout>
src/layouts/BaseLayout.astro
+18
View File
@@ -1,4 +1,6 @@
---
import 'katex/dist/katex.min.css'
import '@fontsource/open-sans/latin.css'
import '@fontsource/source-sans-pro/latin.css'
import '@fontsource/source-code-pro/latin.css'
@@ -20,6 +22,22 @@ const { title, description, thumbnail, pageName } = Astro.props
<link rel="icon" type="image/png" sizes="512x512" href="/assets/icon.png" />
<script>
import renderMathInElement from 'katex/contrib/auto-render'
document.addEventListener('DOMContentLoaded', function () {
renderMathInElement(document.body, {
delimiters: [
{ left: '$$', right: '$$', display: true },
{ left: '$', right: '$', display: false },
{ left: '\\(', right: '\\)', display: false },
{ left: '\\[', right: '\\]', display: true },
],
throwOnError: false,
})
})
</script>
<title>{title}</title>
</head>
<body class:list={Array.isArray(pageName) ? pageName : [pageName]}>
src/layouts/PageLayout.astro
+5 -13
View File
@@ -1,22 +1,14 @@
---
import BaseLayout from './BaseLayout.astro'
import Header from '../components/Header.astro'
import Footer from '../components/Footer.astro'
---
<BaseLayout {...Astro.props}>
<header>
<div class="logo">
<img src="/images/logo-circuit-board.svg" alt="phc logo" />
</div>
<div class="links">
<a role="button" href="#">Utenti</a>
<a role="button" href="#">Notizie</a>
<a role="button" href="#">Progetti</a>
<a role="button" href="#">About</a>
<a class="primary" role="button" href="#">Accedi</a>
</div>
</header>
<Header />
<main>
<slot />
</main>
<footer>&copy; PHC 2023</footer>
<Footer />
</BaseLayout>
src/pages/guides/[...slug].astro
+8 -6
View File
@@ -1,7 +1,7 @@
---
import { getCollection } from 'astro:content'
import PageLayout from '../../layouts/PageLayout.astro'
import ArticleLayout from '../../layouts/ArticleLayout.astro'
export async function getStaticPaths() {
const blogEntries = await getCollection('guides')
@@ -15,9 +15,11 @@ const { entry } = Astro.props
const { Content } = await entry.render()
---
<h1>{entry.data.title}</h1>
{entry.data.series && <h2>{entry.data.series}</h2>}
<ArticleLayout {...entry.data} pageName={['guide', entry.slug]}>
<div class="text-content">
<h1>{entry.data.title}</h1>
{entry.data.series && <h2>{entry.data.series}</h2>}
<PageLayout title={entry.data.title} description={entry.data.description} pageName={['guide', entry.slug]}>
<Content />
</PageLayout>
<Content />
</div>
</ArticleLayout>
src/pages/index.astro
+73 -46
View File
@@ -15,24 +15,31 @@ 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?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam vero deserunt tempore
reprehenderit atque, voluptate dolorum excepturi libero pariatur sequi?
</p>
<p>
Laboriosam soluta ab a illum mollitia quaerat quia, veniam consequatur expedita dolore autem reiciendis quae rem
excepturi optio? Maiores, hic?
Laboriosam soluta ab a illum mollitia quaerat quia, veniam consequatur expedita dolore
autem reiciendis quae rem excepturi optio? Maiores, hic?
</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.
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.
</p>
</div>
</div>
</section>
<section class="news">
<div class="zig-zag">
<svg width="100%" height="2rem" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMid meet">
<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>
@@ -49,13 +56,14 @@ import PageLayout from '../layouts/PageLayout.astro'
<div class="title">Lorem ipsum dolor sit.</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!
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!
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>
@@ -63,21 +71,24 @@ import PageLayout from '../layouts/PageLayout.astro'
<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!
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!
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!
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!
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>
@@ -85,9 +96,9 @@ import PageLayout from '../layouts/PageLayout.astro'
<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!
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>
@@ -95,13 +106,14 @@ import PageLayout from '../layouts/PageLayout.astro'
<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!
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!
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>
@@ -111,7 +123,13 @@ import PageLayout from '../layouts/PageLayout.astro'
</section>
<section class="projects">
<div class="zig-zag">
<svg width="100%" height="2rem" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMid meet">
<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>
@@ -124,15 +142,15 @@ import PageLayout from '../layouts/PageLayout.astro'
<div class="title">Progetti</div>
<div class="project-list">
<a href="#">
<div class="project">
<a target="_blank" href="https://git.phc.dm.unipi.it/">
<div class="project" style="--card-bg: #272;">
<div class="image">
<div class="box"></div>
</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.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus quam iure
dolor. Excepturi facere, ipsa accusantium labore explicabo quaerat incidunt.
</div>
</div>
</a>
@@ -142,29 +160,32 @@ import PageLayout from '../layouts/PageLayout.astro'
<div class="box"></div>
</div>
<div class="title">Zulip</div>
<div class="description">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellendus, veritatis.</div>
<div class="description">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellendus, veritatis.
</div>
</div>
</a>
<a href="#">
<div class="project">
<a target="_blank" href="https://lab.phc.dm.unipi.it/orario/">
<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.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus quam iure
dolor. Excepturi facere, ipsa accusantium labore explicabo quaerat incidunt.
</div>
</div>
</a>
<a href="#">
<div class="project">
<a target="_blank" href="https://lab.phc.dm.unipi.it/problemi/">
<div class="project" style="--card-bg: #8d5fac;">
<div class="image">
<div class="box"></div>
</div>
<div class="title">Problemi</div>
<div class="description">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, hic libero beatae voluptatem incidunt.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, hic libero beatae
voluptatem incidunt.
</div>
</div>
</a>
@@ -175,8 +196,8 @@ import PageLayout from '../layouts/PageLayout.astro'
</div>
<div class="title">Cluster "Steffè"</div>
<div class="description">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus quam iure dolor. Excepturi facere, ipsa
accusantium labore explicabo quaerat incidunt.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus quam iure
dolor. Excepturi facere, ipsa accusantium labore explicabo quaerat incidunt.
</div>
</div>
</a>
@@ -184,7 +205,13 @@ import PageLayout from '../layouts/PageLayout.astro'
</section>
<section class="wanna-be-macchinista">
<div class="zig-zag">
<svg width="100%" height="2rem" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMid meet">
<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-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>
src/styles/main.scss
+18 -11
View File
@@ -1,3 +1,5 @@
@import './typography.scss';
*,
*::before,
*::after {
@@ -17,10 +19,10 @@ body {
color: #222;
}
html {
scroll-snap-type: y proximity;
scroll-padding-top: 4rem;
}
// html {
// scroll-snap-type: y proximity;
// scroll-padding-top: 4rem;
// }
img {
display: block;
@@ -100,6 +102,7 @@ header {
border-bottom: 4px solid #222;
background: #fff;
top: 0;
position: fixed;
width: 100%;
@@ -142,7 +145,11 @@ footer {
font-size: 20px;
}
.page-homepage {
//
// Custom Page Styles
//
.homepage {
header .logo {
visibility: hidden;
}
@@ -231,8 +238,8 @@ footer {
img {
width: 100%;
filter: drop-shadow(6px 6px 0 #222) drop-shadow(4px 0 0 #222) drop-shadow(0 4px 0 #222) drop-shadow(-4px 0 0 #222)
drop-shadow(0 -4px 0 #222);
filter: drop-shadow(6px 6px 0 #222) drop-shadow(4px 0 0 #222) drop-shadow(0 4px 0 #222)
drop-shadow(-4px 0 0 #222) drop-shadow(0 -4px 0 #222);
}
}
@@ -359,9 +366,9 @@ footer {
background: #f8e8b1;
color: #000d;
&:hover {
// background: #8e5ddd;
}
// &:hover {
// // background: #8e5ddd;
// }
}
}
}
@@ -383,7 +390,7 @@ footer {
.project {
// background: #fcddff;
// background: #ffa89c;
background: #a2d4f3;
background: var(--card-bg, #a2d4f3);
color: #000e;
border: 3px solid #222;
src/styles/typography.scss
+53
View File
@@ -0,0 +1,53 @@
.text-content {
$base-font-size: 22px;
$heading-scale: 1.33;
@function pow($number, $exponent) {
$value: 1;
@if $exponent > 0 {
@for $i from 1 through $exponent {
$value: $value * $number;
}
}
@return $value;
}
@for $i from 1 through 5 {
h#{$i} {
$factor: pow($heading-scale, 5 - $i);
font-size: $base-font-size * $factor;
}
}
& > * {
max-width: 100ch;
margin: 0 auto;
}
pre,
code {
background: #f0f0f0 !important;
font-family: 'Source Code Pro', monospace;
font-weight: 400;
}
pre {
margin: 1rem auto;
padding: 0.5rem;
max-width: 90ch;
border-radius: 0.5rem;
box-shadow: 0.25rem 0.25rem 0 0 #777;
}
code {
border-radius: 0.25rem;
padding: 0 0.125rem;
}
}