refactor: posts page logic redesign, add search function (#55)

### Summary

This PR refactors the posts page by introducing `PostsClient` to handle client-side rendering logic, and adds robust filtering, search, and pagination features for a better user experience. Additionally, it leverages `es-toolkit` for enhanced efficiency and maintainability, while removing unnecessary code..

### Key Changes

1. **Styling Adjustments**
   - Block-quote style refined with max-width, margin, and padding adjustments for improved readability.
   - Button now has the correct global style with a blue background and pink when hovering.

2. **Posts Page Refactor**
   - **New `PostsClient` Component**: Extracted client-side logic from the posts page for better modularity.
   - **Components Added**: Introduced `Pagination` and `SearchInput` components for posts filtering and pagination.
   - **Category & Tag Param Integration**: Converted categories and tags to URL parameters rather than distinct pages, improving URL structure and navigation.
   - **Path Update**: Updated `MenuItems` and `ItemLinks` components to reflect new category/tag paths. (Will be refactored in the next PR).

3. **Code Cleanup**
   - **Suspense Removal**: Removed redundant Suspense wrappers across different pages.
   - **Export Organization**: Consistently moved all exports to the end of files.

4. **Feature Enhancements**
   - **Search Functionality**: Implemented a robust search that filters posts by title, abstract, content, tags, and categories, with:
     - **Dynamic Filter Display**: Category and tag filters only display when the search box is toggled.
     - **Clear Button**: Users can easily reset the search input.
     - **Real-Time Updates**: Instant refresh of results as users type for an interactive experience.

5. **Tooling Optimization**
   - **Array and String Operations**: Replaced local implementations with `es-toolkit` methods across components to simplify array and string operations.
   - **Pagination Update**: Pagination is disabled if there is only one page, streamlining the UI.

6. **File Deletions & Configuration Updates**
   - **File Deletions**: Removed redundant category and tag slug pages (`categories/[categorySlug]` and `tags/[tagSlug]`).
   - **Configuration Update**: Removed unused pinyin and slug definitions from `config.yml` and refined `Category` type to exclude slugs.

7. **Bug Fixes**
   - Type annotations expanded for better TypeScript support.
   - Meta generation for `posts/[slug]` page corrected.

### Additional Notes

- This refactor streamlines the user experience and prepares the codebase for future scalability.
- Improved URL structure and enhanced user interactivity with real-time search contribute to a more intuitive navigation.

config.yml

@@ -29,16 +29,12 @@ slogan: "As long as the code or the developer is able to run, it's all good."
 # https://react-icons.github.io/react-icons/icons/fa6/
 postCategories:
   - name: '前端' # Category name, same ad frontmatter category, will show in frontend.
-    slug: 'frontend' # (Optional) Category slug, if not set, will be same as name.
     icon: 'FaHtml5' # (Optional) Font Awesome 6 icon name. If not set, no icon.
   - name: '全栈'
-    slug: 'fullstack'
     icon: 'FaCode'
   - name: '教程'
-    slug: 'tutorial'
     icon: 'FaGraduationCap'
   - name: '随笔'
-    slug: 'essay'
     icon: 'FaPen'
 
 #######################

eslint.config.mjs

@@ -1,5 +1,6 @@
 import { zlAsicaTsReactConfig } from 'eslint-config-zl-asica';
 import nextPlugin from '@next/eslint-plugin-next';
+import { PassThrough } from 'stream';
 
 export default [
   ...zlAsicaTsReactConfig,
@@ -29,4 +30,13 @@ export default [
       'unicorn/filename-case': ['error', { cases: { camelCase: true } }],
     },
   },
+  {
+    files: ['src/app/**/*.ts', 'src/app/**/*.tsx'],
+    rules: {
+      'unicorn/filename-case': [
+        'error',
+        { cases: { kebabCase: true, pascalCase: true } },
+      ],
+    },
+  },
 ];

package.json

@@ -24,11 +24,12 @@
     "prepare": "husky"
   },
   "dependencies": {
+    "clsx": "^2.1.1",
+    "es-toolkit": "^1.27.0",
     "gray-matter": "^4.0.3",
     "highlight.js": "^11.10.0",
-    "marked": "^14.1.3",
+    "marked": "^15",
     "next": "15.0.3",
-    "pinyin": "^4.0.0-alpha.2",
     "react": "19.0.0-rc-66855b96-20241106",
     "react-dom": "19.0.0-rc-66855b96-20241106",
     "react-icons": "^5.3.0",
@@ -45,7 +46,7 @@
     "eslint-config-zl-asica": "^1",
     "husky": "^9.1.6",
     "lint-staged": "^15.2.10",
-    "postcss": "^8",
+    "postcss": "^8.4.49",
     "prettier": "^3",
     "prettier-plugin-tailwindcss": "^0.6.8",
     "tailwindcss": "^3.4.1",