Update Home.vue

Author: NeserCode

docs/.vuepress/theme/lib/client/components/Home.vue

@@ -1,9 +1,10 @@
 <script lang="ts" setup>
-import { type Ref } from "vue";
+import { computed, ref, type Ref } from "vue";
 import PageFooter from "./PageFooter.vue";
+import Pagination from "./Pagination.vue";
 import { RouteLink, type SiteData, useSiteData } from "vuepress/client";
-import { getTagPathByTag } from "../composables/useComponentUtils";
-import { type PagesMap, defaultConstants } from "../../shared";
+import { usePaginationChanges } from "../composables/useComponentUtils";
+import { type PagesMap, PaginationPages, defaultConstants } from "../../shared";
 
 const siteData: Ref<SiteData & { pagesMap: PagesMap }> = useSiteData() as any;
 
@@ -13,26 +14,32 @@ const trimArticles = articles.filter((article) => {
   return !exceptHomeListSlug.includes(article.slug);
 });
 
-console.log(trimArticles);
+const pageSet = ref<PaginationPages>({
+  total: trimArticles.length,
+  offset: 0,
+  limit: 1,
+});
+const pageChanges = usePaginationChanges(pageSet);
+const slicedArticles = computed(() =>
+  trimArticles.slice(
+    pageSet.value.offset,
+    pageSet.value.offset + pageSet.value.limit
+  )
+);
 </script>
 
 <template>
   <div class="v-nc-theme-home">
     <div class="page-main">
       <div class="home-article-list">
-        <div class="article" v-for="article in trimArticles">
-          <RouteLink class="home-link" :to="article.pathInferred!">
-            <span class="title">{{ article.data.title }}</span>
-            <span class="tags">
-              <RouteLink
-                class="tag"
-                v-for="tag in article.routeMeta?._blog?.tags"
-                :to="getTagPathByTag(tag)"
-                >{{ tag }}</RouteLink
-              >
-            </span>
-          </RouteLink>
+        <div class="articles">
+          <div class="article" v-for="article in slicedArticles">
+            <RouteLink class="home-link" :to="article.pathInferred!">
+              <span class="title">{{ article.data.title }}</span>
+            </RouteLink>
+          </div>
         </div>
+        <Pagination :pages="pageSet" :changes="pageChanges" />
       </div>
       <PageFooter />
     </div>
@@ -44,26 +51,25 @@ console.log(trimArticles);
   @apply flex flex-col justify-center items-center;
 }
 .home-article-list {
-  @apply w-1/2 h-fit flex flex-wrap items-center gap-2 my-24;
+  @apply w-1/2 h-fit min-h-60 flex flex-col items-center justify-between my-24;
 }
 
+.articles {
+  @apply flex flex-wrap gap-2;
+}
 .article {
   @apply w-fit h-fit;
 }
 .article .home-link {
-  @apply inline-flex flex-col justify-center max-w-60 h-full px-1
+  @apply inline-flex flex-col justify-center max-w-60 h-full
   rounded border-2 border-transparent bg-zinc-100 dark:bg-zinc-600
   hover:bg-green-100 hover:border-green-300 dark:hover:bg-green-700 dark:hover:border-green-500
+  hover:text-green-500
   select-none cursor-pointer transition-all ease-in-out duration-300;
 }
 .home-link .title {
-  @apply inline-block max-w-60
-  text-xl
+  @apply inline-block max-w-60 py-0.5 px-1.5
+  text-xl shadow
   truncate;
 }
-.home-link .tags {
-  @apply inline-flex max-w-60 gap-0.5
-  flex-wrap
-  text-sm;
-}
 </style>