From 48efe0f75b21c191d46dad2a51e65675f121d65a Mon Sep 17 00:00:00 2001
From: webfussel <fiona@webfussel.de>
Date: Tue, 10 Jun 2025 20:03:42 +0200
Subject: [PATCH] fix: FAQ in NuxtContent

FAQ converted to NuxtContent
---
 app/assets/css/global.css           |  4 ++
 app/assets/css/spoiler.css          | 10 ++++-
 app/components/Burger.vue           |  2 +-
 app/components/Project.vue          |  2 +-
 app/components/Section/Booking.vue  | 40 +++-----------------
 app/components/Section/Contact.vue  |  2 +-
 app/components/Section/Flatrate.vue | 49 ++----------------------
 app/components/Section/Footer.vue   |  6 +--
 app/components/Section/Header.vue   |  2 +-
 app/components/Section/Skills.vue   |  2 +-
 app/components/Spoiler.vue          |  9 ++---
 content.config.ts                   |  8 ++++
 content/snippets/faq/booking.md     | 58 +++++++++++++++++++++++++++++
 content/snippets/faq/flatrate.md    | 53 ++++++++++++++++++++++++++
 14 files changed, 151 insertions(+), 96 deletions(-)
 create mode 100644 content/snippets/faq/booking.md
 create mode 100644 content/snippets/faq/flatrate.md

diff --git a/app/assets/css/global.css b/app/assets/css/global.css
index 75cc7d6..da566fa 100755
--- a/app/assets/css/global.css
+++ b/app/assets/css/global.css
@@ -123,6 +123,10 @@ a.mail {
 }
 
 ul {
+    list-style-position: inside;
+}
+
+ul.row {
     list-style: none;
     display: flex;
 }
diff --git a/app/assets/css/spoiler.css b/app/assets/css/spoiler.css
index d94b8de..c4dc1a0 100644
--- a/app/assets/css/spoiler.css
+++ b/app/assets/css/spoiler.css
@@ -1,6 +1,5 @@
 .Spoiler {
     background: var(--color-black);
-    padding: 1rem 2rem;
     border-radius: 20px;
 
     & .icon {
@@ -17,13 +16,20 @@
         align-items: center;
         gap: 1rem;
         font-weight: bold;
+        padding: 1rem 2rem;
+        border-radius: 20px;
+        transition: 150ms ease-in-out;
+
+        &:hover {
+            background: rgba(0, 0, 0, .3);
+        }
     }
 
     & > div {
-        margin-top: 1rem;
         display: flex;
         flex-direction: column;
         gap: 1rem;
+        padding: 1rem 2rem;
     }
 }
 
diff --git a/app/components/Burger.vue b/app/components/Burger.vue
index a298c52..fa3acf3 100644
--- a/app/components/Burger.vue
+++ b/app/components/Burger.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="Burger" :class="{ open }">
     <nav class="z-4" ref="navElement">
-      <ul>
+      <ul class="row">
         <li v-for="({label, to, aria, icon}) in navigation" :key="label">
           <NuxtLink :to="to" :aria-label="aria" active-class="active" class="inline-flex-row big-gap" @click="close">
             <Icon :name="icon" mode="svg" />
diff --git a/app/components/Project.vue b/app/components/Project.vue
index 9427db6..70913b3 100644
--- a/app/components/Project.vue
+++ b/app/components/Project.vue
@@ -7,7 +7,7 @@
       <main>
         <small class="customer">{{ company }}</small>
         <h3 class="title">{{ title }}</h3>
-        <ul>
+        <ul class="row">
           <li v-for="skill in tech">
             <Technology v-bind="skill" link="" />
           </li>
diff --git a/app/components/Section/Booking.vue b/app/components/Section/Booking.vue
index 32be3a2..e952459 100755
--- a/app/components/Section/Booking.vue
+++ b/app/components/Section/Booking.vue
@@ -43,8 +43,8 @@
       </article>
     </div>
 
