update all

pages/[...slug].vue

@@ -1,11 +1,28 @@
+<script setup>
+const route = useRoute()
+</script>
+
 <template>
-  <article class="prose lg:prose-xl mx-auto">
-    <ContentDoc />
+  <article class="prose prose-slate lg:prose-lg dark:prose-invert mx-auto px-4 py-8">
+    <ContentDoc :path="route.path" v-slot="{ doc }">
+      <div class="mb-8">
+        <h1 class="text-4xl font-bold mb-4">{{ doc.title }}</h1>
+        <div class="flex items-center gap-4 text-gray-500">
+          <time :datetime="doc.date">{{ new Date(doc.date).toLocaleDateString('zh-CN', { 
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric'
+          }) }}</time>
+          <div v-if="doc.tags" class="flex gap-2">
+            <span v-for="tag in doc.tags" :key="tag" 
+                  class="px-2 py-1 bg-gray-100 rounded-full text-sm">
+              {{ tag }}
+            </span>
+          </div>
+        </div>
+      </div>
+      <ContentRenderer :value="doc" :components="{ prose }" />
+    </ContentDoc>
   </article>
 </template>
-
-<style>
-.prose {
-  max-width: 65ch;
-  margin: 0 auto;
 }