Update nuxt to version 4 (#92)

* Nuxt 3.17.4 and other dependencies updated * Temporary fix (maybe) of the Inline Code * Update nuxt to version 4
2025-09-22 09:53:50 -03:00
parent 6a2ed6dee5
commit 5163e756f0
53 changed files with 4278 additions and 4597 deletions
--- a/app/pages/blogs/index.vue
+++ b/app/pages/blogs/index.vue
@@ -0,0 +1,137 @@
+<script lang="ts" setup>
+import Fuse from 'fuse.js'
+import type { BlogPost } from '~/types/blog'
+
+const { data } = await useAsyncData('all-blog-post', () => queryCollection('content').all())
+
+const elementPerPage = ref(5)
+const pageNumber = ref(1)
+const searchTest = ref('')
+
+const formattedData = computed(() => {
+  return (
+    data.value?.map((articles) => {
+      const meta = articles.meta as unknown as BlogPost
+      return {
+        path: articles.path,
+        title: articles.title || 'no-title available',
+        description: articles.description || 'no-description available',
+        image: meta.image || '/not-found.jpg',
+        alt: meta.alt || 'no alter data available',
+        ogImage: meta.ogImage || '/not-found.jpg',
+        date: meta.date || 'not-date-available',
+        tags: meta.tags || [],
+        published: meta.published || false,
+      }
+    }) || []
+  )
+})
+
+const fuse = computed(() => {
+  return new Fuse(formattedData.value, {
+    keys: ['title', 'description'],
+    threshold: 0.4,
+    includeScore: false,
+  })
+})
+
+const searchData = computed(() => {
+  if (!searchTest.value.trim()) {
+    return formattedData.value
+  }
+
+  const results = fuse.value.search(searchTest.value)
+  return results.map((result) => result.item)
+})
+
+const paginatedData = computed(() => {
+  const startInd = (pageNumber.value - 1) * elementPerPage.value
+  const endInd = pageNumber.value * elementPerPage.value
+
+  return searchData.value.slice(startInd, endInd)
+})
+
+function onPreviousPageClick() {
+  if (pageNumber.value > 1) pageNumber.value -= 1
+}
+
+const totalPage = computed(() => {
+  const ttlContent = searchData.value.length || 0
+  return Math.ceil(ttlContent / elementPerPage.value)
+})
+
+function onNextPageClick() {
+  if (pageNumber.value < totalPage.value) pageNumber.value += 1
+}
+
+useHead({
+  title: 'Archive',
+  meta: [
+    {
+      name: 'description',
+      content: 'Here you will find all the blog posts I have written & published on this site.',
+    },
+  ],
+})
+
+// Generate OG Image
+const siteData = useSiteConfig()
+defineOgImage({
+  props: {
+    title: 'Archive',
+    description: 'Here you will find all the blog posts I have written & published on this site.',
+    siteName: siteData.url,
+  },
+})
+</script>
+
+<template>
+  <main class="container max-w-5xl mx-auto text-zinc-600">
+    <ArchiveHero />
+
+    <div class="px-6">
+      <input
+        v-model="searchTest"
+        placeholder="Search"
+        type="text"
+        class="block w-full bg-[#F1F2F4] dark:bg-slate-900 dark:placeholder-zinc-500 text-zinc-300 rounded-md border-gray-300 dark:border-gray-800 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
+      />
+    </div>
+
+    <div v-auto-animate class="space-y-5 my-5 px-4">
+      <template v-for="post in paginatedData" :key="post.title">
+        <ArchiveCard
+          :path="post.path"
+          :title="post.title"
+          :date="post.date"
+          :description="post.description"
+          :image="post.image"
+          :alt="post.alt"
+          :og-image="post.ogImage"
+          :tags="post.tags"
+          :published="post.published"
+        />
+      </template>
+
+      <ArchiveCard v-if="paginatedData.length <= 0" title="No Post Found" image="/not-found.jpg" />
+    </div>
+
+    <div class="flex justify-center items-center space-x-6">
+      <button :disabled="pageNumber <= 1" @click="onPreviousPageClick">
+        <Icon
+          name="mdi:code-less-than"
+          size="30"
+          :class="{ 'text-sky-700 dark:text-sky-400': pageNumber > 1 }"
+        />
+      </button>
+      <p>{{ pageNumber }} / {{ totalPage }}</p>
+      <button :disabled="pageNumber >= totalPage" @click="onNextPageClick">
+        <Icon
+          name="mdi:code-greater-than"
+          size="30"
+          :class="{ 'text-sky-700 dark:text-sky-400': pageNumber < totalPage }"
+        />
+      </button>
+    </div>
+  </main>
+</template>