update

2025-12-26 21:56:11 +08:00
parent e857204140
commit 1688124e8e
31 changed files with 256 additions and 736 deletions
--- a/app/app.vue
+++ b/app/app.vue
@@ -26,6 +26,9 @@ const bgStyle = computed(() =>
 </script>

 <template>
+  <link
+    rel="stylesheet"
+    href="https://chinese-fonts-cdn.deno.dev/packages/maple-mono-cn/dist/MapleMono-CN-Regular/result.css" />
  <div class="relative">
    <div
      v-if="currentBg"
--- a/app/assets/css/tailwind.css
+++ b/app/assets/css/tailwind.css
@@ -1,3 +1,15 @@
+@import url("https://chinese-fonts-cdn.deno.dev/packages/maple-mono-cn/dist/MapleMono-CN-Regular/result.css");
+
@tailwind base;
@tailwind components;
@tailwind utilities;
+
+@theme {
+  --font-roboto: "Maple Mono CN", sans-serif;
+  --font-display--font-feature-settings: "zero", "cv03", "ss03", "ss05", "cv97", "cv98";
+}
+
+/* @import url("https://fontsapi.zeoseven.com/292/main/result.css"); */
+/* @theme {
+  --font-roboto: "LXGW WenKai", sans-serif;
+} */
--- a/app/components/archive/card.vue
+++ b/app/components/archive/card.vue
@@ -3,10 +3,6 @@ interface Props {
  path?: string;
  title?: string;
  date?: string;
-  description?: string;
-  image?: string;
-  alt?: string;
-  ogImage?: string;
  tags?: Array<string>;
  published?: boolean;
 }
@@ -15,10 +11,6 @@ withDefaults(defineProps<Props>(), {
  path: "/",
  title: "no-title",
  date: "no-date",
-  description: "no-description",
-  image: "/blogs-img/blog.jpg",
-  alt: "no-alt",
-  ogImage: "/blogs-img/blog.jpg",
  tags: () => [],
  published: false,
 });
@@ -28,21 +20,11 @@ withDefaults(defineProps<Props>(), {
  <article
    class="group border dark:border-gray-800 m-2 rounded-2xl overflow-hidden shadow-sm text-zinc-700 dark:text-zinc-300">
    <NuxtLink :to="path" class="grid grid-cols-1 sm:grid-cols-10 gap-1">
-      <div class="sm:col-span-3">
-        <NuxtImg
-          class="h-full w-full object-cover object-center rounded-t-2xl sm:rounded-l-2xl sm:rounded-t-none shadow-lg group-hover:scale-[1.02] transition-all duration-500"
-          width="300"
-          :src="image"
-          :alt="alt" />
-      </div>
-      <div class="sm:col-span-7 p-5">
+      <div class="sm:col-span-10 p-5">
        <h2
          class="text-xl font-semibold text-black dark:text-zinc-300 pb-1 group-hover:text-sky-700 dark:group-hover:text-sky-400">
          {{ title }}
        </h2>
-        <p class="text-ellipsis line-clamp-2">
-          {{ description }}
-        </p>
        <div class="text-black dark:text-zinc-300 text-sm mt-2 mb-1 md:flex md:space-x-6">
          <div class="flex items-center">
            <LogoDate class="-translate-y-[10%]" />
--- a/app/components/blog/Header.vue
+++ b/app/components/blog/Header.vue
@@ -45,7 +45,7 @@ withDefaults(defineProps<Props>(), {
      </h1>

      <p class="text-lg text-zinc-600 dark:text-zinc-400 max-w-2xl mx-auto leading-relaxed italic">
-        "{{ description }}"
+        「{{ description }}」
      </p>
    </div>

--- a/app/components/category/topic.vue
+++ b/app/components/category/topic.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { makeFirstCharUpper } from "@/utils/helper";
-
 const route = useRoute();

 // take category from route params & make first char upper
@@ -10,7 +8,7 @@ const category = computed(() => {

  if (Array.isArray(name)) strName = name.at(0) || "";
  else strName = name;
-  return makeFirstCharUpper(strName);
+  return strName;
 });
 </script>

--- a/app/components/footer/link.vue
+++ b/app/components/footer/link.vue
@@ -2,7 +2,7 @@
  <div class="flex flex-col dark:text-zinc-300 my-5 md:my-0 md:justify-self-center">
    <p class="text-black dark:text-zinc-300 text-base font-semibold">Quick Link</p>
    <NuxtLink to="/" class="hover:underline"> Home </NuxtLink>
-    <NuxtLink to="/blogs" class="hover:underline"> Blogs </NuxtLink>
+    <NuxtLink to="/archive" class="hover:underline"> Archive </NuxtLink>
    <NuxtLink to="/categories" class="hover:underline"> Categories </NuxtLink>
    <NuxtLink to="/about" class="hover:underline"> About Me </NuxtLink>
  </div>
--- a/app/components/main/TechInfo.vue
+++ b/app/components/main/TechInfo.vue
@@ -15,7 +15,7 @@ const techStack = computed(() => {
    { label: "构建平台", value: platform.name, icon: platform.icon },
    { label: "图片存储", value: "去图图床", icon: "heroicons:photo" },
    { label: "软件协议", value: "MIT", icon: "heroicons:document-text" },
-    { label: "文章许可", value: "CC BY-NC-SA 4.0", icon: "heroicons:creative-commons" },
+    { label: "文章许可", value: "CC BY-NC-SA 4.0", icon: "fa-brands:creative-commons" },
    {
      label: "规范域名",
      value: siteConfig.siteMeta.url.replace("https://", ""),
--- a/app/config/index.ts
+++ b/app/config/index.ts
@@ -30,7 +30,7 @@ const siteConfig = {
  navbar: {
    links: [
      // { name: "Home", path: "/", icon: "fa6-solid:house" },
-      { name: "Blogs", path: "/blogs", icon: "fa-solid:newspaper" },
+      { name: "Archive", path: "/archive", icon: "fa-solid:newspaper" },
      { name: "Categories", path: "/categories", icon: "fa-solid:folder" },
      { name: "Tags", path: "/tags", icon: "fa-solid:tags" },
      { name: "About", path: "/about", icon: "fa-solid:user" },
--- a/app/data/index.ts
+++ b/app/data/index.ts
@@ -4,7 +4,7 @@

 // export const navItems = [
 //   { label: "Home", path: "/" },
-//   { label: "Blogs", path: "/blogs" },
+//   { label: "Archive", path: "/archive" },
 //   { label: "Categories", path: "/categories" },
 //   { label: "About", path: "/about" },
 // ];
@@ -25,8 +25,8 @@ export const footerData = {
 //     "Get Web Development, Javascript, Typescript, NodeJs, Vue, and Nuxt, Related Articles, Tips, Learning resources and more.",
 // };

-export const blogsPage = {
-  title: "All Blogs",
+export const archivePage = {
+  title: "All Archives",
  description: "Here you will find all the blog posts I have written & published on this site.",
 };

--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -16,10 +16,8 @@ const route = useRoute();
    <div
      class="absolute inset-0 pointer-events-none -z-10 transition-all duration-700 ease-in-out"
      :style="route.path === '/' ? { clipPath: 'inset(100vh 0 0 0)' } : {}">
-      <!-- 基础渐变层 -->
      <div
        class="absolute inset-0 bg-gradient-to-b from-white/70 via-white/50 to-white/80 dark:from-slate-900/80 dark:via-slate-900/70 dark:to-slate-900/90 backdrop-blur-xl"></div>
-      <!-- 纹理层：增加质感 -->
      <div class="absolute inset-0 opacity-[0.03] dark:opacity-[0.05] mix-blend-overlay"></div>
    </div>
  </div>
--- a/app/pages/about.vue
+++ b/app/pages/about.vue
@@ -1,75 +1,24 @@
-<template>
-  <h1>Hello</h1>
-</template>
+<script setup>
+import { ref, onMounted } from "vue";
+import { useRoute } from "vue-router";

-<!-- <script setup lang="ts">
-import { aboutPage, footerData } from "~/data";
+const content = ref(null);

-useHead({
-  title: "About",
-  meta: [
-    {
-      name: "description",
-      content: footerData.aboutAuthor,
-    },
-  ],
+onMounted(async () => {
+  const route = useRoute();
+
+  const { data: pageData } = await useAsyncData(route.path, () =>
+    queryCollection("content").path(route.path).first(),
+  );
+
+  if (pageData.value) {
+    content.value = pageData.value;
+  }
 });
 </script>

 <template>
-  <div class="py-5">
-    <div class="sm:grid grid-cols-8 px-6 py-5 sm:py-9 gap-5 container max-w-5xl mx-auto">
-      <div class="col-span-5 max-w-md">
-        <div class="flex justify-between">
-          <div>
-            <h1 class="text-xl sm:text-4xl pb-2 font-bold">
-              {{ aboutPage.title }}
-            </h1>
-
-            <div class="my-3 space-x-2 md:space-x-3 pb-10">
-              <NuxtLink
-                :to="socialLinks.githubLink"
-                target="_blank"
-                class="px-2 py-1 lg:px-3 lg:py-2 bg-gray-300 text-gray-800 rounded-md dark:bg-slate-700 dark:text-[#F1F2F4]"
-                aria-label="Github">
-                <Icon name="fa:github" size="1em" class="-translate-y-[-10%]" />
-              </NuxtLink>
-              <NuxtLink
-                :to="socialLinks.linkedinLink"
-                target="_blank"
-                class="px-2 py-1 lg:px-3 lg:py-2 bg-gray-300 text-gray-800 rounded-md dark:bg-slate-700 dark:text-[#F1F2F4]"
-                aria-label="LinkedIn">
-                <Icon name="fa:linkedin-square" size="1em" class="-translate-y-[-10%]" />
-              </NuxtLink>
-              <NuxtLink
-                :to="socialLinks.twitterLink"
-                target="_blank"
-                class="px-2 py-1 lg:px-3 lg:py-2 bg-gray-300 text-gray-800 rounded-md dark:bg-slate-700 dark:text-[#F1F2F4]"
-                aria-label="Twitter">
-                <Icon name="fa:twitter-square" size="1em" class="-translate-y-[-10%]" />
-              </NuxtLink>
-              <NuxtLink
-                :to="socialLinks.stackoverflowLink"
-                target="_blank"
-                class="px-2 py-1 lg:px-3 lg:py-2 bg-gray-300 text-gray-800 rounded-md dark:bg-slate-700 dark:text-[#F1F2F4]"
-                aria-label="StackOverflow">
-                <Icon name="fa:stack-overflow" size="1em" class="-translate-y-[-10%]" />
-              </NuxtLink>
-            </div>
-          </div>
-          <div class="sm:hidden block col-span-3 pb-5 dark:text-[#F1F2F4]">
-            <NuxtImg src="/riyad.jpg" width="125" height="115" quality="50" class="rounded-md" />
-          </div>
-        </div>
-        <h3 class="text-base sm:text-3xl font-semibold pb-7 sm:pb-12">
-          {{ aboutPage.description }}
-        </h3>
-
-        <p>{{ aboutPage.aboutMe }}</p>
-      </div>
-      <div class="hidden sm:block col-span-3">
-        <NuxtImg src="/riyad.jpg" width="450" height="500" quality="50" class="rounded-md" />
-      </div>
-    </div>
+  <div class="prose prose-lg dark:prose-invert mx-auto px-6 max-w-4xl mt-0 text-left">
+    <ContentRenderer v-if="content" :value="content" />
  </div>
-</template> -->
+</template>
--- a/app/pages/archive/index.vue
+++ b/app/pages/archive/index.vue
@@ -0,0 +1,48 @@
+<script lang="ts" setup>
+import type { BlogPost } from "~/types/blog";
+
+const { data } = await useAsyncData("all-archive-post", () => queryCollection("content").all());
+
+const sortedData = computed(() => {
+  return (
+    data.value
+      ?.map((articles) => {
+        const meta = articles.meta as unknown as BlogPost;
+        return {
+          path: articles.path,
+          title: articles.title || "no-title available",
+          description: articles.description || "no-description available",
+          image: meta.image || "/not-found.jpg",
+          alt: meta.alt || "no alter data available",
+          ogImage: meta.ogImage || "/not-found.jpg",
+          date: meta.date || "not-date-available",
+          tags: meta.tags || [],
+          published: meta.published || false,
+        };
+      })
+      .filter((post) => post.published) // Filter out unpublished posts
+      .sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime()) || [] // Reverse the order
+  );
+});
+</script>
+
+<template>
+  <main class="container max-w-5xl mx-auto text-zinc-600">
+    <h1 class="text-3xl font-bold my-6">Archive</h1>
+
+    <div v-auto-animate class="space-y-5 my-5 px-4">
+      <template v-for="post in sortedData" :key="post.title">
+        <ArchiveCard
+          :path="post.path"
+          :title="post.title"
+          :date="post.date"
+          :description="post.description"
+          :alt="post.alt"
+          :tags="post.tags"
+          :published="post.published" />
+      </template>
+
+      <ArchiveCard v-if="sortedData.length <= 0" title="No Post Found" image="/not-found.jpg" />
+    </div>
+  </main>
+</template>
--- a/app/pages/blogs/[blog].vue
+++ b/app/pages/blogs/[blog].vue
@@ -21,6 +21,9 @@ const data = computed<BlogPost>(() => {
    date: meta?.date || "not-date-available",
    tags: meta?.tags || [],
    published: meta?.published || false,
+    categories: meta?.categories || [],
+    meta: meta || {},
+    path: path || "",
  };
 });

--- a/app/pages/categories/[category].vue
+++ b/app/pages/categories/[category].vue
@@ -2,14 +2,14 @@
 import type { BlogPost } from "@/types/blog";
 const route = useRoute();

-// take category from route params & make first char upper
+// Take category from route params & ensure it's a valid string
 const category = computed(() => {
  const name = route.params.category || "";
  let strName = "";

  if (Array.isArray(name)) strName = name.at(0) || "";
  else strName = name;
-  return strName;
+  return strName.trim().toLowerCase(); // Convert to lowercase for case-insensitive matching
 });

 const { data } = await useAsyncData(`category-data-${category.value}`, () =>
@@ -18,26 +18,33 @@ const { data } = await useAsyncData(`category-data-${category.value}`, () =>
    .then((articles) =>
      articles.filter((article) => {
        const meta = article.meta as unknown as BlogPost;
-        return meta.tags.includes(category.value);
+        return (
+          meta.published &&
+          meta.categories?.map((cat) => cat.toLowerCase()).includes(category.value)
+        ); // Case-insensitive matching
      }),
    ),
 );

 const formattedData = computed(() => {
-  return data.value?.map((articles) => {
-    const meta = articles.meta as unknown as BlogPost;
-    return {
-      path: articles.path,
-      title: articles.title || "no-title available",
-      description: articles.description || "no-description available",
-      image: meta.image || "/blogs-img/blog.jpg",
-      alt: meta.alt || "no alter data available",
-      ogImage: meta.ogImage || "/blogs-img/blog.jpg",
-      date: meta.date || "not-date-available",
-      tags: meta.tags || [],
-      published: meta.published || false,
-    };
-  });
+  return (
+    data.value
+      ?.map((articles) => {
+        const meta = articles.meta as unknown as BlogPost;
+        return {
+          path: articles.path,
+          title: articles.title || "no-title available",
+          description: articles.description || "no-description available",
+          image: meta.image || "/blogs-img/blog.jpg",
+          alt: meta.alt || "no alter data available",
+          ogImage: meta.ogImage || "/blogs-img/blog.jpg",
+          date: meta.date || "not-date-available",
+          tags: meta.tags || [],
+          published: meta.published || false,
+        };
+      })
+      .filter((post) => post.published) || [] // Ensure only published posts are shown
+  );
 });

 useHead({
@@ -49,16 +56,6 @@ useHead({
    },
  ],
 });
-
-// Generate OG Image
-const siteData = useSiteConfig();
-defineOgImage({
-  props: {
-    title: category.value?.toUpperCase(),
-    description: `You will find all the ${category.value} related post here`,
-    siteName: siteData.url,
-  },
-});
 </script>

 <template>
@@ -77,7 +74,7 @@ defineOgImage({
        :og-image="post.ogImage"
        :tags="post.tags"
        :published="post.published" />
-      <BlogEmpty v-if="data?.length === 0" />
+      <BlogEmpty v-if="formattedData.length === 0" />
    </div>
  </main>
 </template>
--- a/app/pages/categories/index.vue
+++ b/app/pages/categories/index.vue
@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import { makeFirstCharUpper } from "@/utils/helper";
-
 const { data } = await useAsyncData("all-blog-post-by-category", () =>
  queryCollection("content").all(),
 );
@@ -8,13 +6,13 @@ const { data } = await useAsyncData("all-blog-post-by-category", () =>
 const allTags = new Map();

 data.value?.forEach((blog) => {
-  const tags: Array<string> = (blog.meta.tags as string[]) || [];
-  tags.forEach((tag) => {
-    if (allTags.has(tag)) {
-      const cnt = allTags.get(tag);
-      allTags.set(tag, cnt + 1);
+  const categories: Array<string> = (blog.meta.categories as string[]) || [];
+  categories.forEach((category) => {
+    if (allTags.has(category)) {
+      const cnt = allTags.get(category);
+      allTags.set(category, cnt + 1);
    } else {
-      allTags.set(tag, 1);
+      allTags.set(category, 1);
    }
  });
 });
@@ -46,11 +44,7 @@ defineOgImage({
  <main class="container max-w-5xl mx-auto text-zinc-600">
    <CategoryHero />
    <div class="flex flex-wrap px-6 mt-12 gap-3">
-      <CategoryCard
-        v-for="topic in allTags"
-        :key="topic[0]"
-        :title="makeFirstCharUpper(topic[0])"
-        :count="topic[1]" />
+      <CategoryCard v-for="topic in allTags" :key="topic[0]" :title="topic[0]" :count="topic[1]" />
    </div>
  </main>
 </template>
--- a/app/pages/tags/[tag].vue
+++ b/app/pages/tags/[tag].vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import type { BlogPost } from "@/types/blog";
-import { makeFirstCharUpper } from "@/utils/helper";
 const route = useRoute();

 const tag = computed(() => {
@@ -18,7 +17,7 @@ const { data } = await useAsyncData(`tag-data-${tag.value}`, () =>
    .then((articles) =>
      articles.filter((article) => {
        const meta = article.meta as unknown as BlogPost;
-        return meta.tags.some((t) => t.toLowerCase() === tag.value.toLowerCase());
+        return meta.published && meta.tags.some((t) => t.toLowerCase() === tag.value.toLowerCase());
      }),
    ),
 );
@@ -41,7 +40,7 @@ const formattedData = computed(() => {
 });

 useHead({
-  title: `Tag: ${makeFirstCharUpper(tag.value)}`,
+  title: `Tag: ${tag.value}`,
  meta: [
    {
      name: "description",
@@ -75,10 +74,10 @@ defineOgImage({
      </div>
      <h1
        class="text-4xl md:text-5xl font-bold text-zinc-800 dark:text-zinc-100 mb-4 tracking-tight">
-        #{{ makeFirstCharUpper(tag) }}
+        #{{ tag }}
      </h1>
      <p class="text-zinc-600 dark:text-zinc-400 text-center">
-        Found {{ data?.length || 0 }} posts with this tag
+        Found {{ formattedData.length || 0 }} posts with this tag
      </p>
    </div>

@@ -95,7 +94,7 @@ defineOgImage({
        :og-image="post.ogImage"
        :tags="post.tags"
        :published="post.published" />
-      <BlogEmpty v-if="data?.length === 0" />
+      <BlogEmpty v-if="formattedData.length === 0" />
    </div>
  </main>
 </template>
--- a/app/pages/tags/index.vue
+++ b/app/pages/tags/index.vue
@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import { makeFirstCharUpper } from "@/utils/helper";
-
 const { data } = await useAsyncData("all-blog-post-by-tags", () =>
  queryCollection("content").all(),
 );
@@ -63,7 +61,7 @@ defineOgImage({
        class="group relative flex items-center gap-2 px-6 py-3 rounded-2xl bg-white/40 dark:bg-slate-900/40 backdrop-blur-md border border-white/20 dark:border-white/5 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
        <span
          class="text-lg font-bold text-zinc-700 dark:text-zinc-200 group-hover:text-violet-600 dark:group-hover:text-violet-400 transition-colors">
-          #{{ makeFirstCharUpper(tag) }}
+          #{{ tag }}
        </span>
        <span
          class="flex items-center justify-center min-w-[24px] h-6 px-1.5 rounded-full bg-violet-500/10 text-violet-600 dark:text-violet-400 text-xs font-bold border border-violet-500/20">
--- a/app/types/blog.ts
+++ b/app/types/blog.ts
@@ -6,5 +6,8 @@ export interface BlogPost {
  alt: string;
  ogImage: string;
  tags: string[];
+  categories: string[];
  published: boolean;
+  meta: Record<string, unknown>; // 添加 meta 属性
+  path: string; // 添加 path 属性
 }
--- a/app/utils/helper.ts
+++ b/app/utils/helper.ts
@@ -1,6 +1,11 @@
-export function makeFirstCharUpper(val: string) {
-  if (val === "") return val;
-  const firstChar = val.at(0)?.toLocaleUpperCase() || "";
-  const otherChar = val.slice(1);
-  return firstChar + otherChar;
+// Utility functions
+
+/**
+ * Makes the first character of a string uppercase.
+ * @param str - The string to transform.
+ * @returns The transformed string.
+ */
+export function makeFirstCharUpper(str: string): string {
+  if (!str) return "";
+  return str.charAt(0).toUpperCase() + str.slice(1);
 }