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

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

.eslintrc

@@ -1,4 +0,0 @@
-{
-  "extends": "@antfu",
-  "ignorePatterns":["/content/**","/.github/**"]
-}

.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'
+          node-version: 22
-          cache: 'npm'
+          cache: 'pnpm'
 
-      - name: Install dependency
+      - name: Install dependencies
-        run: npm ci
+        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

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "semi": false,
+  "printWidth": 100
+}

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
-  "prettier.enable": false,
+  "editor.formatOnSave": true,
-  "editor.formatOnSave": false,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit"
   },

README.md

@@ -12,9 +12,10 @@
     <img width="200" src="./assets/images/logo.png">
 </p>
 
- 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/)
+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

app.vue

@@ -39,7 +39,7 @@ useHead({
   filter: blur(1rem);
 }
 
-html.dark{
+html.dark {
   color-scheme: dark;
 }
 </style>

assets/css/tailwind.css

@@ -1,4 +1,3 @@
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

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>

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 formattedTitle = computed(() =>
-const formattedDescription = computed(() => props.description.length > 100 ? `${props.description}...` : props.description)
+  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'))
+  if (props.link.endsWith('jpg') || props.link.endsWith('png')) return props.link
-    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>

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">
@@ -45,11 +49,15 @@ withDefaults(defineProps<Props>(), {
         <div class="text-black dark:text-zinc-300 text-sm mt-2 mb-1 md:flex md:space-x-6">
           <div class="flex items-center">
             <LogoDate />
-            <p> {{ date }}</p>
+            <p>{{ date }}</p>
           </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>

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">

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>

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">
+      <h1 class="text-sm font-bold mb-3 border-b dark:border-gray-800 pb-2">Table Of Content</h1>
-        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 }}

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">

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>
 

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
+    class="text-[#F1F2F4] px-5 py-3 rounded hover:underline rand-bg-color hover:scale-[1.05] transition-all duration-500"
-    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>

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">

components/category/topic.vue

@@ -8,8 +8,7 @@ const category = computed(() => {
   const name = route.params.category || ''
   let strName = ''
 
-  if (Array.isArray(name))
+  if (Array.isArray(name)) strName = name.at(0) || ''
-    strName = name.at(0) || ''
   else strName = name
   return makeFirstCharUpper(strName)
 })

components/footer/connect.vue

@@ -4,10 +4,8 @@ import { footerData, seoData } from '~/data'
 
 <template>
   <div>
-    <p class="text-black dark:text-zinc-300   text-base font-semibold">
+    <p class="text-black dark:text-zinc-300 text-base font-semibold">Connect With Me</p>
-      Connect With Me
+    <p class="dark:text-zinc-300">
-    </p>
-    <p class="dark:text-zinc-300  ">
       {{ footerData.authorInterest }}
     </p>
 

components/footer/developer.vue

@@ -7,7 +7,7 @@ import { footerData } from '~/data'
     <p class="text-black dark:text-zinc-300 text-2xl py-1 font-semibold">
       {{ footerData.author }}
     </p>
-    <p class="py-2 dark:text-zinc-300  ">
+    <p class="py-2 dark:text-zinc-300">
       {{ footerData.aboutAuthor }}
     </p>
     <div class="my-3 space-x-3 pb-3">

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">
+    <p class="text-black dark:text-zinc-300 text-base font-semibold">Quick Link</p>
-      Quick Link
+    <NuxtLink to="/" class="hover:underline"> Home </NuxtLink>
-    </p>
+    <NuxtLink to="/blogs" class="hover:underline"> Blogs </NuxtLink>
-    <NuxtLink to="/" class="hover:underline">
+    <NuxtLink to="/categories" class="hover:underline"> Categories </NuxtLink>
-      Home
+    <NuxtLink to="/about" class="hover:underline"> About Me </NuxtLink>
-    </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>

components/footer/site.vue

@@ -4,10 +4,8 @@ import { footerData } from '~/data'
 
 <template>
   <div>
-    <p class="text-black dark:text-zinc-300   text-base py-1 font-semibold">
+    <p class="text-black dark:text-zinc-300 text-base py-1 font-semibold">About This Site</p>
-      About This Site
+    <p class="py-2 dark:text-zinc-300">
-    </p>
-    <p class="py-2 dark:text-zinc-300 ">
       {{ footerData.aboutTheSite }}
     </p>
   </div>

components/logo/404.vue

@@ -1,387 +1,729 @@
 <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"
-        style="fill:#fff;opacity:0.7000000000000001"
+        style="fill: #fff; opacity: 0.7000000000000001"
       />
     </g>
     <g id="freepik--Hole--inject-16">
       <ellipse
-        cx="341.49" cy="385.79" rx="72.2" ry="21.42"
+        cx="341.49"
-        style="fill:#263238;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.1930027515339008px"
+        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">
       <path
         d="M162.65,313.83a1.89,1.89,0,0,1-1-.27,2,2,0,0,1-.7-2.67c.49-.86,124.13-135.69,180.7-185.13a1,1,0,0,1,1.36.1,1,1,0,0,1-.1,1.38C286.62,176.47,164.81,312,164.32,312.85A1.92,1.92,0,0,1,162.65,313.83Z"
-        style="fill:#263238"
+        style="fill: #263238"
       />
       <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"
+        x="289.68"
-        style="fill:#92E3A9;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.1930027515339008px"
+        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 d="M338.48,273.34v-4.76a1.19,1.19,0,0,0-2.38,0v4.76Z" style="fill: #263238" />
       <path
         d="M348,261.76l0,.24a1.15,1.15,0,0,0-1-.61,1.2,1.2,0,0,0-1.2,1.2V275.3a3.67,3.67,0,0,1-3.66,3.67,3.57,3.57,0,0,1-1.46-.31,2,2,0,0,0,.3,2.58,6.34,6.34,0,0,0,1.16.11,6.05,6.05,0,0,0,6.05-6.05v-5.89h2.74Z"
-        style="fill:#263238"
+        style="fill: #263238"
       />
       <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"
+        style="fill: #263238"
       />
       <path
         d="M162.83,230.76c-1.07,1.16-1.45,2.55-.84,3.12s2,.09,3-1.06,1.45-2.54.84-3.11S163.9,229.61,162.83,230.76Z"
-        style="fill:#263238"
+        style="fill: #263238"
       />
       <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)">
+      <g style="clip-path: url(#freepik--clip-path--inject-16)">
         <path
           d="M127.17,415.47l-2.68.81L86.28,404.22v22.52A4.84,4.84,0,0,0,88.9,431l36.2,18.69a4.76,4.76,0,0,0,2.07.54Z"
-          style="opacity:0.18"
+          style="opacity: 0.18"
         />
       </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"
-        style="fill:#fff"
+        style="fill: #fff"
       />
-      <g style="clip-path:url(#freepik--clip-path-2--inject-16)">
+      <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"
-          style="fill:#fff;opacity:0.5"
+          style="fill: #fff; opacity: 0.5"
         />
         <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)">
+      <g style="clip-path: url(#freepik--clip-path-3--inject-16)">
         <path
           d="M99.73,290.27s-2.35,13.74-.67,20.45a28.43,28.43,0,0,0,4.69,10.39s-8.38,12.4-6.7,22.78,6,11.73,6,11.73-3.69,19.11,3,25.81S127.54,395.5,144,392.49s27.49-3.69,30.84-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.72S99.73,290.27,99.73,290.27Z"
-          style="opacity:0.30000000000000004"
+          style="opacity: 0.30000000000000004"
         />
       </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"
-        style="fill:#757575"
+        style="fill: #757575"
       />
-      <g style="clip-path:url(#freepik--clip-path-4--inject-16)">
+      <g style="clip-path: url(#freepik--clip-path-4--inject-16)">
         <path
           d="M148.79,272c5.11-2.13-7.67,1.7-8.52.42s8.94-7.66,11.07-8.51-12.35,2.13-11.92,0,14.05-2.56,4.68-4.69-40-7.67-46-9.8a4.94,4.94,0,0,1-1.29-.64,11.92,11.92,0,0,0-6.17,8c-2.68,10.05-2.35,26.81.33,34.18,2.34,6.42,11,10.55,19,8.2,3.69-3,7.1-6.94,12.87-10.57C134.31,281.33,143.68,274.09,148.79,272Z"
-          style="opacity:0.30000000000000004"
+          style="opacity: 0.30000000000000004"
         />
       </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)">
