add: some styles and more organization

astro.config.mjs

@@ -3,19 +3,23 @@ import preact from '@astrojs/preact'
 
 import node from '@astrojs/node'
 
-// https://astro.build/config
 export default defineConfig({
-    output: 'hybrid',
-    outDir: './out/astro',
-    build: {
-        client: './out/astro/client',
-        server: './out/astro/server',
-    },
     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',
+    },
 })

package.json

@@ -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"
     }

src/client/Counter.jsx

@@ -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

@@ -0,0 +1 @@
+<footer>&copy; PHC 2023</footer>

src/components/Header.astro

@@ -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

@@ -1,12 +1,11 @@
 ---
-title: Git 101
+title: Git 101 (Esempio)
-description: Una guida introduttiva alle basi di Git
+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

@@ -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

@@ -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

@@ -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>
+    <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>
     <main>
         <slot />
     </main>
-    <footer>&copy; PHC 2023</footer>
+    <Footer />
 </BaseLayout>

src/pages/guides/[...slug].astro

@@ -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>
+<ArticleLayout {...entry.data} pageName={['guide', entry.slug]}>
-{entry.data.series && <h2>{entry.data.series}</h2>}
+    <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 />
-    <Content />
+    </div>
-</PageLayout>
+</ArticleLayout>

src/pages/index.astro

@@ -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
+                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam vero deserunt tempore
-                    dolorum excepturi libero pariatur sequi?
+                    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
+                    Laboriosam soluta ab a illum mollitia quaerat quia, veniam consequatur expedita dolore
-                    excepturi optio? Maiores, hic?
+                    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
+                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Exercitationem error atque amet.
-                    aspernatur quam quas, doloribus expedita quisquam dignissimos cupiditate inventore a modi optio harum veritatis,
+                    Tempora earum nemo eveniet aspernatur quam quas, doloribus expedita quisquam dignissimos
-                    adipisci ab ullam distinctio odio quod delectus ipsum, rerum animi.
+                    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,
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis reprehenderit porro
-                        architecto adipisci veritatis, iusto perferendis aperiam recusandae exercitationem doloribus, illum commodi
+                        omnis enim deleniti esse quos, architecto adipisci veritatis, iusto perferendis
-                        voluptatem pariatur eius!
+                        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
+                        Impedit ut quod aspernatur vitae vero incidunt cupiditate perferendis explicabo sunt
-                        nesciunt enim mollitia iure ullam aut, pariatur, at cumque. Nemo obcaecati eaque recusandae fugit sed!
+                        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,
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis reprehenderit porro
-                        architecto adipisci veritatis, iusto perferendis aperiam recusandae exercitationem doloribus, illum commodi
+                        omnis enim deleniti esse quos, architecto adipisci veritatis, iusto perferendis
-                        voluptatem pariatur eius!
+                        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
+                        Impedit ut quod aspernatur vitae vero incidunt cupiditate perferendis explicabo sunt
-                        nesciunt enim mollitia iure ullam aut, pariatur, at cumque. Nemo obcaecati eaque recusandae fugit sed!
+                        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
+                        Impedit ut quod aspernatur vitae vero incidunt cupiditate perferendis explicabo sunt
-                        nesciunt enim mollitia iure ullam aut, pariatur, at cumque. Nemo obcaecati eaque recusandae fugit sed!
+                        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
+                        Impedit ut quod aspernatur vitae vero incidunt cupiditate perferendis explicabo sunt
-                        nesciunt enim mollitia iure ullam aut, pariatur, at cumque. Nemo obcaecati eaque recusandae fugit sed!
+                        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,
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis reprehenderit porro
-                        architecto adipisci veritatis, iusto perferendis aperiam recusandae exercitationem doloribus, illum commodi
+                        omnis enim deleniti esse quos, architecto adipisci veritatis, iusto perferendis
-                        voluptatem pariatur eius!
+                        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,
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis reprehenderit porro
-                        architecto adipisci veritatis, iusto perferendis aperiam recusandae exercitationem doloribus, illum commodi
+                        omnis enim deleniti esse quos, architecto adipisci veritatis, iusto perferendis
-                        voluptatem pariatur eius!
+                        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
+                        Impedit ut quod aspernatur vitae vero incidunt cupiditate perferendis explicabo sunt
-                        nesciunt enim mollitia iure ullam aut, pariatur, at cumque. Nemo obcaecati eaque recusandae fugit sed!
+                        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="#">
+            <a target="_blank" href="https://git.phc.dm.unipi.it/">
-                <div class="project">
+                <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
+                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus quam iure
-                        accusantium labore explicabo quaerat incidunt.
+                        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="#">
+            <a target="_blank" href="https://lab.phc.dm.unipi.it/orario/">
-                <div class="project">
+                <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
+                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus quam iure
-                        accusantium labore explicabo quaerat incidunt.
+                        dolor. Excepturi facere, ipsa accusantium labore explicabo quaerat incidunt.
                     </div>
                 </div>
             </a>
-            <a href="#">
+            <a target="_blank" href="https://lab.phc.dm.unipi.it/problemi/">
-                <div class="project">
+                <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
+                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus quam iure
-                        accusantium labore explicabo quaerat incidunt.
+                        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

@@ -1,3 +1,5 @@
+@import './typography.scss';
+
 *,
 *::before,
 *::after {
@@ -17,10 +19,10 @@ body {
     color: #222;
 }
 
-html {
+// html {
-    scroll-snap-type: y proximity;
+//    scroll-snap-type: y proximity;
-    scroll-padding-top: 4rem;
+//    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)
+                filter: drop-shadow(6px 6px 0 #222) drop-shadow(4px 0 0 #222) drop-shadow(0 4px 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 {
+                // &:hover {
-                    // background: #8e5ddd;
+                //     // 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

@@ -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;
+    }
+}