update

app/pages/about.vue

@@ -1,75 +1,24 @@
-<template>
-  <h1>Hello</h1>
-</template>
+<script setup>
+import { ref, onMounted } from "vue";
+import { useRoute } from "vue-router";
 
-<!-- <script setup lang="ts">
-import { aboutPage, footerData } from "~/data";
+const content = ref(null);
 
-useHead({
-  title: "About",
-  meta: [
-    {
-      name: "description",
-      content: footerData.aboutAuthor,
-    },
-  ],
+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;
+  }
 });
 </script>
 
 <template>
-  <div class="py-5">
-    <div class="sm:grid grid-cols-8 px-6 py-5 sm:py-9 gap-5 container max-w-5xl mx-auto">
-      <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">
-              {{ aboutPage.title }}
-            </h1>
-
-            <div class="my-3 space-x-2 md:space-x-3 pb-10">
-              <NuxtLink
-                :to="socialLinks.githubLink"
-                target="_blank"
-                class="px-2 py-1 lg:px-3 lg:py-2 bg-gray-300 text-gray-800 rounded-md dark:bg-slate-700 dark:text-[#F1F2F4]"
-                aria-label="Github">
-                <Icon name="fa:github" size="1em" class="-translate-y-[-10%]" />
-              </NuxtLink>
-              <NuxtLink
-                :to="socialLinks.linkedinLink"
-                target="_blank"
-                class="px-2 py-1 lg:px-3 lg:py-2 bg-gray-300 text-gray-800 rounded-md dark:bg-slate-700 dark:text-[#F1F2F4]"
-                aria-label="LinkedIn">
-                <Icon name="fa:linkedin-square" size="1em" class="-translate-y-[-10%]" />
-              </NuxtLink>
-              <NuxtLink
-                :to="socialLinks.twitterLink"
-                target="_blank"
-                class="px-2 py-1 lg:px-3 lg:py-2 bg-gray-300 text-gray-800 rounded-md dark:bg-slate-700 dark:text-[#F1F2F4]"
-                aria-label="Twitter">
-                <Icon name="fa:twitter-square" size="1em" class="-translate-y-[-10%]" />
-              </NuxtLink>
-              <NuxtLink
-                :to="socialLinks.stackoverflowLink"
-                target="_blank"
-                class="px-2 py-1 lg:px-3 lg:py-2 bg-gray-300 text-gray-800 rounded-md dark:bg-slate-700 dark:text-[#F1F2F4]"
-                aria-label="StackOverflow">
-                <Icon name="fa:stack-overflow" size="1em" class="-translate-y-[-10%]" />
-              </NuxtLink>
-            </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" />
-          </div>
-        </div>
-        <h3 class="text-base sm:text-3xl font-semibold pb-7 sm:pb-12">
-          {{ aboutPage.description }}
-        </h3>
-
-        <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" />
-      </div>
-    </div>
+  <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>
-</template> -->
+</template>