blog mvp completed

app/components/blog/BlogCard.vue

@@ -1,29 +1,40 @@
 <template>
-  <NuxtLink :to="localePath((post as any)._path)" class="block h-full">
-    <UCard class="h-full overflow-hidden hover:shadow-lg transition-shadow duration-300">
-      <div class="relative aspect-video w-full overflow-hidden -mx-6 -mt-6 mb-4">
-        <NuxtImg :src="post.image || '/img/blog/default-cover.jpg'" :alt="post.title" class="h-full w-full object-cover"
-          loading="lazy" width="600" height="338" format="webp" />
+  <NuxtLink :to="localePath(getRoutePath((post as any).path))" class="block h-full">
+    <UCard class="h-full overflow-hidden hover:shadow-lg transition-shadow duration-300"
+      :ui="{ body: { base: 'p-0' } as any }">
+      <div
+        class="relative rounded-lg aspect-video w-full overflow-hidden bg-gradient-to-br from-primary-500 to-primary-700 dark:from-primary-600 dark:to-primary-900">
+        <img v-if="imageLoaded" :src="post.image" :alt="post.title" class="h-full w-full object-cover" loading="lazy"
+          @error="handleImageError" />
+        <div v-else class="flex h-full w-full items-center justify-center">
+          <div class="text-center text-white/90 p-6">
+            <UIcon name="i-heroicons-document-text" class="mx-auto h-12 w-12 mb-2 opacity-80" />
+            <p class="text-sm font-medium line-clamp-2">{{ post.title }}</p>
+          </div>
+        </div>
       </div>
 
-      <h2 class="mb-2 text-xl font-semibold text-gray-900 dark:text-gray-100">
-        {{ post.title }}
-      </h2>
+      <div class="p-6">
 
-      <p class="mb-4 line-clamp-2 text-gray-600 dark:text-gray-400">
-        {{ post.description }}
-      </p>
+        <h2 class="mb-2 text-xl font-semibold text-gray-900 dark:text-gray-100">
+          {{ post.title }}
+        </h2>
 
-      <div class="mb-4 flex flex-wrap items-center gap-2 text-sm text-gray-500 dark:text-gray-500">
-        <time :datetime="post.date">{{ formatDate(post.date) }}</time>
-        <span>•</span>
-        <span>{{ t('blog.readingTime', { minutes: calculateReadingTime(post) }) }}</span>
-      </div>
+        <p class="mb-4 line-clamp-2 text-gray-600 dark:text-gray-400">
+          {{ post.description }}
+        </p>
 
-      <div v-if="post.tags && post.tags.length > 0" class="flex flex-wrap gap-2">
-        <UBadge v-for="tag in post.tags" :key="tag" variant="subtle" size="sm">
-          {{ tag }}
-        </UBadge>
+        <div class="mb-4 flex flex-wrap items-center gap-2 text-sm text-gray-500 dark:text-gray-500">
+          <time :datetime="post.date">{{ formatDate(post.date) }}</time>
+          <span>•</span>
+          <span>{{ t('blog.readingTime', { minutes: calculateReadingTime(post) }) }}</span>
+        </div>
+
+        <div v-if="post.tags && post.tags.length > 0" class="flex flex-wrap gap-2">
+          <UBadge v-for="tag in post.tags" :key="tag" variant="subtle" size="sm">
+            {{ tag }}
+          </UBadge>
+        </div>
       </div>
     </UCard>
   </NuxtLink>
@@ -32,11 +43,23 @@
 <script setup lang="ts">
 import type { BlogPost } from '~/types/blog'
 
