add: article view

View for blog articles

app/components/Blog/Card.vue

@@ -1,22 +1,23 @@
 <template>
   <NuxtLink :to="link" class="BlogCard z-2">
     <div class="image">
-      <img :src="image" alt=" " aria-hidden="true" />
+      <img :src="image" alt=" " aria-hidden="true"/>
     </div>
     <div class="card-content">
       <header>
-        <span class="chip"><BlogCategory :name="category" /></span>
+        <span class="chip"><BlogCategory :name="category"/></span>
         <h2>{{ title }}</h2>
-        <small>{{ description }}</small>
       </header>
       <main>
-        <ContentRenderer :value="excerpt" />
+        <p>
+          {{ generatePlainText(excerpt.value).at(0)?.text ?? '' }}
+        </p>
       </main>
       <footer>
-        <BlogAuthor :name="author.name" :image="author.image" :date="date" />
+        <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>
+          <span class="tag" v-for="tag in tags">{{ tag }}</span>
         </div>
       </footer>
     </div>
@@ -25,19 +26,20 @@
 
 <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, children?: any }
-  link : string
-  tags : string[]
-  category : Category
-  author : {
-    name : string
-    image : string
+  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/Blog/Excerpt.vue

@@ -0,0 +1,9 @@
+<template>
+  <p class="Excerpt">
+    <slot/>
+  </p>
+</template>
+
+<script setup lang="ts">
+
+</script>