From fa0435efdf9e7eb42bae254d1dc5fc193d9bc635 Mon Sep 17 00:00:00 2001
From: webfussel <fiona@webfussel.de>
Date: Wed, 11 Jun 2025 18:49:19 +0200
Subject: [PATCH] add: more SEO meta

More seometa, better markdown parser
---
 app/app.vue                                   |  2 --
 app/components/Section/Booking.vue            |  6 +++---
 app/components/Section/Flatrate.vue           |  6 +++---
 app/pages/booking.vue                         |  7 +++++++
 app/pages/contact.vue                         |  7 +++++++
 app/pages/flatrate.vue                        |  7 +++++++
 app/pages/index.vue                           |  5 +++++
 app/pages/references.vue                      |  9 ++++++++-
 app/{composables/faq.ts => utils/markdown.ts} | 15 +++++++++++----
 content/snippets/faq/booking.md               |  2 +-
 10 files changed, 52 insertions(+), 14 deletions(-)
 rename app/{composables/faq.ts => utils/markdown.ts} (52%)

diff --git a/app/app.vue b/app/app.vue
index 52b2164..c876d24 100755
--- a/app/app.vue
+++ b/app/app.vue
@@ -8,8 +8,6 @@
 
 <script setup>
 useSeoMeta({
-  title: 'Home',
-  description: 'Headless CMS, Components & APIs by Fiona Urban. Storyblok, FirstSpirit, Nuxt.',
   author: 'webfussel',
   robots: 'index, follow',
   themeColor: '#2a2723',
diff --git a/app/components/Section/Booking.vue b/app/components/Section/Booking.vue
index f557b91..b88eed5 100755
--- a/app/components/Section/Booking.vue
+++ b/app/components/Section/Booking.vue
@@ -130,7 +130,7 @@ const oneOff : Service[] = [
 ]
 
 const { data: faq } = await useAsyncData('faq', () => queryCollection('faq').path('/snippets/faq/booking').first())
-const texts = usePlainFaq(faq.value?.body.value)
+const texts = generatePlainText<['title']>(faq.value?.body.value)
 
 if (faq) {
   useSchemaOrg({
@@ -138,10 +138,10 @@ if (faq) {
     '@type': 'FAQPage',
     'mainEntity': texts.map(entity => ({
       '@type': 'Question',
-      'name': entity.question,
+      'name': entity.meta.title,
       'acceptedAnswer': {
         '@type': 'Answer',
-        'text': entity.answer,
+        'text': entity.text,
       },
     }))
   })
diff --git a/app/components/Section/Flatrate.vue b/app/components/Section/Flatrate.vue
index 4c74a38..f6ce7ac 100755
--- a/app/components/Section/Flatrate.vue
+++ b/app/components/Section/Flatrate.vue
@@ -139,7 +139,7 @@ const flatrate : Service[] =
     ]
 
 const { data : faq } = await useAsyncData('faq', () => queryCollection('faq').path('/snippets/faq/flatrate').first())
-const texts = usePlainFaq(faq.value?.body.value)
+const texts = generatePlainText<['title']>(faq.value?.body.value)
 
 if (faq) {
   useSchemaOrg({
@@ -147,10 +147,10 @@ if (faq) {
     '@type': 'FAQPage',
     'mainEntity': texts.map(entity => ({
       '@type': 'Question',
-      'name': entity.question,
+      'name': entity.meta.title,
       'acceptedAnswer': {
         '@type': 'Answer',
-        'text': entity.answer,
+        'text': entity.text,
       },
     }))
   })
diff --git a/app/pages/booking.vue b/app/pages/booking.vue
index 8c934a0..72af40a 100755
--- a/app/pages/booking.vue
+++ b/app/pages/booking.vue
@@ -3,3 +3,10 @@
     <SectionBooking />
   </div>
 </template>
+
+<script lang="ts" setup>
+useSeoMeta({
+  title: 'Projektbuchung',
+  description: 'Buche jetzt dein Projekt auf webfussel. Du brauchst eine Schulung in JavaScript, Typescript, HTML, CSS, Vue oder Nuxt? Kein Problem.',
+})
+</script>
diff --git a/app/pages/contact.vue b/app/pages/contact.vue
index a19ef5d..867bfbf 100755
--- a/app/pages/contact.vue
+++ b/app/pages/contact.vue
@@ -3,3 +3,10 @@
     <SectionContact />
   </div>
 </template>
+
+<script lang="ts" setup>
+useSeoMeta({
+  title: 'Kontakt',
+  description: 'Nimm Kontakt zu webfussel auf. Egal ob über E-Mail oder Social Media - ich freue mich auf deine Nachricht.',
+})
+</script>
\ No newline at end of file
diff --git a/app/pages/flatrate.vue b/app/pages/flatrate.vue
index c1c2191..1eb8f68 100755
--- a/app/pages/flatrate.vue
+++ b/app/pages/flatrate.vue
@@ -3,3 +3,10 @@
     <SectionFlatrate />
   </div>
 </template>
+
+<script lang="ts" setup>
+useSeoMeta({
+  title: 'Flatrate',
+  description: 'Buche webfussel ganz einfach für eine zugesicherte Anzahl Stunden pro Woche. Wenn immer mal wieder was anfällt - vertrau auf Fusselqualität.',
+})
+</script>
\ No newline at end of file
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 206f51b..72ab00e 100755
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -14,4 +14,9 @@ useHead({
     { rel: 'icon', href: '/favicon.ico', type: 'image/x-icon' },
   ],
 })
+
+useSeoMeta({
+  title: 'Home',
+  description: 'Webprojekte und Retainer mit Fusselqualität. Du brauchst eine Website mit CMS? Bock auf Flatrate? webfussel by Fiona Urban',
+})
 </script>
\ No newline at end of file
diff --git a/app/pages/references.vue b/app/pages/references.vue
index e586151..3b724af 100755
--- a/app/pages/references.vue
+++ b/app/pages/references.vue
@@ -2,4 +2,11 @@
   <div>
     <SectionCustomers />
   </div>
-</template>
\ No newline at end of file
+</template>
+
+<script lang="ts" setup>
+useSeoMeta({
+  title: 'Referenzen',
+  description: 'Schau dir dir Projekte von webfussel an. Über persönliche Webseiten, über Schulungen bis hin zu API Projekten.',
+})
+</script>
\ No newline at end of file
diff --git a/app/composables/faq.ts b/app/utils/markdown.ts
similarity index 52%
rename from app/composables/faq.ts
rename to app/utils/markdown.ts
index c8ce67c..adeaec8 100644
--- a/app/composables/faq.ts
+++ b/app/utils/markdown.ts
@@ -1,5 +1,12 @@
 import type { MinimalElement, MinimalNode } from '@nuxt/content'
 
+type TypedRecord<T extends readonly string[]> = Record<T[number], string>
+
+type PlainText<T extends string[]> = {
+  meta: TypedRecord<T>
+  text: string
+}
+
 const extractText = (element ?: MinimalNode) : string => {
   if (!element) return ''
   if (typeof element === 'string') return element
@@ -7,13 +14,13 @@ const extractText = (element ?: MinimalNode) : string => {
   return nodes?.map((el : MinimalNode) => typeof el === 'string' ? el : extractText(el)).join(' ') ?? ''
 }
 
-export const usePlainFaq = (body ?: MinimalNode[]) => {
+export const generatePlainText = <T extends string[] = []>(body ?: MinimalNode[]) : PlainText<T>[] => {
   if (!body) return []
-  return body.map(part => {
+  return body.map<PlainText<T>>(part => {
     const [, meta] = part as MinimalElement
     return {
-      question: meta.title,
-      answer: extractText(part).replace(/\n/g, ' ')
+      meta : meta as TypedRecord<T>,
+      text: extractText(part).replace(/\n/g, ' ')
     }
   })
 }
diff --git a/content/snippets/faq/booking.md b/content/snippets/faq/booking.md
index 72baf1c..2af58b4 100644
--- a/content/snippets/faq/booking.md
+++ b/content/snippets/faq/booking.md
@@ -63,5 +63,5 @@ Tja.
 
 Ne, awas. Meld dich einfach trotzdem über meine E-Mail-Adresse und vielleicht finden wir eine Lösung.
 
-Du findest weitere Kontaktmöglichkeiten auf meiner [Kontakt-Seite <IconLinkInternal />](contact/){class="text inline-flex-row"}.
+Du findest weitere Kontaktmöglichkeiten auf meiner [Kontakt-Seite <IconLinkInternal />](/contact/){class="text inline-flex-row"}.
 ::
\ No newline at end of file