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/blog/Header.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+interface Props {
+  title: string
+  image: string
+  alt: string
+  description: string
+  date: string
+  tags: Array<string>
+}
+
+withDefaults(defineProps<Props>(), {
+  title: 'no-title',
+  image: '#',
+  alt: 'no-img',
+  description: 'no description',
+  date: 'no-date',
+  tags: () => [],
+})
+</script>
+
+<template>
+  <header>
+    <h1 class="text-xl dark:text-zinc-300 md:text-3xl lg:text-4xl m-7 font-bold text-center">
+      {{ title || '' }}
+    </h1>
+    <NuxtImg
+      :src="image || ''"
+      :alt="alt || ''"
+      width="600"
+      class="m-auto rounded-2xl shadow-lg h-32 md:h-72 w-4/6 md:w-4/5 content-center object-cover"
+    />
+    <p
+      class="text-xs sm:text-sm my-3 max-w-xl mx-auto text-center text-zinc-600 dark:text-zinc-400"
+    >
+      {{ description }}
+    </p>
+    <div class="flex w-full justify-center text-xs md:text-base my-8">
+      <div class="md:flex text-black dark:text-zinc-300 content-center gap-8 text-xs sm:text-sm">
+        <div class="flex items-center font-semibold">
+          <LogoDate />
+          <p>{{ date || '' }}</p>
+        </div>
+        <div class="flex items-center gap-2 flex-wrap my-5">
+          <LogoTag />
+          <template v-for="tag in tags" :key="tag">
+            <NuxtLink :to="`/categories/${tag.toLocaleLowerCase()}`">
+              <span
+                class="bg-gray-200 dark:bg-slate-900 rounded-md px-2 py-1 font-semibold hover:bg-gray-300 dark:hover:bg-slate-800 transition-colors duration-200"
+                >{{ tag }}</span
+              >
+            </NuxtLink>
+          </template>
+        </div>
+      </div>
+    </div>
+  </header>
+</template>

app/components/blog/Toc.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+const { path } = useRoute()
+const articles = await queryCollection('content').path(path).first()
+
+const links = articles?.body?.toc?.links || []
+</script>
+
+<template>
+  <div class="lg:col-span-3 sticky top-28 h-96 hidden lg:block justify-self-end">
+    <div class="border dark:border-gray-800 p-3 rounded-md min-w-[200px] dark:bg-slate-900">
+      <h1 class="text-sm font-bold mb-3 border-b dark:border-gray-800 pb-2">Table Of Content</h1>
+      <NuxtLink
+        v-for="link in links"
+        :key="link.id"
+        :to="`#${link.id}`"
+        class="block text-xs mb-3 hover:underline"
+      >
+        {{ link.text }}
+      </NuxtLink>
+    </div>
+  </div>
+</template>

app/components/blog/card.vue

@@ -0,0 +1,68 @@
+<script lang="ts" setup>
+interface Props {
+  path: string
+  title: string
+  date: string
+  description: string
+  image: string
+  alt: string
+  ogImage: string
+  tags: Array<string>
+  published: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  path: '/',
+  title: 'no-title',
+  date: 'no-date',
+  description: 'no-description',
+  image: '/blogs-img/blog.jpg',
+  alt: 'no-alt',
+  ogImage: '/blogs-img/blog.jpg',
+  tags: () => [],
+  published: false,
+})
+</script>
+
+<template>
+  <article
+    class="group border dark:border-gray-800 m-2 overflow-hidden rounded-2xl shadow-sm text-zinc-700 dark:text-zinc-300"
+  >
+    <NuxtLink :to="path">
+      <NuxtImg
+        class="lg:h-48 md:h-36 w-full object-cover object-center rounded-t-2xl shadow-lg group-hover:scale-[1.02] transition-all duration-500"
+        width="300"
+        :src="image"
+        :alt="alt"
+      />
+      <div class="px-3 pb-4">
+        <div class="text-black dark:text-zinc-300 pt-3 pb-2">
+          <div class="flex items-center">
+            <LogoDate class="-translate-y-[10%]" />
+            {{ date }}
+          </div>
+          <div class="flex items-center gap-1 flex-wrap">
+            <LogoTag />
+            <template v-for="tag in tags" :key="tag">
+              <span class="bg-gray-200 dark:bg-slate-900 rounded-md px-2 py-1 font-semibold">{{
+                tag
+              }}</span>
+            </template>
+          </div>
+        </div>
+        <h2
+          class="text-xl font-semibold text-black dark:text-zinc-300 pb-1 group-hover:text-sky-700 dark:group-hover:text-sky-400"
+        >
+          {{ title }}
+        </h2>
+        <p class="text-ellipsis line-clamp-2 text-base">
+          {{ description }}
+        </p>
+        <div class="flex group-hover:underline text-sky-700 dark:text-sky-400 items-center py-2">
+          <p>Read More</p>
+          <LogoArrow />
+        </div>
+      </div>
+    </NuxtLink>
+  </article>
+</template>

app/components/blog/empty.vue

@@ -0,0 +1,25 @@
+<template>
+  <article
+    class="group border dark:border-gray-800 m-2 rounded-2xl overflow-hidden shadow-lg text-zinc-700"
+  >
+    <NuxtLink to="/">
+      <div
+        class="lg:h-48 md:h-36 w-full object-cover object-center group-hover:scale-[1.05] transition-all duration-500"
+      >
+        <LogoConfused />
+      </div>
+      <div class="p-5">
+        <h2
+          class="text-3xl font-semibold text-black dark:text-zinc-300 pb-1 group-hover:text-sky-700 dark:group-hover:text-sky-400"
+        >
+          No Post Available
+        </h2>
+
+        <div class="flex group-hover:underline text-sky-700 dark:text-sky-400 items-center pt-2">
+          <p>Back To Home</p>
+          <LogoArrow />
+        </div>
+      </div>
+    </NuxtLink>
+  </article>
+</template>