add: SEO for articles

SEO and SchemaORg for articles

app/components/Blog/Author.vue

@@ -1,7 +1,15 @@
 <template>
   <aside class="BlogAuthor">
     <div class="image">
-      <img :src="image" :alt="`Bild von ${name}`"/>
+      <img
+        loading="lazy"
+        width="50"
+        height="50"
+        :srcset="imageSet.join(', ')"
+        :src="initialImage"
+        aria-hidden="true"
+        :alt="`Profilbild von ${name}`"
+      />
     </div>
     <div class="meta">
       <span class="name">{{ name }}</span>
@@ -11,13 +19,14 @@
 </template>
 
 <script setup lang="ts">
+import { getImageSet, getInitialImage } from '../../utils/image'
+
 type Props = {
   name: string
-  image: string
   date: string
 }
 
-const { date } = defineProps<Props>()
+const { name, date } = defineProps<Props>()
 
 const formatter = new Intl.DateTimeFormat('de-DE', {
   year: 'numeric',
@@ -26,4 +35,7 @@ const formatter = new Intl.DateTimeFormat('de-DE', {
 })
 
 const dateFormatted = computed(() => formatter.format(new Date(date)))
+
+const imageSet = getImageSet('/img/blog/authors/', name)
+const initialImage = getInitialImage('/img/blog/authors/', name)
 </script>

app/components/Blog/Card.vue

@@ -10,15 +10,11 @@
       </header>
       <main>
         <p>
-          {{ generatePlainText(excerpt.value).at(0)?.text ?? '' }}
+          {{ description }}
         </p>
       </main>
       <footer>
-        <BlogAuthor :name="author.name" :image="author.image" :date="date"/>
-        <div class="tags">
-          <span>tags</span>
-          <span class="tag" v-for="tag in tags">{{ tag }}</span>
-        </div>
+        <BlogAuthor :name="author.name" :date="date"/>
       </footer>
     </div>
   </NuxtLink>
@@ -26,20 +22,16 @@
 
 <script setup lang="ts">
 import type { Category } from './types'
-import type { MinimalNode } from '@nuxt/content'
 
 type Props = {
   title: string
   description: string
   image: string
   date: string
-  excerpt: { type: string, value: MinimalNode[], children?: any }
   link: string
-  tags: string[]
   category: Category
   author: {
     name: string
-    image: string
   }
 }