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">

app/components/common/TopNav.vue

@@ -56,6 +56,22 @@
                   {{ t('sections.projects') }}
                 </button>
               </div>
+
+              <!-- Blog -->
+              <div class="flex items-center gap-1.5">
+                <UTooltip :text="t('sections.blog')">
+                  <NuxtLink :to="localePath('/blog')">
+                    <UButton class="cursor-pointer" :class="[isBlogActive ? activeClass : inactiveClass]" variant="soft"
+                      square icon="i-twemoji-memo" :aria-label="t('sections.blog')" />
+                  </NuxtLink>
+                </UTooltip>
+                <NuxtLink :to="localePath('/blog')">
+                  <button type="button" class="hidden lg:inline-flex text-sm font-medium transition-colors"
+                    :class="[isBlogActive ? labelActiveClass : labelInactiveClass]">
+                    {{ t('sections.blog') }}
+                  </button>
+                </NuxtLink>
+              </div>
             </div>
 
             <div class="flex items-center gap-2">
@@ -88,6 +104,7 @@ const sectionIds = ['hero', 'skills', 'work', 'projects'] as const
 type Target = typeof sectionIds[number]
 
 const isHome = computed(() => route.path === localePath('/'))
+const isBlogActive = computed(() => route.path.includes('/blog'))
 
 const { activeSection, scrollToSection } = useSectionObserver({
   ids: [...sectionIds] as SectionId[],

app/components/content/Alert.vue

@@ -0,0 +1,42 @@
+<template>
+  <div :class="alertClass" class="my-4 flex items-center gap-2 rounded-lg px-4 py-3">
+    <UIcon :name="icon" class="h-5 w-5 flex-shrink-0" />
+    <div class="flex-1 text-sm">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    type?: 'info' | 'warning' | 'success' | 'error'
+  }>(),
+  {
+    type: 'info'
+  }
+)
+
+const typeConfig = {
+  info: {
+    icon: 'i-heroicons-information-circle',
+    class: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-200'
+  },
+  warning: {
+    icon: 'i-heroicons-exclamation-triangle',
+    class: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-200'
+  },
+  success: {
+    icon: 'i-heroicons-check-circle',
+    class: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-200'
+  },
+  error: {
+    icon: 'i-heroicons-x-circle',
+    class: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-200'
+  }
+}
+
+const config = computed(() => typeConfig[props.type])
+const icon = computed(() => config.value.icon)
+const alertClass = computed(() => config.value.class)
+</script>

app/components/content/BlogCallout.vue

@@ -0,0 +1,63 @@
+<template>
+  <UCard :ui="{
+    base: 'my-6',
+    body: { padding: 'p-4 sm:p-5' },
+    ring: 'ring-2',
+    divide: ''
+  }" :class="cardClass">
+    <div class="flex items-start gap-3">
+      <UIcon :name="icon" :class="iconClass" class="mt-0.5 h-5 w-5 flex-shrink-0" />
+      <div class="flex-1">
+        <h4 v-if="title" class="mb-2 font-semibold" :class="titleClass">{{ title }}</h4>
+        <div class="prose-sm dark:prose-invert">
+          <slot />
+        </div>
+      </div>
+    </div>
+  </UCard>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    type?: 'info' | 'warning' | 'success' | 'error'
+    title?: string
+  }>(),
+  {
+    type: 'info'
+  }
+)
+
+const typeConfig = {
+  info: {
+    icon: 'i-heroicons-information-circle',
+    cardClass: 'ring-blue-500/20 bg-blue-50 dark:bg-blue-950/20',
+    iconClass: 'text-blue-600 dark:text-blue-400',
+    titleClass: 'text-blue-900 dark:text-blue-100'
+  },
+  warning: {
+    icon: 'i-heroicons-exclamation-triangle',
+    cardClass: 'ring-yellow-500/20 bg-yellow-50 dark:bg-yellow-950/20',
+    iconClass: 'text-yellow-600 dark:text-yellow-400',
+    titleClass: 'text-yellow-900 dark:text-yellow-100'
+  },
+  success: {
+    icon: 'i-heroicons-check-circle',
+    cardClass: 'ring-green-500/20 bg-green-50 dark:bg-green-950/20',
+    iconClass: 'text-green-600 dark:text-green-400',
+    titleClass: 'text-green-900 dark:text-green-100'
+  },
+  error: {
+    icon: 'i-heroicons-x-circle',
+    cardClass: 'ring-red-500/20 bg-red-50 dark:bg-red-950/20',
+    iconClass: 'text-red-600 dark:text-red-400',
+    titleClass: 'text-red-900 dark:text-red-100'
+  }
+}
+
+const config = computed(() => typeConfig[props.type])
+const icon = computed(() => config.value.icon)
+const cardClass = computed(() => config.value.cardClass)
+const iconClass = computed(() => config.value.iconClass)
+const titleClass = computed(() => config.value.titleClass)
+</script>