-    <div class="flex-col gap-sm margin-top">
-      <Spoiler v-for="entry in faq" v-bind="entry" class="z-2" />
+    <div v-if="faq" class="flex-col gap-sm margin-top">
+      <ContentRenderer :value="faq" :style="{ display: 'contents' }" />
     </div>
   </section>
 </template>
@@ -71,7 +71,8 @@ const intl = new Intl.NumberFormat(
       currency: 'EUR',
       minimumFractionDigits: 0,
       maximumFractionDigits: 0,
-    })
+    }
+)
 
 const oneOff : Service[] = [
   {
@@ -128,36 +129,5 @@ const oneOff : Service[] = [
   },
 ]
 
-const faq = [
-  {
-    header: 'Warum machst du keine Stundensätze?',
-    content: [
-      'Ich finde Stundensätze haben für beide Seiten nur Nachteile:',
-      'Wenn ich schnell und gut arbeite, dann bekomme ich weniger Geld. Hab ich mal einen Knoten im Gehirn und brauche sehr lange, muss der Kunde mehr zahlen.',
-      'Klar kann man sagen, dass sich das irgendwann ausgleichen könnte - aber so weit will ich es garnicht erst kommen lassen.'
-    ]
-  },
-  {
-    header: 'Welche Themen bietest du für deine Schulungen an?',
-    content: [
-      'Sprachen: JavaScript, TypeScript, HTML, CSS',
-      'Frameworks: Vue, Nuxt',
-    ]
-  },
-  {
-    header: 'Wo finden die Schulungen statt?',
-    content: [
-      'Die Schulungen finden online statt. Normalerweise nutze ich dafür Google Meet, aber wenn du oder deine Firma eine andere Plattform wünschen und bereitstellen bin ich natürlich flexibel.',
-      'Wenn sich deine Firma in der Nähe meines Wohnortes befindet - und damit meine ich "In einer Stunde mit der Straßenbahn zu erreichen", dann kann alles natürlich auch vor Ort stattfinden.',
-    ]
-  },
-  {
-    header: 'Ich hab ein cooles Projekt! Aber kein Geld...',
-    content: [
-      'Tja.',
-      'Ne, awas. Meld dich einfach trotzdem über meine E-Mail-Adresse und vielleicht finden wir eine Lösung.'
-    ]
-  }
-]
-
+const faq = await queryCollection('faq').path('/snippets/faq/booking').first()
 </script>
diff --git a/app/components/Section/Contact.vue b/app/components/Section/Contact.vue
index ee3aa66..56f51da 100644
--- a/app/components/Section/Contact.vue
+++ b/app/components/Section/Contact.vue
@@ -15,7 +15,7 @@
       <p>Falls du irgendwo einen anderen Social Media Account von mir findest, der nicht hier aufgelistet ist, aber aktiv postet, dann ist dieser höchstwahrscheinlich <Highlight>Fake</Highlight>.
         <br />Meld' dich gerne bei mir, wenn du so einen findest.
       </p>
-      <ul class="social-media">
+      <ul class="row social-media">
         <li v-for="({icon, name, ...rest}) in socials" :key="rest.href">
           <a v-bind="rest" target="_blank">
             <Icon :name="icon" :alt="rest['aria-label']" size="1.5em" mode="svg" />
diff --git a/app/components/Section/Flatrate.vue b/app/components/Section/Flatrate.vue
index d264a1e..7b3e2ee 100755
--- a/app/components/Section/Flatrate.vue
+++ b/app/components/Section/Flatrate.vue
@@ -43,8 +43,8 @@
       </article>
     </div>
 
-    <div class="flex-col gap-sm margin-top">
-      <Spoiler v-for="entry in faq" v-bind="entry" class="z-2" />
+    <div v-if="faq" class="flex-col gap-sm margin-top">
+      <ContentRenderer :value="faq" :style="{ display: 'contents' }" />
     </div>
   </section>
 </template>
@@ -138,48 +138,5 @@ const flatrate : Service[] =
       }
     ]
 