+      <g style="clip-path: url(#freepik--clip-path-5--inject-16)">
         <path
           d="M195.87,341.55c.67-4.69-1-14.08-4.36-17.76-.13-.15-.29-.29-.43-.43a85.25,85.25,0,0,1,.72,9.08c.67,19.67-26.82,16.38-32.36,2.13-3-7.67-3.84-41.32-12.78-43.87-5.16-1.47-6.92,2.57-7.48,6.26-.18,9.65.14,24.52,3.07,35.2,4.69,17.1,14.41,23.46,27.82,23.13S195.2,346.24,195.87,341.55Z"
-          style="opacity:0.30000000000000004"
+          style="opacity: 0.30000000000000004"
         />
       </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">
       <path
         d="M113.1,106.25c0-2.78,1.28-4.83,4.17-4.83s4.23,2,4.23,4.83V116c0,2.78-1.29,4.83-4.23,4.83s-4.17-2-4.17-4.83Zm1.25,9.84c0,2.08.82,3.6,2.92,3.6s3-1.52,3-3.6v-9.92c0-2.07-.84-3.6-3-3.6s-2.92,1.53-2.92,3.6Z"
-        style="fill:#263238"
+        style="fill: #263238"
       />
       <path
         d="M123.49,106.25c0-2.78,1.28-4.83,4.17-4.83s4.23,2,4.23,4.83V116c0,2.78-1.28,4.83-4.23,4.83s-4.17-2-4.17-4.83Zm1.25,9.84c0,2.08.82,3.6,2.92,3.6s3-1.52,3-3.6v-9.92c0-2.07-.84-3.6-3-3.6s-2.92,1.53-2.92,3.6Z"
