🎉 Add category -> 2.5.0

EveSunMaple · Aug 1, 2024 · 4cbaa88 · 4cbaa88
1 parent 81a6855
commit 4cbaa88
Show file tree

Hide file tree

Showing 32 changed files with 762 additions and 217 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -268,3 +268,22 @@
 
 - 单页页面改成了十篇文章
 - 去掉了 layout 的 title
+
+## [2.5.0] - 2024-8-2
+
+### Features
+
+- 添加分类功能，现在你可以为你的文章添加两个独立的索引：分类与标签
+- 给分类与标签的文章列表页面添加了分页功能，不再是一整页了
+- 在侧边栏集成了分类的功能，来自 issue #10
+
+### Refactored
+
+- 现在如果文章没有图片，它的文章信息将会填充
+- 修改了分页按钮的样式
+- 微调样式，来自 issue #9
+
+### Fix
+
+- 修复在文章过多时分页失效的问题
+- 修复在 issue #11 中提到的问题
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "frosti-test",
   "type": "module",
-  "version": "2.5.0-rc",
+  "version": "2.5.0",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
@@ -16,7 +16,7 @@
     "@astrojs/sitemap": "^3.1.6",
     "@astrojs/tailwind": "^5.1.0",
     "@playform/compress": "^0.0.13",
-    "astro": "^4.12.3",
+    "astro": "^4.13.0",
     "astro-icon": "^1.1.0",
     "astro-pagefind": "^1.6.0",
     "dayjs": "^1.11.12",
@@ -27,7 +27,7 @@
     "rehype-katex": "^7.0.0",
     "remark-math": "^6.0.0",
     "sass": "^1.77.8",
-    "shiki": "^1.12.0",
+    "shiki": "^1.12.1",
     "twikoo": "^1.6.38",
     "typescript": "^5.5.4"
   },

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/BaseCard.astro b/src/components/BaseCard.astro
@@ -10,11 +10,13 @@ const {
   image,
   pubDate,
   badge,
+  categories,
   tags,
   isBlog = false,
   url = decodeURIComponent(Astro.url.toString()),
 } = Astro.props as CardInfo;
 const displayDate = dayjs(pubDate).format(DATE_FORMAT);
+const hasTategories = categories && categories.length > 0;
 const hasTags = tags && tags.length > 0;
 ---
 
