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
   }
 }
 

app/components/Section/Intro.vue

@@ -6,7 +6,9 @@
         <span class="my-name-wrapper">Ich bin <Highlight>Fiona</Highlight>.</span>
       </h1>
       <h2>
-        Component <Highlight>&</Highlight> API Entwicklerin
+        Component
+        <Highlight>&</Highlight>
+        API Entwicklerin
       </h2>
       <p class="fulltext">
         Ich unterstütze Unternehmen dabei, ihre Daten von verschiedenen Endpunkten sauber aufzubereiten
@@ -21,14 +23,14 @@
         Ich biete dir genau das, was du brauchst, um eine individuelle WebApp in Fahrt zu bringen, deren Inhalte einfach zu verändern sind.
       </p>
       <Button class="cta" href="#skills">
-        <Icon name="ph:lightbulb-duotone" size="1.5em" mode="svg" />
+        <Icon name="ph:lightbulb-duotone" size="1.5em" mode="svg"/>
         Fussel erklärt's dir
       </Button>
     </div>
     <div class="intro-img">
       <picture>
-        <source width="750" height="866" media="(min-width: 431px)" srcset="/img/profile_big.webp" />
-        <img width="430" height="866" src="/img/profile_small.webp" alt="Bild von Fiona Urban" />
+        <source width="750" height="866" media="(min-width: 431px)" srcset="/img/profile_big.webp"/>
+        <img width="430" height="866" src="/img/profile_small.webp" alt="Bild von Fiona Urban"/>
       </picture>
     </div>
   </section>