update home style

Author: NeserCode

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

@@ -3,7 +3,10 @@ import Pagination from "./Pagination.vue";
 
 import { computed, ref, Ref, toRefs, watch } from "vue";
 import { useSiteLocaleData } from "@vuepress/client";
-import { usePaginationChanges } from "../composables/useComponentUtils";
+import {
+  getTagPathByTag,
+  usePaginationChanges,
+} from "../composables/useComponentUtils";
 import { getTimeAgo, getFormatDate } from "../composables/useDate";
 
 import type { SiteLocaleData } from "@vuepress/client";
@@ -35,10 +38,6 @@ function getAuthor(author: string) {
   return author === undefined ? "Unknown" : author;
 }
 
-function getTagPath(tag: string) {
-  return encodeURI(`/tags/${tag.toLowerCase()}/`);
-}
-
 /* Pagination */
 const articleListPages = ref<PaginationPages>({
   total: articles.value.length,
@@ -91,7 +90,7 @@ watch(
               v-for="tag of article.info.tags.slice(0, 3)"
               :key="tag"
               class="tag-item"
-              :to="getTagPath(tag)"
+              :to="getTagPathByTag(tag)"
               >{{ tag }}</router-link
             >
             <span

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

@@ -2,6 +2,7 @@
 import { type Ref } from "vue";
 import PageFooter from "./PageFooter.vue";
 import { RouteLink, type SiteData, useSiteData } from "vuepress/client";
+import { getTagPathByTag } from "../composables/useComponentUtils";
 import { type PagesMap, defaultConstants } from "../../shared";
 
 const siteData: Ref<SiteData & { pagesMap: PagesMap }> = useSiteData() as any;
@@ -11,16 +12,26 @@ const { exceptHomeListSlug } = defaultConstants;
 const trimArticles = articles.filter((article) => {
   return !exceptHomeListSlug.includes(article.slug);
 });
+
+console.log(trimArticles);
 </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="no-underline title" :to="article.pathInferred!">{{
-            article.data.title
-          }}</RouteLink>
+          <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>
       </div>
       <PageFooter />
@@ -33,15 +44,26 @@ const trimArticles = articles.filter((article) => {
   @apply flex flex-col justify-center items-center;
 }
 .home-article-list {
-  @apply w-1/2 h-fit flex flex-wrap justify-center items-center gap-x-2 gap-y-0.5 my-24;
+  @apply w-1/2 h-fit flex flex-wrap items-center gap-2 my-24;
 }
+
 .article {
   @apply w-fit h-fit;
 }
-.article .title {
-  @apply inline-block max-w-60 h-full px-1
+.article .home-link {
+  @apply inline-flex flex-col justify-center max-w-60 h-full px-1
   rounded border-2 border-transparent bg-zinc-100 dark:bg-zinc-600
-  hover:border-green-300
-  select-none truncate cursor-pointer transition-all ease-in-out duration-300;
+  hover:bg-green-100 hover:border-green-300 dark:hover:bg-green-700 dark:hover:border-green-500
+  select-none cursor-pointer transition-all ease-in-out duration-300;
+}
+.home-link .title {
+  @apply inline-block max-w-60
+  text-xl
+  truncate;
+}
+.home-link .tags {
+  @apply inline-flex max-w-60 gap-0.5
+  flex-wrap
+  text-sm;
 }
 </style>