✨ Add search function -> version 2.1.0

EveSunMaple · Jul 9, 2024 · b1088d8 · b1088d8
1 parent c0da914
commit b1088d8
Show file tree

Hide file tree

Showing 14 changed files with 127 additions and 76 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -59,7 +59,7 @@
 * 微调了文章样式
 * 删去了不必要的友链
 
-## [2.0.0] - 2024-6-28
+## [2.0.0] - 2024-7-8
 
 ### Features
 
@@ -73,4 +73,15 @@
 
 ### Fix
 
-* 修复了文章内标签跳转的问题
+* 修复了文章内标签跳转的问题
+
+## [2.1.0] - 2024-7-9
+
+### Features
+
+* 新增搜索功能
+
+### Refactored
+
+* 微调页脚
+* 微调导航栏
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -5,6 +5,7 @@ import tailwind from "@astrojs/tailwind";
 import remarkMath from 'remark-math';
 import rehypeKatex from 'rehype-katex';
 import playformCompress from "@playform/compress";
+import pagefind from "astro-pagefind";
 
 // https://astro.build/config
 export default defineConfig({
@@ -14,12 +15,12 @@ export default defineConfig({
       includePaths: ['./src/styles']
     }
   },
-  integrations: [mdx(), sitemap(), tailwind(), playformCompress()],
+  integrations: [mdx(), sitemap(), tailwind(), playformCompress(), pagefind()],
   markdown: {
     remarkPlugins: [remarkMath],
     rehypePlugins: [rehypeKatex]
   },
   build: {
-    outDir: 'public',
-  }
+    format: "file",
+  },
 });
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,11 +1,11 @@
 {
   "name": "frosti",
   "type": "module",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
-    "build": "astro build && pagefind --site dist",
+    "build": "astro build",
     "preview": "astro preview",
     "astro": "astro"
   },

diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -1,35 +1,30 @@
 ---
-import Search from "../components/HeaderSearch.astro";
 import Menu from "../components/HeaderMenu.astro";
 import { SITE_TITLE } from "../consts";
 ---
 
-<div class="navbar bg-base-100">
+<div class="navbar bg-base-100 shadow-xl">
   <div class="navbar-start">
     <div class="dropdown">
-      <div tabindex="0" role="button" class="btn btn-ghost btn-circle">
+      <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"
-          class="h-5 w-5"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
+          width="32"
+          height="32"
+          viewBox="0 0 512 512"
+          ><path
+            d="M64,384H448V341.33H64Zm0-106.67H448V234.67H64ZM64,128v42.67H448V128Z"
+          ></path></svg
         >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M4 6h16M4 12h16M4 18h7"></path>
-        </svg>
       </div>
       <Menu />
     </div>
   </div>
   <div class="navbar-center">
-    <a class="btn btn-ghost text-xl">SaroProck ⚡️</a>
+    <a class="btn btn-ghost text-xl" href="/">SaroProck ⚡️</a>
   </div>
   <div class="navbar-end">
-    <Search />
     <div class="flex justify-center card bg-base-100 w-12 h-12">
       <label for="themeToggle2" class="" id="themeLabel2"
         ><span class="sr-only">Theme Toggle</span>

diff --git a/src/components/HeaderMenu.astro b/src/components/HeaderMenu.astro
@@ -4,13 +4,13 @@
 
 <ul
   tabindex="0"
-  class="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow"
+  class="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow-xl"
 >
-  <li><a class="menu-item p-4" id="home" href="/">Home</a></li>
-  <li><a class="menu-item p-4" id="about" href="/about">About</a></li>
-  <li><a class="menu-item p-4" id="blog" href="/blog">Blogs</a></li>
-  <li><a class="menu-item p-4" id="project" href="/project">Projects</a></li>
-  <li><a class="menu-item p-4" id="friend" href="/friend">Friends</a></li>
+  <li><a class="menu-item p-4" id="header-home" href="/">Home</a></li>
+  <li><a class="menu-item p-4" id="header-about" href="/about">About</a></li>
+  <li><a class="menu-item p-4" id="header-blog" href="/blog">Blogs</a></li>
+  <li><a class="menu-item p-4" id="header-project" href="/project">Projects</a></li>
+  <li><a class="menu-item p-4" id="header-friend" href="/friend">Friends</a></li>
   <li>
     <a
       class="menu-item p-4"

