From b014d315772e2baa02b927b8fae4d8c379ff6f10 Mon Sep 17 00:00:00 2001
From: webfussel <fiona@webfussel.de>
Date: Fri, 21 Feb 2025 19:15:20 +0100
Subject: [PATCH] ADD: RichText

Added RichText system
---
 app/components/RichText/General.vue   |  40 +++++
 app/components/RichText/Link.vue      |  12 ++
 app/components/RichText/NewLine.vue   |   3 +
 app/components/RichText/Paragraph.vue |  11 ++
 app/components/RichText/Plain.vue     |   9 ++
 app/components/RichText/RichText.vue  |  22 +++
 app/components/RichText/String.vue    |  11 ++
 app/components/RichText/Types.ts      |  34 +++++
 app/components/SkillsEasy.vue         | 203 ++++++++++++++------------
 9 files changed, 250 insertions(+), 95 deletions(-)
 create mode 100644 app/components/RichText/General.vue
 create mode 100644 app/components/RichText/Link.vue
 create mode 100644 app/components/RichText/NewLine.vue
 create mode 100644 app/components/RichText/Paragraph.vue
 create mode 100644 app/components/RichText/Plain.vue
 create mode 100644 app/components/RichText/RichText.vue
 create mode 100644 app/components/RichText/String.vue
 create mode 100644 app/components/RichText/Types.ts

diff --git a/app/components/RichText/General.vue b/app/components/RichText/General.vue
new file mode 100644
index 0000000..2dda4a1
--- /dev/null
+++ b/app/components/RichText/General.vue
@@ -0,0 +1,40 @@
+<template>
+  <component :is="computedComponent.is" v-bind="computedComponent.props" />
+</template>
+
+<script setup lang="ts">
+import type { RichText } from './Types'
+
+type Props = {
+  element : RichText
+}
+
+const { element } = defineProps<Props>()
+
+const computedComponent = computed(() => {
+  let is : ReturnType<typeof resolveComponent> = {}
+
+  switch (element.type) {
+    case 'plain':
+      is = resolveComponent('RichTextPlain')
+      break
+    case 'p':
+      is = resolveComponent('RichTextParagraph')
+      break
+    case 'span':
+      is = resolveComponent('RichTextString')
+      break
+    case 'a':
+      is = resolveComponent('RichTextLink')
+      break
+    case 'br':
+      is = resolveComponent('RichTextNewLine')
+      break
+    default:
+      break
+  }
+
+  return { is, props: { ...element } }
+})
+
+</script>
diff --git a/app/components/RichText/Link.vue b/app/components/RichText/Link.vue
new file mode 100644
index 0000000..266fce6
--- /dev/null
+++ b/app/components/RichText/Link.vue
@@ -0,0 +1,12 @@
+<template>
+  <a :href="href" :target="target" class="text inline-flex-row" :class="{ reverse : icon && icon.position === 'end' }">
+    <Icon v-if="icon" :name="icon.name" mode="svg" />
+    {{ content }}
+  </a>
+</template>
+
+<script setup lang="ts">
+import type { RichTextLink } from './Types'
+
+defineProps<RichTextLink>()
+</script>
diff --git a/app/components/RichText/NewLine.vue b/app/components/RichText/NewLine.vue
new file mode 100644
index 0000000..1502375
--- /dev/null
+++ b/app/components/RichText/NewLine.vue
@@ -0,0 +1,3 @@
+<template>
+  <br>
+</template>
diff --git a/app/components/RichText/Paragraph.vue b/app/components/RichText/Paragraph.vue
new file mode 100644
index 0000000..5ec1196
--- /dev/null
+++ b/app/components/RichText/Paragraph.vue
@@ -0,0 +1,11 @@
+<template>
+  <p :class="css">
+    <RichTextGeneral v-for="element in children" :element="element" />
+  </p>
+</template>
+
+<script setup lang="ts">
+import type { RichTextParagraph } from './Types'
+
+defineProps<RichTextParagraph>()
+</script>
\ No newline at end of file
diff --git a/app/components/RichText/Plain.vue b/app/components/RichText/Plain.vue
new file mode 100644
index 0000000..162d9d3
--- /dev/null
+++ b/app/components/RichText/Plain.vue
@@ -0,0 +1,9 @@
+<template>
+  {{ content }}
+</template>
+
+<script setup lang="ts">
+import type { RichTextPlain } from './Types'
+
+defineProps<RichTextPlain>()
+</script>
diff --git a/app/components/RichText/RichText.vue b/app/components/RichText/RichText.vue
new file mode 100644
index 0000000..b1749de
--- /dev/null
+++ b/app/components/RichText/RichText.vue
@@ -0,0 +1,22 @@
+<template>
+  <section>
+    <template v-if="Array.isArray(elements)">
+      <General v-for="element in elements" :element="element" />
+    </template>
+    <template v-else>
+      <General :element="elements" />
+    </template>
+  </section>
+</template>
+
+<script setup lang="ts">
+import type { RichText } from './Types'
+import General from './General.vue'
+
+type Props = {
+  elements : RichText | RichText[]
+}
+
+
+defineProps<Props>()
+</script>
diff --git a/app/components/RichText/String.vue b/app/components/RichText/String.vue
new file mode 100644
index 0000000..926b4e0
--- /dev/null
+++ b/app/components/RichText/String.vue
@@ -0,0 +1,11 @@
+<template>
+  <span :class="css">
+    {{ content }}
+  </span>
+</template>
+
+<script setup lang="ts">
+import type { RichTextSpan } from './Types'
+
+defineProps<RichTextSpan>()
+</script>
diff --git a/app/components/RichText/Types.ts b/app/components/RichText/Types.ts
new file mode 100644
index 0000000..997566e
--- /dev/null
+++ b/app/components/RichText/Types.ts
@@ -0,0 +1,34 @@
+type RichTextBasis = {
+  type: string
+  content: string
+  css ?: string
+}
+
+export type RichTextPlain = RichTextBasis & {
+  type: 'plain'
+}
+
+export type RichTextParagraph = Omit<RichTextBasis, 'content'> & {
+  type: 'p'
+  children ?: RichText[]
+}
+
+export type RichTextSpan = RichTextBasis & {
+  type: 'span'
+}
+
+export type RichTextLink = RichTextBasis & {
+  type: 'a'
+  href: string
+  icon ?: {
+    name: string
+    position : 'start' | 'end'
+  }
+  target ?: string
+}
+
+export type RichTextNewLine = {
+  type: 'br'
+}
+
+export type RichText = RichTextPlain | RichTextParagraph |  RichTextSpan | RichTextLink | RichTextNewLine
\ No newline at end of file
diff --git a/app/components/SkillsEasy.vue b/app/components/SkillsEasy.vue
index 36be7e4..6e49910 100644
--- a/app/components/SkillsEasy.vue
+++ b/app/components/SkillsEasy.vue
@@ -8,26 +8,7 @@
         <div class="flex-col gap-default">
           <h3>{{skill.title}}</h3>
           <main class="flex-col gap-sm">
