Preview: Add a lot of features

Author: silvaire-qwq

.prettierignore

@@ -0,0 +1,3 @@
+# Ignore artifacts:
+build
+coverage

.prettierrc

@@ -0,0 +1 @@
+{}

.vitepress/config.ts

@@ -1,4 +1,5 @@
 import { defineConfig } from "vitepress";
+import { tabsMarkdownPlugin } from "vitepress-plugin-tabs";
 import { RssPlugin } from "vitepress-plugin-rss";
 import { globalConfig } from "#config";
 import { getRunningTime } from "#theme/utils/getRunningTime";
@@ -31,11 +32,20 @@ export default defineConfig({
     publicDir: "../public",
     plugins: [RssPlugin(RSS)],
   },
+  sitemap: {
+    hostname: globalConfig.url,
+  },
   markdown: {
+    image: {
+      lazyLoading: true,
+    },
     theme: {
       light: "catppuccin-latte",
       dark: "catppuccin-mocha",
     },
+    config(md) {
+      md.use(tabsMarkdownPlugin);
+    },
   },
   head: [["link", { rel: "icon", href: globalConfig.favicon }]],
 
@@ -63,8 +73,8 @@ export default defineConfig({
           globalConfig.lang.poweredBy
         } <a href="https://vitepress.dev/">VitePress</a> & <a href="https://github.com/silvaire-qwq/Miracle">Miracle</a><br>
         ${globalConfig.title} ${
-        globalConfig.lang.hasExistedFor
-      } ${getRunningTime(globalConfig.dateCreated)} ${globalConfig.lang.days}
+          globalConfig.lang.hasExistedFor
+        } ${getRunningTime(globalConfig.dateCreated)} ${globalConfig.lang.days}
 
         `,
     },
@@ -77,4 +87,4 @@ export default defineConfig({
       provider: "local",
     },
   },
-});
+});

.vitepress/theme/components/article/article.vue

@@ -1,5 +1,12 @@
 <script setup lang="ts">
-import { ref, computed, watch, nextTick, onMounted, onBeforeUnmount } from "vue";
+import {
+  ref,
+  computed,
+  watch,
+  nextTick,
+  onMounted,
+  onBeforeUnmount,
+} from "vue";
 import { Icon } from "@iconify/vue";
 import PostCard from "./postCard.vue";
 import { generateGrid } from "../../utils/generateGrid";
@@ -31,7 +38,7 @@ watch(
     } else {
       articles.value = posts;
     }
-  }
+  },
 );
 
 // 监听 selectedCategory 的变化，重新过滤文章
@@ -52,7 +59,7 @@ onMounted(() => {
   if (selectedCategory.value) {
     nextTick(() => {
       articles.value = posts.filter(
-        (post) => post.category === selectedCategory.value
+        (post) => post.category === selectedCategory.value,
       );
     });
   }
@@ -64,12 +71,14 @@ onBeforeUnmount(() => {
 
 // 🔹 按年份分组 + 瀑布流布局
 const groupedArticles = computed(() => {
-  return generateGrid(
+  const grid = generateGrid(
     articles.value,
     undefined,
     (post) => new Date(post.originDate).getFullYear().toString(),
-    columnCount.value // ✅ 传入列数
+    columnCount.value,
   );
+  // 按年份倒序
+  return grid.sort((a, b) => Number(b.key) - Number(a.key));
 });
 
 // 提取所有唯一的类别
@@ -120,7 +129,7 @@ const { handleMouseMove, handleMouseEnter, handleMouseLeave } = useCardHover();
         @mousemove="handleMouseMove"
         @mouseleave="handleMouseLeave"
       >
-        <Icon icon="material-symbols:tag-rounded" style="opacity: 0.4" />
+        <Icon :icon="globalConfig.icon.tag" style="opacity: 0.4" />
         <span class="name">{{ " " + globalConfig.lang.tags }}</span>
       </a>
       <span

.vitepress/theme/components/article/postCard.vue

@@ -6,6 +6,7 @@ interface CardProps {
   category: string;
   date: string;
   image?: string;
+  type?: string;
 }
 
 const props = withDefaults(defineProps<CardProps>(), {
@@ -15,16 +16,26 @@ const props = withDefaults(defineProps<CardProps>(), {
   category: "",
   date: "",
   image: "",
+  type: "",
 });
 
+import { computed } from "vue";
 import { useCardHover } from "../../utils/useCardHover";
 const { handleMouseMove, handleMouseEnter, handleMouseLeave } = useCardHover();
+
+const link = computed(() => {
+  if (props.type === "project" && props.category) {
+    return `https://github.com/${props.category}`;
+  }
+  return props.url || "";
+});
 </script>
 
 <template>
   <a
     :href="props.url"
     v-if="props.url"
