ADD: richtext system

Added richtext system for better card content.

app/assets/css/global.css

@@ -98,6 +98,7 @@ a {
 
 a.text {
     color: var(--color-orange);
+    text-decoration: underline;
 
     &:hover {
         color: var(--color-orange-light);
@@ -185,6 +186,17 @@ span.chip {
     }
 }
 
+.inline-flex-row {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    gap: .2em;
+
+    &.reverse {
+        flex-direction: row-reverse;
+    }
+}
+
 .flex-col {
     display: flex;
     flex-direction: column;

app/components/SkillsEasy.vue

@@ -8,15 +8,20 @@
         <div class="flex-col gap-default">
           <h3>{{skill.title}}</h3>
           <main class="flex-col gap-sm">
-            <component v-for="({type, children, content, ...rest}, textIndex) in skill.text" :is="type" v-bind="rest">
+            <component v-for="({type, content, ...rest}) in skill.text" :is="type" v-bind="rest">
               {{ content}}
-              <template v-if="children">
+              <template v-if="'children' in rest && rest.children">
-                <template v-for="({type, content, ...rest}, childIndex) in children" :key="childIndex">
+                <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="rest">
+                    <component :is="type" v-bind="childRest">
                       {{ content}}
                     </component>
                   </template>
@@ -47,6 +52,10 @@ type RichTextLink = {
   type: 'a'
   content: string
   href: string
+  icon ?: {
+    name: string
+    position : 'start' | 'end'
+  }
   target ?: string
   class ?: string
 }
@@ -140,6 +149,10 @@ const skills : Skill[] = [
             target: '_blank',
             class: 'text',
             href: 'https://www.storyblok.com',
+            icon: {
+              name: 'ph:arrow-square-out-duotone',
+              position: 'end',
+            },
             content: 'Storyblok'
           },
           {
@@ -157,6 +170,10 @@ const skills : Skill[] = [
             target: '_blank',
             class: 'text',
             href: 'https://www.strapi.io',
+            icon: {
+              name: 'ph:arrow-square-out-duotone',
+              position: 'end',
+            },
             content: 'Strapi'
           },
           {