[FEAT] Add blog

src/views/BlogOverview.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+  import { ref, onMounted } from 'vue';
+  import { useBlog, type BlogPost } from '../composables/useBlog';
+  import { RouterLink } from 'vue-router';
+
+  const { getPosts } = useBlog();
+  const posts = ref<BlogPost[]>([]);
+
+  onMounted(async () => {
+    posts.value = await getPosts();
+  });
+</script>
+
+<template>
+  <div class="w-full">
+    <h1 class="text-4xl font-bold mb-8 text-gray-900 dark:text-white">Blog</h1>
+    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+      <article v-for="post in posts" :key="post.slug" class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 flex flex-col h-full">
+        <RouterLink :to="{ name: 'blog-detail', params: { slug: post.slug } }" class="flex flex-col h-full">
+          <img :src="post.image" :alt="post.title" class="w-full h-48 object-cover" />
+          <div class="p-6 flex-1 flex flex-col">
+            <h2 class="text-xl font-bold mb-2 text-gray-900 dark:text-white line-clamp-2">{{ post.title }}</h2>
+            <p class="text-gray-600 dark:text-gray-400 text-xs mb-3">{{ post.date }}</p>
+            <p class="text-gray-700 dark:text-gray-300 text-sm line-clamp-3 flex-1">{{ post.description }}</p>
+          </div>
+        </RouterLink>
+      </article>
+    </div>
+  </div>
+</template>