use useState composable

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

app.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { ParsedContent } from "@nuxt/content/dist/runtime/types";
+
 useHead({
   htmlAttrs: {
     lang: "en",
@@ -12,6 +14,10 @@ useHead({
     { name: "twitter:creator", content: "@nuxt_js" },
   ],
 });
+
+const { data } = await useAsyncData("index", () => queryContent("/").find());
+
+useState("blogData", () => (data.value as Array<ParsedContent>) || []);
 </script>
 
 <template>
@@ -37,7 +43,7 @@ useHead({
 /* Layout Transition */
 .layout-enter-active,
 .layout-leave-active {
-  transition: all 0.4s;
+  transition: all 0.3s;
 }
 .layout-enter-from,
 .layout-leave-to {

components/ArchiveCardLoader.vue

@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import { ContentLoader } from "vue-content-loader";
-</script>
-
-<template>
-  <div
-    class="font-ibmmono px-10 mb-4 text-slate-800 group shadow-sm bg-white rounded-lg py-4"
-  >
-    <content-loader
-      viewBox="0 0 476 45"
-      :speed="2"
-      primaryColor="#f3f3f3"
-      secondaryColor="#ecebeb"
-    >
-      <rect x="9" y="6" rx="0" ry="0" width="38" height="34" />
-      <rect x="58" y="6" rx="0" ry="0" width="369" height="9" />
-      <rect x="71" y="29" rx="0" ry="0" width="113" height="9" />
-      <rect x="191" y="28" rx="0" ry="0" width="113" height="9" />
-    </content-loader>
-  </div>
-</template>

components/ListHero.vue

@@ -1,15 +1,17 @@
 <script setup lang="ts">
+import { ParsedContent } from "@nuxt/content/dist/runtime/types";
+
 const route = useRoute();
 
 const routeType = computed(() => {
   return route.params.topic || "";
 });
-const { data } = await useLazyAsyncData("listhero", () =>
+const data = useState("blogData");
-  queryContent(`/${routeType.value}`).find()
-);
 
 const typeName = computed(() => {
-  return data.value?.at(0)?.type || "";
+  const allpost = (data.value as Array<ParsedContent>) || [];
+  const filteredType = allpost.filter((post) => post._dir === routeType.value);
+  return filteredType.at(0)?.type || "";
 });
 
 const title = computed(() => {

components/TopicCard.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
 const props = defineProps({
   title: String,
+  dir: String,
 });
 
 const router = useRouter();
 
 const onClick = () => {
-  router.push(`/tags/${props.title?.toLocaleLowerCase()}`);
+  router.push(`/tags/${props.dir}`);
 };
 </script>
 

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 allpost = (data.value as Array<ParsedContent>) || [];
-  const alltypes = allpost.map((post) => post.type);
+  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 data = useState("blogData");
-  const t = data.value?.at(0)?.type || "";
-  return t.toUpperCase();
-});
 
 const getRecentContent = computed(() => {
-  const allpost = data.value || [];
+  const allpost = (data.value as Array<ParsedContent>) || [];
-  const alltypes = allpost.map((post) => {
+  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 }>>[];