-        style="fill:#263238"
+        style="fill: #263238"
       />
       <path
         d="M137.92,101.59c2.94,0,4.09,1.85,4.09,4.63v2.08c0,3-1.4,4.52-4.42,4.52h-2.37v7.86H134V101.59Zm-.33,10.09c2.21,0,3.16-1,3.16-3.3v-2.24c0-2.07-.71-3.41-2.83-3.41h-2.7v9Z"
-        style="fill:#263238"
+        style="fill: #263238"
       />
       <path
         d="M151.93,106.2v.4h-1.2v-.49c0-2-.76-3.54-2.83-3.54s-2.84,1.5-2.84,3.52c0,4.63,6.9,4.71,6.9,10,0,2.75-1.2,4.77-4.12,4.77s-4.11-2-4.11-4.77v-1h1.2v1.06c0,2,.79,3.52,2.89,3.52s2.89-1.48,2.89-3.52c0-4.58-6.9-4.66-6.9-10,0-2.86,1.25-4.72,4.06-4.75S151.93,103.44,151.93,106.2Z"
-        style="fill:#263238"
+        style="fill: #263238"
       />
-      <path d="M155.07,118.28v2.4h-1.22v-2.4Z" style="fill:#263238" />
+      <path d="M155.07,118.28v2.4h-1.22v-2.4Z" style="fill: #263238" />
-      <path d="M158.48,118.28v2.4h-1.22v-2.4Z" style="fill:#263238" />
+      <path d="M158.48,118.28v2.4h-1.22v-2.4Z" style="fill: #263238" />
-      <path d="M161.89,118.28v2.4h-1.23v-2.4Z" style="fill:#263238" />
+      <path d="M161.89,118.28v2.4h-1.23v-2.4Z" style="fill: #263238" />
       <path
         d="M117.13,129.36c3,0,4.09,1.85,4.09,4.64v2.07c0,3-1.39,4.53-4.41,4.53h-2.38v7.85h-1.25V129.36Zm-.32,10.09c2.2,0,3.16-1,3.16-3.3v-2.24c0-2.07-.71-3.4-2.84-3.4h-2.7v8.94Z"
-        style="fill:#263238"
+        style="fill: #263238"
       />
       <path
         d="M124.58,144.22l-1,4.23h-1.15l4.17-19.12h1.83l4.25,19.12h-1.25l-1-4.23Zm.19-1.09h5.56l-2.81-12.35Z"
-        style="fill:#263238"
+        style="fill: #263238"
       />
       <path
         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"
+        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"
+        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="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="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"
+        style="fill: #263238"
       />
       <path
         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"
+        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"
+        style="fill: #263238"
       />
       <path
         d="M302,325.13,315.61,293h8.15v32.13h3.53v6.79h-3.53v8.63h-7.34v-8.63H302Zm14.4,0V307.27l-7.54,17.86Z"
