feat: ✨ 搜索和文章标题优化

src/app/blog/BlogClientComponent.tsx

@@ -35,6 +35,7 @@ export default function BlogList() {
   const [isTagsExpanded, setIsTagsExpanded] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
   const [sortOption, setSortOption] = useState<SortOption>("date");
+  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
 
   const handleSearchParamsChange = useCallback(() => {
     const tag = searchParams.get("tag");
@@ -63,17 +64,21 @@ export default function BlogList() {
         (!selectedTag || post.tags.includes(selectedTag))
     );
 
-    // 根据选择的排序选项进行排序
+    // 根据选择的排序选项和顺序进行排序
     posts.sort((a, b) => {
+      const dateComparison =
+        new Date(b.date).getTime() - new Date(a.date).getTime();
+      const titleComparison = a.title.localeCompare(b.title);
+
       if (sortOption === "date") {
-        return new Date(b.date).getTime() - new Date(a.date).getTime();
+        return sortOrder === "asc" ? -dateComparison : dateComparison; // 根据排序顺序调整比较结果
       } else {
-        return a.title.localeCompare(b.title);
+        return sortOrder === "asc" ? titleComparison : -titleComparison; // 根据排序顺序调整比较结果
       }
     });
 
     return posts;
-  }, [searchTerm, selectedTag, filteredPosts, sortOption]);
+  }, [searchTerm, selectedTag, filteredPosts, sortOption, sortOrder]); // 添加 sortOrder 作为依赖项
 
   const currentPosts = useMemo(() => {
     const indexOfLastPost = currentPage * POSTS_PER_PAGE;
@@ -124,9 +129,12 @@ export default function BlogList() {
         searchTerm={searchTerm}
         onSearchChange={handleSearch}
         sortOption={sortOption}
-        onSortChange={(value: SortOption) => setSortOption(value)}
+        sortOrder={sortOrder} // 添加排序顺序
+        onSortChange={(option: SortOption, order: "asc" | "desc") => {
+          setSortOption(option);
+          setSortOrder(order); // 更新排序顺序
+        }}
       />
-
       <TagList
         allTags={allTags}
         selectedTag={selectedTag}

src/app/blog/BlogSearch.tsx

@@ -1,15 +1,30 @@
-import { Label, Input, Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@/components/ui";
+import {
+  Label,
+  Input,
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+} from "@/components/ui";
 
-type SortOption = "date" | "title";
+type SortOption = "date" | "title"; // 保留排序类型
 
 interface BlogSearchProps {
   searchTerm: string;
   onSearchChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   sortOption: SortOption;
-  onSortChange: (value: SortOption) => void;
+  sortOrder: "asc" | "desc"; // 保留排序顺序
+  onSortChange: (option: SortOption, order: "asc" | "desc") => void; // 修改为同时处理排序类型和顺序
 }
 
-export function BlogSearch({ searchTerm, onSearchChange, sortOption, onSortChange }: BlogSearchProps) {
+export function BlogSearch({
+  searchTerm,
+  onSearchChange,
+  sortOption,
+  sortOrder,
+  onSortChange,
+}: BlogSearchProps) {
   return (
     <div className="mb-6 flex items-end space-x-4">
       <div className="flex-grow">
@@ -28,16 +43,28 @@ export function BlogSearch({ searchTerm, onSearchChange, sortOption, onSortChang
         <Label htmlFor="sort" className="mb-2 block">
           排序方式
         </Label>
-        <Select onValueChange={onSortChange} defaultValue={sortOption}>
+        <Select
+          onValueChange={(value) => {
+            const [option, order] = value.split("-"); // 解析选项和顺序
+            onSortChange(option as SortOption, order as "asc" | "desc");
+          }}
+          defaultValue={`${sortOption}-${sortOrder}`}
+        >
           <SelectTrigger id="sort" className="w-full" aria-label="选择排序方式">
             <SelectValue placeholder="选择排序方式" />
           </SelectTrigger>
           <SelectContent>
-            <SelectItem value="date">按日期排序</SelectItem>
-            <SelectItem value="title">按标题排序</SelectItem>
+            <SelectItem value="date-asc">按日期升序</SelectItem>{" "}
+            {/* 合并选项 */}
+            <SelectItem value="date-desc">按日期降序</SelectItem>{" "}
+            {/* 合并选项 */}
+            <SelectItem value="title-asc">按标题升序</SelectItem>{" "}
+            {/* 合并选项 */}
+            <SelectItem value="title-desc">按标题降序</SelectItem>{" "}
+            {/* 合并选项 */}
           </SelectContent>
         </Select>
       </div>
     </div>
   );
-}
+}

src/app/blog/[id]/MdxComponents.tsx

@@ -36,19 +36,22 @@ const Tr: React.FC<React.HTMLAttributes<HTMLTableRowElement>> = (props) => (
 export const mdxComponents: MDXComponents = {
   h1: (props: any) => (
     <h1
-      className="text-3xl font-bold mt-8 mb-4 text-gray-900 dark:text-white scroll-mt-20"
+      id={props.children.toString().toLowerCase().replace(/\s+/g, "-")}
+      className="relative text-3xl font-bold mt-8 mb-4 text-gray-900 dark:text-white scroll-mt-20 cursor-pointer before:content-['#'] before:absolute before:-left-6 before:opacity-0 hover:before:opacity-100 before:text-blue-500 dark:before:text-blue-400" // 设置 # 符号颜色与字体对齐
       {...props}
     />
   ),
   h2: (props: any) => (
     <h2
-      className="text-2xl font-semibold mt-6 mb-3 text-gray-800 dark:text-gray-200 scroll-mt-20"
+      id={props.children.toString().toLowerCase().replace(/\s+/g, "-")}
+      className="relative text-2xl font-semibold mt-6 mb-3 text-gray-800 dark:text-gray-200 scroll-mt-20 cursor-pointer before:content-['#'] before:absolute before:-left-6 before:opacity-0 hover:before:opacity-100 before:text-gray-800 dark:before:text-gray-200" // 设置 # 符号颜色与字体对齐
       {...props}
     />
   ),
   h3: (props: any) => (
     <h3
-      className="text-xl font-medium mt-4 mb-2 text-gray-700 dark:text-gray-300 scroll-mt-20"
+      id={props.children.toString().toLowerCase().replace(/\s+/g, "-")}
+      className="relative text-xl font-medium mt-4 mb-2 text-gray-700 dark:text-gray-300 scroll-mt-20 cursor-pointer before:content-['#'] before:absolute before:-left-6 before:opacity-0 hover:before:opacity-100 before:text-gray-700 dark:before:text-gray-300" // 设置 # 符号颜色与字体对齐
       {...props}
     />
   ),

src/components/page/LatestPosts.tsx

@@ -25,7 +25,7 @@ const TechStack: React.FC = () => {
         {technologies.map((tech) => (
           <motion.div
             key={tech.name}
-            className="flex flex-col items-center"
+            className="flex flex-col items-center cursor-pointer"
             whileHover={{ scale: 1.1 }}
           >
             <Image

src/data/blogPosts.ts

@@ -14,6 +14,7 @@ import {
   content13,
   content14,
   content15,
+  content16,
 } from "./ts";
 
 export interface BlogPost {
@@ -166,4 +167,13 @@ export const blogPosts: BlogPost[] = [
     author: "吴十七",
     tags: ["工程化", "构建优化", "性能优化"],
   },
+  {
+    id: 16,
+    title: "Serverless架构与前端开发",
+    excerpt: "探讨Serverless架构如何简化前端开发流程...",
+    content: content16,
+    date: "2024-05-30",
+    author: "李十八",
+    tags: ["Serverless", "前端开发", "云计算"],
+  },
 ];

src/data/ts/16.ts

@@ -0,0 +1,33 @@
+export const content16 = `Serverless架构是一种新兴的云计算模式，允许开发者专注于代码而无需管理服务器。通过使用云服务提供商（如AWS Lambda、Azure Functions等），前端开发者可以快速构建和部署应用程序。Serverless架构的优势包括自动扩展、按需计费和简化的运维管理。本文将深入探讨如何在前端项目中有效利用Serverless架构。
+
+## 什么是Serverless架构？
+
+Serverless架构并不意味着没有服务器，而是将服务器的管理和维护工作交给云服务提供商。开发者只需编写代码并上传到云平台，云服务提供商会负责运行、扩展和维护这些代码。
+
+## Serverless架构的优势
+
+1. **自动扩展**：根据流量自动调整资源，确保应用在高负载时依然稳定。
+2. **按需计费**：只为实际使用的计算资源付费，降低了成本。
+3. **简化运维**：减少了服务器管理的复杂性，开发者可以将更多精力放在业务逻辑上。
+
+## 如何在前端项目中使用Serverless架构
+
+### 1. 选择合适的云服务提供商
+
+选择一个支持Serverless架构的云服务提供商，如AWS、Azure或Google Cloud。了解它们的功能、定价和支持的编程语言。
+
+### 2. 设计无状态的函数
+
+Serverless函数应设计为无状态的，确保每次调用都是独立的。可以使用外部存储（如数据库或缓存）来管理状态。
+
+### 3. 使用API Gateway
+
+通过API Gateway将前端请求路由到Serverless函数。API Gateway可以处理身份验证、流量管理和监控等功能。
+
+### 4. 监控和调试
+
+使用云服务提供商提供的监控工具，跟踪函数的性能和错误。确保能够快速定位和解决问题。
+
+## 结论
+
+Serverless架构为前端开发者提供了一个高效、灵活的开发模式。通过合理利用Serverless架构，开发者可以专注于业务逻辑，提升开发效率和应用性能。随着技术的不断发展，Serverless架构将会在前端开发中扮演越来越重要的角色。`;

src/data/ts/17.ts

@@ -0,0 +1 @@
+export const content17 = ` 微服务架构将应用程序拆分为多个小服务，每个服务独立开发和部署。这种架构使得前端开发者可以与后端团队更好地协作，快速迭代。通过API网关，前端可以轻松访问不同的微服务。本文将探讨微服务架构的优势及其对前端开发流程的影响。`;

src/data/ts/index.ts

@@ -12,4 +12,5 @@ export * from "./11";
 export * from "./12";
 export * from "./13";
 export * from "./14";
-export * from "./15";
+export * from "./15";
+export * from "./16";