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

app/components/main/footer.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+const route = useRoute()
+
+const path = computed(() => route.fullPath.replace('/', ''))
+</script>
+
+<template>
+  <div class="py-5 border-t dark:border-gray-800 mt-5 text-zinc-700 dark:text-zinc-300">
+    <div class="px-6 container max-w-5xl mx-auto">
+      <div class="grid grid-cols-1 md:grid-cols-3">
+        <FooterSite v-if="path === 'about'" />
+        <FooterDeveloper v-else />
+        <FooterLink />
+        <FooterConnect />
+      </div>
+
+      <div class="border-t dark:border-gray-800 mt-5 text-center p-2">
+        © 2020-2024 No Right is reserved. Who cares 🤷‍♂️? It's
+        <a href="https://github.com/nurriyad/blog" target="_blank" rel="nofollow" class="underline"
+          >open source</a
+        >
+        anyway.
+
+        <a href="/rss.xml" aria-label="Website RSS Feed">
+          <span class="px-3"><Icon name="bi:rss-fill" class="-translate-y-[-20%]" /></span
+        ></a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+/* we will explain what these classes do next! */
+.v-enter-active,
+.v-leave-active {
+  transition: all 0.4s;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+  filter: blur(1rem);
+}
+</style>

app/components/main/header.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { navbarData } from '../../data'
+
+const colorMode = useColorMode()
+function onClick(val: string) {
+  colorMode.preference = val
+}
+
+const route = useRoute()
+function isActive(path: string) {
+  return route.path.startsWith(path)
+}
+</script>
+
+<template>
+  <div class="py-5 border-b dark:border-gray-800 font-semibold">
+    <div class="flex px-6 container max-w-5xl justify-between mx-auto items-baseline">
+      <ul class="flex items-baseline space-x-5">
+        <li class="text-base sm:text-2xl font-bold">
+          <NuxtLink to="/" :class="{ underline: $route.path === '/' }">
+            {{ navbarData.homeTitle }}
+          </NuxtLink>
+        </li>
+      </ul>
+      <ul class="flex items-center space-x-3 sm:space-x-6 text-sm sm:text-lg">
+        <li>
+          <NuxtLink to="/blogs" :class="{ underline: isActive('/blogs') }"> Blogs </NuxtLink>
+        </li>
+        <li>
+          <NuxtLink to="/categories" :class="{ underline: isActive('/categories') }">
+            Categories
+          </NuxtLink>
+        </li>
+        <li title="About Me">
+          <NuxtLink
+            to="/about"
+            aria-label="About me"
+            :class="{ underline: $route.path === '/about' }"
+          >
+            About
+          </NuxtLink>
+        </li>
+        <li>
+          <ClientOnly>
+            <button
+              v-if="colorMode.value === 'light'"
+              name="light-mode"
+              title="Light"
+              class="hover:scale-110 transition-all ease-out hover:cursor-pointer"
+              @click="onClick('dark')"
+            >
+              <Icon name="icon-park:moon" size="20" class="-translate-y-[-20%]" />
+            </button>
+            <button
+              v-if="colorMode.value === 'dark'"
+              name="dark-mode"
+              title="Dark"
+              class="hover:scale-110 transition-all ease-out hover:cursor-pointer"
+              @click="onClick('light')"
+            >
+              <Icon name="noto:sun" size="20" class="-translate-y-[-20%]" />
+            </button>
+            <template #fallback>
+              <!-- this will be rendered on server side -->
+              <Icon name="svg-spinners:180-ring" size="20" class="-translate-y-[-20%]" />
+            </template>
+          </ClientOnly>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>

app/components/main/hero.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { homePage } from '~/data'
+</script>
+
+<template>
+  <div class="container mx-auto">
+    <div class="grid grid-cols-1 sm:grid-cols-2 items-center">
+      <div class="px-6">
+        <h1
+          class="text-black dark:text-zinc-300 font-semibold leading-tight text-4xl md:text-5xl my-5"
+        >
+          {{ homePage.title }}
+        </h1>
+        <p class="dark:text-zinc-300">
+          {{ homePage.description }}
+        </p>
+      </div>
+      <div class="px-6 justify-self-center">
+        <LogoDog />
+      </div>
+    </div>
+  </div>
+</template>

app/components/main/recent.vue

@@ -0,0 +1,82 @@
+<script lang="ts" setup>
+import type { BlogPost } from '~/types/blog'
+
+// Function to parse dates in the format "1st Mar 2023"
+function parseCustomDate(dateStr: string): Date {
+  // Remove ordinal indicators (st, nd, rd, th)
+  const cleanDateStr = dateStr.replace(/(\d+)(st|nd|rd|th)/, '$1')
+  // Parse the date
+  return new Date(cleanDateStr)
+}
+
+// Get Last 6 Publish Post from the content/blog directory
+const { data } = await useAsyncData('recent-post', () =>
+  queryCollection('content')
+    .all()
+    .then((data) => {
+      return data
+        .sort((a, b) => {
+          const aDate = parseCustomDate(a.meta.date as string)
+          const bDate = parseCustomDate(b.meta.date as string)
+          return bDate.getTime() - aDate.getTime()
+        })
+        .slice(0, 3)
+    }),
+)
+
+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,
+    }
+  })
+})
+
+useHead({
+  title: 'Home',
+  meta: [
+    {
+      name: 'description',
+      content:
+        'Welcome To My Blog Site. Get Web Development, Javascript, Typescript, NodeJs, Vue, and Nuxt, Related Articles, Tips, Learning resources and more.',
+    },
+  ],
+})
+</script>
+
+<template>
+  <div class="pb-10 px-4">
+    <div class="flex flex-row items-center space-x-3 pt-5 pb-3">
+      <Icon name="mdi:star-three-points-outline" size="2em" class="text-black dark:text-zinc-300" />
+      <h2 class="text-4xl font-semibold text-black dark:text-zinc-300">Recent Post</h2>
+    </div>
+
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+      <template v-for="post in formattedData" :key="post.title">
+        <BlogCard
+          :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>
+      <template v-if="data?.length === 0">
+        <BlogEmpty />
+      </template>
+    </div>
+  </div>
+</template>

app/components/main/trending.vue

@@ -0,0 +1,62 @@
+<script lang="ts" setup>
+import type { BlogPost } from '~/types/blog'
+
+const { data } = await useAsyncData('trending-post', () =>
+  queryCollection('content').limit(3).all(),
+)
+
+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,
+    }
+  })
+})
+
+useHead({
+  title: 'Home',
+  meta: [
+    {
+      name: 'description',
+      content:
+        'Welcome To My Blog Site. Get Web Development, Javascript, Typescript, NodeJs, Vue, and Nuxt, Related Articles, Tips, Learning resources and more.',
+    },
+  ],
+})
+</script>
+
+<template>
+  <div class="px-4">
+    <div class="flex flex-row items-center space-x-3 pt-5 pb-3">
+      <Icon name="mdi:star-three-points-outline" size="2em" class="text-black dark:text-zinc-300" />
+      <h2 class="text-4xl font-semibold text-black dark:text-zinc-300">Trending Post</h2>
+    </div>
+    <div class="grid grid-cols-1">
+      <template v-for="post in formattedData" :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>
+      <template v-if="data?.length === 0">
+        <BlogEmpty />
+      </template>
+    </div>
+  </div>
+</template>