app/components/content/ProseCode.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+const props = defineProps<{
+  code?: string
+  language?: string
+  filename?: string
+  highlights?: number[]
+  class?: string
+}>()
+
+const { t } = useI18n()
+const copied = ref(false)
+const isHovered = ref(false)
+
+// Copy code to clipboard
+const copyCode = async () => {
+  if (props.code) {
+    try {
+      await navigator.clipboard.writeText(props.code)
+      copied.value = true
+      setTimeout(() => {
+        copied.value = false
+      }, 2000)
+    } catch (err) {
+      console.error('Failed to copy code:', err)
+    }
+  }
+}
+
+// Get language label
+const languageLabel = computed(() => {
+  if (!props.language) return null
+
+  const languageMap: Record<string, string> = {
+    js: 'JavaScript',
+    ts: 'TypeScript',
+    vue: 'Vue',
+    html: 'HTML',
+    css: 'CSS',
+    scss: 'SCSS',
+    bash: 'Bash',
+    sh: 'Shell',
+    json: 'JSON',
+    md: 'Markdown',
+    yaml: 'YAML',
+    python: 'Python',
+    py: 'Python'
+  }
+
+  return languageMap[props.language] || props.language.toUpperCase()
+})
+</script>
+
+<template>
+  <div style="position: relative; margin: 1.5rem 0;" @mouseenter="isHovered = true" @mouseleave="isHovered = false">
+    <!-- Header with filename and language -->
+    <div v-if="filename || language"
+      style="display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 1rem; background-color: #1f2937; border-bottom: 1px solid #374151; border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem;">
+      <div style="display: flex; align-items: center; gap: 0.75rem;">
+        <span v-if="filename" style="font-size: 0.875rem; color: #d1d5db; font-family: monospace;">
+          {{ filename }}
+        </span>
+        <span v-if="language && !filename"
+          style="font-size: 0.75rem; color: #9ca3af; text-transform: uppercase; font-weight: 600;">
+          {{ languageLabel }}
+        </span>
+      </div>
+    </div>
+
+    <!-- Code block -->
+    <div style="position: relative;">
+      <pre :class="props.class" style="overflow-x: auto; padding: 1rem; font-size: 0.875rem; margin: 0;"><slot /></pre>
+
+      <!-- Copy button -->
+      <button type="button" :aria-label="copied ? t('blog.codeCopied') : t('blog.copyCode')" :style="{
+        position: 'absolute',
+        top: '0.75rem',
+        right: '0.75rem',
+        padding: '0.5rem',
+        borderRadius: '0.375rem',
+        backgroundColor: 'rgba(55, 65, 81, 0.5)',
+        border: 'none',
+        cursor: 'pointer',
+        transition: 'all 0.2s',
+        opacity: isHovered || copied ? '1' : '0'
+      }" @click="copyCode">
+        <UIcon :name="copied ? 'i-heroicons-check' : 'i-heroicons-clipboard-document'"
+          style="width: 1rem; height: 1rem; color: rgb(209, 213, 219);" />
+      </button>
+    </div>
+  </div>
+</template>