-defineProps<{
+const props = defineProps<{
   post: BlogPost
 }>()
 
-const { t } = useI18n()
+const { t, locale } = useI18n()
 const localePath = useLocalePath()
 const { formatDate, calculateReadingTime } = useBlog()
+
+// Image loading state
+const imageLoaded = ref(!!props.post.image)
+const handleImageError = () => {
+  imageLoaded.value = false
+}
+
+// Convert collection path to route path (remove locale prefix)
+const getRoutePath = (path: string) => {
+  // Remove locale prefix from path: /en/blog/... -> /blog/...
+  return path.replace(`/${locale.value}`, '')
+}
 </script>

app/components/blog/BlogNavigation.vue

@@ -6,16 +6,22 @@ const props = defineProps<{
   next: BlogPost | null
 }>()
 
-const { t } = useI18n()
+const { t, locale } = useI18n()
 const localePath = useLocalePath()
 const router = useRouter()
 
+// Convert collection path to route path (remove locale prefix)
+const getRoutePath = (path: string) => {
+  // Remove locale prefix from path: /en/blog/... -> /blog/...
+  return path.replace(`/${locale.value}`, '')
+}
+
 // Keyboard navigation
 const handleKeydown = (event: KeyboardEvent) => {
   if (event.key === 'ArrowLeft' && props.prev) {
-    router.push(localePath(props.prev._path))
+    router.push(localePath(getRoutePath((props.prev as any).path)))
   } else if (event.key === 'ArrowRight' && props.next) {
-    router.push(localePath(props.next._path))
+    router.push(localePath(getRoutePath((props.next as any).path)))
   }
 }
 
@@ -32,7 +38,7 @@ onUnmounted(() => {
   <nav class="flex justify-between items-center gap-4 mt-12 pt-8 border-t border-gray-200 dark:border-gray-800">
     <!-- Previous Post -->
     <div class="flex-1">
-      <NuxtLink v-if="prev" :to="localePath(prev._path)" class="group block">
+      <NuxtLink v-if="prev" :to="localePath(getRoutePath((prev as any).path))" class="group block">
         <UButton color="neutral" variant="ghost" size="lg" class="w-full justify-start">
           <template #leading>
             <UIcon name="i-heroicons-arrow-left" class="w-5 h-5" />
@@ -52,7 +58,7 @@ onUnmounted(() => {
 
     <!-- Next Post -->
     <div class="flex-1">
-      <NuxtLink v-if="next" :to="localePath(next._path)" class="group block">
+      <NuxtLink v-if="next" :to="localePath(getRoutePath((next as any).path))" class="group block">
         <UButton color="neutral" variant="ghost" size="lg" class="w-full justify-end">
           <div class="text-right">
             <div class="text-xs text-gray-500 dark:text-gray-400 mb-1">

app/components/blog/BlogPost.vue

@@ -7,14 +7,29 @@ const props = defineProps<{
 
 const { formatDate, calculateReadingTime } = useBlog()
 const readingTime = computed(() => calculateReadingTime(props.post))
+
+// Image loading state
+const imageLoaded = ref(!!props.post.image)
+const handleImageError = () => {
+  imageLoaded.value = false
+}
 </script>
 
 <template>
   <article>
     <header class="mb-8">
       <!-- Cover Image -->
-      <NuxtImg v-if="post.image" :src="post.image" :alt="post.title" width="1200" height="630" format="webp"
-        class="w-full rounded-lg mb-6" />
+      <div v-if="post.image"
+        class="relative w-full aspect-video rounded-lg overflow-hidden mb-6 bg-gradient-to-br from-primary-500 to-primary-700 dark:from-primary-600 dark:to-primary-900">
+        <img v-if="imageLoaded" :src="post.image" :alt="post.title" class="w-full h-full object-cover"
+          @error="handleImageError" />
+        <div v-else class="flex h-full w-full items-center justify-center">
+          <div class="text-center text-white/90 p-8">
+            <UIcon name="i-heroicons-photo" class="mx-auto h-16 w-16 mb-3 opacity-80" />
+            <p class="text-lg font-medium">{{ post.title }}</p>
+          </div>
+        </div>
+      </div>
 
       <!-- Title -->
       <h1 class="text-4xl md:text-5xl font-bold mb-4 text-gray-900 dark:text-gray-100">