[FEAT] Add blog

src/views/BlogDetail.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+  import { ref, onMounted } from 'vue';
+  import { useRoute, useRouter } from 'vue-router';
+  import { useBlog, type BlogPost } from '../composables/useBlog';
+  import { marked } from 'marked';
+
+  const route = useRoute();
+  const router = useRouter();
+  const { getPost } = useBlog();
+  const post = ref<BlogPost | undefined>(undefined);
+  const renderedContent = ref('');
+
+  onMounted(async () => {
+    const slug = route.params.slug as string;
+    post.value = await getPost(slug);
+
+    if (post.value) {
+      renderedContent.value = await marked(post.value.content);
+    } else {
+      router.push({ name: 'blog-overview' });
+    }
+  });
+</script>
+
+<template>
+  <div class="w-full">
+    <div v-if="post">
+      <RouterLink :to="{ name: 'blog-overview' }" class="inline-flex items-center text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white mb-6 transition-colors">
+        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+        </svg>
+        Back to overview
+      </RouterLink>
+
+      <h1 class="text-4xl font-bold mb-4 text-gray-900 dark:text-white">{{ post.title }}</h1>
+      <p class="text-gray-600 dark:text-gray-400 text-sm mb-8">{{ post.date }}</p>
+      <!-- Image is intentionally omitted here as per requirements -->
+      <div class="prose max-w-none" v-html="renderedContent"></div>
+    </div>
+    <div v-else class="text-center py-12">
+      <p class="text-xl text-gray-600 dark:text-gray-400">Loading...</p>
+    </div>
+  </div>
+</template>