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>

app/pages/blog/index.vue

@@ -26,7 +26,16 @@ import type { Category } from '../../components/Blog/types'
 
 const route = useRoute()
 
-const { data: articles } = await useAsyncData('articles', () => queryCollection('blog').order('date', 'DESC').all())
+const simpleDate = (date: Date) => {
+  date.setDate(date.getDate() + 1)
+  return `${date.getFullYear()}-${`${date.getMonth() + 1}`.padStart(2, '0')}-${date.getDate()}`
+}
+
+const { data: articles } = await useAsyncData('articles', () => queryCollection('blog')
+  .where('date', '<', simpleDate(new Date()))
+  .order('date', 'DESC')
+  .all(),
+)
 
 const firstTen = computed(() => {
   if (route.query.category) {
@@ -49,13 +58,13 @@ const allCategoriesAndCount = computed(() => {
 const makeBlogCard = (article: BlogCollectionItem) => ({
   title: article.title,
   description: article.description,
-  image: article.meta.image as string,
+  image: article.thumbnail as string,
   date: article.date as string,
-  excerpt: article.excerpt,
+  excerpt: article.excerpt as any,
   link: article.path,
-  tags: article.meta.tags as string[],
-  category: article.meta.category as Category,
-  author: article.meta.author as { name: string, image: string },
+  tags: article.tags as string[],
+  category: article.category as Category,
+  author: article.author as { name: string, image: string },
 })
 
 useHead({