add: category, date sorting

Add category layouts and date sorting

app/components/Blog/Card.vue

@@ -1,9 +1,11 @@
 <template>
   <NuxtLink :to="link" class="BlogCard z-2">
-    <img :src="image" alt=" " aria-hidden="true" />
+    <div class="image">
+      <img :src="image" alt=" " aria-hidden="true" />
+    </div>
     <div class="card-content">
       <header>
-        <span class="chip">{{ category }}</span>
+        <span class="chip"><BlogCategory :name="category" /></span>
         <h2>{{ title }}</h2>
         <small>{{ description }}</small>
       </header>
@@ -22,6 +24,8 @@
 </template>
 
 <script setup lang="ts">
+import type { Category } from './types'
+
 type Props = {
   title : string
   description : string
@@ -30,7 +34,7 @@ type Props = {
   excerpt : { type: string, children?: any }
   link : string
   tags : string[]
-  category : string
+  category : Category
   author : {
     name : string
     image : string