-const faq = [
-  {
-    header: 'Was ist eine Entwickler-Flatrate?',
-    content: [
-      'Die Entwickler-Flatrate ist ein Angebot, bei dem du für eine bestimmte Zeit eine bestimmte Menge an Leistungen erhältst.',
-      'Sie wird auch oft als sogenannter "Retainer" bezeichnet und ist eine günstige Art immer wieder anfallende Aufgaben auszulagern.'
-    ]
-  },
-  {
-    header: 'Wie läuft die Zusammenarbeit ab?',
-    content: [
-      'Nach einer ersten Analyse deines Projekts legen wir gemeinsam den Umfang und die monatlichen Aufgaben fest. Du kannst mich je nach Paket auf den vereinbarten Wegen jederzeit kontaktieren.',
-      'Die Bearbeitung erfolgt innerhalb der vereinbarten Fristen.',
-    ]
-  },
-  {
-    header: 'Wie wird abgerechnet?',
-    content: [
-      'Du zahlst monatlich einen festen Betrag im Prepaid-Format unabhängig davon wie viele Aufgaben tatsächlich anfallen.',
-      'Dadurch kannst du dein Budget besser einplanen und Aufgaben verteilen.'
-    ]
-  },
-  {
-    header: 'Kann ich den Retainer jederzeit kündigen?',
-    content: [
-      'Ja klar. Du musst dabei nur die Mindestvertragslaufzeit beachten - die bezahlte Leistung steht dir weiterhin zu.',
-      'Falls wir merken, dass wir für eine Zusammenarbeit mehr als ungeeignet sind, bekommst du dein Geld anteilig der verbleibenden Zeit zurück und verlierst den Anspruch auf Leistungen ab diesem Zeitpunkt.'
-    ]
-  },
-  {
-    header: 'Was passiert, wenn ich dich mal weniger brauche?',
-    content: [
-      'Der monatliche feste Betrag bleibt bestehen. Ähnlich wie bei einer Versicherung bezahlst du hier für den Fall, dass du mich brauchst und erhältst dann entsprechend die vereinbarten Leistungen.',
-      'Wenn du merkst, dass du mich nicht mehr brauchst, dann kannst du den Vertrag jederzeit kündigen und die Leistungen auslaufen lassen.'
-    ]
-  },
-  {
-    header: 'Für wen lohnt sich sowas überhaupt?',
-    content: [
-      'Vor allem Unternehmen, bei denen immer wieder Aufgaben anfallen für die sich aber kein komplettes Projekt oder gar eine feste Stelle in der Firma lohnt, profitieren von dieser Art von Leistung.',
-      'Sie ist ideal für eine langfristige und zuverlässige Zusammenarbeit.'
-    ]
-  }
-]
+const faq = await queryCollection('faq').path('/snippets/faq/flatrate').first()
 </script>
diff --git a/app/components/Section/Footer.vue b/app/components/Section/Footer.vue
index b12d10b..4c71b98 100755
--- a/app/components/Section/Footer.vue
+++ b/app/components/Section/Footer.vue
@@ -1,18 +1,18 @@
 <template>
   <footer class="Footer flex-col gap-default">
-    <ul class="sitemap gap-default">
+    <ul class="row sitemap gap-default">
       <li v-for="{ label, ...rest} in nav" :key="label">
         <NuxtLink v-bind="rest">{{label}}</NuxtLink>
       </li>
     </ul>
-    <ul class="sitemap gap-default">
+    <ul class="row sitemap gap-default">
       <li v-for="({icon, ...rest}) in socials" :key="rest.href">
         <a v-bind="rest" target="_blank">
           <Icon :name="icon" :alt="rest['aria-label']" size="1.5em" mode="svg" />
         </a>
       </li>
     </ul>
-    <ul class="sitemap gap-default">
+    <ul class="row sitemap gap-default">
       <li class="tip-container">
         <Icon name="wf:cookie-slash" size="1.5rem" mode="svg" />
         <span class="tip">Ohne Cookies</span>
