update

app/pages/about.vue

@@ -1,24 +1,25 @@
 <script setup>
-import { ref, onMounted } from "vue";
 import { useRoute } from "vue-router";
+import TechInfo from "~/components/main/TechInfo.vue";
 
-const content = ref(null);
-
-onMounted(async () => {
-  const route = useRoute();
-
-  const { data: pageData } = await useAsyncData(route.path, () =>
-    queryCollection("content").path(route.path).first(),
-  );
-
-  if (pageData.value) {
-    content.value = pageData.value;
-  }
-});
+const route = useRoute();
+const { data: content } = await useAsyncData(route.path, () => queryCollection("about").first());
 </script>
 
 <template>
-  <div class="prose prose-lg dark:prose-invert mx-auto px-6 max-w-4xl mt-0 text-left">
-    <ContentRenderer v-if="content" :value="content" />
+  <div class="container mx-auto mt-10 px-6 max-w-6xl">
+    <div class="flex gap-8">
+      <!-- Main content -->
+      <main class="prose prose-zinc dark:prose-invert mx-auto mt-10 px-6 w-half h-full text-left">
+        <ContentRenderer v-if="content" :value="content" />
+      </main>
+
+      <!-- Sidebar tech/build info -->
+      <aside class="w-1/3 hidden lg:block">
+        <div class="sticky top-24">
+          <TechInfo />
+        </div>
+      </aside>
+    </div>
   </div>
 </template>

app/pages/archive/index.vue

@@ -1,28 +1,26 @@
 <script lang="ts" setup>
 import type { BlogPost } from "~/types/blog";
+import { formatDate } from "~/utils/helper";
 
-const { data } = await useAsyncData("all-archive-post", () => queryCollection("content").all());
+const { data } = await useAsyncData("all-archive-post", () =>
+  queryCollection("content").order("date", "DESC").all(),
+);
 
-const sortedData = computed(() => {
-  return (
-    data.value
-      ?.map((articles) => {
-        const meta = articles.meta as unknown as BlogPost;
-        return {
-          path: articles.path,
-          title: articles.title || "no-title available",
-          description: articles.description || "no-description available",
-          image: meta.image || "/not-found.jpg",
-          alt: meta.alt || "no alter data available",
-          ogImage: meta.ogImage || "/not-found.jpg",
-          date: meta.date || "not-date-available",
-          tags: meta.tags || [],
-          published: meta.published || false,
-        };
-      })
-      .filter((post) => post.published) // Filter out unpublished posts
-      .sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime()) || [] // Reverse the order
-  );
+// const sortedData = computed(() => {
+const posts = computed(() => {
+  return data.value?.map((articles) => {
+    const meta = articles.meta as unknown as BlogPost;
+    return {
+      path: articles.path,
+      title: articles.title || "no-title available",
+      description: articles.description || "no-description available",
+      image: meta.image || "/not-found.jpg",
+      alt: meta.alt || "no alter data available",
+      date: formatDate(articles.date) || "not-date-available",
+      tags: meta.tags || [],
+      published: meta.published || false,
+    };
+  });
 });
 </script>
 
@@ -31,7 +29,7 @@ const sortedData = computed(() => {
     <h1 class="text-3xl font-bold my-6">Archive</h1>
 
     <div v-auto-animate class="space-y-5 my-5 px-4">
-      <template v-for="post in sortedData" :key="post.title">
+      <template v-for="post in posts" :key="post.title">
         <ArchiveCard
           :path="post.path"
           :title="post.title"
@@ -41,8 +39,6 @@ const sortedData = computed(() => {
           :tags="post.tags"
           :published="post.published" />
       </template>
-
-      <ArchiveCard v-if="sortedData.length <= 0" title="No Post Found" image="/not-found.jpg" />
     </div>
   </main>
 </template>

app/pages/blogs/[blog].vue

@@ -17,7 +17,6 @@ const data = computed<BlogPost>(() => {
     description: articles.value?.description || "no-description available",
     image: meta?.image || "/not-found.jpg",
     alt: meta?.alt || "no alter data available",
-    ogImage: (articles?.value?.ogImage as unknown as string) || "/not-found.jpg",
     date: meta?.date || "not-date-available",
     tags: meta?.tags || [],
     published: meta?.published || false,