update

app/components/archive/card.vue

@@ -1,46 +1,43 @@
 <script lang="ts" setup>
 interface Props {
-  path?: string
-  title?: string
-  date?: string
-  description?: string
-  image?: string
-  alt?: string
-  ogImage?: string
-  tags?: Array<string>
-  published?: boolean
+  path?: string;
+  title?: string;
+  date?: string;
+  description?: string;
+  image?: string;
+  alt?: string;
+  ogImage?: string;
+  tags?: Array<string>;
+  published?: boolean;
 }
 
 withDefaults(defineProps<Props>(), {
-  path: '/',
-  title: 'no-title',
-  date: 'no-date',
-  description: 'no-description',
-  image: '/blogs-img/blog.jpg',
-  alt: 'no-alt',
-  ogImage: '/blogs-img/blog.jpg',
+  path: "/",
+  title: "no-title",
+  date: "no-date",
+  description: "no-description",
+  image: "/blogs-img/blog.jpg",
+  alt: "no-alt",
+  ogImage: "/blogs-img/blog.jpg",
   tags: () => [],
   published: false,
-})
+});
 </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"
-  >
+    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
           class="h-full w-full object-cover object-center rounded-t-2xl sm:rounded-l-2xl sm:rounded-t-none shadow-lg group-hover:scale-[1.02] transition-all duration-500"
           width="300"
           :src="image"
-          :alt="alt"
-        />
+          :alt="alt" />
       </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"
-        >
+          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">
@@ -56,8 +53,7 @@ withDefaults(defineProps<Props>(), {
             <p
               v-for="tag in tags"
               :key="tag"
-              class="bg-gray-200 dark:bg-slate-900 rounded-md px-2 py-1 font-semibold"
-            >
+              class="bg-gray-200 dark:bg-slate-900 rounded-md px-2 py-1 font-semibold">
               {{ tag }}
             </p>
           </div>

app/components/archive/hero.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { blogsPage } from '~/data'
+import { blogsPage } from "~/data";
 </script>
 
 <template>
@@ -7,8 +7,7 @@ import { blogsPage } from '~/data'
     <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"
-        >
+          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">