added initial batch of questions

src/client/DomandeEsamiCourse.tsx

@@ -2,6 +2,19 @@ import { useEffect, useState } from 'preact/hooks'
 import { Funnel } from '@phosphor-icons/react'
 import { marked } from 'marked'
 
+// @ts-ignore
+import extendedLatex from 'marked-extended-latex'
+
+marked.use(
+    extendedLatex({
+        lazy: false,
+        render: (formula: string, display: boolean) => {
+            console.log('rendering', formula)
+            return display ? '$$' + formula + '$$' : '$' + formula + '$'
+        },
+    }),
+)
+
 import type { Database } from '@/data/domande-esami.yaml'
 
 const useRemoteValue = <T,>(url: string): T | null => {
@@ -33,9 +46,7 @@ export const DomandeEsamiCourse = ({ course }: Props) => {
 
     const courseTags = [
         ...new Set(
-            database.questions
-                .filter(question => question.course === course)
-                .flatMap(question => question.tags)
+            database.questions.filter(question => question.course === course).flatMap(question => question.tags),
         ),
     ]
 
@@ -43,9 +54,7 @@ export const DomandeEsamiCourse = ({ course }: Props) => {
 
     const filteredQuestions = database.questions
         .filter(question => question.course === course)
-        .filter(
-            question => selectedTags.length === 0 || selectedTags.every(tag => question.tags.includes(tag))
-        )
+        .filter(question => selectedTags.length === 0 || selectedTags.every(tag => question.tags.includes(tag)))
 
     return (
         <>
@@ -70,16 +79,12 @@ export const DomandeEsamiCourse = ({ course }: Props) => {
                           ))
                         : courseTags.map(tag => (
                               <div
-                                  class={
-                                      selectedTags.includes(tag)
-                                          ? 'chip clickable'
-                                          : 'chip clickable disabled'
-                                  }
+                                  class={selectedTags.includes(tag) ? 'chip clickable' : 'chip clickable disabled'}
                                   onClick={() =>
                                       setSelectedTags(
                                           selectedTags.includes(tag)
                                               ? selectedTags.filter(t => t !== tag)
-                                              : [...selectedTags, tag]
+                                              : [...selectedTags, tag],
                                       )
                                   }
                               >

src/pages/domande-esami/index.astro

@@ -10,7 +10,7 @@ const courseQuestionCounts = Object.fromEntries(
     database.questions.reduce((acc, question) => {
         acc.set(question.course, (acc.get(question.course) || 0) + 1)
         return acc
-    }, new Map())
+    }, new Map()),
 )
 ---
 
@@ -33,16 +33,18 @@ const courseQuestionCounts = Object.fromEntries(
                         </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</p>
+                        {group.items
+                            .filter(course => courseQuestionCounts[course] > 0)
+                            .map(course => (
+                                <a href={`/domande-esami/${course}`}>
+                                    <div class="card">
+                                        <h2>{database.names[course]}</h2>
+                                        <div class="text">
+                                            <p>{courseQuestionCounts[course] || 0} domande</p>
+                                        </div>
                                     </div>
-                                </div>
-                            </a>
-                        ))}
+                                </a>
+                            ))}
                     </div>
                 </details>
             ))

src/styles/components.scss

@@ -33,7 +33,11 @@
         place-content: center;
 
         font-size: 24px;
-        font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
+        font-variation-settings:
+            'FILL' 0,
+            'wght' 300,
+            'GRAD' 0,
+            'opsz' 24;
 
         max-width: 32px;
     }
@@ -900,11 +904,17 @@
         width: 100%;
 
         justify-content: center;
+        // align-items: start;
 
         .text > * {
             max-width: none;
         }
 
+        .card {
+            display: grid;
+            grid-template-rows: 1fr auto;
+        }
+
         @media screen and (max-width: $screen-desktop-min) {
             grid-template-columns: 1fr;