add: article view

View for blog articles

app/pages/blog/[slug].vue

@@ -1,9 +1,33 @@
 <template>
+  <section class="BlogArticle content">
+    <NuxtLink class="text inline-flex-row" to="/blog">
+      <Icon name="ph:arrow-left-duotone"/>
+      Zurück zur Übersicht
+    </NuxtLink>
 
+    <p v-if="!article">
+      Sorry bro, aber der Artikel existiert einfach nicht.
+    </p>
+
+    <div v-else>
+      <header>
+        <div class="image z-2">
+          <img :src="article.image" alt="Artikelbild" aria-hidden="true"/>
+        </div>
+        <h1 class="margin-top">{{ article.title }}</h1>
+        <h2>{{ article.description }}</h2>
+      </header>
+      <div class="flex-col gap-default">
+        <ContentRenderer v-if="article" :value="article" :style="{ display: 'contents' }"/>
+      </div>
+    </div>
+  </section>
 </template>
 
 <script setup lang="ts">
+const route = useRoute()
 
+const { data: article } = await useAsyncData('article', () => queryCollection('blog').path(route.path).first())
 </script>
 
 <style scoped>