remove unnecessary semicolon

.eslintrc.js

@@ -41,5 +41,6 @@ module.exports = {
     "react/jsx-curly-brace-presence": "warn",
     // jsx-ally
     "jsx-a11y/no-onchange": WARN,
+    "import/no-anonymous-default-export": OFF,
   },
 }

.gitignore

@@ -34,4 +34,7 @@ yarn-error.log*
 package-lock.json
 .vscode
 tsconfig.tsbuildinfo
-.next/
+.next/
+
+# contentlayer
+.contentlayer

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged

contentlayer.config.ts

@@ -0,0 +1,54 @@
+import { defineDocumentType, makeSource } from "contentlayer/source-files"
+import { remarkHeadingId } from "remark-custom-heading-id"
+import remarkGfm from "remark-gfm"
+import rehypeMdxCodeProps from "rehype-mdx-code-props"
+import emoji from "remark-emoji"
+import * as sidebar from "./src/components/Menu/MenuLinks"
+
+export const Doc = defineDocumentType(() => ({
+  name: "Doc",
+  contentType: "mdx",
+  filePathPattern: "**/*.mdx",
+  fields: {
+    title: { type: "string", required: true },
+    description: { type: "string", required: true },
+    sidebar: {
+      type: "enum",
+      options: [
+        "apiLinks",
+        "advancedLinks",
+        "tsLinks",
+        "faqLinks",
+        "getStartedLinks",
+      ],
+      required: true,
+    },
+  },
+  computedFields: {
+    slug: {
+      type: "string",
+      resolve: (doc) => `/${doc._raw.flattenedPath}`,
+    },
+    slugAsParams: {
+      type: "string",
+      resolve: (doc) => doc._raw.flattenedPath.split("/").slice(1).join("/"),
+    },
+    segment: {
+      type: "list",
+      resolve: (doc) => doc._raw.flattenedPath.split("/"),
+    },
+    pages: {
+      type: "list",
+      resolve: (doc) => sidebar[doc.sidebar] ?? [],
+    },
+  },
+}))
+
+export default makeSource({
+  contentDirPath: "src/content",
+  documentTypes: [Doc],
+  mdx: {
+    remarkPlugins: [remarkGfm, remarkHeadingId, emoji],
+    rehypePlugins: [rehypeMdxCodeProps],
+  },
+})

next.config.mjs

@@ -1,9 +1,4 @@
-import withMDX from "@next/mdx"
-import { remarkHeadingId } from "remark-custom-heading-id"
-import remarkGfm from "remark-gfm"
-import rehypeMdxCodeProps from "rehype-mdx-code-props"
-import emoji from "remark-emoji"
-
+import { withContentlayer } from "next-contentlayer"
 import withBundleAnalyzer from "@next/bundle-analyzer"
 
 /** @type {import('next').NextConfig} */
@@ -19,14 +14,4 @@ const bundleAnalyzer = withBundleAnalyzer({
   enabled: process.env.ANALYZE === "true",
 })
 
-export default bundleAnalyzer(
-  withMDX({
-    extension: /\.mdx?$/,
-    options: {
-      remarkPlugins: [remarkGfm, remarkHeadingId, emoji],
-      rehypePlugins: [rehypeMdxCodeProps],
-      // If you use `MDXProvider`, uncomment the following line.
-      providerImportSource: "@mdx-js/react",
-    },
-  })(nextConfig)
-)
+export default bundleAnalyzer(withContentlayer(nextConfig))

package.json

