add about me and update header

Signed-off-by: nurRiyad <asadnurriyad@gmail.com>

components/main/header.vue

@@ -19,13 +19,7 @@ let isDark = ref(false)
         </li>
         <li title="About Me">
           <NuxtLink to="https://www.nurriyad.xyz/">
-            <Icon
-              v-if="isDark"
-              size="1.2em"
-              @click="isDark = !isDark"
-              class="cursor-pointer"
-              name="emojione:boy-dark-skin-tone"
-            />
+            <Icon size="1.2em" class="cursor-pointer" name="emojione:boy-dark-skin-tone" />
           </NuxtLink>
         </li>
       </ul>

nuxt.config.ts

@@ -4,7 +4,7 @@ export default defineNuxtConfig({
     head: {
       charset: 'utf-16',
       viewport: 'width=device-width,initial-scale=1',
-      title: "Elon's Blog",
+      title: "Riyad's Blog",
       titleTemplate: "%s - Riyad's Blog",
       meta: [{ name: 'description', content: "Riyad's awesome blog" }],
     },

pages/blogs/index.vue

@@ -1,14 +1,4 @@
 <script lang="ts" setup>
-useHead({
-  title: 'Home',
-  meta: [
-    {
-      name: 'description',
-      content: 'Home',
-    },
-  ],
-  titleTemplate: "Riyad's Blog - %s",
-})
 const { data } = await useAsyncData('home', () => queryContent('/blogs').sort({ _id: -1 }).find())
 
 const formatedData = computed(() => {
@@ -27,6 +17,17 @@ const formatedData = computed(() => {
     }
   })
 })
+
+useHead({
+  title: 'Archive',
+  meta: [
+    {
+      name: 'description',
+      content: 'Here you will find all the blog posts I have written & published on this site.',
+    },
+  ],
+  titleTemplate: "Riyad's Blog - %s",
+})
 </script>
 <template>
   <main class="container max-w-5xl mx-auto text-zinc-600">

pages/categories/[category].vue

@@ -1,15 +1,4 @@
 <script lang="ts" setup>
-useHead({
-  title: 'Home',
-  meta: [
-    {
-      name: 'description',
-      content: 'Home',
-    },
-  ],
-  titleTemplate: "Riyad's Blog - %s",
-})
-
 const route = useRoute()
 
 // take category from route params & make first char upper
@@ -44,6 +33,17 @@ const formatedData = computed(() => {
     }
   })
 })
+
+useHead({
+  title: category.value,
+  meta: [
+    {
+      name: 'description',
+      content: `You will find all the ${category.value} related post here`,
+    },
+  ],
+  titleTemplate: "Riyad's Blog - %s",
+})
 </script>
 <template>
   <main class="container max-w-5xl mx-auto text-zinc-600">

pages/categories/index.vue

@@ -1,16 +1,6 @@
 <script lang="ts" setup>
 import { makeFirstCharUpper } from '@/utils/helper'
 
-useHead({
-  title: 'Home',
-  meta: [
-    {
-      name: 'description',
-      content: 'Home',
-    },
-  ],
-  titleTemplate: "Riyad's Blog - %s",
-})
 const topics = [
   'javascript',
   'typescript',
@@ -25,6 +15,18 @@ const topics = [
   'supabse',
   'cypress',
 ]
+
+useHead({
+  title: 'Categories',
+  meta: [
+    {
+      name: 'description',
+      content:
+        '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",
+})
 </script>
 <template>
   <main class="container max-w-5xl mx-auto text-zinc-600">

pages/index.vue

@@ -1,15 +1,4 @@
 <script lang="ts" setup>
-useHead({
-  title: 'Home',
-  meta: [
-    {
-      name: 'description',
-      content: 'Home',
-    },
-  ],
-  titleTemplate: "Riyad's Blog - %s",
-})
-
 // Get Last 6 Publish Post from the content/blog directory
 const { data } = await useAsyncData('home', () =>
   queryContent('/blogs').limit(6).sort({ _id: -1 }).find()
@@ -31,6 +20,18 @@ const formatedData = computed(() => {
     }
   })
 })
+
+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.',
+    },
+  ],
+  titleTemplate: "Riyad's Blog - %s",
+})
 </script>
 <template>
   <main class="container max-w-5xl mx-auto text-zinc-600">