refactor(components): UI Improvements, Header Modularization, and Fil…

…e Restructure (#56)

This PR includes multiple enhancements, bug fixes, and structural
changes to improve the maintainability, performance, and user experience
of the application.

---

#### **Enhancements**

1. **Header Component Refactor**:
   - Modularized `Header` component.
- Added animation for smoother hover transitions and a fade-in effect
for the mobile menu.
- Fixed an issue where the mobile dropdown could partially obscure the
burger icon.
- Improved accessibility with an outside-click listener to close the
menu.

2. **Search and UI Improvements**:
- Fix dropdown background colors for improved readability in search
filters.

3. **Code Quality & Maintainability**:
- Moved hooks within the `Header` to their own functions for modularity.
   - Added more TypeScript type annotations for better code clarity.
   - Consolidated exports at the end of each file.

---

#### **Structural Changes**

1. **Reorganized Components**:
- Created a `posts` folder in `components` to house related components
(`DisqusComments`, `Pagination`, `PostLayout`, `SearchInput`, etc.),
improving project structure. `layouts` removed.

2. **Global Styling Updates**:
- Removed background images on index views to streamline header styling.

3. **Build and Configurations**:
- Added `.gitattributes` for consistent line endings and file handling.
- Updated the Node.js engine requirement to Node 20 in `package.json`.

.gitattributes

@@ -0,0 +1,56 @@
+* text=auto
+*.sh eol=lf
+*.bat eol=crlf
+
+*.md diff=text
+
+.gitattributes export-ignore
+README.md export-subst
+
+# Node.js / Yarn Related
+pnp.* linguist-generated
+yarn.lock linguist-generated
+package-lock.json linguist-generated
+node_modules/ linguist-generated
+pnpm-lock.yaml linguist-generated
+# Build files
+dist/ linguist-generated
+build/ linguist-generated
+out/ linguist-generated
+# Static files
+*.png linguist-generated
+*.jpg linguist-generated
+*.jpeg linguist-generated
+*.gif linguist-generated
+*.svg linguist-generated
+*.ico linguist-generated
+*.eot linguist-generated
+*.ttf linguist-generated
+*.woff linguist-generated
+*.woff2 linguist-generated
+# CI/CD
+.github/ linguist-generated
+.gitlab-ci.yml linguist-generated
+.circleci/ linguist-generated
+
+# Pic and video
+*.png binary
+*.jpg binary
+*.jpeg binary
+*.gif binary
+*.mp4 binary
+*.mov binary
+*.mkv binary
+*.mp3 binary
+
+# Archive
+*.zip binary
+*.rar binary
+*.gz binary
+*.7z binary
+
+# Executable
+*.exe binary
+*.msi binary
+*.dmg binary
+*.iso binary

.github/ISSUE_TEMPLATE/🐛-bug-report.md

@@ -1,41 +1,39 @@
 ---
-name: "\U0001F41B Bug report"
-about: Create a report to help us improve
+name: '🐛 Bug report'
+about: Report an issue to improve the functionality and usability of the project.
 title: '[BUG]'
 labels: bug
 assignees: ZL-Asica
 ---
 
-**Describe the bug**
-A clear and concise description of what the bug is.
+**Description:**
+Provide a clear and concise description of the issue.
 
-**To Reproduce**
-Steps to reproduce the behavior:
+**Steps to Reproduce:**
 
-1. Go to '...'
-2. Click on '....'
-3. Scroll down to '....'
-4. See error
+1. Navigate to `...`
+2. Perform action `...`
+3. Observe the behavior `...`
 
-**Expected behavior**
-A clear and concise description of what you expected to happen.
+**Expected Behavior:**
+Describe what you expected to happen.
 
-**Screenshots**
-If applicable, add screenshots to help explain your problem.
+**Screenshots/Visuals:**
+Attach any screenshots that demonstrate the problem.
 
-**Desktop (please complete the following information):**
+**System Details:**
 
-- OS: [e.g. macOS]
-- Browser [e.g. chrome, safari]
-- Version [e.g. 22]
-- Network physical location [e.g. U.S., China (Mainland)
+- **OS**: (e.g., macOS Ventura)
+- **Browser**: (e.g., Chrome 118.0)
+- **Version**: (e.g., v1.2.3)
+- **Network**: (e.g., U.S., Mainland China)
 
-**Smartphone (please complete the following information):**
+**Mobile Environment:**
 
-- Device: [e.g. iPhone 16]
-- OS: [e.g. iOS 18.1]
-- Browser [e.g. stock browser, safari]
-- Version [e.g. 22]
+- **Device**: (e.g., iPhone 15)
+- **OS**: (e.g., iOS 18)
+- **Browser**: (e.g., Safari)
+- **Version**: (e.g., v18.3.2)
 
-**Additional context**
-Add any other context about the problem here.
+**Additional Context:**
+Add any extra information here, including related configuration or debugging attempts.

.github/ISSUE_TEMPLATE/💡-feature-request.md

@@ -1,19 +1,19 @@
 ---
-name: "\U0001F4A1 Feature request"
-about: Suggest an idea for this project
+name: '💡 Feature request'
+about: Propose new features or improvements to enhance the project.
 title: '[Feature]'
 labels: enhancement
 assignees: ''
 ---
 
-**Is your feature request related to a problem? Please describe.**
-A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+**Problem/Background:**
+Explain the motivation behind this feature and any existing limitations.
 
-**Describe the solution you'd like**
-A clear and concise description of what you want to happen.
+**Proposed Solution:**
+Describe the desired feature in detail, including UI/UX suggestions if applicable.
 
-**Describe alternatives you've considered**
-A clear and concise description of any alternative solutions or features you've considered.
+**Alternatives Considered:**
+List any alternative approaches or previous solutions considered.
 
-**Additional context**
-Add any other context or screenshots about the feature request here.
+**Additional Context:**
+Provide any other relevant context, visuals, or references.

.github/ISSUE_TEMPLATE/🔄-refactor-Improvement.md

@@ -0,0 +1,19 @@
+---
+name: '🔄 Refactor/Improvement'
+about: Suggest code, structure, or performance optimizations.
+title: '[Refactor]'
+labels: enhancemanet
+assignees: ZL-Asica
+---
+
+**Description:**
+Describe what you’d like to refactor or improve, linking to specific files/components.
+
+**Impact:**
+Explain how this change will improve the project (e.g., maintainability, readability, or performance).
+
+**Suggested Approach:**
+Outline an approach or provide a sample refactored code snippet.
+
+**Related PRs/Commits:**
+Link to relevant code or previous attempts at refactoring.

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,19 +1,24 @@
 ## Description
 
-Please include a summary of the changes and the related issue.
+Provide a concise summary of the changes, the motivation behind them, and a link to any relevant issues.
 
-## Type of change
+## Type of Change
 
-- [ ] Bug fix
-- [ ] New feature
-- [ ] Code refactor
-- [ ] Breaking change
-- [ ] Style update
-- [ ] Documentation update
+Select all options that apply to this pull request:
+
+- [ ] 🐛 Bug fix
+- [ ] ✨ New feature
+- [ ] 🛠 Code refactor
+- [ ] ⚠️ Breaking change
+- [ ] 🎨 Style update
+- [ ] 📚 Documentation update
 
 ## Checklist
 
-- [ ] I have performed a self-review of my code
-- [ ] Single file within 200 lines of codes
-- [ ] Comments has added
-- [ ] My changes generate no new warnings
+Before submitting, please confirm the following:
+
+- [ ] I have performed a self-review of my code.
+- [ ] The main changes are limited to single files, ideally within 200 lines.
+- [ ] Clear and concise comments have been added where necessary.
+- [ ] My changes do not introduce any new warnings or errors in the codebase.
+- [ ] Any dependencies have been updated in `package.json` and documented.

.github/workflows/label-pr-based-on-paths.yml

@@ -26,13 +26,13 @@ jobs:
             });
 
             const labelsToColor = {
-              main: 'f66a0a', // Orange
+              'main': 'f66a0a', // Orange
               'common-components': '1f77b4', // Blue
-              layout: '8c564b', // Brown
-              service: '2ca02c', // Green
-              styles: '9467bd', // Purple
-              content: 'ffdd57', // Yellow
-              types: 'd62728', // Red
+              'posts': '8c564b', // Brown
+              'service': '2ca02c', // Green
+              'styles': '9467bd', // Purple
+              'content': 'ffdd57', // Yellow
+              'types': 'd62728', // Red
             };
 
             const labels = new Set();