@@ -4,48 +4,50 @@
   "version": "6.0.1",
   "author": "beier luo",
   "dependencies": {
-    "@hookform/devtools": "2.0.0-beta.1",
+    "@hookform/devtools": "4.3.1",
     "@mdx-js/loader": "^2.3.0",
     "@mdx-js/react": "^2.3.0",
-    "@next/mdx": "^13.4.4",
-    "@types/node": "^20.2.5",
+    "@next/mdx": "^13.4.5",
+    "@types/node": "^20.3.1",
+    "class-variance-authority": "^0.6.0",
     "clsx": "^1.2.1",
+    "contentlayer": "^0.3.3",
+    "date-fns": "^2.30.0",
     "little-state-machine": "^4.8.0",
-    "next": "^13.4.4",
+    "next": "^13.4.5",
+    "next-contentlayer": "^0.3.3",
     "next-themes": "^0.2.1",
-    "prism-react-renderer": "^2.0.4",
+    "prism-react-renderer": "^2.0.5",
     "prismjs": "^1.29.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-github-btn": "1.4.0",
-    "react-helmet": "6.1.0",
-    "react-hook-form": "6.0.0",
+    "react-hook-form": "7.44.3",
     "react-simple-animate": "^3.5.2",
     "react-simple-img": "3.0.0",
     "react-sortablejs": "1.5.1",
-    "react-syntax-highlighter": "^15.5.0",
     "rehype-mdx-code-props": "^1.0.0",
     "remark-custom-heading-id": "^1.0.1",
-    "remark-emoji": "^3.1.1",
+    "remark-emoji": "^3.1.2",
     "remark-gfm": "^3.0.1",
     "sortablejs": "1.15.0"
   },
   "devDependencies": {
-    "@next/bundle-analyzer": "^13.4.4",
+    "@next/bundle-analyzer": "^13.4.5",
     "@types/react-helmet": "^6.1.6",
-    "@typescript-eslint/eslint-plugin": "^5.59.8",
-    "@typescript-eslint/parser": "^5.59.8",
+    "@typescript-eslint/eslint-plugin": "^5.59.11",
+    "@typescript-eslint/parser": "^5.59.11",
     "cross-env": "^7.0.3",
-    "eslint": "^8.41.0",
-    "eslint-config-next": "^13.4.4",
+    "eslint": "^8.42.0",
+    "eslint-config-next": "^13.4.5",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "husky": "^4.3.8",
-    "lint-staged": "^10.5.4",
+    "husky": "^8.0.3",
+    "lint-staged": "^13.2.2",
     "prettier": "^2.8.8",
-    "typescript": "^5.0.4"
+    "typescript": "^5.1.3"
   },
   "keywords": [
     "react-hook-form",
@@ -56,19 +58,15 @@
     "analyze": "cross-env ANALYZE=true next build",
     "build": "next build",
     "dev": "next dev",
-    "format": "prettier --write \"src/**/*.{ts,tsx,mdx}\"",
+    "format": "prettier --write",
     "lint": "next lint --fix",
     "now-build": "npm run build",
-    "start": "npm run develop",
-    "typecheck": "tsc --noEmit"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
+    "start": "next start",
+    "typecheck": "tsc --noEmit",
+    "prepare": "husky install"
   },
   "lint-staged": {
-    "*.{ts,tsx,mdx}": [
+    "*.{ts,tsx,mdx,css,json}": [
       "npm run format"
     ]
   }

src/components/Admonition.module.css

@@ -0,0 +1,59 @@
+.admonition {
+  margin-top: 1rem;
+  margin-bottom: 1em;
+  padding: 15px 30px 15px 15px;
+  border-radius: 0.4rem;
+}
+
+.admonitionIcon {
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 0.2em;
+}
+
+.admonitionIcon svg {
+  display: inline-block;
+  width: 22px;
+  height: 22px;
+  stroke-width: 0;
+}
+
+.admonitionIcon svg {
+  stroke: rgb(253, 253, 254);
+  fill: rgb(253, 253, 254);
+}
+
+.admonitionContent > :last-child {
+  margin-bottom: 0;
+}
+
+/** Customization */
+.admonitionWarning {
+  background-color: rgba(230, 126, 34, 0.1);
+  border-left: 8px solid var(--color-orange);
+}
+
+.admonitionTip {
+  background-color: rgba(46, 204, 113, 0.1);
+  border-left: 8px solid var(--color-green);
+}
+
+.admonitionCaution {
+  background-color: rgba(231, 76, 60, 0.1);
+  border-left: 8px solid var(--color-secondary);
+}
+
+.admonitionImportant {
+  background-color: rgb(25, 60, 71, 0.1);
+  border-left: 8px solid var(--color-blue);
+}
+
+.admonitionNote {
+  background-color: rgb(71, 71, 72, 0.1);
+  border-left: 8px solid var(--color-text);
+}
+
+.admonitionQuestion {
+  background-color: rgba(8, 61, 119, 0.1);
+  border-left: 8px solid var(--color-light-blue);
+}