Add table of content for blog page and fixed minor issue

Signed-off-by: Al Asad Nur Riyad <alasadnurriyad@Als-MacBook-Pro.local>

components/blog/Header.vue

@@ -0,0 +1,49 @@
+<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 md:text-3xl lg:text-4xl m-7 font-bold text-center">
+      {{ title || '' }}
+    </h1>
+    <NuxtImg
+      :src="image || ''"
+      :alt="alt || ''"
+      class="m-auto rounded-2xl shadow-lg h-32 md:h-72 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">
+      {{ description }}
+    </p>
+    <div class="flex w-full justify-center text-xs md:text-base my-8">
+      <div class="md:flex text-black 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">
+            <span class="bg-gray-200 rounded-md px-2 py-1 font-semibold">{{ tag }}</span>
+          </template>
+        </div>
+      </div>
+    </div>
+  </header>
+</template>

components/blog/Toc.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const { path } = useRoute()
+const articles = await queryContent(path).findOne()
+
+const links = articles.body.toc.links
+</script>
+
+<template>
+  <div class="lg:col-span-3 sticky top-28 h-96  p-2 hidden lg:block  justify-self-end">
+    <h1 class="text-lg font-bold mb-4">
+      Table Of Content
+    </h1>
+    <NuxtLink v-for="link in links" :key="link.id" :to="`#${link.id}`" class="block text-md mb-3">
+      {{ link.text }}
+    </NuxtLink>
+  </div>
+</template>

components/content/ProseCode.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+defineProps({
+  code: {
+    type: String,
+    default: '',
+  },
+  language: {
+    type: String,
+    default: null,
+  },
+  filename: {
+    type: String,
+    default: null,
+  },
+  highlights: {
+    type: Array as () => number[],
+    default: () => [],
+  },
+  meta: {
+    type: String,
+    default: null,
+  },
+})
+</script>
+
+<template>
+  <div>
+    <slot />
+  </div>
+</template>
+
+<style>
+pre code .line {
+  display: block;
+  min-height: 1rem;
+}
+</style>