🎉 Pin your article -> 2.5.5

CHANGELOG.md

@@ -346,3 +346,15 @@
 ### Fix
 
 - 修复了搜索组件无法正常加载的问题
+
+## [2.5.5] - 2024-8-18
+
+### Features
+
+- 添加了置顶功能，现在你可以给文章 badge 属性 设置为 `Pin` 来置顶你的文章
+
+### Refactored
+
+- 清理了项目代码
+- 修改了侧边卡片的样式
+- 修改了原 DaisyUI 内建的逻辑，改成点击按钮收回而不是点击外部收回

package.json

@@ -1,7 +1,7 @@
 {
   "name": "frosti",
   "type": "module",
-  "version": "2.5.4-hotfix.1",
+  "version": "2.5.5",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",

src/components/Header.astro

@@ -7,27 +7,29 @@ import { SITE_TITLE } from "../consts";
   class="navbar max-md:translate-y-0 fixed px-2 w-full transform -translate-y-full text-center z-50 transition-transform bg-base-100 shadow-xl"
 >
   <div class="navbar-start">
-    <div class="dropdown">
-      <div
-        tabindex="0"
-        role="button"
-        class="btn btn-ghost"
-        id="content"
-        title="Content"
-      >
-        <svg
-          class="swap-off fill-current"
-          xmlns="http://www.w3.org/2000/svg"
-          width="32"
-          height="32"
-          viewBox="0 0 512 512"
-          ><path
-            d="M64,384H448V341.33H64Zm0-106.67H448V234.67H64ZM64,128v42.67H448V128Z"
-          ></path></svg
+    <details>
+      <summary>
+        <div
+          tabindex="0"
+          role="button"
+          class="btn btn-ghost"
+          id="navbar"
+          title="Navbar"
         >
-      </div>
+          <svg
+            class="swap-off fill-current"
+            xmlns="http://www.w3.org/2000/svg"
+            width="32"
+            height="32"
+            viewBox="0 0 512 512"
+            ><path
+              d="M64,384H448V341.33H64Zm0-106.67H448V234.67H64ZM64,128v42.67H448V128Z"
+            ></path>
+          </svg>
+        </div>
+      </summary>
       <Menu />
-    </div>
+    </details>
   </div>
   <div class="navbar-center">
     <a class="btn btn-ghost text-xl" href="/">{SITE_TITLE}</a>

src/components/HeaderMenu.astro

@@ -3,7 +3,7 @@ import { menuItems } from "../consts.ts";
 ---
 
 <ul
-  class="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow-xl"
+  class="menu menu-sm fixed bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow-xl lg:hidden"
 >
   {
     menuItems.map((item) => (

src/components/blog/collapse.astro

@@ -2,10 +2,10 @@
 const { title } = Astro.props;
 ---
 
-<div
+<details
   tabindex="0"
   class="collapse collapse-arrow border-base-300 bg-base-200 border"
 >
-  <div class="collapse-title text-xl font-medium">{title}</div>
+  <summary class="collapse-title text-xl font-medium">{title}</summary>
   <div class="collapse-content"><slot /></div>
-</div>
+</details>

src/content/blog/markdown-style-guide.md

@@ -7,7 +7,7 @@ categories:
   - tech
 tags:
   - Makrdown
-badge: Guide
+badge: Pin
 ---
 
 Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro.

src/pages/blog/[...page].astro

@@ -9,8 +9,17 @@ import { infoTest } from "../../consts";
 
 export async function getStaticPaths({ paginate }: { paginate: any }) {
   const posts = await getCollection("blog");
-  posts.sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
-  return paginate(posts, { pageSize: 8 });
+  const topPosts = posts.filter((post) => post.data.badge === "Pin");
+  const otherPosts = posts.filter((post) => post.data.badge !== "Pin");
+
+  topPosts.sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
+  otherPosts.sort(
+    (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf()
+  );
+
+  const sortedPosts = [...topPosts, ...otherPosts];
+
+  return paginate(sortedPosts, { pageSize: 8 });
 }
 
 const { page }: { page: Page } = Astro.props;
@@ -73,7 +82,7 @@ const pageLinks = generatePageLinks(totalPages);
       href={page.url.prev ? page.url.prev : `javascript:`}
       class={page.url.prev
         ? `btn bg-base-100 shadow-xl`
-        : `btn  btn-disabled bg-base-100 shadow-xl`}
+        : `btn btn-disabled bg-base-100 shadow-xl`}
     >
       <svg
         class="h-6 w-6 fill-current md:h-8 md:w-8"
@@ -146,7 +155,7 @@ const pageLinks = generatePageLinks(totalPages);
       href={page.url.next ? page.url.next : `javascript:`}
       class={page.url.next
         ? `btn bg-base-100 shadow-xl`
-        : `btn  btn-disabled bg-base-100 shadow-xl`}
+        : `btn btn-disabled bg-base-100 shadow-xl`}
     >
       <span class="hidden lg:inline ml-2">{infoTest.nextPage}</span>
       <svg

src/styles/global.scss

@@ -59,6 +59,10 @@ body {
   background-size: 100% 600px;
 }
 
+summary {
+  list-style: none; 
+}
+
 @media (max-width: 720px) {
   body {
     @apply text-lg;