Update to Nuxt 3.14 and Replace npm with pnpm (#72)

Signed-off-by: nurRiyad <asadnurriyad@gmail.com>
2024-11-09 03:18:21 +06:00
parent 32e4f6fe44
commit 9db5ae8103
49 changed files with 15735 additions and 20211 deletions
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,4 +0,0 @@
-{
-  "extends": "@antfu",
-  "ignorePatterns":["/content/**","/.github/**"]
-}
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -14,21 +14,26 @@ jobs:
    runs-on: ubuntu-latest

    steps:
-      - name: Check Code
+      - name: Checkout
        uses: actions/checkout@v4

-      - name: Setup Node.js
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
+
+      - name: Install Node.js
        uses: actions/setup-node@v4
        with:
-          node-version: '20'
-          cache: 'npm'
+          node-version: 22
+          cache: 'pnpm'

-      - name: Install dependency
-        run: npm ci
+      - name: Install dependencies
+        run: pnpm install

      - name: Check Linting
-        run: npm run lint
+        run: pnpm run lint

+      - name: Check Format
+        run: pnpm run format

      - name: Playgourd build check
-        run: npm run build
+        run: pnpm run build
--- a/.prettierrc
+++ b/.prettierrc
@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "semi": false,
+  "printWidth": 100
+}
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,6 +1,6 @@
 {
-  "prettier.enable": false,
-  "editor.formatOnSave": false,
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
--- a/README.md
+++ b/README.md
@@ -15,6 +15,7 @@
 Nuxt Blog built with [Nuxt3](https://nuxt.com), [Nuxt-Content2](https://content.nuxtjs.org/blog/announcing-v2/), [Vue3](https://vuejs.org) & [TailwindCss](https://tailwindcss.com/)

 ## Features
+
 - Write blog with markdown file
 - Auto generate category from blog post
 - Blog list page with search and pagination
@@ -25,8 +26,8 @@
 - Dark and light mode
 - Server Side Rendered(SSR) with Nuxt3

-
 ## How to Make This Blog Template Yours in 5 Minutes
+
 - Clone this repo or use it as a template
 - Go to ./data/index.ts file & add your personal info
 - Then head over to the ./content/blogs folder to add new blogs
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.css
@@ -1,4 +1,3 @@
-
@tailwind base;
@tailwind components;
@tailwind utilities;
--- a/components/OgImage/About.vue
+++ b/components/OgImage/About.vue
@@ -1,10 +1,4 @@
 <script lang="ts" setup>
-/**
- * @credits NuxtLabs <https://nuxtlabs.com/>
- * @see https://github.com/nuxt/nuxt.com/blob/main/components/OgImage/OgImageDocs.vue
- */
-import { computed } from 'vue'
-
 interface Props {
  title?: string
  description?: string
@@ -33,7 +27,10 @@ const title = computed(() => props.title.slice(0, 60))
      xmlns="http://www.w3.org/2000/svg"
    >
      <g filter="url(#filter0_f_199_94966)">
-        <path d="M628.5 -578L639.334 -94.4223L806.598 -548.281L659.827 -87.387L965.396 -462.344L676.925 -74.0787L1087.69 -329.501L688.776 -55.9396L1160.22 -164.149L694.095 -34.9354L1175.13 15.7948L692.306 -13.3422L1130.8 190.83L683.602 6.50012L1032.04 341.989L668.927 22.4412L889.557 452.891L649.872 32.7537L718.78 511.519L628.5 36.32L538.22 511.519L607.128 32.7537L367.443 452.891L588.073 22.4412L224.955 341.989L573.398 6.50012L126.198 190.83L564.694 -13.3422L81.8734 15.7948L562.905 -34.9354L96.7839 -164.149L568.224 -55.9396L169.314 -329.501L580.075 -74.0787L291.604 -462.344L597.173 -87.387L450.402 -548.281L617.666 -94.4223L628.5 -578Z" fill="#00DC82" />
+        <path
+          d="M628.5 -578L639.334 -94.4223L806.598 -548.281L659.827 -87.387L965.396 -462.344L676.925 -74.0787L1087.69 -329.501L688.776 -55.9396L1160.22 -164.149L694.095 -34.9354L1175.13 15.7948L692.306 -13.3422L1130.8 190.83L683.602 6.50012L1032.04 341.989L668.927 22.4412L889.557 452.891L649.872 32.7537L718.78 511.519L628.5 36.32L538.22 511.519L607.128 32.7537L367.443 452.891L588.073 22.4412L224.955 341.989L573.398 6.50012L126.198 190.83L564.694 -13.3422L81.8734 15.7948L562.905 -34.9354L96.7839 -164.149L568.224 -55.9396L169.314 -329.501L580.075 -74.0787L291.604 -462.344L597.173 -87.387L450.402 -548.281L617.666 -94.4223L628.5 -578Z"
+          fill="#00DC82"
+        />
      </g>
      <defs>
        <filter
@@ -65,7 +62,7 @@ const title = computed(() => props.title.slice(0, 60))
    </div>

    <div v-if="link" class="absolute top-[200px] right-[200px]">
-      <img :src="link" :alt="title" class="w-52 h-52 rounded-full object-cover">
+      <img :src="link" :alt="title" class="w-52 h-52 rounded-full object-cover" />
    </div>
  </div>
 </template>
--- a/components/OgImage/Test.vue
+++ b/components/OgImage/Test.vue
@@ -1,10 +1,4 @@
 <script lang="ts" setup>
-/**
- * @credits NuxtLabs <https://nuxtlabs.com/>
- * @see https://github.com/nuxt/nuxt.com/blob/main/components/OgImage/OgImageDocs.vue
- */
-import { computed } from 'vue'
-
 interface Props {
  title?: string
  description?: string
@@ -19,11 +13,14 @@ const props = withDefaults(defineProps<Props>(), {
  link: '',
 })

-const formattedTitle = computed(() => props.title.length > 70 ? `${props.title.slice(0, 60)}...` : props.title)
-const formattedDescription = computed(() => props.description.length > 100 ? `${props.description}...` : props.description)
+const formattedTitle = computed(() =>
+  props.title.length > 70 ? `${props.title.slice(0, 60)}...` : props.title,
+)
+const formattedDescription = computed(() =>
+  props.description.length > 100 ? `${props.description}...` : props.description,
+)
 const formattedLink = computed(() => {
-  if (props.link.endsWith('jpg') || props.link.endsWith('png'))
-    return props.link
+  if (props.link.endsWith('jpg') || props.link.endsWith('png')) return props.link
  else return '/blogs-img/blog.jpg'
 })
 </script>
@@ -39,7 +36,10 @@ const formattedLink = computed(() => {
      xmlns="http://www.w3.org/2000/svg"
    >
      <g filter="url(#filter0_f_199_94966)">
-        <path d="M628.5 -578L639.334 -94.4223L806.598 -548.281L659.827 -87.387L965.396 -462.344L676.925 -74.0787L1087.69 -329.501L688.776 -55.9396L1160.22 -164.149L694.095 -34.9354L1175.13 15.7948L692.306 -13.3422L1130.8 190.83L683.602 6.50012L1032.04 341.989L668.927 22.4412L889.557 452.891L649.872 32.7537L718.78 511.519L628.5 36.32L538.22 511.519L607.128 32.7537L367.443 452.891L588.073 22.4412L224.955 341.989L573.398 6.50012L126.198 190.83L564.694 -13.3422L81.8734 15.7948L562.905 -34.9354L96.7839 -164.149L568.224 -55.9396L169.314 -329.501L580.075 -74.0787L291.604 -462.344L597.173 -87.387L450.402 -548.281L617.666 -94.4223L628.5 -578Z" fill="#00DC82" />
+        <path
+          d="M628.5 -578L639.334 -94.4223L806.598 -548.281L659.827 -87.387L965.396 -462.344L676.925 -74.0787L1087.69 -329.501L688.776 -55.9396L1160.22 -164.149L694.095 -34.9354L1175.13 15.7948L692.306 -13.3422L1130.8 190.83L683.602 6.50012L1032.04 341.989L668.927 22.4412L889.557 452.891L649.872 32.7537L718.78 511.519L628.5 36.32L538.22 511.519L607.128 32.7537L367.443 452.891L588.073 22.4412L224.955 341.989L573.398 6.50012L126.198 190.83L564.694 -13.3422L81.8734 15.7948L562.905 -34.9354L96.7839 -164.149L568.224 -55.9396L169.314 -329.501L580.075 -74.0787L291.604 -462.344L597.173 -87.387L450.402 -548.281L617.666 -94.4223L628.5 -578Z"
+          fill="#00DC82"
+        />
      </g>
      <defs>
        <filter
@@ -71,7 +71,7 @@ const formattedLink = computed(() => {
    </div>

    <div v-if="formattedLink" class="absolute top-[200px] right-[70px]">
-      <img :src="formattedLink" :alt="title" class="w-96 h-52 rounded-lg object-cover">
+      <img :src="formattedLink" :alt="title" class="w-96 h-52 rounded-lg object-cover" />
    </div>
  </div>
 </template>
--- a/components/archive/card.vue
+++ b/components/archive/card.vue
@@ -25,7 +25,9 @@ withDefaults(defineProps<Props>(), {
 </script>

 <template>
-  <article class="group border dark:border-gray-800  m-2 rounded-2xl overflow-hidden shadow-sm text-zinc-700 dark:text-zinc-300  ">
+  <article
+    class="group border dark:border-gray-800 m-2 rounded-2xl overflow-hidden shadow-sm text-zinc-700 dark:text-zinc-300"
+  >
    <NuxtLink :to="path" class="grid grid-cols-1 sm:grid-cols-10 gap-1">
      <div class="sm:col-span-3">
        <NuxtImg
@@ -36,7 +38,9 @@ withDefaults(defineProps<Props>(), {
        />
      </div>
      <div class="sm:col-span-7 p-5">
-        <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">
+        <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">
@@ -49,7 +53,11 @@ withDefaults(defineProps<Props>(), {
          </div>
          <div class="flex items-center gap-1 flex-wrap">
            <LogoTag />
-            <p v-for="tag in tags" :key="tag" class="bg-gray-200 dark:bg-slate-900 rounded-md px-2 py-1 font-semibold">
+            <p
+              v-for="tag in tags"
+              :key="tag"
+              class="bg-gray-200 dark:bg-slate-900 rounded-md px-2 py-1 font-semibold"
+            >
              {{ tag }}
            </p>
          </div>
--- a/components/archive/hero.vue
+++ b/components/archive/hero.vue
@@ -6,7 +6,9 @@ import { blogsPage } from '~/data'
  <div class="container mx-auto mb-5">
    <div class="grid grid-cols-1 sm:grid-cols-2 items-center">
      <div class="px-6">
-        <h1 class="text-black dark:text-zinc-300 font-semibold leading-tight text-4xl md:text-5xl my-5">
+        <h1
+          class="text-black dark:text-zinc-300 font-semibold leading-tight text-4xl md:text-5xl my-5"
+        >
          {{ blogsPage.title }}
        </h1>
        <p class="dark:text-zinc-300">
--- a/components/blog/Header.vue
+++ b/components/blog/Header.vue
@@ -14,7 +14,7 @@ withDefaults(defineProps<Props>(), {
  alt: 'no-img',
  description: 'no description',
  date: 'no-date',
-  tags: () => ([]),
+  tags: () => [],
 })
 </script>

@@ -29,7 +29,9 @@ withDefaults(defineProps<Props>(), {
      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">
+    <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">
@@ -41,7 +43,9 @@ withDefaults(defineProps<Props>(), {
        <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 dark:bg-slate-900 rounded-md px-2 py-1 font-semibold">{{ tag }}</span>
+            <span class="bg-gray-200 dark:bg-slate-900 rounded-md px-2 py-1 font-semibold">{{
+              tag
+            }}</span>
          </template>
        </div>
      </div>
--- a/components/blog/Toc.vue
+++ b/components/blog/Toc.vue
@@ -8,11 +8,11 @@ const links = articles?.body?.toc?.links || []
 <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>
+      <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}`"
+        v-for="link in links"
+        :key="link.id"
+        :to="`#${link.id}`"
        class="block text-xs mb-3 hover:underline"
      >
        {{ link.text }}
--- a/components/blog/card.vue
+++ b/components/blog/card.vue
@@ -25,7 +25,9 @@ withDefaults(defineProps<Props>(), {
 </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  ">
+  <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"
@@ -42,11 +44,15 @@ withDefaults(defineProps<Props>(), {
          <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>
+              <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">
+        <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">
--- a/components/blog/empty.vue
+++ b/components/blog/empty.vue
@@ -1,5 +1,7 @@
 <template>
-  <article class="group border dark:border-gray-800 m-2 rounded-2xl overflow-hidden shadow-lg text-zinc-700">
+  <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"
@@ -7,7 +9,9 @@
        <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">
+        <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>

--- a/components/category/card.vue
+++ b/components/category/card.vue
@@ -35,8 +35,7 @@ const picAColor = ref(`${color.at(getRandomInt(0, 8))}`)

 <template>
  <div
-    class="text-[#F1F2F4]  px-5 py-3 rounded hover:underline
-    rand-bg-color hover:scale-[1.05] transition-all duration-500"
+    class="text-[#F1F2F4] px-5 py-3 rounded hover:underline rand-bg-color hover:scale-[1.05] transition-all duration-500"
  >
    <NuxtLink :to="`/categories/${title.toLocaleLowerCase()}`" class="text-lg font-extrabold">
      <h1>#{{ title }}({{ count }})</h1>
--- a/components/category/hero.vue
+++ b/components/category/hero.vue
@@ -6,7 +6,9 @@ import { categoryPage } from '~/data'
  <div class="container mx-auto">
    <div class="grid grid-cols-1 sm:grid-cols-2 items-center">
      <div class="px-6">
-        <h1 class="text-black dark:text-zinc-300 font-semibold leading-tight text-4xl md:text-5xl my-5">
+        <h1
+          class="text-black dark:text-zinc-300 font-semibold leading-tight text-4xl md:text-5xl my-5"
+        >
          {{ categoryPage.title }}
        </h1>
        <p class="dark:text-zinc-300">
--- a/components/category/topic.vue
+++ b/components/category/topic.vue
@@ -8,8 +8,7 @@ const category = computed(() => {
  const name = route.params.category || ''
  let strName = ''

-  if (Array.isArray(name))
-    strName = name.at(0) || ''
+  if (Array.isArray(name)) strName = name.at(0) || ''
  else strName = name
  return makeFirstCharUpper(strName)
 })
--- a/components/footer/connect.vue
+++ b/components/footer/connect.vue
@@ -4,9 +4,7 @@ import { footerData, seoData } from '~/data'

 <template>
  <div>
-    <p class="text-black dark:text-zinc-300   text-base font-semibold">
-      Connect With Me
-    </p>
+    <p class="text-black dark:text-zinc-300 text-base font-semibold">Connect With Me</p>
    <p class="dark:text-zinc-300">
      {{ footerData.authorInterest }}
    </p>
--- a/components/footer/link.vue
+++ b/components/footer/link.vue
@@ -1,19 +1,9 @@
 <template>
  <div class="flex flex-col dark:text-zinc-300 my-5 md:my-0 md:justify-self-center">
-    <p class="text-black dark:text-zinc-300  text-base font-semibold">
-      Quick Link
-    </p>
-    <NuxtLink to="/" class="hover:underline">
-      Home
-    </NuxtLink>
-    <NuxtLink to="/blogs" class="hover:underline">
-      Blogs
-    </NuxtLink>
-    <NuxtLink to="/categories" class="hover:underline">
-      Categories
-    </NuxtLink>
-    <NuxtLink to="/about" class="hover:underline">
-      About Me
-    </NuxtLink>
+    <p class="text-black dark:text-zinc-300 text-base font-semibold">Quick Link</p>
+    <NuxtLink to="/" class="hover:underline"> Home </NuxtLink>
+    <NuxtLink to="/blogs" class="hover:underline"> Blogs </NuxtLink>
+    <NuxtLink to="/categories" class="hover:underline"> Categories </NuxtLink>
+    <NuxtLink to="/about" class="hover:underline"> About Me </NuxtLink>
  </div>
 </template>
--- a/components/footer/site.vue
+++ b/components/footer/site.vue
@@ -4,9 +4,7 @@ import { footerData } from '~/data'

 <template>
  <div>
-    <p class="text-black dark:text-zinc-300   text-base py-1 font-semibold">
-      About This Site
-    </p>
+    <p class="text-black dark:text-zinc-300 text-base py-1 font-semibold">About This Site</p>
    <p class="py-2 dark:text-zinc-300">
      {{ footerData.aboutTheSite }}
    </p>
--- a/components/logo/404.vue
+++ b/components/logo/404.vue
@@ -1,41 +1,75 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    viewBox="0 0 500 500"
+  >
    <defs>
      <clipPath id="freepik--clip-path--inject-16">
        <path
          d="M86.28,404.22v22.52A4.84,4.84,0,0,0,88.9,431l36.2,18.69a4.81,4.81,0,0,0,4.19.12l53.33-20.33a4.84,4.84,0,0,0,2.86-4.41V397.85l-61,18.43Z"
-          style="fill:#92E3A9;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.1930027515339008px"
+          style="
+            fill: #92e3a9;
+            stroke: #263238;
+            stroke-linecap: round;
+            stroke-linejoin: round;
+            stroke-width: 1.1930027515339008px;
+          "
        />
      </clipPath>
      <clipPath id="freepik--clip-path-2--inject-16">
        <path
          d="M142,366.2,83.5,385a2.26,2.26,0,0,0-1.57,2.16v16.68a2.27,2.27,0,0,0,1.29,2L124,425.25a2.27,2.27,0,0,0,1.77.08L187,402.42a2.27,2.27,0,0,0,1.48-2.12l.11-15.65a2.29,2.29,0,0,0-1.79-2.22l-43.64-16.29A2.36,2.36,0,0,0,142,366.2Z"
-          style="fill:#fff;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.1930027515339008px"
+          style="
+            fill: #fff;
+            stroke: #263238;
+            stroke-linecap: round;
+            stroke-linejoin: round;
+            stroke-width: 1.1930027515339008px;
+          "
        />
      </clipPath>
      <clipPath id="freepik--clip-path-3--inject-16">
        <path
          d="M97.34,290.27S95,304,96.67,310.72a28.62,28.62,0,0,0,4.69,10.39s-8.38,12.4-6.7,22.78,6,11.73,6,11.73-3.68,19.11,3,25.81,21.45,14.07,37.87,11.06,27.48-3.69,30.83-9.39,1.34-30.83,1.34-30.83-.67-27.81-1.34-44.91-3-30.83-11.06-37.53-43.57,3.69-54.29,10.72S97.34,290.27,97.34,290.27Z"
-          style="fill:#92E3A9;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.1930027515339008px"
+          style="
+            fill: #92e3a9;
+            stroke: #263238;
+            stroke-linecap: round;
+            stroke-linejoin: round;
+            stroke-width: 1.1930027515339008px;
+          "
        />
      </clipPath>
      <clipPath id="freepik--clip-path-4--inject-16">
        <path
          d="M167.38,273.85s-6.36-9.72-15.08-15.08-31.16-9.38-40.21-11.06-18.77-1-21.45,9-2.35,26.81.33,34.18,13.74,11.73,22.46,6.71,32.84-24.47,41.22-25.47S166.71,277.54,167.38,273.85Z"
-          style="fill:#757575;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.1930027515339008px"
+          style="
+            fill: #757575;
+            stroke: #263238;
+            stroke-linecap: round;
+            stroke-linejoin: round;
+            stroke-width: 1.1930027515339008px;
+          "
        />
      </clipPath>
      <clipPath id="freepik--clip-path-5--inject-16">
        <path
          d="M153.31,273.85c7.37-2.68,16.76-1,20.11,8.38s6.36,36.86,6.36,36.86,8.38,1,11.73,4.7,5,13.07,4.36,17.76-12.4,13.4-25.8,13.74-23.13-6-27.82-23.13S139.42,289,139.42,289s1.7-7.67,4.26-9.38"
-          style="fill:#92E3A9;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.1930027515339008px"
+          style="
+            fill: #92e3a9;
+            stroke: #263238;
+            stroke-linecap: round;
+            stroke-linejoin: round;
+            stroke-width: 1.1930027515339008px;
+          "
        />
      </clipPath>
    </defs>
    <g id="freepik--background-simple--inject-16">
      <path
        d="M44.31,258.15s2.35,73,63.27,121.6,145.32,52.12,213.65,56.74S442,402.43,450,344s-44.3-75.63-72.63-142.2-25.81-88.44-85.75-129.38S137.86,56.57,88.7,126.71,44.31,258.15,44.31,258.15Z"
-        style="fill:#92E3A9"
+        style="fill: #92e3a9"
      />
      <path
        d="M44.31,258.15s2.35,73,63.27,121.6,145.32,52.12,213.65,56.74S442,402.43,450,344s-44.3-75.63-72.63-142.2-25.81-88.44-85.75-129.38S137.86,56.57,88.7,126.71,44.31,258.15,44.31,258.15Z"
@@ -44,72 +78,171 @@
    </g>
    <g id="freepik--Hole--inject-16">
      <ellipse
-        cx="341.49" cy="385.79" rx="72.2" ry="21.42"
-        style="fill:#263238;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.1930027515339008px"
+        cx="341.49"
+        cy="385.79"
+        rx="72.2"
+        ry="21.42"
+        style="
+          fill: #263238;
+          stroke: #263238;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+          stroke-width: 1.1930027515339008px;
+        "
      />
      <path
        d="M341.49,374.22c34.15,0,62.75,7,70.26,16.49a8,8,0,0,0,1.94-4.92c0-11.84-32.33-21.43-72.2-21.43s-72.21,9.59-72.21,21.43a8,8,0,0,0,1.94,4.92C278.73,381.26,307.33,374.22,341.49,374.22Z"
-        style="fill:#fff;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.1930027515339008px"
+        style="
+          fill: #fff;
+          stroke: #263238;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+          stroke-width: 1.1930027515339008px;
+        "
      />
      <path
        d="M331.63,404.52c-24.12-1.09-42.32-6-42.32-12a3.33,3.33,0,0,1,.59-1.83"
-        style="fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.1930027515339008px"
+        style="
+          fill: none;
+          stroke: #fff;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+          stroke-width: 1.1930027515339008px;
+        "
      />
      <path
        d="M387.6,386.68c4.13,1.75,6.49,3.75,6.49,5.88,0,6.73-23.46,12.18-52.39,12.18h-1.25"
-        style="fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.1930027515339008px"
+        style="
+          fill: none;
+          stroke: #fff;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+          stroke-width: 1.1930027515339008px;
+        "
      />
      <path
        d="M296.36,386.45c9.07-3.63,26-6.08,45.34-6.08a184.43,184.43,0,0,1,32.84,2.69"
-        style="fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.1930027515339008px"
+        style="
+          fill: none;
+          stroke: #fff;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+          stroke-width: 1.1930027515339008px;
+        "
      />
      <path
        d="M330.94,396.74c-6.11-.85-10.2-2.4-10.2-4.18,0-2.69,9.39-4.87,21-4.87s20.95,2.18,20.95,4.87c0,2.31-6.9,4.24-16.16,4.74"
-        style="fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.1930027515339008px"
+        style="
+          fill: none;
+          stroke: #fff;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+          stroke-width: 1.1930027515339008px;
+        "
      />
    </g>
    <g id="freepik--Landscape--inject-16">
      <path
        d="M51.52,299.68c31.49-8.95,97.75-26.61,134.32-27.94C235,270,318,305.68,369.82,311.93s86.64,4.47,86.64,4.47"
-        style="fill:none;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.1930027515339008px"
+        style="
+          fill: none;
+          stroke: #263238;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+          stroke-width: 1.1930027515339008px;
+        "
      />
      <path
        d="M34,304.79s2.72-.83,7.49-2.22"
-        style="fill:none;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.1930027515339008px"
+        style="
+          fill: none;
+          stroke: #263238;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+          stroke-width: 1.1930027515339008px;
+        "
      />
      <path
        d="M442.47,249.12a228.34,228.34,0,0,0-55.3-5.23c-38.42,1.29-80,6.37-131.41,13s-124.62-30-174.4-16.41-46,17.68-46,17.68"
-        style="fill:none;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.1930027515339008px"
+        style="
+          fill: none;
+          stroke: #263238;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+          stroke-width: 1.1930027515339008px;
+        "
      />
      <path
        d="M456.63,252.8s-1.94-.64-5.45-1.57"
-        style="fill:none;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.1930027515339008px"
+        style="
+          fill: none;
+          stroke: #263238;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+          stroke-width: 1.1930027515339008px;
+        "
      />
    </g>
    <g id="freepik--Clouds--inject-16">
      <path
        d="M364.45,158.35a10.35,10.35,0,0,0-20.1,0Z"
-        style="fill:none;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.1930027515339008px"
+        style="
+          fill: none;
+          stroke: #263238;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+          stroke-width: 1.1930027515339008px;
+        "
      />
      <path
        d="M466,158.35a12.81,12.81,0,0,0-11-9.77A30,30,0,0,0,425.42,113a30.08,30.08,0,0,0-29.61,24.79,19.22,19.22,0,0,0-31.06,15.16,19.41,19.41,0,0,0,.79,5.42Z"
-        style="fill:none;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.1930027515339008px"
+        style="
+          fill: none;
+          stroke: #263238;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+          stroke-width: 1.1930027515339008px;
+        "
      />
      <path
        d="M185.57,182.49a5.25,5.25,0,0,0-10.21,0Z"
-        style="fill:none;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.1930027515339008px"
+        style="
+          fill: none;
+          stroke: #263238;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+          stroke-width: 1.1930027515339008px;
+        "
      />
      <path
        d="M237.12,182.49a6.52,6.52,0,0,0-5.59-5,15.27,15.27,0,1,0-30-5.48,9.76,9.76,0,0,0-15.77,7.69,10.06,10.06,0,0,0,.4,2.76Z"
-        style="fill:none;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.1930027515339008px"
+        style="
+          fill: none;
+          stroke: #263238;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+          stroke-width: 1.1930027515339008px;
+        "
      />
      <path
        d="M231.93,198.63a3.31,3.31,0,0,0-6.44,0Z"
-        style="fill:none;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.1930027515339008px"
+        style="
+          fill: none;
+          stroke: #263238;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+          stroke-width: 1.1930027515339008px;
+        "
      />
      <path
        d="M264.47,198.63a4.1,4.1,0,0,0-3.53-3.13,9.48,9.48,0,0,0,.16-1.77A9.64,9.64,0,0,0,242,192a6.16,6.16,0,0,0-9.95,4.86,6.25,6.25,0,0,0,.25,1.74Z"
-        style="fill:none;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.1930027515339008px"
+        style="
+          fill: none;
+          stroke: #263238;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+          stroke-width: 1.1930027515339008px;
+        "
      />
    </g>
    <g id="freepik--Character--inject-16">
@@ -119,19 +252,46 @@
      />
      <path
        d="M169.48,287s6.13-6.54,9.81-6.54,10.63,6.13,10.22,9.4-6.54.41-6.54.41-5.73,7.77-11.45,6.54S169.48,287,169.48,287Z"
-        style="fill:#92E3A9;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.1930027515339008px"
+        style="
+          fill: #92e3a9;
+          stroke: #263238;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+          stroke-width: 1.1930027515339008px;
+        "
      />
      <path
        d="M183,290.25s3.75,2.6,4.08,4.43-4.16,7-9.15,8.16-7.66-1.67-6.16-4.33S179.22,290.49,183,290.25Z"
-        style="fill:#92E3A9;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.1930027515339008px"
+        style="
+          fill: #92e3a9;
+          stroke: #263238;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+          stroke-width: 1.1930027515339008px;
+        "
      />
      <path
        d="M337,266.56V131.27s-2.73,9.79-2.73,10.5"
-        style="fill:none;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.1930027515339008px"
+        style="
+          fill: none;
+          stroke: #263238;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+          stroke-width: 1.1930027515339008px;
+        "
      />
      <rect
-        x="289.68" y="273.69" width="103.74" height="83.12"
-        style="fill:#92E3A9;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.1930027515339008px"
+        x="289.68"
+        y="273.69"
+        width="103.74"
+        height="83.12"
+        style="
+          fill: #92e3a9;
+          stroke: #263238;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+          stroke-width: 1.1930027515339008px;
+        "
      />
      <path d="M338.48,273.34v-4.76a1.19,1.19,0,0,0-2.38,0v4.76Z" style="fill: #263238" />
      <path
@@ -140,29 +300,67 @@
      />
      <path
        d="M337.1,130s2.12-7.53.24-6.83S337.1,130,337.1,130Z"
-        style="fill:none;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.1930027515339008px"
+        style="
+          fill: none;
+          stroke: #263238;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+          stroke-width: 1.1930027515339008px;
+        "
      />
      <path
        d="M337.1,130s-8-2.83-7.29-.24S337.1,130,337.1,130Z"
-        style="fill:none;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.1930027515339008px"
+        style="
+          fill: none;
+          stroke: #263238;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+          stroke-width: 1.1930027515339008px;
+        "
      />
      <path
        d="M164.59,195.63s-9.87-5.53-29.23-2.76-23.05,18.73-19.89,35.32,21.47,30.64,24.24,29.46-.79-38.32,5.53-45.43,26.86-5.92,28-11.45S164.59,195.63,164.59,195.63Z"
-        style="fill:#263238;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.1930027515339008px"
+        style="
+          fill: #263238;
+          stroke: #263238;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+          stroke-width: 1.1930027515339008px;
+        "
      />
      <path
        d="M130.18,205.48l2,13.07s-12.4,33.85-10.39,38.55,20.77,6.36,20.77,6.36,30.5,3.69,39.55,0,4.36-14.41,3.35-17.42-6.7-27.15-6.7-27.15,2-5.7,2-8.71-.34-11.4-1.68-13.41-24.8-4.36-35.19-2.68S128.84,198.45,130.18,205.48Z"
-        style="fill:#757575;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.1930027515339008px"
+        style="
+          fill: #757575;
+          stroke: #263238;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+          stroke-width: 1.1930027515339008px;
+        "
      />
      <path
        d="M135.55,220.57s-.34,29.15,1.34,34.85,8.38,12.4,22.45,10.72,15.42-15.08,15.42-15.08l-1-31.16Z"
-        style="fill:#fff;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.1930027515339008px"
+        style="
+          fill: #fff;
+          stroke: #263238;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+          stroke-width: 1.1930027515339008px;
+        "
      />
      <path
        d="M159.68,241.51a2.52,2.52,0,1,1-2.52-2.51A2.51,2.51,0,0,1,159.68,241.51Z"
-        style="fill:none;stroke:#263238;stroke-miterlimit:10;stroke-width:1.1930027515339008px"
+        style="
+          fill: none;
+          stroke: #263238;
+          stroke-miterlimit: 10;
+          stroke-width: 1.1930027515339008px;
+        "
+      />
+      <path
+        d="M159.34,252.07a1.68,1.68,0,1,1-1.67-1.68A1.67,1.67,0,0,1,159.34,252.07Z"
+        style="fill: #263238"
      />
-      <path d="M159.34,252.07a1.68,1.68,0,1,1-1.67-1.68A1.67,1.67,0,0,1,159.34,252.07Z" style="fill:#263238" />
      <path
        d="M149.22,230.76c1.07,1.16,1.44,2.55.84,3.12s-2,.09-3.05-1.06-1.45-2.54-.84-3.11S148.15,229.61,149.22,230.76Z"
        style="fill: #263238"
@@ -173,39 +371,87 @@
      />
      <path
        d="M142.06,226.81a6.4,6.4,0,0,1,7-2.58"
-        style="fill:none;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.1930027515339008px"
+        style="
+          fill: none;
+          stroke: #263238;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+          stroke-width: 1.1930027515339008px;
+        "
      />
      <path
        d="M162.3,224.6s4.78-1.47,6.26,2.58"
-        style="fill:none;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.1930027515339008px"
+        style="
+          fill: none;
+          stroke: #263238;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+          stroke-width: 1.1930027515339008px;
+        "
      />
      <path
        d="M178.44,411.62s5.27-3.16,8.19-4.4a8,8,0,0,1,.84-.33c2.58-.86,9.89-.43,16.76-4.73s3.44-9.46-1.72-10.75-10.74-3-10.74-3l-1.29-20.21s-15.48,4.3-20.64,6.45-2.15,32.67-1.72,35.25S168.55,414.2,178.44,411.62Z"
-        style="fill:#263238;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.1930027515339008px"
+        style="
+          fill: #263238;
+          stroke: #263238;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+          stroke-width: 1.1930027515339008px;
+        "
      />
      <path
        d="M195.64,402.16c-9,1.72-9,3.44-18.92,5.16a38.38,38.38,0,0,1-8.83.72c.1.92.18,1.57.23,1.86.43,2.58.43,4.3,10.32,1.72,0,0,5.27-3.16,8.19-4.4a8,8,0,0,1,.84-.33c2.58-.86,9.89-.43,16.76-4.73,2.21-1.37,3.34-2.84,3.71-4.24A51.56,51.56,0,0,1,195.64,402.16Z"
-        style="fill:#fff;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.1930027515339008px"
+        style="
+          fill: #fff;
+          stroke: #263238;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+          stroke-width: 1.1930027515339008px;
+        "
      />
      <path
        d="M199.22,391.15s-.33,23.46-1,28.48.33,11.4,8,11.4,22.79-5,28.15-6,14.08-3.36,17.76-11.73-18.76-7.38-18.76-7.38l1.34-17.09S211.62,393.49,199.22,391.15Z"
-        style="fill:#263238;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.1930027515339008px"
+        style="
+          fill: #263238;
+          stroke: #263238;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+          stroke-width: 1.1930027515339008px;
+        "
      />
      <path
        d="M252.17,413.27a3.74,3.74,0,0,0,.28-2.63,21,21,0,0,1-9,7c-8,3.35-23.13,7-34.52,8.72-5.21.76-8.51-.09-10.58-1.23.74,3.25,2.91,5.92,7.9,5.92,7.71,0,22.79-5,28.15-6S248.49,421.64,252.17,413.27Z"
-        style="fill:#fff;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.1930027515339008px"
+        style="
+          fill: #fff;
+          stroke: #263238;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+          stroke-width: 1.1930027515339008px;
+        "
      />
      <path
        d="M233.41,405.89s1.67,5.7-3,9.39"
-        style="fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.1930027515339008px"
+        style="
+          fill: none;
+          stroke: #fff;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+          stroke-width: 1.1930027515339008px;
+        "
      />
      <path
        d="M196.88,378.75s-.52,10.19.05,12.23c2.14,7.74,2.82,5.93,18.91,5.59s22.59-6.76,24.27-10.78,0-12.74-.67-15.76-6-4-8.05-3.68S197.88,375.4,196.88,378.75Z"
-        style="fill:#757575;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.1930027515339008px"
+        style="
+          fill: #757575;
+          stroke: #263238;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+          stroke-width: 1.1930027515339008px;
+        "
      />
      <path
        d="M86.28,404.22v22.52A4.84,4.84,0,0,0,88.9,431l36.2,18.69a4.81,4.81,0,0,0,4.19.12l53.33-20.33a4.84,4.84,0,0,0,2.86-4.41V397.85l-61,18.43Z"
-        style="fill:#92E3A9"
+        style="fill: #92e3a9"
      />
      <g style="clip-path: url(#freepik--clip-path--inject-16)">
        <path
@@ -215,7 +461,13 @@
      </g>
      <path
        d="M86.28,404.22v22.52A4.84,4.84,0,0,0,88.9,431l36.2,18.69a4.81,4.81,0,0,0,4.19.12l53.33-20.33a4.84,4.84,0,0,0,2.86-4.41V397.85l-61,18.43Z"
-        style="fill:none;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.1930027515339008px"
+        style="
+          fill: none;
+          stroke: #263238;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+          stroke-width: 1.1930027515339008px;
+        "
      />
      <path
        d="M142,366.2,83.5,385a2.26,2.26,0,0,0-1.57,2.16v16.68a2.27,2.27,0,0,0,1.29,2L124,425.25a2.27,2.27,0,0,0,1.77.08L187,402.42a2.27,2.27,0,0,0,1.48-2.12l.11-15.65a2.29,2.29,0,0,0-1.79-2.22l-43.64-16.29A2.36,2.36,0,0,0,142,366.2Z"
@@ -224,7 +476,7 @@
      <g style="clip-path: url(#freepik--clip-path-2--inject-16)">
        <path
          d="M123.93,425.24h0a2.27,2.27,0,0,0,1.77.08L187,402.42a2.27,2.27,0,0,0,1.48-2.12l.11-15.65a2.2,2.2,0,0,0-.54-1.45l-63.25,23.36Z"
-          style="fill:#92E3A9"
+          style="fill: #92e3a9"
        />
        <path
          d="M123.93,425.24h0a2.27,2.27,0,0,0,1.77.08L187,402.42a2.27,2.27,0,0,0,1.48-2.12l.11-15.65a2.2,2.2,0,0,0-.54-1.45l-63.25,23.36Z"
@@ -232,32 +484,62 @@
        />
        <path
          d="M81.93,387.11v16.68a2.27,2.27,0,0,0,1.29,2L124,425.25a2.24,2.24,0,0,0,.87.22V406.56L82,386.72A1.67,1.67,0,0,0,81.93,387.11Z"
-          style="fill:#92E3A9"
+          style="fill: #92e3a9"
        />
      </g>
      <path
        d="M142,366.2,83.5,385a2.26,2.26,0,0,0-1.57,2.16v16.68a2.27,2.27,0,0,0,1.29,2L124,425.25a2.27,2.27,0,0,0,1.77.08L187,402.42a2.27,2.27,0,0,0,1.48-2.12l.11-15.65a2.29,2.29,0,0,0-1.79-2.22l-43.64-16.29A2.36,2.36,0,0,0,142,366.2Z"
-        style="fill:none;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.1930027515339008px"
+        style="
+          fill: none;
+          stroke: #263238;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+          stroke-width: 1.1930027515339008px;
+        "
      />
      <path
        d="M222.35,335.52s7.7,3.68,11.73,11.06,1,21.44-1.35,25.8-18.09,6.37-23.45,6.37-6.37-.67-6.37-.67-17.09,3.35-27.82,5.36-8-23.12-4.69-34.52,22.12-17.09,29.83-17.09S222.35,335.52,222.35,335.52Z"
-        style="fill:#263238;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.1930027515339008px"
+        style="
+          fill: #263238;
+          stroke: #263238;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+          stroke-width: 1.1930027515339008px;
+        "
      />
      <path
        d="M202.91,378.08s14.41-5,20.44-17.76"
-        style="fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.1930027515339008px"
+        style="
+          fill: none;
+          stroke: #fff;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+          stroke-width: 1.1930027515339008px;
+        "
      />
      <path
        d="M216.65,370.7a38.27,38.27,0,0,0,12.4-8.37"
-        style="fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.1930027515339008px"
+        style="
+          fill: none;
+          stroke: #fff;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+          stroke-width: 1.1930027515339008px;
+        "
      />
      <path
        d="M182.8,346.58s4,21.11,2,29.82-13.74,10.06-16.42,9.05-1.34-21.78-1.34-32.17S177.44,343.56,182.8,346.58Z"
-        style="fill:#757575;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.1930027515339008px"
+        style="
+          fill: #757575;
+          stroke: #263238;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+          stroke-width: 1.1930027515339008px;
+        "
      />
      <path
        d="M97.34,290.27S95,304,96.67,310.72a28.62,28.62,0,0,0,4.69,10.39s-8.38,12.4-6.7,22.78,6,11.73,6,11.73-3.68,19.11,3,25.81,21.45,14.07,37.87,11.06,27.48-3.69,30.83-9.39,1.34-30.83,1.34-30.83-.67-27.81-1.34-44.91-3-30.83-11.06-37.53-43.57,3.69-54.29,10.72S97.34,290.27,97.34,290.27Z"
-        style="fill:#92E3A9"
+        style="fill: #92e3a9"
      />
      <g style="clip-path: url(#freepik--clip-path-3--inject-16)">
        <path
@@ -267,15 +549,33 @@
      </g>
      <path
        d="M97.34,290.27S95,304,96.67,310.72a28.62,28.62,0,0,0,4.69,10.39s-8.38,12.4-6.7,22.78,6,11.73,6,11.73-3.68,19.11,3,25.81,21.45,14.07,37.87,11.06,27.48-3.69,30.83-9.39,1.34-30.83,1.34-30.83-.67-27.81-1.34-44.91-3-30.83-11.06-37.53-43.57,3.69-54.29,10.72S97.34,290.27,97.34,290.27Z"
-        style="fill:none;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.1930027515339008px"
+        style="
+          fill: none;
+          stroke: #263238;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+          stroke-width: 1.1930027515339008px;
+        "
      />
      <path
        d="M101.36,321.11a40.77,40.77,0,0,0,35.86,5"
-        style="fill:none;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.1930027515339008px"
+        style="
+          fill: none;
+          stroke: #263238;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+          stroke-width: 1.1930027515339008px;
+        "
      />
      <path
        d="M100.69,355.62s17.09,16.76,45.25.67"
-        style="fill:none;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.1930027515339008px"
+        style="
+          fill: none;
+          stroke: #263238;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+          stroke-width: 1.1930027515339008px;
+        "
      />
      <path
        d="M167.38,273.85s-6.36-9.72-15.08-15.08-31.16-9.38-40.21-11.06-18.77-1-21.45,9-2.35,26.81.33,34.18,13.74,11.73,22.46,6.71,32.84-24.47,41.22-25.47S166.71,277.54,167.38,273.85Z"
@@ -289,19 +589,37 @@
      </g>
      <path
        d="M167.38,273.85s-6.36-9.72-15.08-15.08-31.16-9.38-40.21-11.06-18.77-1-21.45,9-2.35,26.81.33,34.18,13.74,11.73,22.46,6.71,32.84-24.47,41.22-25.47S166.71,277.54,167.38,273.85Z"
-        style="fill:none;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.1930027515339008px"
+        style="
+          fill: none;
+          stroke: #263238;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+          stroke-width: 1.1930027515339008px;
+        "
      />
      <path
        d="M203.58,319.43s7.71,1,12.73,3,8.38,14.41,6.37,16.08-6-.33-6-.33a49.07,49.07,0,0,1-9.72,2.34C202.91,340.88,198.55,321.78,203.58,319.43Z"
-        style="fill:#92E3A9;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.1930027515339008px"
+        style="
+          fill: #92e3a9;
+          stroke: #263238;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+          stroke-width: 1.1930027515339008px;
+        "
      />
      <path
        d="M178.11,318.42s1.34,0,8.71-3.35,13.41-3.35,18.1,4,6.7,16.43,4,21.79-12.73,9.05-18.1,9.05-6-7-6-7-.67-11.06-4-15.08S176.77,319.43,178.11,318.42Z"
-        style="fill:#757575;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.1930027515339008px"
+        style="
+          fill: #757575;
+          stroke: #263238;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+          stroke-width: 1.1930027515339008px;
+        "
      />
      <path
        d="M153.31,273.85c7.37-2.68,16.76-1,20.11,8.38s6.36,36.86,6.36,36.86,8.38,1,11.73,4.7,5,13.07,4.36,17.76-12.4,13.4-25.8,13.74-23.13-6-27.82-23.13S139.42,289,139.42,289s1.7-7.67,4.26-9.38"
-        style="fill:#92E3A9"
+        style="fill: #92e3a9"
      />
      <g style="clip-path: url(#freepik--clip-path-5--inject-16)">
        <path
@@ -311,11 +629,23 @@
      </g>
      <path
        d="M153.31,273.85c7.37-2.68,16.76-1,20.11,8.38s6.36,36.86,6.36,36.86,8.38,1,11.73,4.7,5,13.07,4.36,17.76-12.4,13.4-25.8,13.74-23.13-6-27.82-23.13S139.42,289,139.42,289s1.7-7.67,4.26-9.38"
-        style="fill:none;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.1930027515339008px"
+        style="
+          fill: none;
+          stroke: #263238;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+          stroke-width: 1.1930027515339008px;
+        "
      />
      <path
        d="M179.78,319.09S182.4,331.3,168.94,338"
-        style="fill:none;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.1930027515339008px"
+        style="
+          fill: none;
+          stroke: #263238;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+          stroke-width: 1.1930027515339008px;
+        "
      />
    </g>
    <g id="freepik--Text--inject-16">
@@ -350,14 +680,23 @@
        d="M142.77,134v1.42h-1.2v-1.5c0-2-.79-3.6-2.89-3.6s-2.89,1.56-2.89,3.6v9.93c0,2,.79,3.57,2.89,3.57s2.89-1.53,2.89-3.57v-4.12H139v-1.14h3.73v5.18c0,2.75-1.2,4.82-4.12,4.82s-4.11-2.07-4.11-4.82V134c0-2.75,1.2-4.82,4.11-4.82S142.77,131.27,142.77,134Z"
        style="fill: #263238"
      />
-      <path d="M151.34,138.2v1.14h-5.21v8h6.27v1.15h-7.53V129.36h7.53v1.15h-6.27v7.69Z" style="fill:#263238" />
-      <path d="M159.82,148.45h-1.15V129.36h1.64L166,145.48V129.36h1.14v19.09h-1.39l-6-17Z" style="fill:#263238" />
+      <path
+        d="M151.34,138.2v1.14h-5.21v8h6.27v1.15h-7.53V129.36h7.53v1.15h-6.27v7.69Z"
+        style="fill: #263238"
+      />
+      <path
+        d="M159.82,148.45h-1.15V129.36h1.64L166,145.48V129.36h1.14v19.09h-1.39l-6-17Z"
+        style="fill: #263238"
+      />
      <path
        d="M169.26,134c0-2.78,1.28-4.82,4.17-4.82s4.23,2,4.23,4.82v9.77c0,2.78-1.29,4.82-4.23,4.82s-4.17-2-4.17-4.82Zm1.25,9.85c0,2.07.82,3.6,2.92,3.6s3-1.53,3-3.6v-9.93c0-2.07-.84-3.6-3-3.6s-2.92,1.53-2.92,3.6Z"
        style="fill: #263238"
      />
      <path d="M183,148.45V130.51h-3.87v-1.15h9v1.15h-3.9v17.94Z" style="fill: #263238" />
-      <path d="M200.08,138.66v1.14h-4.94v8.65h-1.25V129.36h7.25v1.15h-6v8.15Z" style="fill:#263238" />
+      <path
+        d="M200.08,138.66v1.14h-4.94v8.65h-1.25V129.36h7.25v1.15h-6v8.15Z"
+        style="fill: #263238"
+      />
      <path
        d="M203,134c0-2.78,1.28-4.82,4.17-4.82s4.23,2,4.23,4.82v9.77c0,2.78-1.28,4.82-4.23,4.82s-4.17-2-4.17-4.82Zm1.25,9.85c0,2.07.82,3.6,2.92,3.6s3-1.53,3-3.6v-9.93c0-2.07-.84-3.6-3-3.6s-2.92,1.53-2.92,3.6Z"
        style="fill: #263238"
@@ -366,7 +705,10 @@
        d="M214.64,143.84c0,2,.77,3.63,2.87,3.63s2.86-1.58,2.86-3.63V129.36h1.17v14.43c0,2.72-1.14,4.82-4.06,4.82s-4.09-2.1-4.09-4.82V129.36h1.25Z"
        style="fill: #263238"
      />
-      <path d="M224.84,148.45H223.7V129.36h1.63l5.73,16.12V129.36h1.15v19.09h-1.4l-6-17Z" style="fill:#263238" />
+      <path
+        d="M224.84,148.45H223.7V129.36h1.63l5.73,16.12V129.36h1.15v19.09h-1.4l-6-17Z"
+        style="fill: #263238"
+      />
      <path
        d="M238.56,129.36c2.95,0,4.23,1.94,4.23,4.75v9.59c0,2.81-1.28,4.75-4.23,4.75h-4.2V129.36Zm0,17.94c2.13,0,3-1.44,3-3.54v-9.71c0-2.1-.9-3.54-3-3.54h-2.91V147.3Z"
        style="fill: #263238"
--- a/components/logo/dogpow.vue
+++ b/components/logo/dogpow.vue
@@ -166,10 +166,7 @@
        points="148.42 125.1 144.55 124.61 144.67 123.62 147 123.91 144.29 115.4 147.74 115.78 144.52 107.03 149.02 111.54 143.76 98.72 144.68 98.34 151.83 115.77 147.03 110.96 149.24 116.95 145.71 116.56 148.42 125.1"
        style="fill: #263238"
      />
-      <path
-        d="M125.66,245.62c-.29-3.08-.35-5.06-.35-5.08l1,0s.06,2,.34,5Z"
-        style="fill: #263238"
-      />
+      <path d="M125.66,245.62c-.29-3.08-.35-5.06-.35-5.08l1,0s.06,2,.34,5Z" style="fill: #263238" />
      <path
        d="M130.35,297.4l-.91-.4c.06-.15,6.2-14.48,1.35-27.28a87.31,87.31,0,0,1-4.56-19.09l1-.13a86.36,86.36,0,0,0,4.5,18.86C136.72,282.55,130.42,297.25,130.35,297.4Z"
        style="fill: #263238"
--- a/components/logo/dogs.vue
+++ b/components/logo/dogs.vue
@@ -228,10 +228,7 @@
          d="M400.62,161.5a.62.62,0,1,1-.83-.29A.62.62,0,0,1,400.62,161.5Z"
          style="fill: #37474f"
        />
-        <path
-          d="M406.14,160.52a.63.63,0,0,1-.29.83.62.62,0,1,1,.29-.83Z"
-          style="fill: #37474f"
-        />
+        <path d="M406.14,160.52a.63.63,0,0,1-.29.83.62.62,0,1,1,.29-.83Z" style="fill: #37474f" />
        <path
          d="M404.73,165.35a.62.62,0,1,1-.83-.29A.62.62,0,0,1,404.73,165.35Z"
          style="fill: #37474f"
@@ -470,10 +467,7 @@
          d="M252.36,209.6a.62.62,0,0,1-.29.83.63.63,0,1,1-.54-1.13A.62.62,0,0,1,252.36,209.6Z"
          style="fill: #37474f"
        />
-        <path
-          d="M251,214.47a.63.63,0,0,1-1.13.54.63.63,0,1,1,1.13-.54Z"
-          style="fill: #37474f"
-        />
+        <path d="M251,214.47a.63.63,0,0,1-1.13.54.63.63,0,1,1,1.13-.54Z" style="fill: #37474f" />
        <path
          d="M261.27,216.08a8.7,8.7,0,0,1,1.91-1.27,13.47,13.47,0,0,0,1.74-1.2,1,1,0,0,1,.54-.22,1.14,1.14,0,0,1,.72.31,15.57,15.57,0,0,1,3.25,3.53.18.18,0,0,1,.06.15.28.28,0,0,1-.09.1,9.5,9.5,0,0,1-8.59,1.28c-.58-.21-1.64-.58-1.11-1.26A9.64,9.64,0,0,1,261.27,216.08Z"
        />
--- a/components/main/footer.vue
+++ b/components/main/footer.vue
@@ -16,10 +16,14 @@ const path = computed(() => route.fullPath.replace('/', ''))

      <div class="border-t dark:border-gray-800 mt-5 text-center p-2">
        © 2020-2024 No Right is reserved. Who cares 🤷‍♂️? It's
-        <a href="https://github.com/nurriyad/blog" target="_blank" rel="nofollow" class="underline">open source</a>
+        <a href="https://github.com/nurriyad/blog" target="_blank" rel="nofollow" class="underline"
+          >open source</a
+        >
        anyway.

-        <a href="/rss.xml" aria-label="Website RSS Feed"> <span class="px-3"><Icon name="bi:rss-fill" /></span></a>
+        <a href="/rss.xml" aria-label="Website RSS Feed">
+          <span class="px-3"><Icon name="bi:rss-fill" /></span
+        ></a>
      </div>
    </div>
  </div>
--- a/components/main/header.vue
+++ b/components/main/header.vue
@@ -24,9 +24,7 @@ function isActive(path: string) {
      </ul>
      <ul class="flex items-center space-x-3 sm:space-x-6 text-sm sm:text-lg">
        <li>
-          <NuxtLink to="/blogs" :class="{ underline: isActive('/blogs') }">
-            Blogs
-          </NuxtLink>
+          <NuxtLink to="/blogs" :class="{ underline: isActive('/blogs') }"> Blogs </NuxtLink>
        </li>
        <li>
          <NuxtLink to="/categories" :class="{ underline: isActive('/categories') }">
@@ -34,7 +32,11 @@ function isActive(path: string) {
          </NuxtLink>
        </li>
        <li title="About Me">
-          <NuxtLink to="/about" aria-label="About me" :class="{ underline: $route.path === '/about' }">
+          <NuxtLink
+            to="/about"
+            aria-label="About me"
+            :class="{ underline: $route.path === '/about' }"
+          >
            About
          </NuxtLink>
        </li>
--- a/components/main/hero.vue
+++ b/components/main/hero.vue
@@ -6,7 +6,9 @@ import { homePage } from '~/data'
  <div class="container mx-auto">
    <div class="grid grid-cols-1 sm:grid-cols-2 items-center">
      <div class="px-6">
-        <h1 class="text-black dark:text-zinc-300   font-semibold leading-tight text-4xl md:text-5xl my-5">
+        <h1
+          class="text-black dark:text-zinc-300 font-semibold leading-tight text-4xl md:text-5xl my-5"
+        >
          {{ homePage.title }}
        </h1>
        <p class="dark:text-zinc-300">
--- a/components/main/recent.vue
+++ b/components/main/recent.vue
@@ -36,9 +36,7 @@ useHead({
  <div class="pb-10 px-4">
    <div class="flex flex-row items-center space-x-3 pt-5 pb-3">
      <Icon name="mdi:star-three-points-outline" size="2em" class="text-black dark:text-zinc-300" />
-      <h2 class="text-4xl font-semibold text-black dark:text-zinc-300   ">
-        Recent Post
-      </h2>
+      <h2 class="text-4xl font-semibold text-black dark:text-zinc-300">Recent Post</h2>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
--- a/components/main/trending.vue
+++ b/components/main/trending.vue
@@ -36,9 +36,7 @@ useHead({
  <div class="px-4">
    <div class="flex flex-row items-center space-x-3 pt-5 pb-3">
      <Icon name="mdi:star-three-points-outline" size="2em" class="text-black dark:text-zinc-300" />
-      <h2 class="text-4xl font-semibold text-black dark:text-zinc-300  ">
-        Trending Post
-      </h2>
+      <h2 class="text-4xl font-semibold text-black dark:text-zinc-300">Trending Post</h2>
    </div>
    <div class="grid grid-cols-1">
      <template v-for="post in formattedData" :key="post.title">
--- a/fetch-content-data-render-pages.md
+++ b/fetch-content-data-render-pages.md
@@ -17,7 +17,6 @@ Nuxt.js is a popular open-source framework for building Vue.js applications. Wit

 The first step is to install the necessary dependencies for Nuxt Content v2. To do this, run the following command:

-
 ```js
 npm install @nuxt/content@next

--- a/vue3-awesome-library.md
+++ b/vue3-awesome-library.md
@@ -5,7 +5,7 @@ description: Vue.js is a popular JavaScript framework for building web applicati
 image: /blogs-img/blog5.jpg
 alt: Some Awesome Libraries For Vue3
 ogImage: /blogs-img/blog5.jpg
-tags: ['vue',"javascript"]
+tags: ['vue', 'javascript']
 published: true
 ---

--- a/how-to-fix-vuex-type-issue.md
+++ b/how-to-fix-vuex-type-issue.md
@@ -5,7 +5,7 @@ description: In recent vue project we see that vuex type not working properly. W
 image: /blogs-img/blog6.jpg
 alt: How to fix vuex type issue
 ogImage: /blogs-img/blog6.jpg
-tags: ['vue',"vuex"]
+tags: ['vue', 'vuex']
 published: true
 ---

@@ -17,13 +17,14 @@ In recent version of our vue project, when we try to add vuex we see type error

 1. Create a `vuex.d.ts` file inside of your route project.
 2. Pase this code in that file
-```ts
-declare module "vuex" {
-  export * from "vuex/types/index.d.ts";
-  export * from "vuex/types/helpers.d.ts";
-  export * from "vuex/types/logger.d.ts";
-  export * from "vuex/types/vue.d.ts";
-}

+```ts
+declare module 'vuex' {
+  export * from 'vuex/types/index.d.ts'
+  export * from 'vuex/types/helpers.d.ts'
+  export * from 'vuex/types/logger.d.ts'
+  export * from 'vuex/types/vue.d.ts'
+}
 ```
+
 3. That's it. Your are ok to go.
--- a/data/index.ts
+++ b/data/index.ts
@@ -1,17 +1,21 @@
 export const navbarData = {
-  homeTitle: 'Riyad\'s Blog',
+  homeTitle: "Riyad's Blog",
 }

 export const footerData = {
  author: 'Al Asad Nur Riyad',
-  aboutAuthor: 'Hi! I am Riyad, a Tech enthusiast, problem solver and software engineer. Currently working at Appscode Inc.',
-  authorInterest: 'I have a fair amount of knowledge of Javascript, Typescript, VueJs, and Nuxt. If you have an interesting idea, either open source or paid let\'s connect.',
-  aboutTheSite: 'This is a personal blog site built with Nuxt3, TailwindCSS, NuxtContent, Nuxt Icon. Currently it\'s deployed in Vercel.',
+  aboutAuthor:
+    'Hi! I am Riyad, a Tech enthusiast, problem solver and software engineer. Currently working at Appscode Inc.',
+  authorInterest:
+    "I have a fair amount of knowledge of Javascript, Typescript, VueJs, and Nuxt. If you have an interesting idea, either open source or paid let's connect.",
+  aboutTheSite:
+    "This is a personal blog site built with Nuxt3, TailwindCSS, NuxtContent, Nuxt Icon. Currently it's deployed in Vercel.",
 }

 export const homePage = {
  title: 'Welcome To My Blog Site',
-  description: 'Get Web Development, Javascript, Typescript, NodeJs, Vue, and Nuxt, Related Articles, Tips, Learning resources and more.',
+  description:
+    'Get Web Development, Javascript, Typescript, NodeJs, Vue, and Nuxt, Related Articles, Tips, Learning resources and more.',
 }

 export const blogsPage = {
@@ -21,20 +25,26 @@ export const blogsPage = {

 export const categoryPage = {
  title: 'Categories',
-  description: 'Blow this category is generated from all the tags are mentioned in the different blog post',
+  description:
+    'Blow this category is generated from all the tags are mentioned in the different blog post',
 }

 export const aboutPage = {
  title: 'Al Asad Nur Riyad',
  description: 'Software Engineer, Problem Solver, Web Enthusiast.',
-  aboutMe: 'Hello, fellow human! I\'m a software wizard who spends most of his day crafting code spells at @AppsCode in the Bytebuilders team. When I\'m not crafting code, you can find me summoning solutions to problems on online judges. Just don\'t ask me to cast any love spells, my magic only works on machines!',
+  aboutMe:
+    "Hello, fellow human! I'm a software wizard who spends most of his day crafting code spells at @AppsCode in the Bytebuilders team. When I'm not crafting code, you can find me summoning solutions to problems on online judges. Just don't ask me to cast any love spells, my magic only works on machines!",
 }

 export const seoData = {
-  description: 'Riyad, Software Engineer at AppsCode, with over 2.5+ years experience in software development.',
-  ogTitle: 'Riyad codes and helps others learn Javascript, Typescript, Vue, Nuxt, & Problem Solving',
-  twitterDescription: 'My blog website, where I play around with Nuxt, Vue, and more and showcase my blog, resources, etc',
-  image: 'https://res.cloudinary.com/dmecmyphj/image/upload/v1673548905/nuxt-blog/cover_ntgs6u.webp',
+  description:
+    'Riyad, Software Engineer at AppsCode, with over 2.5+ years experience in software development.',
+  ogTitle:
+    'Riyad codes and helps others learn Javascript, Typescript, Vue, Nuxt, & Problem Solving',
+  twitterDescription:
+    'My blog website, where I play around with Nuxt, Vue, and more and showcase my blog, resources, etc',
+  image:
+    'https://res.cloudinary.com/dmecmyphj/image/upload/v1673548905/nuxt-blog/cover_ntgs6u.webp',
  mySite: 'https://blog-nurriyad.vercel.app',
  twitterHandle: '@qdnvubp',
  mailAddress: 'asadnurriyad@gmail.com',
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -0,0 +1,8 @@
+// @ts-check
+import withNuxt from './.nuxt/eslint.config.mjs'
+
+export default withNuxt({
+  rules: {
+    'vue/html-self-closing': 'off',
+  },
+})
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -2,6 +2,24 @@ import { navbarData, seoData } from './data'

 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
+  compatibilityDate: '2024-09-30',
+
+  modules: [
+    'nuxt-icon',
+    '@nuxt/image',
+    '@nuxt/fonts',
+    '@nuxt/eslint',
+    '@vueuse/nuxt',
+    '@nuxt/content',
+    'nuxt-og-image',
+    '@nuxtjs/robots',
+    '@nuxtjs/sitemap',
+    '@nuxtjs/color-mode',
+    '@nuxtjs/tailwindcss',
+    '@formkit/auto-animate',
+    '@stefanobartoletti/nuxt-social-share',
+  ],
+
  app: {
    head: {
      charset: 'utf-16',
@@ -32,10 +50,7 @@ export default defineNuxtConfig({
  nitro: {
    prerender: {
      crawlLinks: true,
-      routes: [
-        '/',
-        '/rss.xml',
-      ],
+      routes: ['/', '/rss.xml'],
    },
  },

@@ -45,26 +60,9 @@ export default defineNuxtConfig({
    fallback: 'light',
  },

-  modules: [
-    'nuxt-icon',
-    '@nuxt/image',
-    '@nuxt/fonts',
-    '@vueuse/nuxt',
-    'nuxt-og-image',
-    '@nuxt/content',
-    '@nuxtjs/robots',
-    '@nuxtjs/sitemap',
-    '@nuxtjs/color-mode',
-    '@nuxtjs/tailwindcss',
-    '@formkit/auto-animate',
-    '@stefanobartoletti/nuxt-social-share',
-  ],
-
  content: {
    highlight: {
      theme: 'dracula',
    },
  },
-
-  compatibilityDate: '2024-09-30',
 })
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -10,12 +10,14 @@
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare",
    "lint": "eslint .",
-    "lint:fix": "eslint . --fix"
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --check ./",
+    "format:fix": "prettier --write ./"
  },
  "devDependencies": {
-    "@antfu/eslint-config": "^0.42.0",
    "@formkit/auto-animate": "^0.8.2",
    "@nuxt/content": "^2.12.1",
+    "@nuxt/eslint": "^0.6.1",
    "@nuxt/fonts": "^0.10.2",
    "@nuxt/image": "^1.8.0",
    "@nuxtjs/color-mode": "^3.3.2",
@@ -27,11 +29,13 @@
    "@tailwindcss/typography": "^0.5.10",
    "@vueuse/core": "^10.9.0",
    "@vueuse/nuxt": "^10.9.0",
-    "eslint": "^8.39.0",
+    "eslint-config-prettier": "^9.1.0",
    "feed": "^4.2.2",
-    "nuxt": "^3.13.2",
+    "nuxt": "^3.14.159",
    "nuxt-icon": "^0.6.8",
    "nuxt-og-image": "^3.0.0-rc.38",
-    "typescript": "^5.3.3"
-  }
+    "prettier": "^3.3.3",
+    "typescript": "^5.6.3"
+  },
+  "packageManager": "pnpm@9.1.1+sha256.9551e803dcb7a1839fdf5416153a844060c7bce013218ce823410532504ac10b"
 }
--- a/pages/about.vue
+++ b/pages/about.vue
@@ -65,13 +65,7 @@ defineOgImageComponent('About', {
            </div>
          </div>
          <div class="sm:hidden block col-span-3 pb-5 dark:text-[#F1F2F4]">
-            <NuxtImg
-              src="/riyad.jpg"
-              width="125"
-              height="115"
-              quality="50"
-              class="rounded-md"
-            />
+            <NuxtImg src="/riyad.jpg" width="125" height="115" quality="50" class="rounded-md" />
          </div>
        </div>
        <h3 class="text-base sm:text-3xl font-semibold pb-7 sm:pb-12">
@@ -81,13 +75,7 @@ defineOgImageComponent('About', {
        <p>{{ aboutPage.aboutMe }}</p>
      </div>
      <div class="hidden sm:block col-span-3">
-        <NuxtImg
-          src="/riyad.jpg"
-          width="450"
-          height="500"
-          quality="50"
-          class="rounded-md"
-        />
+        <NuxtImg src="/riyad.jpg" width="450" height="500" quality="50" class="rounded-md" />
      </div>
    </div>
  </div>
--- a/pages/blogs/[blog].vue
+++ b/pages/blogs/[blog].vue
@@ -4,10 +4,11 @@ import { navbarData, seoData } from '~/data'

 const { path } = useRoute()

-const { data: articles, error } = await useAsyncData(`blog-post-${path}`, () => queryContent(path).findOne())
+const { data: articles, error } = await useAsyncData(`blog-post-${path}`, () =>
+  queryContent(path).findOne(),
+)

-if (error.value)
-  navigateTo('/404')
+if (error.value) navigateTo('/404')

 const data = computed<BlogPost>(() => {
  return {
@@ -83,7 +84,6 @@ defineOgImageComponent('Test', {
  title: data.value.title || '',
  description: data.value.description || '',
  link: data.value.ogImage,
-
 })
 </script>

@@ -99,8 +99,7 @@ defineOgImageComponent('Test', {
        :tags="data.tags"
      />
      <div
-        class="prose prose-pre:max-w-xs sm:prose-pre:max-w-full prose-sm sm:prose-base md:prose-lg
-        prose-h1:no-underline max-w-5xl mx-auto prose-zinc dark:prose-invert prose-img:rounded-lg"
+        class="prose prose-pre:max-w-xs sm:prose-pre:max-w-full prose-sm sm:prose-base md:prose-lg prose-h1:no-underline max-w-5xl mx-auto prose-zinc dark:prose-invert prose-img:rounded-lg"
      >
        <ContentRenderer v-if="articles" :value="articles">
          <template #empty>
--- a/pages/blogs/index.vue
+++ b/pages/blogs/index.vue
@@ -6,7 +6,8 @@ const pageNumber = ref(1)
 const searchTest = ref('')

 const formattedData = computed(() => {
-  return data.value?.map((articles) => {
+  return (
+    data.value?.map((articles) => {
      return {
        path: articles._path,
        title: articles.title || 'no-title available',
@@ -19,31 +20,33 @@ const formattedData = computed(() => {
        published: articles.published || false,
      }
    }) || []
+  )
 })

 const searchData = computed(() => {
-  return formattedData.value.filter((data) => {
+  return (
+    formattedData.value.filter((data) => {
      const lowerTitle = data.title.toLocaleLowerCase()
-    if (lowerTitle.search(searchTest.value) !== -1)
-      return true
+      if (lowerTitle.search(searchTest.value) !== -1) return true
      else return false
    }) || []
+  )
 })

 const paginatedData = computed(() => {
-  return searchData.value.filter((data, idx) => {
-    const startInd = ((pageNumber.value - 1) * elementPerPage.value)
-    const endInd = (pageNumber.value * elementPerPage.value) - 1
+  return (
+    searchData.value.filter((data, idx) => {
+      const startInd = (pageNumber.value - 1) * elementPerPage.value
+      const endInd = pageNumber.value * elementPerPage.value - 1

-    if (idx >= startInd && idx <= endInd)
-      return true
+      if (idx >= startInd && idx <= endInd) return true
      else return false
    }) || []
+  )
 })

 function onPreviousPageClick() {
-  if (pageNumber.value > 1)
-    pageNumber.value -= 1
+  if (pageNumber.value > 1) pageNumber.value -= 1
 }

 const totalPage = computed(() => {
@@ -53,8 +56,7 @@ const totalPage = computed(() => {
 })

 function onNextPageClick() {
-  if (pageNumber.value < totalPage.value)
-    pageNumber.value += 1
+  if (pageNumber.value < totalPage.value) pageNumber.value += 1
 }

 useHead({
@@ -88,7 +90,7 @@ defineOgImage({
        placeholder="Search"
        type="text"
        class="block w-full bg-[#F1F2F4] dark:bg-slate-900 dark:placeholder-zinc-500 text-zinc-300 rounded-md border-gray-300 dark:border-gray-800 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
-      >
+      />
    </div>

    <div v-auto-animate class="space-y-5 my-5 px-4">
@@ -106,20 +108,24 @@ defineOgImage({
        />
      </template>

-      <ArchiveCard
-        v-if="paginatedData.length <= 0"
-        title="No Post Found"
-        image="/not-found.jpg"
-      />
+      <ArchiveCard v-if="paginatedData.length <= 0" title="No Post Found" image="/not-found.jpg" />
    </div>

    <div class="flex justify-center items-center space-x-6">
      <button :disabled="pageNumber <= 1" @click="onPreviousPageClick">
-        <Icon name="mdi:code-less-than" size="30" :class="{ 'text-sky-700 dark:text-sky-400': pageNumber > 1 }" />
+        <Icon
+          name="mdi:code-less-than"
+          size="30"
+          :class="{ 'text-sky-700 dark:text-sky-400': pageNumber > 1 }"
+        />
      </button>
      <p>{{ pageNumber }} / {{ totalPage }}</p>
      <button :disabled="pageNumber >= totalPage" @click="onNextPageClick">
-        <Icon name="mdi:code-greater-than" size="30" :class="{ 'text-sky-700 dark:text-sky-400': pageNumber < totalPage }" />
+        <Icon
+          name="mdi:code-greater-than"
+          size="30"
+          :class="{ 'text-sky-700 dark:text-sky-400': pageNumber < totalPage }"
+        />
      </button>
    </div>
  </main>
--- a/pages/categories/[category].vue
+++ b/pages/categories/[category].vue
@@ -6,8 +6,7 @@ const category = computed(() => {
  const name = route.params.category || ''
  let strName = ''

-  if (Array.isArray(name))
-    strName = name.at(0) || ''
+  if (Array.isArray(name)) strName = name.at(0) || ''
  else strName = name
  return strName
 })
--- a/pages/categories/index.vue
+++ b/pages/categories/index.vue
@@ -1,7 +1,9 @@
 <script lang="ts" setup>
 import { makeFirstCharUpper } from '@/utils/helper'

-const { data } = await useAsyncData('all-blog-post-for-category', () => queryContent('/blogs').sort({ _id: -1 }).find())
+const { data } = await useAsyncData('all-blog-post-for-category', () =>
+  queryContent('/blogs').sort({ _id: -1 }).find(),
+)

 const allTags = new Map()

@@ -11,8 +13,7 @@ data.value?.forEach((blog) => {
    if (allTags.has(tag)) {
      const cnt = allTags.get(tag)
      allTags.set(tag, cnt + 1)
-    }
-    else {
+    } else {
      allTags.set(tag, 1)
    }
  })
@@ -34,7 +35,8 @@ const siteData = useSiteConfig()
 defineOgImage({
  props: {
    title: 'Categories',
-    description: 'Below All the topics are listed on which either I have written a blog or will write a blog in near future.',
+    description:
+      'Below All the topics are listed on which either I have written a blog or will write a blog in near future.',
    siteName: siteData.url,
  },
 })
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/server/routes/rss.xml.ts
+++ b/server/routes/rss.xml.ts
@@ -7,8 +7,8 @@ export default defineEventHandler(async (event) => {
  setHeader(event, 'content-type', 'text/xml')
  const docs = await serverQueryContent(event).sort({ date: -1 }).find()
  const feed = new Feed({
-    title: 'Riyad\'s personal blog site',
-    description: 'Riyad\'s personal blog site',
+    title: "Riyad's personal blog site",
+    description: "Riyad's personal blog site",
    id: basePath,
    link: basePath,
    language: 'en',
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -11,8 +11,5 @@ module.exports = {
      },
    },
  },
-  plugins: [
-    require('@tailwindcss/typography'),
-    require('@tailwindcss/forms'),
-  ],
+  plugins: [require('@tailwindcss/typography'), require('@tailwindcss/forms')],
 }
--- a/utils/helper.ts
+++ b/utils/helper.ts
@@ -1,6 +1,5 @@
 export function makeFirstCharUpper(val: string) {
-  if (val === '')
-    return val
+  if (val === '') return val
  const firstChar = val.at(0)?.toLocaleUpperCase() || ''
  const otherChar = val.slice(1)
  return firstChar + otherChar