Update readme and add myself page

Signed-off-by: Al Asad Nur Riyad <asadnurriyad@gmail.com>

pages/blogs/[blog].vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { BlogPost } from '@/types/blog'
+
 const { path } = useRoute()
 const articles = await queryContent(path).findOne()
 
@@ -26,7 +27,7 @@ useHead({
       content: data.value.description,
     },
     // Test on: https://developers.facebook.com/tools/debug/ or https://socialsharepreview.com/
-    { property: 'og:site_name', content: `Riyad's Blog` },
+    { property: 'og:site_name', content: 'Riyad\'s Blog' },
     { hid: 'og:type', property: 'og:type', content: 'website' },
     {
       property: 'og:url',
@@ -96,7 +97,7 @@ useHead({
           </div>
           <div class="flex items-center gap-2 flex-wrap my-5">
             <LogoTag />
-            <template v-for="tag in data.tags">
+            <template v-for="tag in data.tags" :key="tag">
               <span class="bg-gray-200 rounded-md px-2 py-1 font-semibold">{{ tag }}</span>
             </template>
           </div>

pages/blogs/index.vue

@@ -26,9 +26,10 @@ useHead({
       content: 'Here you will find all the blog posts I have written & published on this site.',
     },
   ],
-  titleTemplate: "Riyad's Blog - %s",
+  titleTemplate: 'Riyad\'s Blog - %s',
 })
 </script>
+
 <template>
   <main class="container max-w-5xl mx-auto text-zinc-600">
     <ArchiveHero />
@@ -41,7 +42,7 @@ useHead({
           :description="post.description"
           :image="post.image"
           :alt="post.alt"
-          :ogImage="post.ogImage"
+          :og-image="post.ogImage"
           :provider="post.provider"
           :tags="post.tags"
           :published="post.published"

pages/categories/[category].vue

@@ -3,10 +3,11 @@ const route = useRoute()
 
 // take category from route params & make first char upper
 const category = computed(() => {
-  let name = route.params.category || ''
+  const name = route.params.category || ''
   let strName = ''
 
-  if (name instanceof Array) strName = name.at(0) || ''
+  if (Array.isArray(name))
+    strName = name.at(0) || ''
   else strName = name
   return strName
 })
@@ -14,7 +15,7 @@ const category = computed(() => {
 const { data } = await useAsyncData('home', () =>
   queryContent('/blogs')
     .where({ tags: { $contains: category.value } })
-    .find()
+    .find(),
 )
 
 const formatedData = computed(() => {
@@ -42,9 +43,10 @@ useHead({
       content: `You will find all the ${category.value} related post here`,
     },
   ],
-  titleTemplate: "Riyad's Blog - %s",
+  titleTemplate: 'Riyad\'s Blog - %s',
 })
 </script>
+
 <template>
   <main class="container max-w-5xl mx-auto text-zinc-600">
     <CategoryTopic />
@@ -57,7 +59,7 @@ useHead({
           :description="post.description"
           :image="post.image"
           :alt="post.alt"
-          :ogImage="post.ogImage"
+          :og-image="post.ogImage"
           :provider="post.provider"
           :tags="post.tags"
           :published="post.published"

pages/categories/index.vue

@@ -27,9 +27,10 @@ useHead({
         'Blow All the topics are listed on which either I have written a blog or will write a blog in near future.',
     },
   ],
-  titleTemplate: "Riyad's Blog - %s",
+  titleTemplate: 'Riyad\'s Blog - %s',
 })
 </script>
+
 <template>
   <main class="container max-w-5xl mx-auto text-zinc-600">
     <CategoryHero />

pages/index.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 // Get Last 6 Publish Post from the content/blog directory
 const { data } = await useAsyncData('home', () =>
-  queryContent('/blogs').limit(6).sort({ _id: -1 }).find()
+  queryContent('/blogs').limit(6).sort({ _id: -1 }).find(),
 )
 
 const formatedData = computed(() => {
@@ -30,9 +30,10 @@ useHead({
         'Welcome To My Blog Site. Get Web Development, Javascript, Typescript, NodeJs, Vue, and Nuxt, Related Articles, Tips, Learning resources and more.',
     },
   ],
-  titleTemplate: "Riyad's Blog - %s",
+  titleTemplate: 'Riyad\'s Blog - %s',
 })
 </script>
+
 <template>
   <main class="container max-w-5xl mx-auto text-zinc-600">
     <MainHero />
@@ -45,7 +46,7 @@ useHead({
           :description="post.description"
           :image="post.image"
           :alt="post.alt"
-          :ogImage="post.ogImage"
+          :og-image="post.ogImage"
           :provider="post.provider"
           :tags="post.tags"
           :published="post.published"

pages/myself.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+const x = ref(10)
+</script>
+
+<template>
+  <div>
+    <h1>{{ x }}</h1>
+  </div>
+</template>