diff --git a/app/components/Section/Header.vue b/app/components/Section/Header.vue
index 11368db..725fc68 100755
--- a/app/components/Section/Header.vue
+++ b/app/components/Section/Header.vue
@@ -12,7 +12,7 @@
         <Icon name="ph:waves" mode="svg" size="2em" />
       </button>
       <nav>
-        <ul class="main-nav">
+        <ul class="row main-nav">
           <li v-for="({label, to, aria, icon}) in navigation" :key="label">
             <NuxtLink :to="to" :aria-label="aria" active-class="active" class="inline-flex-row big-gap">
               <Icon :name="icon" mode="svg" />
diff --git a/app/components/Section/Skills.vue b/app/components/Section/Skills.vue
index 3d61b24..9eb7736 100755
--- a/app/components/Section/Skills.vue
+++ b/app/components/Section/Skills.vue
@@ -9,7 +9,7 @@
     </div>
     <Card title="Technologien" titleTag="h3" class="margin-top tech-list">
       <p>Neben den klassischen Webentwicklungsstandards JavaScript, HTML und CSS biete ich außerdem folgende Technologien.</p>
-      <ul class="gap-default margin-top-small">
+      <ul class="row gap-default margin-top-small">
         <li v-for="tech in technologies">
           <Technology v-bind="tech" size="l"/>
         </li>
diff --git a/app/components/Spoiler.vue b/app/components/Spoiler.vue
index c064887..623fe06 100644
--- a/app/components/Spoiler.vue
+++ b/app/components/Spoiler.vue
@@ -1,16 +1,15 @@
 <template>
-  <details class="Spoiler" :open="open" @click="toggle">
-    <summary><Icon class="icon" :name="icon" mode="svg" />{{ header }}</summary>
+  <details class="Spoiler" :open="open">
+    <summary @click="toggle"><Icon class="icon" :name="icon" mode="svg" />{{ title }}</summary>
     <div>
-      <p v-for="text in content">{{ text }}</p>
+      <slot />
     </div>
   </details>
 </template>
 
 <script setup lang="ts">
 type Props = {
-  header: string
-  content: string[]
+  title: string
 }
 
 defineProps<Props>()
diff --git a/content.config.ts b/content.config.ts
index 9ea361f..fdf5bcf 100644
--- a/content.config.ts
+++ b/content.config.ts
@@ -18,6 +18,14 @@ export default defineContentConfig({
           position: z.string(),
         }),
       })
+    }),
+
+    faq: defineCollection({
+      type: 'page',
+      source: 'snippets/faq/*.md',
+      schema: z.object({
+        title: z.string(),
+      })
     })
   }
 })