@@ -41,22 +41,22 @@ jobs:
               if (file.filename.startsWith('src/app')) {
                 labels.add('main');
               }
-              if (file.filename.startsWith('src/components/layout')) {
-                labels.add('layout');
+              if (file.filename.startsWith('src/components/posts')) {
+                labels.add('posts');
               }
               if (file.filename.startsWith('src/components/common')) {
                 labels.add('common-components');
               }
-              if (file.filename.startsWith('src/service')) {
-                labels.add('service');
+              if (file.filename.startsWith('src/services')) {
+                labels.add('services');
               }
-              if (file.filename.startsWith('src/styles')) {
+              if (file.filename.endsWith('.css')) {
                 labels.add('styles');
               }
               if (file.filename.startsWith('posts')) {
                 labels.add('content');
               }
-              if (file.filename.startsWith('src/types.d.ts')) {
+              if (file.filename.startsWith('src/types.d.ts') || file.filename.endsWith('.d.ts')) {
                 labels.add('types');
               }
             });

.github/workflows/label-pr-size.yml

@@ -21,12 +21,12 @@ jobs:
         with:
           sizes: >
             {
-              "0": "XS",
-              "20": "S",
-              "50": "M",
-              "200": "L",
-              "800": "XL",
-              "2000": "XXL"
+              "0": XS,
+              "20": S,
+              "50": M,
+              "200": L,
+              "800": XL,
+              "2000": XXL,
             }
 
       - name: Set label colors

README.md

@@ -18,26 +18,23 @@
 ```plaintext
 .
 ├── config.yml                # 全局配置文件（站点信息、作者信息等）
-├── eslint.config.mjs         # ESLint 配置文件
-├── prettier.config.cjs       # Prettier 配置文件
-├── postcss.config.mjs        # PostCSS 配置文件
-├── tailwind.config.ts        # Tailwind CSS 配置文件
-├── tsconfig.json             # TypeScript 配置文件
-├── next.config.ts            # Next.js 配置文件
 ├── posts                     # Markdown 格式的文章目录
 ├── public                    # 静态资源目录（favicon, robots.txt, 等）
 ├── src                       # 项目源代码
 │   ├── app                     # Next.js 应用目录（按页面组织）
 │   ├── components              # 复用组件目录
 │   │   ├── common              # 通用组件
-│   │   └── layout              # 布局组件
+│   │   └── posts               # 文章页面组件
 │   ├── services                # 服务目录，包含数据获取和解析逻辑
 │   │   ├── config              # 配置加载
 │   │   ├── content             # 内容处理和文章获取
 │   │   ├── parsing             # 内容解析和标签处理
 │   │   └── utils               # 实用工具
 │   ├── styles                  # 全局和组件样式
 │   └── types.d.ts              # 全局类型定义
+├── postcss.config.mjs        # PostCSS 配置文件
+├── tailwind.config.ts        # Tailwind CSS 配置文件
+├── next.config.ts            # Next.js 配置文件
 ├── package.json              # 项目依赖和脚本
 └── pnpm-lock.yaml            # pnpm 依赖锁定文件
 ```

config.yml

@@ -24,18 +24,6 @@ slogan: "As long as the code or the developer is able to run, it's all good."
 #######################
 # HEADER SETTINGS
 #######################
-# Post Categories: Add your post categories here.
-# Use icons from link below (e.g., 'FaHouse' for 'fa6 FaHouse').
-# https://react-icons.github.io/react-icons/icons/fa6/
-postCategories:
-  - name: '前端' # Category name, same ad frontmatter category, will show in frontend.
-    icon: 'FaHtml5' # (Optional) Font Awesome 6 icon name. If not set, no icon.
-  - name: '全栈'
-    icon: 'FaCode'
-  - name: '教程'
-    icon: 'FaGraduationCap'
-  - name: '随笔'
-    icon: 'FaPen'
 
 #######################
 # SOCIAL MEDIA SETTINGS

eslint.config.mjs

@@ -22,6 +22,23 @@ export default [
           },
         },
       ],
+      'react-refresh/only-export-components': [
+        'warn',
+        {
+          allowExportNames: [
+            'metadata',
+            'generateMetadata',
+            'generateStaticParams',
+            'generateSitemap',
+            'generateRobotsTxt',
+            'dynamic',
+            'revalidate',
+            'fetchCache',
+            'config',
+            'alternateLinks',
+          ],
+        },
+      ],
     },
   },
   {

package.json

@@ -65,7 +65,7 @@
     "@types/react-dom": "npm:[email protected]"
   },
   "engines": {
-    "node": ">=18.18.0"
+    "node": ">=20"
   },
   "packageManager": "[email protected]"
 }

src/app/about/page.tsx

@@ -3,7 +3,7 @@ import type { Metadata } from 'next';
 import { getConfig } from '@/services/config';
 import { getPostData } from '@/services/content';
 
-import PostLayout from '@/components/layout/PostLayout';
+import PostLayout from '@/components/posts/PostLayout';
 
 function generateMetadata(): Metadata {
   const config = getConfig();