finished minimal working prototype

package.json

@@ -27,6 +27,7 @@
         "fuse.js": "^7.0.0",
         "katex": "^0.16.9",
         "lucide-static": "^0.468.0",
+        "marked": "^15.0.6",
         "preact": "^10.19.6",
         "typescript": "^5.3.3"
     },

src/data/domande-esami.yaml

@@ -0,0 +1,160 @@
+names:
+    aritmetica: Aritmetica
+    geometria-1: Geometria 1
+    analisi-1: Analisi 1
+    algebra-1: Algebra 1
+    geometria-2: Geometria 2
+    analisi-2: Analisi 2
+    algebra-2: Algebra 2
+    analisi-3: Analisi 3
+    ricerca-operativa: Ricerca Operativa
+    fisica-3: Fisica 3
+    meccanica-razionale: Meccanica Razionale
+    istituzioni-di-geometria: Istituzioni di Geometria
+    istituzioni-di-analisi: Istituzioni di Analisi
+    istituzioni-di-algebra: Istituzioni di Algebra
+    istituzioni-di-fisica: Istituzioni di Fisica
+    istituzioni-di-probabilità: Istituzioni di Probabilità
+    geometria-e-topologia-differenziale: Geometria e Topologia Differenziale
+    analisi-armonica: Analisi Armonica
+    elementi-di-analisi-complessa: Elementi di Analisi Complessa
+
+groups:
+    - id: triennale-anno-1
+      name: Triennale - Anno I
+      items:
+          - aritmetica
+          - geometria-1
+          - analisi-1
+          - algebra-1
+
+    - id: triennale-anno-2
+      name: Triennale - Anno II
+      items:
+          - geometria-2
+          - analisi-2
+          - algebra-1
+
+    - id: triennale-anno-3
+      name: Triennale - Anno III
+      items:
+          - ricerca-operativa
+          - fisica-3
+          - meccanica-razionale
+
+    - id: istituzioni
+      name: Istituzioni
+      items:
+          - istituzioni-di-geometria
+          - istituzioni-di-analisi
+          - istituzioni-di-algebra
+          - istituzioni-di-fisica
+          - istituzioni-di-probabilità
+
+    - id: other
+      name: Esami a scelta
+      items:
+          - geometria-e-topologia-differenziale
+          - analisi-armonica
+          - elementi-di-analisi-complessa
+
+questions:
+    - course: geometria-1
+      year: 2024
+      content: |
+          Dimostrare il teorema spettrale reale
+
+    - course: gtd
+      year: 2024
+      content: |
+          Calcolare la curvatura gaussiana di una sfera di raggio $r$
+
+    - course: geometria-1
+      year: 2023
+      content: |
+          Dimostrare che _l'area_ di un cerchio è $A = \pi r^2$
+
+    - course: algebra-1
+      year: 2024
+      content: |
+          Dimostrare il teorema di Sylow
+
+    - course: algebra-1
+      year: 2023
+      content: |
+          Dimostrare che ogni sottogruppo di un gruppo ciclico è ciclico
+
+    - course: analisi-1
+      year: 2024
+      content: |
+          Dimostrare il teorema di Weierstrass
+
+    - course: analisi-1
+      year: 2023
+      content: |
+          Dimostrare che se $f$ è continua su $[a,b]$, allora $f$ è limitata
+
+    - course: analisi-2
+      year: 2024
+      content: |
+          Dimostrare il teorema di Stokes
+
+    - course: analisi-2
+      year: 2023
+      content: |
+          Dimostrare il teorema di Green
+
+    - course: analisi-3
+      year: 2024
+      content: |
+          Dimostrare il teorema di Cauchy
+
+    - course: analisi-3
+      year: 2023
+      content: |
+          Dimostrare il teorema di Liouville
+
+    - course: algebra-2
+      year: 2024
+      content: |
+          Dimostrare il teorema di struttura per i gruppi abeliani finiti
+
+    - course: algebra-2
+      year: 2023
+      content: |
+          Dimostrare il teorema di struttura per i gruppi finiti
+
+    - course: ricerca-operativa
+      year: 2024
+      content: |
+          Dimostrare il teorema di dualità per i problemi di programmazione lineare
+
+    - course: geometria-topologia-differenziale
+      year: 2024
+      content: |
+          Dimostrare il teorema di Poincaré-Hopf
+
+    - course: analisi-armonica
+      year: 2024
+      content: |
+          Dimostrare il teorema di Hahn-Banach
+
+    - course: analisi-complessa
+      year: 2024
+      content: |
+          Dimostrare il teorema di Morera
+
+    - course: analisi-complessa
+      year: 2023
+      content: |
+          Dimostrare il teorema degli zeri di Weierstrass
+
+    - course: analisi-complessa
+      year: 2022
+      content: |
+          Dimostrare il teorema della mappa aperta
+
+    - course: analisi-complessa
+      year: 2021
+      content: |
+          Dimostrare il teorema della mappa aperta

