add blog to project

app/pages/blog/index.vue

@@ -8,15 +8,73 @@
         </div>
       </div>
 
-      <div class="rounded-xl border border-dashed border-gray-300 p-8 text-center text-gray-500 dark:border-gray-700 dark:text-gray-300">
-        Nuxt Content is temporarily disabled. Blog will be back soon.
+      <BlogSearch v-model="searchQuery" />
+
+      <BlogTagFilter v-model="selectedTag" :tags="allTags" class="my-6" />
+
+      <div v-if="filteredPosts.length > 0" class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+        <BlogCard v-for="post in filteredPosts" :key="(post as any)._path" :post="post" />
       </div>
+
+      <BlogEmpty v-else />
     </UContainer>
   </section>
 </template>
 
 <script setup lang="ts">
-const { locale, t } = useI18n()
+import type { BlogPost } from '~/types/blog'
 
-// Blog listing requires @nuxt/content which is disabled for now
+const { t, locale } = useI18n()
+const { extractUniqueTags, filterPostsBySearch, filterPostsByTag } = useBlog()
+
+// Fetch posts using queryCollection (Nuxt Content v3 API)
+const { data: posts } = await useAsyncData<any[]>(
+  `blog-posts-${locale.value}`,
+  async () => {
+    try {
+      // Use queryCollection for Nuxt Content v3
+      const result = await queryCollection('blog').all()
+
+      if (!result || result.length === 0) {
+        return []
+      }
+
+      // Filter by locale and draft status, then sort by date
+      return result
+        .filter((post: any) =>
+          post.path?.startsWith(`/${locale.value}/blog/`) && post.draft !== true
+        )
+        .sort((a: any, b: any) => new Date(b.date).getTime() - new Date(a.date).getTime())
+    } catch (error) {
+      console.error('Error fetching blog posts:', error)
+      return []
+    }
+  },
+  {
+    default: () => [],
+    watch: [locale],
+    server: true,
+    lazy: false
+  }
+)
+
+// Extract unique tags from all posts
+const allTags = computed(() => {
+  return posts.value && Array.isArray(posts.value) ? extractUniqueTags(posts.value) : []
+})
+
+// Reactive refs for search and filter
+const searchQuery = ref('')
+const selectedTag = ref<string | null>(null)
+
+// Filtered posts based on search and tag
+const filteredPosts = computed<BlogPost[]>(() => {
+  if (!posts.value || !Array.isArray(posts.value) || posts.value.length === 0) return []
+
+  let filtered: BlogPost[] = [...posts.value]
+  filtered = filterPostsBySearch(filtered, searchQuery.value)
+  filtered = filterPostsByTag(filtered, selectedTag.value)
+
+  return filtered
+})
 </script>