From 422642b407bc12aa725597becd4319976935bf27 Mon Sep 17 00:00:00 2001
From: root <root@adhd.sh>
Date: Fri, 2 Jan 2026 21:02:19 +0100
Subject: [PATCH] [FEAT] Fix blog format

---
 src/views/BlogDetail.vue | 75 ++++++++++++++++++++++++++++++++++++++--
 1 file changed, 72 insertions(+), 3 deletions(-)

diff --git a/src/views/BlogDetail.vue b/src/views/BlogDetail.vue
index ef79ac2..06e9204 100644
--- a/src/views/BlogDetail.vue
+++ b/src/views/BlogDetail.vue
@@ -140,13 +140,82 @@
         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>
+      <div class="mb-10 sm:mb-12 max-w-3xl">
+        <div class="flex items-center gap-3 text-sm text-gray-500 dark:text-gray-400 mb-6 font-medium">
+          <time :datetime="post.date">
+            {{ new Date(post.date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' }) }}
+          </time>
+          <span class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-600"></span>
+          <span v-if="post.author">
+            {{ post.author }}
+          </span>
+        </div>
+
+        <h1 class="text-3xl sm:text-5xl font-bold tracking-tight text-gray-900 dark:text-white leading-tight">
+          {{ post.title }}
+        </h1>
+      </div>
+
       <!-- Image is intentionally omitted here as per requirements -->
-      <div class="prose max-w-none" v-html="renderedContent"></div>
+
+      <div
+        class="markdown-content prose prose-lg dark:prose-invert max-w-none prose-headings:font-bold prose-headings:tracking-tight prose-headings:text-gray-900 dark:prose-headings:text-gray-100 prose-p:leading-relaxed prose-a:text-primary-600 prose-a:no-underline prose-a:border-b prose-a:border-primary-300 hover:prose-a:border-primary-600 prose-a:transition-colors prose-blockquote:not-italic prose-blockquote:font-normal prose-blockquote:text-gray-600 dark:prose-blockquote:text-gray-300 prose-blockquote:border-l-4 prose-blockquote:border-primary-500 prose-blockquote:bg-gray-50 dark:prose-blockquote:bg-gray-800/30 prose-blockquote:rounded-r prose-code:text-primary-700 dark:prose-code:text-primary-300 prose-code:bg-primary-50 dark:prose-code:bg-primary-900/30 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:before:content-none prose-code:after:content-none prose-code:font-mono prose-code:text-sm prose-pre:bg-gray-900 prose-pre:text-gray-200 prose-pre:shadow-lg prose-pre:rounded-xl prose-img:rounded-xl prose-img:shadow-lg prose-img:border prose-img:border-gray-200 dark:prose-img:border-gray-700 prose-hr:border-gray-200 dark:prose-hr:border-gray-800 prose-li:marker:text-primary-500"
+        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>
+
+<style scoped>
+  /* Force spacing for markdown content since prose modifiers can be overridden */
+  .markdown-content :deep(p) {
+    margin-top: 1.5em;
+    margin-bottom: 1.5em;
+  }
+
+  .markdown-content :deep(h2),
+  .markdown-content :deep(h3),
+  .markdown-content :deep(h4) {
+    margin-top: 2em;
+    margin-bottom: 1em;
+    line-height: 1.3;
+  }
+
+  .markdown-content :deep(img) {
+    margin-top: 2.5em;
+    margin-bottom: 2.5em;
+  }
+
+  .markdown-content :deep(ul),
+  .markdown-content :deep(ol) {
+    margin-top: 1.5em;
+    margin-bottom: 1.5em;
+  }
+
+  .markdown-content :deep(li) {
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+  }
+
+  .markdown-content :deep(blockquote) {
+    margin-top: 2em;
+    margin-bottom: 2em;
+    padding-top: 1em;
+    padding-bottom: 1em;
+    padding-left: 1.5em;
+  }
+
+  .markdown-content :deep(pre) {
+    margin-top: 2em;
+    margin-bottom: 2em;
+    padding: 1.5rem;
+  }
+
+  .markdown-content :deep(hr) {
+    margin-top: 3em;
+    margin-bottom: 3em;
+  }
+</style>