\ No newline at end of file
diff --git a/content/snippets/faq/booking.md b/content/snippets/faq/booking.md
new file mode 100644
index 0000000..73039cb
--- /dev/null
+++ b/content/snippets/faq/booking.md
@@ -0,0 +1,58 @@
+::spoiler
+---
+title: "Warum machst du keine Stundensätze?"
+---
+Ich finde, Stundensätze haben für beide Seiten nur Nachteile:
+
+Wenn ich schnell und gut arbeite, bekomme ich weniger Geld. Hab ich mal einen Knoten im Gehirn und brauche sehr lange, muss der Kunde mehr zahlen.
+
+Klar kann man sagen, dass sich das irgendwann ausgleichen könnte – aber so weit will ich es gar nicht erst kommen lassen.
+::
+
+::spoiler
+---
+title: "Was bekomme ich denn für die 999 €?"
+---
+Grundsätzlich kommt das natürlich immer darauf an, was du genau willst. Da spielen einige Faktoren eine Rolle.
+
+Ein Beispiel für eine 999 € Seite wäre:
+- Kein CMS
+- 2 Sections auf der Landingpage
+- Impressum, Datenschutzerklärung
+- Standarddesign
+
+Je nach dem was du willst, kann sich das aber auch anders zusammensetzen.
+::
+
+::spoiler
+---
+title: "Welche Themen bietest du für deine Schulungen an?"
+---
+<div>
+<Highlight>Sprachen</Highlight>
+<br />JavaScript, TypeScript, HTML, CSS
+</div>
+
+<div>
+<Highlight>Frameworks</Highlight>
+<br />Vue, Nuxt
+</div>
+::
+
+::spoiler
+---
+title: "Wo finden die Schulungen statt?"
+---
+Die Schulungen finden <Highlight>online/Highlight> statt. Normalerweise nutze ich dafür Google Meet, aber wenn du oder deine Firma eine andere Plattform wünschen und bereitstellen bin ich natürlich flexibel.
+
+Wenn sich deine Firma in der Nähe meines Wohnortes befindet – und damit meine ich "In einer Stunde mit der Straßenbahn zu erreichen", dann kann alles natürlich auch vor Ort stattfinden.
+::
+
+::spoiler
+---
+title: "Ich hab ein cooles Projekt! Aber kein Geld …"
+---
+Tja.
+
+Ne, awas. Meld dich einfach trotzdem über meine E-Mail-Adresse und vielleicht finden wir eine Lösung.
+::
\ No newline at end of file
diff --git a/content/snippets/faq/flatrate.md b/content/snippets/faq/flatrate.md
new file mode 100644
index 0000000..adee048
--- /dev/null
+++ b/content/snippets/faq/flatrate.md
@@ -0,0 +1,53 @@
+::spoiler
+---
+title: "Was ist eine Entwickler-Flatrate?"
+---
+Die Entwickler-Flatrate ist ein Angebot, bei dem du für eine bestimmte Zeit eine bestimmte Menge an Leistungen erhältst.
+
+Sie wird auch oft als sogenannter "Retainer" bezeichnet und ist eine günstige Art, immer wieder anfallende Aufgaben auszulagern.
+::
+
+::spoiler
+---
+title: "Wie läuft die Zusammenarbeit ab?"
+---
+Nach einer ersten Analyse deines Projekts legen wir gemeinsam den Umfang und die monatlichen Aufgaben fest. Du kannst mich je nach Paket auf den vereinbarten Wegen jederzeit kontaktieren.
+
+Die Bearbeitung erfolgt innerhalb der vereinbarten Fristen.
+::
+
+::spoiler
+---
+title: "Wie wird abgerechnet?"
+---
+Du zahlst monatlich einen festen Betrag im Prepaid-Format unabhängig davon, wie viele Aufgaben tatsächlich anfallen.
+
+Dadurch kannst du dein Budget besser einplanen und Aufgaben verteilen.
+::
+
+::spoiler
+---
+title: "Kann ich den Retainer jederzeit kündigen?"
+---
+Ja klar. Du musst dabei nur die Mindestvertragslaufzeit beachten – die bezahlte Leistung steht dir weiterhin zu.
+
+Falls wir merken, dass wir für eine Zusammenarbeit mehr als ungeeignet sind, bekommst du dein Geld anteilig der verbleibenden Zeit zurück und verlierst den Anspruch auf Leistungen ab diesem Zeitpunkt.
+::
+
+::spoiler
+---
+title: "Was passiert, wenn ich dich mal weniger brauche?"
+---
+Der monatliche feste Betrag bleibt bestehen. Ähnlich wie bei einer Versicherung bezahlst du hier für den Fall, dass du mich brauchst, und erhältst dann entsprechend die vereinbarten Leistungen.
+
+Wenn du merkst, dass du mich nicht mehr brauchst, dann kannst du den Vertrag jederzeit kündigen und die Leistungen auslaufen lassen.
+::
+
+::spoiler
+---
+title: "Für wen lohnt sich sowas überhaupt?"
+---
+Vor allem Unternehmen, bei denen immer wieder Aufgaben anfallen, für die sich aber kein komplettes Projekt oder gar eine feste Stelle in der Firma lohnt, profitieren von dieser Art von Leistung.
+
+Sie ist ideal für eine langfristige und zuverlässige Zusammenarbeit.
+::
\ No newline at end of file