src/files.d.ts

@@ -15,3 +15,23 @@ declare module '@/data/macchinisti.yaml' {
     const value: Macchinista[]
     export default value
 }
+
+declare module '@/data/domande-esami.yaml' {
+    type Question = {
+        course: string
+        year: number
+        content: string
+    }
+
+    type Group = {
+        id: string
+        name: string
+        items: Array<string>
+    }
+
+    const names: Record<string, string>
+    const groups: Group[]
+    const questions: Question[]
+
+    export { names, groups, questions }
+}

src/pages/domande-esami/[course].astro

@@ -0,0 +1,50 @@
+---
+import type { GetStaticPaths } from 'astro'
+import BaseLayout from '@/layouts/BaseLayout.astro'
+import Footer from '@/components/Footer.astro'
+import Header from '@/components/Header.astro'
+
+import { PhosphorIcon } from '@/client/Icon'
+
+import { marked } from 'marked'
+
+import database from '@/data/domande-esami.yaml'
+
+export const getStaticPaths = (() => {
+    return Object.keys(database.names).map(course => ({
+        params: { course },
+    }))
+}) satisfies GetStaticPaths
+
+const { course } = Astro.params
+---
+
+<BaseLayout title="Domande Esami | PHC" pageTags={'domande-esami'}>
+    <Header />
+    <main>
+        <h1>{course}</h1>
+
+        <div class="search">
+            <input type="text" placeholder="Cerca una domanda per un esame..." />
+            <PhosphorIcon client:load name="magnifying-glass" />
+        </div>
+
+        <div class="wide-card-list">
+            {
+                database.questions
+                    .filter(question => question.course === course)
+                    .map(question => (
+                        <div class="card">
+                            <div class="text">
+                                <Fragment set:html={marked(question.content)} />
+                            </div>
+                            <div class="metadata">
+                                <div class="chip">{question.year}</div>
+                            </div>
+                        </div>
+                    ))
+            }
+        </div>
+    </main>
+    <Footer />
+</BaseLayout>

src/pages/domande-esami/index.astro

@@ -3,29 +3,61 @@ import { PhosphorIcon } from '@/client/Icon'
 import Footer from '@/components/Footer.astro'
 import Header from '@/components/Header.astro'
 import BaseLayout from '@/layouts/BaseLayout.astro'
+
+import database from '@/data/domande-esami.yaml'
+
+const courseQuestionCounts = Object.fromEntries(
+    database.questions.reduce((acc, question) => {
+        acc.set(question.course, (acc.get(question.course) || 0) + 1)
+        return acc
+    }, new Map())
+)
 ---
 
 <BaseLayout title="Domande Esami | PHC" pageTags={'domande-esami'}>
     <Header />
     <main>
         <h1>Domande Esami</h1>
-
+        <div class="card large">
-        <div class="search">
+            <div class="text">
-            <input type="text" placeholder="Cerca una domanda per un easme..." />
+                <p>
-            <PhosphorIcon client:load name="magnifying-glass" />
+                    [Copilot] Benvenuto nella sezione delle domande d'esame! Qui puoi trovare domande di esami
+                    passati per prepararti al meglio per il tuo prossimo esame.
+                </p>
+                <ul>
+                    <li><a href="#triennale-anno-1">Triennale - Anno I</a></li>
+                    <li><a href="#triennale-anno-2">Triennale - Anno II</a></li>
+                    <li><a href="#triennale-anno-3">Triennale - Anno III</a></li>
+                    <li><a href="#istituzioni">Istituzioni</a></li>
+                    <li><a href="#other">Esami a Scelta</a></li>
+                </ul>
+                <p>
+                    Se volessi contribuire con nuove domande, puoi <a href="#">facendo una pull request</a>,
+                    inviandole al
+                    <a href="#">form domande</a> oppure <a href="#">mandandoci una email</a>.
+                </p>
+            </div>
         </div>
 
