add blog to project

app/components/blog/BlogCard.vue

@@ -0,0 +1,42 @@
+<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" />
+      </div>
+
+      <h2 class="mb-2 text-xl font-semibold text-gray-900 dark:text-gray-100">
+        {{ post.title }}
+      </h2>
+
+      <p class="mb-4 line-clamp-2 text-gray-600 dark:text-gray-400">
+        {{ post.description }}
+      </p>
+
+      <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>
+    </UCard>
+  </NuxtLink>
+</template>
+
+<script setup lang="ts">
+import type { BlogPost } from '~/types/blog'
+
+defineProps<{
+  post: BlogPost
+}>()
+
+const { t } = useI18n()
+const localePath = useLocalePath()
+const { formatDate, calculateReadingTime } = useBlog()
+</script>

app/components/blog/BlogEmpty.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="flex min-h-[400px] items-center justify-center">
+    <div class="text-center">
+      <div class="mb-4 text-6xl">📝</div>
+      <h3 class="mb-2 text-xl font-semibold text-gray-900 dark:text-gray-100">
+        {{ t('blog.noResults') }}
+      </h3>
+      <p class="text-gray-600 dark:text-gray-400">
+        {{ t('blog.empty') }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { t } = useI18n()
+</script>

app/components/blog/BlogNavigation.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import type { BlogPost } from '~/types/blog'
+
+const props = defineProps<{
+  prev: BlogPost | null
+  next: BlogPost | null
+}>()
+
+const { t } = useI18n()
+const localePath = useLocalePath()
+const router = useRouter()
+
+// Keyboard navigation
+const handleKeydown = (event: KeyboardEvent) => {
+  if (event.key === 'ArrowLeft' && props.prev) {
+    router.push(localePath(props.prev._path))
+  } else if (event.key === 'ArrowRight' && props.next) {
+    router.push(localePath(props.next._path))
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('keydown', handleKeydown)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', handleKeydown)
+})
+</script>
+
+<template>
+  <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">
+        <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" />
+          </template>
+          <div class="text-left">
+            <div class="text-xs text-gray-500 dark:text-gray-400 mb-1">
+              {{ t('blog.previousPost') }}
+            </div>
+            <div
+              class="text-sm font-medium text-gray-900 dark:text-gray-100 group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors line-clamp-1">
+              {{ prev.title }}
+            </div>
+          </div>
+        </UButton>
+      </NuxtLink>
+    </div>
+
+    <!-- Next Post -->
+    <div class="flex-1">
+      <NuxtLink v-if="next" :to="localePath(next._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">
+              {{ t('blog.nextPost') }}
+            </div>
+            <div
+              class="text-sm font-medium text-gray-900 dark:text-gray-100 group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors line-clamp-1">
+              {{ next.title }}
+            </div>
+          </div>
+          <template #trailing>
+            <UIcon name="i-heroicons-arrow-right" class="w-5 h-5" />
+          </template>
+        </UButton>
+      </NuxtLink>
+    </div>
+  </nav>
+</template>

app/components/blog/BlogPost.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { BlogPost } from '~/types/blog'
+
+const props = defineProps<{
+  post: BlogPost
+}>()
+
+const { formatDate, calculateReadingTime } = useBlog()
+const readingTime = computed(() => calculateReadingTime(props.post))
+</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" />
+
+      <!-- Title -->
+      <h1 class="text-4xl md:text-5xl font-bold mb-4 text-gray-900 dark:text-gray-100">
+        {{ post.title }}
+      </h1>
+
+      <!-- Metadata -->
+      <div class="flex flex-wrap items-center gap-4 text-gray-600 dark:text-gray-400 mb-4">
+        <!-- Date -->
+        <time :datetime="post.date" class="flex items-center gap-2">
+          <UIcon name="i-heroicons-calendar" class="w-5 h-5" />
+          {{ formatDate(post.date) }}
+        </time>
+
+        <!-- Reading Time -->
+        <span class="flex items-center gap-2">
+          <UIcon name="i-heroicons-clock" class="w-5 h-5" />
+          {{ $t('blog.readingTime', { minutes: readingTime }) }}
+        </span>
+
+        <!-- Author -->
+        <span v-if="post.author" class="flex items-center gap-2">
+          <UIcon name="i-heroicons-user" class="w-5 h-5" />
+          {{ post.author }}
+        </span>
+      </div>
+
+      <!-- Tags -->
+      <div v-if="post.tags && post.tags.length > 0" class="flex flex-wrap gap-2">
+        <UBadge v-for="tag in post.tags" :key="tag" color="primary" variant="soft" size="md">
+          {{ tag }}
+        </UBadge>
+      </div>
+    </header>
+  </article>
+</template>

app/components/blog/BlogSearch.vue

@@ -0,0 +1,35 @@
+<template>
+  <UInput :model-value="modelValue" :placeholder="t('blog.searchPlaceholder')" icon="i-heroicons-magnifying-glass"
+    size="lg" :ui="{ icon: { trailing: { pointer: '' } } }" @update:model-value="handleInput">
+    <template v-if="modelValue" #trailing>
+      <UButton color="gray" variant="link" icon="i-heroicons-x-mark-20-solid" :padded="false" @click="clearSearch" />
+    </template>
+  </UInput>
+</template>
+
+<script setup lang="ts">
+import { useDebounceFn } from '@vueuse/core'
+
+const props = defineProps<{
+  modelValue: string
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+const { t } = useI18n()
+
+// Debounced input handler
+const debouncedEmit = useDebounceFn((value: string) => {
+  emit('update:modelValue', value)
+}, 300)
+
+const handleInput = (value: string) => {
+  debouncedEmit(value)
+}
+
+const clearSearch = () => {
+  emit('update:modelValue', '')
+}
+</script>

app/components/blog/BlogTableOfContents.vue

@@ -0,0 +1,151 @@
+<script setup lang="ts">
+interface TocLink {
+  id: string
+  text: string
+  depth: number
+  children?: TocLink[]
+}
+
+const props = defineProps<{
+  toc: {
+    links: TocLink[]
+  }
+}>()
+
+const { t } = useI18n()
+const activeId = ref<string>('')
+
+// Check if TOC should be displayed (3+ headings)
+const shouldShowToc = computed(() => {
+  const countLinks = (links: TocLink[]): number => {
+    return links.reduce((count, link) => {
+      return count + 1 + (link.children ? countLinks(link.children) : 0)
+    }, 0)
+  }
+  return countLinks(props.toc.links) >= 3
+})
+
+// Smooth scroll to heading
+const scrollToHeading = (id: string) => {
+  const element = document.getElementById(id)
+  if (element) {
+    element.scrollIntoView({ behavior: 'smooth', block: 'start' })
+    activeId.value = id
+  }
+}
+
+// Track active section with IntersectionObserver
+onMounted(() => {
+  const observer = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          activeId.value = entry.target.id
+        }
+      })
+    },
+    {
+      rootMargin: '-80px 0px -80% 0px',
+      threshold: 0
+    }
+  )
+
+  // Observe all headings
+  const headings = document.querySelectorAll('article h2, article h3, article h4')
+  headings.forEach((heading) => observer.observe(heading))
+
+  // Cleanup
+  onUnmounted(() => {
+    headings.forEach((heading) => observer.unobserve(heading))
+  })
+})
+
+// Render TOC links recursively
+const renderTocLinks = (links: TocLink[]) => {
+  return links
+}
+</script>
+
+<template>
+  <aside v-if="shouldShowToc" class="toc-container">
+    <!-- Desktop: Sticky sidebar -->
+    <nav class="hidden lg:block sticky top-24 max-h-[calc(100vh-8rem)] overflow-y-auto">
+      <h3 class="text-lg font-semibold mb-4 text-gray-900 dark:text-gray-100">
+        {{ t('blog.tableOfContents') }}
+      </h3>
+      <ul class="space-y-2 text-sm">
+        <template v-for="link in toc.links" :key="link.id">
+          <li>
+            <a :href="`#${link.id}`" :class="[
+              'block py-1 transition-colors',
+              activeId === link.id
+                ? 'text-primary-600 dark:text-primary-400 font-medium'
+                : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
+            ]" @click.prevent="scrollToHeading(link.id)">
+              {{ link.text }}
+            </a>
+            <!-- Nested children (h3) -->
+            <ul v-if="link.children && link.children.length > 0" class="ml-4 mt-1 space-y-1">
+              <li v-for="child in link.children" :key="child.id">
+                <a :href="`#${child.id}`" :class="[
+                  'block py-1 transition-colors',
+                  activeId === child.id
+                    ? 'text-primary-600 dark:text-primary-400 font-medium'
+                    : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
+                ]" @click.prevent="scrollToHeading(child.id)">
+                  {{ child.text }}
+                </a>
+              </li>
+            </ul>
+          </li>
+        </template>
+      </ul>
+    </nav>
+
+    <!-- Mobile: Collapsible accordion -->
+    <UAccordion class="lg:hidden mb-6" :items="[
+      {
+        label: t('blog.tableOfContents'),
+        icon: 'i-heroicons-list-bullet',
+        defaultOpen: false,
+        slot: 'toc'
+      }
+    ]">
+      <template #toc>
+        <ul class="space-y-2 text-sm p-4">
+          <template v-for="link in toc.links" :key="link.id">
+            <li>
+              <a :href="`#${link.id}`" :class="[
+                'block py-1 transition-colors',
+                activeId === link.id
+                  ? 'text-primary-600 dark:text-primary-400 font-medium'
+                  : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
+              ]" @click.prevent="scrollToHeading(link.id)">
+                {{ link.text }}
+              </a>
+              <!-- Nested children (h3) -->
+              <ul v-if="link.children && link.children.length > 0" class="ml-4 mt-1 space-y-1">
+                <li v-for="child in link.children" :key="child.id">
+                  <a :href="`#${child.id}`" :class="[
+                    'block py-1 transition-colors',
+                    activeId === child.id
+                      ? 'text-primary-600 dark:text-primary-400 font-medium'
+                      : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
+                  ]" @click.prevent="scrollToHeading(child.id)">
+                    {{ child.text }}
+                  </a>
+                </li>
+              </ul>
+            </li>
+          </template>
+        </ul>
+      </template>
+    </UAccordion>
+  </aside>
+</template>
+
+<style scoped>
+.toc-container {
+  @apply w-full;
+}
+</style>

