use useState composable

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

pages/[...slug].vue

@@ -5,7 +5,9 @@ definePageMeta({
 </script>
 
 <template>
-  <main class="container mx-auto bg-white max-w-6xl p-6 prose prose-slate">
+  <main
+    class="container mx-auto bg-white max-w-5xl p-6 min-h-screen prose prose-slate"
+  >
     <ContentDoc />
   </main>
 </template>

pages/about.vue

@@ -6,7 +6,7 @@ definePageMeta({
 
 <template>
   <div
-    class="container mx-auto max-w-6xl font-ibmmono antialiased min-h-[72vh]"
+    class="container mx-auto max-w-6xl font-ibmmono antialiased min-h-screen"
   >
     <div class="flex gap-14">
       <div class="m-2 rounded-lg object-cover">

pages/blogs.vue

@@ -1,12 +1,15 @@
 <script setup lang="ts">
+import type { ParsedContent } from "@nuxt/content/dist/runtime/types";
+
 definePageMeta({
   layout: "list",
 });
 
-const { data } = useLazyAsyncData("blogs", () => queryContent("/").find());
+const data = useState("blogData");
 
+// get all blog post
 const getAllPost = computed(() => {
-  const allpost = data.value || [];
+  const allpost = (data.value as Array<ParsedContent>) || [];
   const alltypes = allpost.map((post) => {
     return {
       title: post.title,
@@ -26,7 +29,7 @@ const getAllPost = computed(() => {
 
 <template>
   <div
-    class="container mx-auto max-w-6xl font-ibmmono antialiased min-h-[72vh]"
+    class="container mx-auto max-w-6xl font-ibmmono antialiased min-h-screen"
   >
     <div>
       <template v-for="pp in getAllPost" :key="pp">

pages/index.vue

@@ -1,17 +1,24 @@
 <script setup lang="ts">
-const { data } = useLazyAsyncData("index", () => queryContent("/").find());
+import type { ParsedContent } from "@nuxt/content/dist/runtime/types";
+
+const data = useState("blogData");
 
 // get all the unique types from content
 const getTopCategory = computed(() => {
-  const allpost = data.value || [];
-  const alltypes = allpost.map((post) => post.type);
+  const allpost = (data.value as Array<ParsedContent>) || [];
+  const alltypes = allpost.map((post) => {
+    return {
+      type: post.type,
+      dir: post._dir,
+    };
+  });
   const uniqType = new Set(alltypes);
   return uniqType;
 });
 
 // get all post in recent time order
 const getRecentContent = computed(() => {
-  const allpost = data.value || [];
+  const allpost = (data.value as Array<ParsedContent>) || [];
   const customizePost = allpost.map((post) => {
     return {
       title: post.title,
@@ -27,13 +34,13 @@ const getRecentContent = computed(() => {
     const d = new Date(b.date);
     return c < d ? 1 : -1;
   });
-  return customizePost;
+  return customizePost.filter((post, idx) => idx < 6);
 });
 </script>
 
 <template>
   <div
-    class="container px-4 mx-auto max-w-6xl flex font-ibmmono gap-14 antialiased min-h-[72vh]"
+    class="container px-4 mx-auto max-w-6xl flex font-ibmmono gap-14 antialiased min-h-screen"
   >
     <div class="flex-1">
       <h1 class="text-xl pb-8 text-[#e60067]">RECENTLY PUBLISHED</h1>
@@ -54,7 +61,7 @@ const getRecentContent = computed(() => {
       <div>
         <h2 class="text-xl pb-8 text-[#e60067]">TOP CATEGORIES</h2>
         <template v-for="cat in getTopCategory" :key="cat">
-          <topic-card :title="cat" />
+          <topic-card :title="cat.type" :dir="cat.dir" />
         </template>
       </div>
     </div>

pages/tags/[topic].vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { ParsedContent } from "@nuxt/content/dist/runtime/types";
+
 definePageMeta({
   layout: "list",
 });
@@ -8,33 +10,34 @@ const route = useRoute();
 const routeType = computed(() => {
   return route.params.topic || "";
 });
-const { data } = useLazyAsyncData("topic", () =>
-  queryContent(`/${routeType.value}`).find()
-);
 
-const typeName = computed(() => {
-  const t = data.value?.at(0)?.type || "";
-  return t.toUpperCase();
-});
+const data = useState("blogData");
 
 const getRecentContent = computed(() => {
-  const allpost = data.value || [];
-  const alltypes = allpost.map((post) => {
+  const allpost = (data.value as Array<ParsedContent>) || [];
+  const modifedPost = allpost.map((post) => {
     return {
       title: post.title,
       description: post.description,
       path: post._path,
       date: post.date as string,
       author: post.author,
+      dir: post._dir,
     };
   });
 
-  alltypes.sort(function (a, b) {
+  console.log(modifedPost);
+
+  const filteredPost = modifedPost.filter(
+    (post) => post.dir === routeType.value
+  );
+
+  filteredPost.sort(function (a, b) {
     const c = new Date(a.date);
     const d = new Date(b.date);
     return c < d ? 1 : -1;
   });
-  return alltypes;
+  return filteredPost;
 });
 </script>
 

pages/tags/index.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
+import { ParsedContent } from "@nuxt/content/dist/runtime/types";
+
 definePageMeta({
   layout: "list",
 });
-const { data } = useLazyAsyncData("tags", () => queryContent("/").find());
+const data = useState("blogData");
 
 const getTopCategory = computed(() => {
-  const allpost = data.value || [];
+  const allpost = (data.value as Array<ParsedContent>) || [];
   const alltypes = allpost.map((post) => post.type);
   const uniqType = new Set(alltypes);
   const cobj = <Array<{ type: string; count: number; path: string }>>[];