-            <component v-for="({type, content, ...rest}) in skill.text" :is="type" v-bind="rest">
-              {{ content}}
-              <template v-if="'children' in rest && rest.children">
-                <template v-for="({type, content, ...childRest}, childIndex) in rest.children" :key="childIndex">
-                  <template v-if="type === 'text'">
-                    {{ content }}
-                  </template>
-                  <template v-else-if="type === 'a'">
-                    <component :is="type" v-bind="childRest" class="inline-flex-row">
-                      {{ content}} <Icon v-if="'icon' in childRest && childRest.icon" :name="childRest.icon.name" mode="svg" :class="childRest.icon.position === 'end' && 'reverse'" />
-                    </component>
-                  </template>
-                  <template v-else>
-                    <component :is="type" v-bind="childRest">
-                      {{ content}}
-                    </component>
-                  </template>
-                </template>
-              </template>
-            </component>
+            <RichText v-for="(t, index) in skill.text" :key="`${t.type}-${index}`" :elements="t" />
           </main>
         </div>
       </article>
@@ -43,31 +24,8 @@
 </template>
 
 <script setup lang="ts">
-type RichTextBase = {
-  type: 'text'
-  content: string
-}
 
-type RichTextSimple = {
-  type: 'p' | 'span'
-  content: string
-  class ?: string
-  children ?: RichText[]
-}
-
-type RichTextLink = {
-  type: 'a'
-  content: string
-  href: string
-  icon ?: {
-    name: string
-    position : 'start' | 'end'
-  }
-  target ?: string
-  class ?: string
-}
-
-type RichText = RichTextBase | RichTextSimple | RichTextLink
+import type { RichText } from './RichText/Types'
 
 type Skill = {
   img: string
@@ -82,27 +40,48 @@ const skills : Skill[] = [
     text: [
       {
         type: 'p',
-        content: 'Die meisten Anwendungen haben eine grafische Benutzeroberfläche - die so genannte GUI. Wenn etwas graphisch ist, ' +
-            'dann bedeutet das auch natürlich, dass es sinnvoll dargestellt werden muss. Dafür verwenden wir kleine Bausteine, die wir Komponenten nennen.',
-      },
-      {
-        type: 'p',
-        content: 'Grundsätzlich lassen sich komplette Anwendungen und auch einfache Webseiten ziemlich cool über Komponenten aufbauen, sodass wir wiederkehrende Elemente ' +
-            'wie Buttons, Textabschnitte, Links oder Teaser immer wieder verwenden können - selbst wenn sich diese in ihren Details wie Farben oder Icons unterscheiden.',
-      },
-      {
-        type: 'p',
-        content: 'Diese Komponenten so zu entwickeln, dass sie wirklich flexibel sind und auch perfekt mit dem Design übereinstimmen ist gar nicht so einfach, denn oft sollten sie ' +
-            'auch mehr können als im Design kurzfristig ersichtlich ist.',
-      },
-      {
-        type: 'p',
-        class: 'margin-top bold',
-        content: 'Diese Voraussicht, für den Fall der Fälle vorzusorgen: Die gibt\'s bei mir dazu.',
         children: [
+          {
+            type: 'plain',
+            content: 'Die meisten Anwendungen haben eine grafische Benutzeroberfläche - die so genannte GUI. Wenn etwas graphisch ist, ' +
+                'dann bedeutet das auch natürlich, dass es sinnvoll dargestellt werden muss. Dafür verwenden wir kleine Bausteine, die wir Komponenten nennen.',
+          }
+        ]
+      },
+      {
+        type: 'p',
+        children: [
+          {
+            type: 'plain',
+            content: 'Grundsätzlich lassen sich komplette Anwendungen und auch einfache Webseiten ziemlich cool über Komponenten aufbauen, sodass wir wiederkehrende Elemente ' +
+                'wie Buttons, Textabschnitte, Links oder Teaser immer wieder verwenden können - selbst wenn sich diese in ihren Details wie Farben oder Icons unterscheiden.',
+          }
+        ]
+      },
+      {
+        type: 'p',
+        children: [
+          {
+            type: 'plain',
+            content: 'Diese Komponenten so zu entwickeln, dass sie wirklich flexibel sind und auch perfekt mit dem Design übereinstimmen ist gar nicht so einfach, denn oft sollten sie ' +
+                'auch mehr können als im Design kurzfristig ersichtlich ist.',
+          }
+        ]
+      },
+      {
+        type: 'p',
+        css: 'margin-top bold',
+        children: [
+          {
+            type: 'plain',
+            content: 'Diese Voraussicht, für den Fall der Fälle vorzusorgen: Die gibt\'s bei mir dazu. ',
+          },
+          {
+            type: 'br',
+          },
           {
             type: 'span',
-            class: 'highlight',
+            css: 'highlight',
             content: 'Fussel-Ehrenwort.'
           }
         ]
@@ -114,47 +93,53 @@ const skills : Skill[] = [
     text: [
       {
         type: 'p',
-        content: 'In vielen Fällen ist es natürlich praktisch, wenn du einfach Inhalte einer Seite auf das ändern kannst, was gerade aktuell ist, ohne auf andere angewiesen zu sein.'
-        + 'Damit das reibungslos möglich ist, entwickle ich dir gerne eine Anwendung oder Homepage, deren Inhalte du komplett selbst auf dem neuesten Stand halten kannst - und zwar ' +
-            'mit einem sogenannten CMS - ein ',
         children: [
+          {
+            type: 'plain',
+            content: 'In vielen Fällen ist es natürlich praktisch, wenn du einfach Inhalte einer Seite auf das ändern kannst, was gerade aktuell ist, ohne auf andere angewiesen zu sein.'
+                + 'Damit das reibungslos möglich ist, entwickle ich dir gerne eine Anwendung oder Homepage, deren Inhalte du komplett selbst auf dem neuesten Stand halten kannst - und zwar '
+                + 'mit einem sogenannten CMS - ein ',
+          },
           {
             type: 'span',
-            class: 'highlight',
+            css: 'highlight',
             content: 'C'
           },
           {
-            type: 'text',
+            type: 'plain',
             content: 'ontent '
           },
           {
             type: 'span',
-            class: 'highlight',
+            css: 'highlight',
             content: 'M'
           },
           {
-            type: 'text',
+            type: 'plain',
             content: 'anagement '
           },
           {
             type: 'span',
-            class: 'highlight',
+            css: 'highlight',
             content: 'S'
           },
           {
-            type: 'text',
+            type: 'plain',
             content: 'ystem.'
           },
         ]
       },
       {
         type: 'p',
-        content: 'Für CMS setze ich in erster Linie auf die cloudbasierte Lösung ',
         children: [
+          {
+            type: 'plain',
+            content: 'Für CMS setze ich in erster Linie auf die cloudbasierte Lösung ',
+          },
           {
             type: 'a',
             target: '_blank',
-            class: 'text',
+            css: 'text',
             href: 'https://www.storyblok.com',
             icon: {
               name: 'ph:arrow-square-out-duotone',
@@ -163,19 +148,22 @@ const skills : Skill[] = [
             content: 'Storyblok'
           },
           {
-            type: 'text',
+            type: 'plain',
             content: '. Dies stellt für die Meisten eine kostenlose bis kostengünstige Lösung dar ohne viel technisches Wissen mitbringen zu müssen.',
           }
         ]
       },
       {
         type: 'p',
-        content: 'Falls du aber nicht möchtest, dass deine Daten auf irgendeinem Fremden server liegen - was ich durchaus verstehen kann! - dann gibt es auch die Möglichkeit mit ',
         children: [
+          {
+            type: 'plain',
+            content: 'Falls du aber nicht möchtest, dass deine Daten auf irgendeinem Fremden server liegen - was ich durchaus verstehen kann! - dann gibt es auch die Möglichkeit mit ',
+          },
           {
             type: 'a',
             target: '_blank',
-            class: 'text',
+            css: 'text',
             href: 'https://www.strapi.io',
             icon: {
               name: 'ph:arrow-square-out-duotone',
@@ -184,19 +172,25 @@ const skills : Skill[] = [
             content: 'Strapi'
           },
           {
-            type: 'text',
+            type: 'plain',
             content: ' selbst das eigene CMS zu hosten. Das musst du dann aber allerdings selbst erledigen oder ich erledige das für dich für einen Aufpreis.',
           }
         ]
       },
       {
         type: 'p',
-        class: 'margin-top bold',
-        content: 'Nie wieder jemand anderen Fragen zu müssen, um deine Website auf dem neuesten Stand zu halten.',
+        css: 'margin-top bold',
         children: [
+          {
+            type: 'plain',
+            content: 'Nie wieder jemand anderen Fragen zu müssen, um deine Website auf dem neuesten Stand zu halten.',
+          },
+          {
+            type: 'br',
+          },
           {
             type: 'span',
-            class: 'highlight',
+            css: 'highlight',
             content: 'Mit Fussel-Garantie.'
           }
         ]
@@ -208,33 +202,52 @@ const skills : Skill[] = [
     text: [
       {
         type: 'p',
-        content: 'Grundsätzlich lässt sich das ganz einfach zusammenfassen: ',
         children: [
+          {
+            type: 'plain',
+            content: 'Grundsätzlich lässt sich das ganz einfach zusammenfassen: ',
+          },
           {
             type: 'span',
-            class: 'highlight',
+            css: 'highlight',
             content: 'Dein persönlicher Webauftritt.',
           }
         ]
       },
       {
         type: 'p',
-        content: 'Ob du nun etwas kleineres brauchst, um ein paar Hobbies zu zeigen. Oder vielleicht etwas größeres, weil du dir ein eigenes Business aufbauen willst. Eventuell ein eigener Blog, eine komplette Applikation oder ' +
-            'die Möglichkeit für andere Leute deine Daten bereit zu stellen. All das, das kann ich dir mit meinen Fähigkeiten und meiner Erfahrung bieten.'
-      },
-      {
-        type: 'p',
-        content: 'Erkunde einfach meine Referenzen und dir wird auffallen, dass diese äußerst durchmischt und bunt sind. So individuell wie die Projekte meiner bisherigen Kunden wird auch dein Projekt behandelt. Und auch, wenn '
-        + 'du glaubst, dass die Referenzen nicht zu deinem Projekt passen, werden wir deine ganz individuelle Lösung gemeinsam erarbeiten.'
-      },
-      {
-        type: 'p',
-        class: 'margin-top bold',
-        content: 'Denn jedes Projekt ist etwas eigenes und besonderes.',
         children: [
+          {
+            type: 'plain',
+            content: 'Ob du nun etwas kleineres brauchst, um ein paar Hobbies zu zeigen. Oder vielleicht etwas größeres, weil du dir ein eigenes Business aufbauen willst. Eventuell ein eigener Blog, eine komplette Applikation oder '
+                + 'die Möglichkeit für andere Leute deine Daten bereit zu stellen. All das, das kann ich dir mit meinen Fähigkeiten und meiner Erfahrung bieten.'
+          }
+        ]
+      },
+      {
+        type: 'p',
+        children: [
+          {
+            type: 'plain',
+            content: 'Erkunde einfach meine Referenzen und dir wird auffallen, dass diese äußerst durchmischt und bunt sind. So individuell wie die Projekte meiner bisherigen Kunden wird auch dein Projekt behandelt. Und auch, wenn '
+                + 'du glaubst, dass die Referenzen nicht zu deinem Projekt passen, werden wir deine ganz individuelle Lösung gemeinsam erarbeiten.'
+          }
+        ]
+      },
+      {
+        type: 'p',
+        css: 'margin-top bold',
+        children: [
+          {
+            type: 'plain',
+            content: 'Denn jedes Projekt ist etwas eigenes und besonderes.',
+          },
+          {
+            type: 'br',
+          },
           {
             type: 'span',
-            class: 'highlight',
+            css: 'highlight',
             content: 'Auch deins.'
           }
         ]