diff --git a/src/components/HeaderSearch.astro b/src/components/HeaderSearch.astro
diff --git a/src/components/ProfileCardMenu.astro b/src/components/ProfileCardMenu.astro
@@ -2,11 +2,11 @@
 ---
 
 <ul class="menu bg-base-100 w-full m-0">
-  <li><a class="menu-item p-4" id="header-home" href="/">Home</a></li>
-  <li><a class="menu-item p-4" id="header-about" href="/about">About</a></li>
-  <li><a class="menu-item p-4" id="header-blog" href="/blog">Blogs</a></li>
-  <li><a class="menu-item p-4" id="header-project" href="/project">Projects</a></li>
-  <li><a class="menu-item p-4" id="header-friend" href="/friend">Friends</a></li>
+  <li><a class="menu-item p-4" id="home" href="/">Home</a></li>
+  <li><a class="menu-item p-4" id="about" href="/about">About</a></li>
+  <li><a class="menu-item p-4" id="blog" href="/blog">Blogs</a></li>
+  <li><a class="menu-item p-4" id="project" href="/project">Projects</a></li>
+  <li><a class="menu-item p-4" id="friend" href="/friend">Friends</a></li>
   <li>
     <a
       class="menu-item p-4"

diff --git a/src/components/ProfileCardSearch copy.astro b/src/components/ProfileCardSearch copy.astro
diff --git a/src/content/blog/using-mdx copy.mdx b/src/content/blog/using-mdx copy.mdx
@@ -0,0 +1,56 @@
+---
+title: '测试文档'
+description: '这是一个用于测试的Markdown文档'
+pubDate: 'Jul 02 2024'
+image: https://saroprock.oss-cn-hangzhou.aliyuncs.com/img/%E8%83%8C%E5%8C%85%E9%97%AE%E9%A2%98.png
+tags:
+ - tag
+---
+
+## 标题
+
+Markdown支持多级标题，使用 `#` 符号表示。一个 `#` 表示一级标题，两个 `#` 表示二级标题，以此类推。
+
+### 三级标题
+
+这是一个三级标题。
+
+## 列表
+
+### 无序列表
+
+- 项目一
+- 项目二
+- 项目三
+
+### 有序列表
+
+1. 第一项
+2. 第二项
+3. 第三项
+
+## 格式化文本
+
+你可以使用**加粗**和*斜体*来格式化文本。
+
+**加粗示例**
+
+*斜体示例*
+
+~~删除线示例~~
+
+## 链接
+
+[这是一个链接](https://www.example.com)
+
+## 图片
+
+![这是一个示例图片](https://www.example.com/image.jpg)
+
+## 代码
+
+你可以在文档中插入代码片段：
+
+```python
+def hello_world():
+    print("Hello, world!")
diff --git a/src/pages/blog/[...page].astro b/src/pages/blog/[...page].astro
@@ -1,9 +1,9 @@
 ---
 import EnvelopeCard from "../../components/EnvelopeCard.astro";
 import BaseLayout from "../../layouts/BaseLayout.astro";
-import Footer from "../../components/Footer.astro";
+import BaseCard from "../../components/BaseCard.astro";
 import { getCollection } from "astro:content";
-import FormattedDate from "../../components/FormattedDate.astro";
+import Search from "astro-pagefind/components/Search";
 
 export async function getStaticPaths({ paginate }) {
   const posts = await getCollection("blog");
@@ -15,6 +15,14 @@ const { page } = Astro.props;
 ---
 
 <BaseLayout PageID="blog">
+  <BaseCard title="search">
+    <Search
+      id="search"
+      className="pagefind-ui"
+      uiOptions={{ showImages: false }}
+    />
+  </BaseCard>
+  <br>
   <div class="envelope-background">
     {
       page.data.map((post) => (

diff --git a/src/pages/blog/tag/[tag]/[...page].astro b/src/pages/blog/tag/[tag]/[...page].astro
@@ -27,7 +27,7 @@ const params = Astro.params;
 ---
 
 <BaseLayout PageID="blog">
-  <BaseCard title=tag>
+  <BaseCard title="tag">
     <h1 id="h1">{"Blog - " + params.tag}</h1>
   </BaseCard>
   <br>

diff --git a/src/pages/index.mdx b/src/pages/index.mdx
@@ -42,20 +42,23 @@ import LinkCard from "../components/page/LinkCard.astro";
 
     ```sh
     \Frosti
+    ├── 400.png
     ├── astro.config.mjs
     ├── categories.txt
+    ├── CHANGELOG.md
+    ├── LICENSE
     ├── package-lock.json
     ├── package.json
     ├── pnpm-lock.yaml
     ├── public
+    |  ├── favicon.ico
     |  ├── favicon.svg
     |  ├── fonts
     |  |  └── CascadiaCode.woff2
     |  ├── home.webp
     |  ├── profile.webp
     |  └── view.png
     ├── README.md
-    ├── README.zh-CN.md
     ├── src
     |  ├── components
     |  |  ├── BaseCard.astro
@@ -70,14 +73,17 @@ import LinkCard from "../components/page/LinkCard.astro";
     |  |  ├── Footer.astro
     |  |  ├── FormattedDate.astro
     |  |  ├── Header.astro
-    |  |  ├── HeaderLink.astro
+    |  |  ├── HeaderMenu.astro
     |  |  ├── License.astro
     |  |  ├── page
     |  |  |  ├── LinkCard.astro
+    |  |  |  ├── LinkThere.astro
     |  |  |  └── TimeLine.astro
     |  |  ├── ProfileCard.astro
     |  |  ├── ProfileCardFooter.astro
     |  |  ├── ProfileCardMenu.astro
+    |  |  ├── ProjectCard.astro
+    |  |  ├── ProjectJS.astro
     |  |  └── ThemeIcon.astro
     |  ├── consts.ts
     |  ├── content
@@ -89,23 +95,24 @@ import LinkCard from "../components/page/LinkCard.astro";
     |  ├── layouts
     |  |  └── BaseLayout.astro
     |  ├── pages
-    |  |  ├── about.astro
+    |  |  ├── about.mdx
     |  |  ├── blog
     |  |  |  ├── tag
     |  |  |  ├── [...page].astro
     |  |  |  └── [...slug].astro
-    |  |  ├── friend.astro
-    |  |  ├── index.astro
+    |  |  ├── friend.mdx
+    |  |  ├── frosti.mdx
     |  |  ├── index.mdx
-    |  |  ├── project.astro
+    |  |  ├── project.mdx
     |  |  └── rss.xml.js
     |  ├── scripts
-    |  |  └── copybutton.mjs
+    |  |  ├── copybutton.mjs
+    |  |  └── time.mjs
     |  └── styles
-    |     └── global.css
+    |     ├── global.scss
+    |     └── waline.scss
     ├── tailwind.config.js
-    ├── tsconfig.json
-    └── view.png
+    └── tsconfig.json
     ```
 
     ## How to Use:

diff --git a/src/styles/global.scss b/src/styles/global.scss
@@ -280,7 +280,7 @@ hr {
   }
 
   .background {
-    @apply max-md:relative max-md:p-[40px_10px_10px_10px];
+    @apply max-md:relative max-md:p-[40px_10px_10px_10px] max-md:mt-12;
   }
 
   .profile-card {