prototype mostly finished

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

@@ -4,11 +4,11 @@ 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'
+import PhosphorIcon from '@/components/PhosphorIcon.astro'
+import { DomandeEsamiCourse } from '@/client/DomandeEsamiCourse'
 
 export const getStaticPaths = (() => {
     return Object.keys(database.names).map(course => ({
@@ -22,29 +22,7 @@ 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>
+        <DomandeEsamiCourse client:load course={course} />
     </main>
     <Footer />
 </BaseLayout>

src/pages/domande-esami/api.json.ts

@@ -0,0 +1,11 @@
+import type { APIRoute } from 'astro'
+
+import database from '@/data/domande-esami.yaml'
+
+export const GET: APIRoute = ({}) => {
+    return new Response(JSON.stringify(database), {
+        headers: {
+            'content-type': 'application/json',
+        },
+    })
+}

src/pages/domande-esami/api/[course].json.ts

@@ -0,0 +1,24 @@
+import type { APIRoute, GetStaticPaths } from 'astro'
+
+import database from '@/data/domande-esami.yaml'
+
+export const getStaticPaths = (() => {
+    return Object.keys(database.names).map(course => ({
+        params: { course },
+    }))
+}) satisfies GetStaticPaths
+
+export const GET: APIRoute = ({ params: { course } }) => {
+    return new Response(
+        JSON.stringify({
+            groups: [],
+            names: Object.fromEntries(Object.entries(database.names).filter(([key]) => key === course)),
+            questions: database.questions.filter(question => question.course === course),
+        }),
+        {
+            headers: {
+                'content-type': 'application/json',
+            },
+        }
+    )
+}

src/pages/domande-esami/index.astro

@@ -18,46 +18,42 @@ const courseQuestionCounts = Object.fromEntries(
     <Header />
     <main>
         <h1>Domande Esami</h1>
-        <div class="card large">
-            <div class="text">
-                <p>
-                    [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>
-
         {
             database.groups.map(group => (
-                <>
-                    <h2 id={group.id}>{group.name}</h2>
+                <details open>
+                    <summary>
+                        <h2 id={group.id}>
+                            <div class="details-closed">
+                                <PhosphorIcon name="caret-down" />
+                            </div>
+                            <div class="details-openned">
+                                <PhosphorIcon name="caret-up" />
+                            </div>
+                            {group.name}
+                        </h2>
+                    </summary>
                     <div class="wide-card-list">
                         {group.items.map(course => (
                             <a href={`/domande-esami/${course}`}>
                                 <div class="card">
                                     <h2>{database.names[course]}</h2>
                                     <div class="text">
-                                        <p>{courseQuestionCounts[course] || 0} domande disponibili</p>
+                                        <p>{courseQuestionCounts[course] || 0} domande</p>
                                     </div>
                                 </div>
                             </a>
                         ))}
                     </div>
-                </>
+                </details>
             ))
         }
+
+        <h3>Come Contribuire</h3>
+        <div class="card large">
+            <div class="text">
+                <p>Se hai raccolte di domande da condividere, puoi...</p>
+            </div>
+        </div>
     </main>
     <Footer />
 </BaseLayout>