+    :type="props.type"
     class="diary"
     @mouseenter="handleMouseEnter"
     @mousemove="handleMouseMove"
@@ -35,23 +46,24 @@ const { handleMouseMove, handleMouseEnter, handleMouseLeave } = useCardHover();
     </div>
     <div class="textPlace">
       <p class="title" v-if="props.title">{{ props.title }}</p>
-      
-      <p class="details" v-if="props.description && props.title">{{ props.description }}</p>
-      <p class="details notitle" v-else-if="props.description">{{ props.description }}</p>
+
+      <p class="details" v-if="props.description && props.title">
+        {{ props.description }}
+      </p>
+      <p class="details notitle" v-else-if="props.description">
+        {{ props.description }}
+      </p>
 
       <div class="meta">
         <!-- 修改此处，使得点击分类时跳转到相应的分类页面 -->
-        <a
-          class="category"
-          v-if="props.category"
-          :href="`/archives?category=${props.category}`"
-          >{{ props.category }}</a
+        <a class="category" v-if="props.category" :href="link">{{
+          props.category
+        }}</a
         >{{ props.date }}
       </div>
     </div>
   </a>
 
-
   <a
     v-else
     class="diary"
@@ -64,9 +76,13 @@ const { handleMouseMove, handleMouseEnter, handleMouseLeave } = useCardHover();
     </div>
     <div class="textPlace">
       <p class="title" v-if="props.title">{{ props.title }}</p>
-      
-      <p class="details" v-if="props.description && props.title">{{ props.description }}</p>
-      <p class="details notitle" v-else-if="props.description">{{ props.description }}</p>
+
+      <p class="details" v-if="props.description && props.title">
+        {{ props.description }}
+      </p>
+      <p class="details notitle" v-else-if="props.description">
+        {{ props.description }}
+      </p>
 
       <div class="meta">
         <!-- 修改此处，使得点击分类时跳转到相应的分类页面 -->
@@ -82,7 +98,6 @@ const { handleMouseMove, handleMouseEnter, handleMouseLeave } = useCardHover();
 </template>
 
 <style scoped>
-
 .img-container img {
   border-radius: var(--vp-border-radius-1) var(--vp-border-radius-1) 0 0;
   border-bottom: 1px solid var(--vp-c-divider);
@@ -103,6 +118,11 @@ const { handleMouseMove, handleMouseEnter, handleMouseLeave } = useCardHover();
   transition: all var(--vp-transition-time);
 }
 
+.diary[type="project"] .title {
+  text-transform: var(--vp-title-uppercase);
+  font-family: var(--vp-font-family-mono);
+}
+
 .diary:hover {
   border-color: var(--vp-c-brand-1);
   box-shadow: var(--vp-shadow-brand);
@@ -129,6 +149,7 @@ const { handleMouseMove, handleMouseEnter, handleMouseLeave } = useCardHover();
   line-height: 26px;
   font-weight: 600;
   margin: 0;
+  text-transform: capitalize;
   transition: all var(--vp-transition-time);
 }