-        <h2>Corsi</h2>
+        {
-
+            database.groups.map(group => (
-        <div class="courses card large" style={{ '--card-base': 'hsl(180, 100%, 81%)' }}>
+                <>
-            <details class="course-group">
+                    <h2 id={group.id}>{group.name}</h2>
-                <summary>
+                    <div class="wide-card-list">
-                    <PhosphorIcon client:load name="caret-down" />
+                        {group.items.map(course => (
-                    <PhosphorIcon client:load name="caret-up" />
+                            <a href={`/domande-esami/${course}`}>
-                    <div class="title">Analisi 1</div>
+                                <div class="card">
-                </summary>
+                                    <h2>{database.names[course]}</h2>
-            </details>
+                                    <div class="text">
-        </div>
+                                        <p>{courseQuestionCounts[course] || 0} domande disponibili</p>
+                                    </div>
+                                </div>
+                            </a>
+                        ))}
+                    </div>
+                </>
+            ))
+        }
     </main>
     <Footer />
 </BaseLayout>

src/styles/components.scss

@@ -592,6 +592,24 @@
             }
         }
 
+        .metadata {
+            display: grid;
+            grid-auto-flow: column;
+            justify-content: start;
+            gap: 0.5rem;
+
+            .chip {
+                background: #0003;
+                font-size: 13px;
+
+                padding: 0 0.25rem;
+                border-radius: 0.25rem;
+                line-height: 1.5;
+
+                font-weight: 600;
+            }
+        }
+
         @media screen and (max-width: $screen-desktop-min) {
             padding: 0.9rem;
 
@@ -609,6 +627,10 @@
         }
     }
 
+    a:has(> .card) {
+        display: contents;
+    }
+
     //
     // Card List
     //
@@ -875,4 +897,22 @@
             }
         }
     }
+
+    .wide-card-list {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(auto, 30rem));
+        gap: 2rem;
+        padding: 2rem;
+
+        width: 100%;
+
+        justify-content: center;
+
+        @media screen and (max-width: $screen-desktop-min) {
+            grid-template-columns: 1fr;
+
+            padding: 0;
+            gap: 1rem;
+        }
+    }
 }

src/styles/pages.scss

@@ -438,7 +438,8 @@
     }
 
     .domande-esami {
-        background: hsl(180, 100%, 95%);
+        background: hsl(45, 100%, 95%);
+        --card-base: hsl(45, 100%, 80%);
 
         main {
             justify-self: center;
@@ -447,37 +448,20 @@
             flex-direction: column;
             align-items: center;
 
-            padding: 5rem 0;
+            padding: 4rem 0;
-
-            gap: 5rem;
 
-            max-width: 80ch;
+            gap: 2rem;
 
-            .search-result {
+            .search {
-                background: hsl(180, 100%, 87%);
+                max-width: 80ch;
             }
 
             button {
-                background: hsl(180, 100%, 72%);
+                background: hsl(45, 100%, 72%);
             }
-        }
 
-        .courses {
+            .card a {
-            padding: 0;
+                color: color-mix(in srgb, var(--card-base-internal), #000 80%);
-
-            hr {
-                width: 100%;
-                border: none;
-                height: 2px;
-                background: #000d;
-                margin: 0;
-            }
-
-            .text {
-                > * {
-                    margin: 1rem 0;
-                    padding: 0 1rem;
-                }
             }
         }
     }

src/styles/typography.scss

@@ -204,6 +204,10 @@
             }
         }
 
+        li + li {
+            margin-top: 0.5rem;
+        }
+
         a,
         a:visited {
             color: var(--zone-color, #1e6733);