@@ -42,12 +44,30 @@ const hasTags = tags && tags.length > 0;
       isBlog && (
         <>
           <h1 id="h1">{title}</h1>
-          <div class="info mt-5">
+          <div class="info mt-2">
             {displayDate && (
-              <div class="badge badge-neutral mr-2">{displayDate}</div>
+              <div class="badge badge-neutral">{displayDate}</div>
+            )}
+            <span>&thinsp;</span>
+            {hasTategories ? (
+              categories.map((categoroy) => (
+                <>
+                  <a
+                    href={`/blog/categories/${categoroy}`}
+                    class="btn btn-xs btn-accent rounded-full"
+                  >
+                    {categoroy}
+                  </a>
+                  <span>&thinsp;</span>
+                </>
+              ))
+            ) : (
+              <div class="btn btn-xs btn-secondary btn-disabled rounded-full">
+                {infoTest.noCategory}
+              </div>
             )}
             {badge && <div class="badge badge-primary">{badge}</div>}
-            <div class="tags mt-4">
+            <div class="tags mt-2">
               <code>{infoTest.tag}</code>
               {hasTags ? (
                 tags.map((tag) => (

diff --git a/src/components/EnvelopeCard.astro b/src/components/EnvelopeCard.astro
@@ -3,10 +3,10 @@ import dayjs from "dayjs";
 import { Image } from "astro:assets";
 import { infoTest } from "../consts";
 import type { EnvelopeInfo } from "../types";
-const { title, desc, image, pubDate, badge, tags, url } =
+const { title, desc, image, pubDate, badge, categories, tags, url } =
   Astro.props as EnvelopeInfo;
-const tag_url = url.split("/").slice(0, -1).join("/") + "/tag";
 const displayDate = dayjs(pubDate).format("ddd MMM DD YYYY");
+const hasTategories = categories && categories.length > 0;
 const hasTags = tags && tags.length > 0;
 const target = "_self";
 ---
@@ -19,24 +19,40 @@ const target = "_self";
   >
     <div class="relative w-full h-full p-6 flex flex-col justify-between">
       <a href={url} target={target}>
-        <h1 id={title}>
+        <h1 id={title} class="p-2">
           {title}
         </h1>
       </a>
       <div class="m-2">{desc}</div>
       <div class="m-2">
         {displayDate && <div class="badge badge-neutral">{displayDate}</div>}
+        <span>&thinsp;</span>{
+          hasTategories ? (
+            categories.map((categoroy) => (
+              <>
+                <a
+                  href={`/blog/categories/${categoroy}`}
+                  class="btn btn-xs btn-accent rounded-full"
+                >
+                  {categoroy}
+                </a>
+                <span>&thinsp;</span>
+              </>
+            ))
+          ) : (
+            <div class="btn btn-xs btn-secondary btn-disabled rounded-full">
+              {infoTest.noCategory}
+            </div>
+          )
+        }
         {badge && <div class="badge badge-primary">{badge}</div>}
-        <div class="tags">
+        <div class="tags mt-2">
           <code>{infoTest.tag}</code>
           {
             hasTags ? (
               tags.map((tag) => (
                 <>
-                  <a
-                    href={`${tag_url}/${tag}`}
-                    class="btn btn-xs btn-secondary"
-                  >
+                  <a href={`/blog/tag/${tag}`} class="btn btn-xs btn-secondary">
                     {tag}
                   </a>
                   <span>&thinsp;</span>
@@ -53,21 +69,19 @@ const target = "_self";
     </div>
   </div>
 
-  <div
-    class="relative w-full lg:w-2/5 h-auto rounded-none overflow-hidden lg:order-2 order-1"
-  >
-    {
-      image && (
+  {
+    image && (
+      <div class="relative w-full lg:w-2/5 h-auto rounded-none overflow-hidden lg:order-2 order-1">
         <Image
           src={image}
           alt={title}
           width="300"
           height="200"
           format="webp"
-          loading="lazy"
+          loading="eager"
           class="object-cover w-full h-full"
         />
-      )
-    }
-  </div>
+      </div>
+    )
+  }
 </div>
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -34,7 +34,7 @@ import { SITE_TITLE } from "../consts";
   </div>
   <div class="navbar-end">
     <div class="flex justify-center card bg-base-100 w-12 h-12">
-      <label for="themeToggle2" class="" id="themeLabel2"
+      <label for="themeToggle2" id="themeLabel2" class="hidden"
         ><span class="sr-only">Theme Toggle</span>
         <input type="checkbox" id="themeToggle2" />
         <svg

diff --git a/src/components/HeaderMenu.astro b/src/components/HeaderMenu.astro
@@ -3,7 +3,6 @@ import { menuItems } from "../consts.ts";
 ---
 
 <ul
-  tabindex="0"
   class="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow-xl"
 >
   {
@@ -12,8 +11,10 @@ import { menuItems } from "../consts.ts";
         <a
           class="menu-item text-xl font-bold p-4"
           id={`header-${item.id}`}
+          title={item.id}
           href={item.href}
           target={item.target || "_self"}
+          aria-label={item.text}
         >
           {item.text}
         </a>

diff --git a/src/components/ProfileCard.astro b/src/components/ProfileCard.astro
@@ -15,7 +15,8 @@ import { USER_AVATAR } from "../consts";
       width={300}
       height={300}
       src={USER_AVATAR}
-      alt="Profile image"
+      alt="Profile"
+      loading="eager"
     />
   </div>
   <Menu />

diff --git a/src/components/ProfileCardMenu.astro b/src/components/ProfileCardMenu.astro
@@ -8,19 +8,48 @@ import { Icon } from "astro-icon/components";
 >
   {
     menuItems.map((item) => (
-      <li class="w-full">
-        <a
-          class="flex justify-center lg:justify-start items-center text-center text-xl md:text-3xl lg:text-xl font-bold p-4"
-          id={item.id}
-          title={item.id}
-          href={item.href}
-          target={item.target || "_self"}
-        >
-          <span class="inline-flex justify-center">
-            <Icon name={`menu/${item.svg}`} />
-          </span>
-          <span class="hidden lg:inline ml-2">{item.text}</span>
-        </a>
+      <li class="w-full relative">
+        {item.subItems ? (
+          <details class="menu-item">
+            <summary class="justify-center lg:justify-start items-center text-center text-xl md:text-3xl lg:text-xl font-bold p-4">
+              <span class="justify-center">
+                <Icon name={`menu/${item.svg}`} />
+              </span>
+              <span class="hidden lg:inline ml-2">{item.text}</span>
+            </summary>
+            <ul>
+              {item.subItems.map((subItem) => (
+                <li>
+                  <a
+                    class="menu-item text-xl font-bold p-4"
+                    id={`header-${subItem.id}`}
+                    href={subItem.href}
+                    target={subItem.target || "_self"}
+                    aria-label={subItem.text}
+                  >
+                    <span class="inline-flex justify-center">
+                      <Icon name={`menu/${subItem.svg}`} />
+                    </span>
+                    <span class="hidden lg:inline ml-2">{subItem.text}</span>
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </details>
+        ) : (
+          <a
+            class="flex justify-center lg:justify-start items-center text-center text-xl md:text-3xl lg:text-xl font-bold p-4"
+            id={item.id}
+            title={item.id}
+            href={item.href}
+            target={item.target || "_self"}
+          >
+            <span class="inline-flex justify-center">
+              <Icon name={`menu/${item.svg}`} />
+            </span>
+            <span class="hidden lg:inline ml-2">{item.text}</span>
+          </a>
+        )}
       </li>
     ))
   }

diff --git a/src/components/ProjectCard.astro b/src/components/ProjectCard.astro
@@ -14,7 +14,7 @@ const { title, image, desc, url, target = "_blank" } = Astro.props;
       class="envelope-back relative w-full h-full p-6 flex flex-col justify-between"
     >
       <a class="envelope-title" href={url} target={target}>
-        <h1 id={title}>{title}</h1>
+        <h1 id={title} class="p-2">{title}</h1>
       </a>
       <div class="m-2">{desc}</div>
       <div class="m-2 flex">
@@ -103,21 +103,19 @@ const { title, image, desc, url, target = "_blank" } = Astro.props;
       </div>
     </div>
   </div>
-  <div
-    class="relative w-full lg:w-2/5 h-auto rounded-none overflow-hidden lg:order-2 order-1"
-  >
-    {
-      image && (
+  {
+    image && (
+      <div class="relative w-full lg:w-2/5 h-auto rounded-none overflow-hidden lg:order-2 order-1">
         <Image
           src={image}
           alt={title}
           width="300"
           height="200"
           format="webp"
-          loading="lazy"
+          loading="eager"
           class="object-cover w-full h-full"
         />
-      )
-    }
-  </div>
+      </div>
+    )
+  }
 </div>
diff --git a/src/components/ThemeIcon.astro b/src/components/ThemeIcon.astro
@@ -6,7 +6,7 @@
   class="flex justify-center card bg-base-100 btn btn-ghost w-auto h-10"
   id="themeToggle"
 >
-  <label for="themeToggle1" id="themeLabel1"
+  <label for="themeToggle1" id="themeLabel1" class="hidden"
     ><span class="sr-only">Theme Toggle</span>
     <input type="checkbox" id="themeToggle1" />
     <svg
@@ -100,10 +100,12 @@
 
     // Add classes if elements are not null
     if (themeLabel1) {
+      themeLabel1.classList.remove("hidden");
       themeLabel1.classList.add("swap");
       themeLabel1.classList.add("swap-rotate");
     }
     if (themeLabel2) {
+      themeLabel2.classList.remove("hidden");
       themeLabel2.classList.add("swap");
       themeLabel2.classList.add("swap-rotate");
     }

diff --git a/src/components/page/LinkCard.astro b/src/components/page/LinkCard.astro
@@ -16,6 +16,7 @@ import { Image } from "astro:assets";
             height={100}
             format="webp"
             alt={title}
+            loading="eager"
             class="max-w-full md:max-w-[13rem] rounded-lg"
           />
         )