add: category, date sorting

Add category layouts and date sorting

app/components/Blog/Author.vue

@@ -1,7 +1,7 @@
 <template>
   <aside class="BlogAuthor">
     <div class="image">
-      <img :src="image" :alt="`Bild von ${name}`" />
+      <img :src="image" :alt="`Bild von ${name}`"/>
     </div>
     <div class="meta">
       <span class="name">{{ name }}</span>
@@ -12,9 +12,9 @@
 
 <script setup lang="ts">
 type Props = {
-  name : string
-  image : string
-  date : string
+  name: string
+  image: string
+  date: string
 }
 
 const { date } = defineProps<Props>()

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

app/components/Blog/Category.vue

@@ -0,0 +1,24 @@
+<template>
+  <Icon :name="icon" mode="svg"/>
+  {{ name }}
+</template>
+
+<script setup lang="ts">
+import type { Category } from './types'
+
+type Props = {
+  name: Category
+}
+
+const { name } = defineProps<Props>()
+
+const icons: Record<Category, string> = {
+  'story': 'ph:chat-circle-dots-duotone',
+  'snippet': 'ph:code-duotone',
+  'tutorial': 'ph:lightbulb-duotone',
+  'news': 'ph:newspaper-duotone',
+  'freelancing': 'ph:laptop-duotone',
+}
+
+const icon = computed(() => name ? icons[name] : 'ph:question-mark-duotone')
+</script>

app/components/Blog/types.ts

@@ -0,0 +1 @@
+export type Category = 'story' | 'snippet' | 'tutorial' | 'news' | 'freelancing'