Add table of content for blog page

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

pages/blogs/[blog].vue

@@ -17,6 +17,8 @@ const data = computed<BlogPost>(() => {
   }
 })
 
+const links = articles.body.toc.links
+
 useHead({
   title: data.value.title || '',
   meta: [
@@ -74,7 +76,8 @@ useHead({
 </script>
 
 <template>
-  <main class="px-6 container max-w-5xl mx-auto">
+  <main class="px-6 container max-w-6xl mx-auto grid grid-cols-12 space-x-8">
+    <div class="col-span-12 lg:col-span-9">
       <header>
         <h1 class="text-xl md:text-3xl lg:text-4xl m-7 font-bold text-center">
           {{ data.title || '' }}
@@ -111,5 +114,14 @@ useHead({
           </template>
         </ContentRenderer>
       </div>
+    </div>
+    <div class="lg:col-span-3 sticky top-28 h-96  p-2 hidden lg:block">
+      <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 underline text-md mb-3">
+        {{ link.text }}
+      </NuxtLink>
+    </div>
   </main>
 </template>