-        style="fill:#263238"
+        style="fill: #263238"
       />
       <path
         d="M330.08,304.41c0-7.6,4-12,11.34-12s11.34,4.35,11.34,12v24.72c0,7.61-4,12-11.34,12s-11.34-4.35-11.34-12Zm7.47,25.2c0,3.4,1.49,4.69,3.87,4.69s3.87-1.29,3.87-4.69V303.94c0-3.4-1.5-4.69-3.87-4.69s-3.87,1.29-3.87,4.69Z"
-        style="fill:#263238"
+        style="fill: #263238"
       />
       <path
         d="M355.82,325.13,369.4,293h8.15v32.13h3.53v6.79h-3.53v8.63h-7.34v-8.63H355.82Zm14.39,0V307.27l-7.53,17.86Z"
-        style="fill:#263238"
+        style="fill: #263238"
       />
     </g>
   </svg>

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
+      <path d="M125.66,245.62c-.29-3.08-.35-5.06-.35-5.08l1,0s.06,2,.34,5Z" style="fill: #263238" />
-        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"

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
+        <path d="M406.14,160.52a.63.63,0,0,1-.29.83.62.62,0,1,1,.29-.83Z" style="fill: #37474f" />
-          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
+        <path d="M251,214.47a.63.63,0,0,1-1.13.54.63.63,0,1,1,1.13-.54Z" style="fill: #37474f" />
-          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"
         />

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>

components/main/header.vue

@@ -14,7 +14,7 @@ function isActive(path: string) {
 
 <template>
   <div class="py-5 border-b dark:border-gray-800 font-semibold">
-    <div class="flex px-6 container max-w-5xl justify-between mx-auto items-baseline ">
+    <div class="flex px-6 container max-w-5xl justify-between mx-auto items-baseline">
       <ul class="flex items-baseline space-x-5">
         <li class="text-base sm:text-2xl font-bold">
           <NuxtLink to="/" :class="{ underline: $route.path === '/' }">
@@ -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') }">
+          <NuxtLink to="/blogs" :class="{ underline: isActive('/blogs') }"> Blogs </NuxtLink>
-            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>

components/main/hero.vue

@@ -6,10 +6,12 @@ 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  ">
+        <p class="dark:text-zinc-300">
           {{ homePage.description }}
         </p>
       </div>

components/main/recent.vue

@@ -35,10 +35,8 @@ useHead({
 <template>
   <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  " />
+      <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   ">
+      <h2 class="text-4xl font-semibold text-black dark:text-zinc-300">Recent Post</h2>
-        Recent Post
-      </h2>
     </div>
 
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">

components/main/trending.vue

@@ -35,12 +35,10 @@ useHead({
 <template>
   <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  " />
+      <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  ">
+      <h2 class="text-4xl font-semibold text-black dark:text-zinc-300">Trending Post</h2>
-        Trending Post
-      </h2>
     </div>
-    <div class="grid grid-cols-1 ">
+    <div class="grid grid-cols-1">
       <template v-for="post in formattedData" :key="post.title">
         <ArchiveCard
           :path="post.path"

content/blogs/4. 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
 

content/blogs/5. 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
 ---
 

content/blogs/6. 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.

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.',
+  aboutAuthor:
-  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.',
+    'Hi! I am Riyad, a Tech enthusiast, problem solver and software engineer. Currently working at Appscode Inc.',
-  aboutTheSite: 'This is a personal blog site built with Nuxt3, TailwindCSS, NuxtContent, Nuxt Icon. Currently it\'s deployed in Vercel.',
+  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.',
+  description:
-  ogTitle: 'Riyad codes and helps others learn Javascript, Typescript, Vue, Nuxt, & Problem Solving',
+    'Riyad, Software Engineer at AppsCode, with over 2.5+ years experience in software development.',
-  twitterDescription: 'My blog website, where I play around with Nuxt, Vue, and more and showcase my blog, resources, etc',
+  ogTitle:
-  image: 'https://res.cloudinary.com/dmecmyphj/image/upload/v1673548905/nuxt-blog/cover_ntgs6u.webp',
+    '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',

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',
+  },
+})

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: [
+      routes: ['/', '/rss.xml'],
-        '/',
-        '/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',
 })

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"
 }

pages/about.vue