app/components/blog/BlogTagFilter.vue

@@ -0,0 +1,48 @@
+<template>
+  <div v-if="tags.length > 0" class="overflow-x-auto">
+    <div class="flex flex-wrap gap-2">
+      <UButton :color="!modelValue ? 'primary' : 'gray'" :variant="!modelValue ? 'solid' : 'soft'" size="sm"
+        @click="selectTag(null)">
+        {{ t('blog.allPosts') }}
+      </UButton>
+
+      <UButton v-for="tag in tags" :key="tag" :color="modelValue === tag ? 'primary' : 'gray'"
+        :variant="modelValue === tag ? 'solid' : 'soft'" size="sm" @click="selectTag(tag)">
+        {{ tag }}
+      </UButton>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  tags: string[]
+  modelValue: string | null
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | null]
+}>()
+
+const { t } = useI18n()
+const route = useRoute()
+const router = useRouter()
+
+// Read query parameter on mount to restore filter state
+onMounted(() => {
+  const tagFromQuery = route.query.tag as string | undefined
+  if (tagFromQuery && props.tags.includes(tagFromQuery)) {
+    emit('update:modelValue', tagFromQuery)
+  }
+})
+
+// Select tag and update URL query parameter
+const selectTag = async (tag: string | null) => {
+  emit('update:modelValue', tag)
+
+  // Update URL query parameter
+  await navigateTo({
+    query: tag ? { tag } : {}
+  })
+}
+</script>