Merge branch 'next14-dev'

.eslintrc.cjs

@@ -5,15 +5,18 @@ module.exports = {
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended',
     'plugin:react-hooks/recommended',
-    "next/core-web-vitals"
+    'next/recommended'
   ],
   ignorePatterns: ['dist', '.eslintrc.cjs'],
   parser: '@typescript-eslint/parser',
-  plugins: ['react-refresh'],
+  plugins: [
+    'react-refresh',
+    'next'
+  ],
   rules: {
     'react-refresh/only-export-components': [
       'warn',
       { allowConstantExport: true },
     ],
-  }
-}
+  },
+};

package.json

@@ -6,7 +6,7 @@
     "dev": "next dev",
     "start": "next start",
     "clean": "rimraf .next out dist",
-    "build": "npm run clean && next build",
+    "build": "next build",
     "preview": "next start -p 8297",
     "lint": "next lint"
   },
@@ -31,6 +31,7 @@
     "rehype-katex": "^7.0.0",
     "rehype-pretty-code": "^0.13.2",
     "remark-math": "^6.0.0",
+    "rimraf": "^5.0.7",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
     "zustand": "^4.5.2"
@@ -40,7 +41,7 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "@typescript-eslint/eslint-plugin": "^7.1.0",
+    "@typescript-eslint/eslint-plugin": "^7.9.0",
     "@typescript-eslint/parser": "^7.1.0",
     "autoprefixer": "^10.4.19",
     "eslint": "^8",

src/app/posts/[slug]/page.tsx

@@ -10,12 +10,16 @@ interface PostPageProps {
     }
 }
 
+interface CustomPost extends Post {
+    description?: string;
+}
+
 /**
  * 获取指定路径文件内容
  * @param slug 动态路由路径
  */
 async function analysisPageParams({params}: PostPageProps) {
-    const doc: Post | undefined = allPosts.find(doc => doc._raw.flattenedPath === params.slug)
+    const doc = allPosts.find((doc: CustomPost) => doc._raw.flattenedPath === params.slug)
 
     if (!doc) {
         return null

src/components/theme-toggle.tsx

@@ -16,47 +16,47 @@ export function ThemeToggle() {
         setDark(theme === "dark")
     }
 
-    const toggleDark = (event: MouseEvent) => {
-        if (!document.startViewTransition) return
-
-        const isDark: boolean = theme === "dark"
-
-        // 获取当前鼠标位置
-        const { clientX: x, clientY: y } = event
-        const endRadius = Math.hypot(
-            Math.max(x, innerWidth - x),
-            Math.max(y, innerHeight - y)
-        )
-
-        console.log("获取当前鼠标位置", endRadius)
-
-        // 获取transition API 实例
-        const transition = document.startViewTransition(() => {
-            setTheme(theme === "light" ? "dark" : "light")
-        })
-
-        transition.ready.then(() => {
-            console.log("transition ready")
-            const clipPath = [
-                `circle(0px at ${x}px ${y}px)`,
-                `circle(${endRadius}px at ${x}px ${y}px)`,
-            ]
-
-            // 自定义动画
-            document.documentElement.animate(
-                {
-                    clipPath: isDark ? [...clipPath].reverse() : clipPath,
-                },
-                {
-                    duration: 400,
-                    easing: "ease-out",
-                    pseudoElement: isDark
-                        ? "::view-transition-old(root)"
-                        : "::view-transition-new(root)",
-                }
-            )
-        })
-    }
+    // const toggleDark = (event: MouseEvent) => {
+    //     if (!document?.startViewTransition) return
+    //
+    //     const isDark: boolean = theme === "dark"
+    //
+    //     // 获取当前鼠标位置
+    //     const { clientX: x, clientY: y } = event
+    //     const endRadius = Math.hypot(
+    //         Math.max(x, innerWidth - x),
+    //         Math.max(y, innerHeight - y)
+    //     )
+    //
+    //     console.log("获取当前鼠标位置", endRadius)
+    //
+    //     // 获取transition API 实例
+    //     const transition = document?.startViewTransition(() => {
+    //         setTheme(theme === "light" ? "dark" : "light")
+    //     })
+    //
+    //     transition.ready.then(() => {
+    //         console.log("transition ready")
+    //         const clipPath = [
+    //             `circle(0px at ${x}px ${y}px)`,
+    //             `circle(${endRadius}px at ${x}px ${y}px)`,
+    //         ]
+    //
+    //         // 自定义动画
+    //         document.documentElement.animate(
+    //             {
+    //                 clipPath: isDark ? [...clipPath].reverse() : clipPath,
+    //             },
+    //             {
+    //                 duration: 400,
+    //                 easing: "ease-out",
+    //                 pseudoElement: isDark
+    //                     ? "::view-transition-old(root)"
+    //                     : "::view-transition-new(root)",
+    //             }
+    //         )
+    //     })
+    // }
 
     return (
         <Button variant="ghost" asChild size="icon" onClick={onHandleChange}>

src/posts/ci-cd/github-actions-pages.md

@@ -1,3 +1,7 @@
+---
+title: GitHub Pages
+date: 2024-06-05
+---
 # 如何使用 GitHub Actions自动部署静态网站
 
 ## 1.准备内容
@@ -16,7 +20,7 @@ npm create vite@latest ./ --template react
 
 ![img.png](img/img.png)
 
-2.2 配置工作流文件 
+2.2 配置工作流文件
 > .github/workflows/main.yml
 
 ```bash
@@ -26,7 +30,7 @@ on:
   push:
     branches:
       - main
-      
+
 # 允许仓库写权限
 permissions:
   contents: write

src/posts/ci-cd/index.md

@@ -1 +1,6 @@
+---
+title: CI/CD
+date: 2024-06-05
+---
+
 # CI/CD Tutorial