@@ -25,7 +25,7 @@ defineOgImageComponent('About', {
       <div class="col-span-5 max-w-md">
         <div class="flex justify-between">
           <div>
-            <h1 class="text-xl sm:text-4xl  pb-2 font-bold ">
+            <h1 class="text-xl sm:text-4xl pb-2 font-bold">
               {{ aboutPage.title }}
             </h1>
 
@@ -65,13 +65,7 @@ defineOgImageComponent('About', {
             </div>
           </div>
           <div class="sm:hidden block col-span-3 pb-5 dark:text-[#F1F2F4]">
-            <NuxtImg
+            <NuxtImg src="/riyad.jpg" width="125" height="115" quality="50" class="rounded-md" />
-              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
+        <NuxtImg src="/riyad.jpg" width="450" height="500" quality="50" class="rounded-md" />
-          src="/riyad.jpg"
-          width="450"
-          height="500"
-          quality="50"
-          class="rounded-md"
-        />
       </div>
     </div>
   </div>

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)
+if (error.value) navigateTo('/404')
-  navigateTo('/404')
 
 const data = computed<BlogPost>(() => {
   return {
@@ -83,12 +84,11 @@ defineOgImageComponent('Test', {
   title: data.value.title || '',
   description: data.value.description || '',
   link: data.value.ogImage,
-
 })
 </script>
 
 <template>
-  <div class="px-6 container max-w-5xl mx-auto sm:grid grid-cols-12 gap-x-12 ">
+  <div class="px-6 container max-w-5xl mx-auto sm:grid grid-cols-12 gap-x-12">
     <div class="col-span-12 lg:col-span-9">
       <BlogHeader
         :title="data.title"
@@ -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
+        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"
-        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>

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)
+      if (lowerTitle.search(searchTest.value) !== -1) return true
-      return true
       else return false
     }) || []
+  )
 })
 
 const paginatedData = computed(() => {
-  return searchData.value.filter((data, idx) => {
+  return (
-    const startInd = ((pageNumber.value - 1) * elementPerPage.value)
+    searchData.value.filter((data, idx) => {
-    const endInd = (pageNumber.value * elementPerPage.value) - 1
+      const startInd = (pageNumber.value - 1) * elementPerPage.value
+      const endInd = pageNumber.value * elementPerPage.value - 1
 
-    if (idx >= startInd && idx <= endInd)
+      if (idx >= startInd && idx <= endInd) return true
-      return true
       else return false
     }) || []
+  )
 })
 
 function onPreviousPageClick() {
-  if (pageNumber.value > 1)
+  if (pageNumber.value > 1) pageNumber.value -= 1
-    pageNumber.value -= 1
 }
 
 const totalPage = computed(() => {
@@ -53,8 +56,7 @@ const totalPage = computed(() => {
 })
 
 function onNextPageClick() {
-  if (pageNumber.value < totalPage.value)
+  if (pageNumber.value < totalPage.value) pageNumber.value += 1
-    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
+      <ArchiveCard v-if="paginatedData.length <= 0" title="No Post Found" image="/not-found.jpg" />
-        v-if="paginatedData.length <= 0"
-        title="No Post Found"
-        image="/not-found.jpg"
-      />
     </div>
 
-    <div class="flex justify-center items-center space-x-6 ">
+    <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>

pages/categories/[category].vue

@@ -6,8 +6,7 @@ const category = computed(() => {
   const name = route.params.category || ''
   let strName = ''
 
-  if (Array.isArray(name))
+  if (Array.isArray(name)) strName = name.at(0) || ''
-    strName = name.at(0) || ''
   else strName = name
   return strName
 })

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,
   },
 })

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',
+    title: "Riyad's personal blog site",
-    description: 'Riyad\'s personal blog site',
+    description: "Riyad's personal blog site",
     id: basePath,
     link: basePath,
     language: 'en',

tailwind.config.js

@@ -11,8 +11,5 @@ module.exports = {
       },
     },
   },
-  plugins: [
+  plugins: [require('@tailwindcss/typography'), require('@tailwindcss/forms')],
-    require('@tailwindcss/typography'),
-    require('@tailwindcss/forms'),
-  ],
 }

utils/helper.ts

@@ -1,6 +1,5 @@
 export function makeFirstCharUpper(val: string) {
-  if (val === '')
+  if (val === '') return val
-    return val
   const firstChar = val.at(0)?.toLocaleUpperCase() || ''
   const otherChar = val.slice(1)
   return firstChar + otherChar