update at 2023-11-28 16:32:21

2023-11-28 16:32:21 +08:00 · 2023-11-28 16:32:21 +08:00 · a64455fc93
parent dd35698dff
commit a64455fc93
5 changed files with 103 additions and 72 deletions
--- a/content/sidebars.ts
+++ b/content/sidebars.ts
@ -1,18 +1,6 @@
-/**
- * Creating a sidebar enables you to:
- - create an ordered group of docs
- - render a sidebar for each doc of that group
- - provide next/previous navigation
+import type { SidebarsConfig } from '@docusaurus/plugin-content-docs';

- The sidebars can be generated from the filesystem, or explicitly defined here.
-
- Create as many sidebars as you want.
- */
-
-// @ts-check
-
-/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
-const sidebars = {
+const sidebars: SidebarsConfig = {
  kubernetesSidebar: [
    {
      type: "doc",
@ -708,4 +696,4 @@ const sidebars = {
  ],
 };

-module.exports = sidebars;
+export default sidebars;
--- a/docusaurus.config.ts
+++ b/docusaurus.config.ts
@ -1,13 +1,10 @@
-// @ts-check
-// `@type` JSDoc annotations allow editor autocompletion and type checking
-// (when paired with `@ts-check`).
-// There are various equivalent ways to declare your Docusaurus config.
-// See: https://docusaurus.io/docs/api/docusaurus-config
+import PrismDark from './src/utils/prismDark';
+import type { Config } from '@docusaurus/types';
+// import { themes as prismThemes } from 'prism-react-renderer';

 const beian = '蜀ICP备2021009081号-1'

-/** @type {import('@docusaurus/types').Config} */
-const config = {
+const config: Config = {
  title: 'Kubernetes 实践指南', // 网站标题
  tagline: '云原生老司机带你飞', // slogan
  favicon: 'img/logo.svg', // 电子书 favicon 文件，注意替换
@ -64,7 +61,7 @@ const config = {
        // 文档的路由前缀
        routeBasePath: '/',
        // 左侧导航栏的配置
-        sidebarPath: require.resolve('./content/sidebars.js'),
+        sidebarPath: require.resolve('./content/sidebars.ts'),
        // 每个文档左下角 "编辑此页" 的链接
        editUrl: ({ docPath }) =>
          `https://github.com/imroc/kubernetes-guide/edit/main/content/${docPath}`,
@ -111,7 +108,7 @@ const config = {
        },
        items: [
          {
-            href: 'https://github.com/imroc/kubenretes-guide', // 改成自己的仓库地址
+            href: 'https://github.com/imroc/kubernetes-guide', // 改成自己的仓库地址
            label: 'GitHub',
            position: 'right',
          },
@ -148,7 +145,7 @@ const config = {
      },
      // 自定义代码高亮
      prism: {
-        theme: require('prism-react-renderer/themes/vsDark'),
+        theme: PrismDark,
        magicComments: [
          {
            className: 'code-block-highlighted-line',
@ -182,4 +179,4 @@ const config = {
    }),
 };

-module.exports = config;
+export default config;
--- a/package-lock.json
+++ b/package-lock.json
@ -18,7 +18,7 @@
        "docusaurus-plugin-sass": "^0.2.5",
        "path-browserify": "^1.0.1",
        "plugin-image-zoom": "github:flexanalytics/plugin-image-zoom",
-        "prism-react-renderer": "^1.3.5",
+        "prism-react-renderer": "^2.1.0",
        "raw-loader": "^4.0.2",
        "react": "^18.0.0",
        "react-dom": "^18.0.0",
@ -2719,26 +2719,6 @@
        "react-dom": "^18.0.0"
      }
    },
-    "node_modules/@docusaurus/theme-classic/node_modules/prism-react-renderer": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/prism-react-renderer/-/prism-react-renderer-2.3.0.tgz",
-      "integrity": "sha512-UYRg2TkVIaI6tRVHC5OJ4/BxqPUxJkJvq/odLT/ykpt1zGYXooNperUxQcCvi87LyRnR4nCh81ceOA+e7nrydg==",
-      "dependencies": {
-        "@types/prismjs": "^1.26.0",
-        "clsx": "^2.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.0.0"
-      }
-    },
-    "node_modules/@docusaurus/theme-classic/node_modules/prism-react-renderer/node_modules/clsx": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
-      "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
    "node_modules/@docusaurus/theme-common": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/@docusaurus/theme-common/-/theme-common-3.0.0.tgz",
@ -2768,26 +2748,6 @@
        "react-dom": "^18.0.0"
      }
    },
-    "node_modules/@docusaurus/theme-common/node_modules/prism-react-renderer": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/prism-react-renderer/-/prism-react-renderer-2.3.0.tgz",
-      "integrity": "sha512-UYRg2TkVIaI6tRVHC5OJ4/BxqPUxJkJvq/odLT/ykpt1zGYXooNperUxQcCvi87LyRnR4nCh81ceOA+e7nrydg==",
-      "dependencies": {
-        "@types/prismjs": "^1.26.0",
-        "clsx": "^2.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.0.0"
-      }
-    },
-    "node_modules/@docusaurus/theme-common/node_modules/prism-react-renderer/node_modules/clsx": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
-      "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
    "node_modules/@docusaurus/theme-search-algolia": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/@docusaurus/theme-search-algolia/-/theme-search-algolia-3.0.0.tgz",
@ -12787,11 +12747,23 @@
      }
    },
    "node_modules/prism-react-renderer": {
-      "version": "1.3.5",
-      "resolved": "https://registry.npmjs.org/prism-react-renderer/-/prism-react-renderer-1.3.5.tgz",
-      "integrity": "sha512-IJ+MSwBWKG+SM3b2SUfdrhC+gu01QkV2KmRQgREThBfSQRoufqRfxfHUxpG1WcaFjP+kojcFyO9Qqtpgt3qLCg==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/prism-react-renderer/-/prism-react-renderer-2.3.0.tgz",
+      "integrity": "sha512-UYRg2TkVIaI6tRVHC5OJ4/BxqPUxJkJvq/odLT/ykpt1zGYXooNperUxQcCvi87LyRnR4nCh81ceOA+e7nrydg==",
+      "dependencies": {
+        "@types/prismjs": "^1.26.0",
+        "clsx": "^2.0.0"
+      },
      "peerDependencies": {
-        "react": ">=0.14.9"
+        "react": ">=16.0.0"
+      }
+    },
+    "node_modules/prism-react-renderer/node_modules/clsx": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
+      "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==",
+      "engines": {
+        "node": ">=6"
      }
    },
    "node_modules/prismjs": {
--- a/package.json
+++ b/package.json
@ -25,7 +25,7 @@
    "docusaurus-plugin-sass": "^0.2.5",
    "path-browserify": "^1.0.1",
    "plugin-image-zoom": "github:flexanalytics/plugin-image-zoom",
-    "prism-react-renderer": "^1.3.5",
+    "prism-react-renderer": "^2.1.0",
    "raw-loader": "^4.0.2",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
--- a/src/utils/prismDark.ts
+++ b/src/utils/prismDark.ts
@ -0,0 +1,74 @@
+import { themes, type PrismTheme } from 'prism-react-renderer';
+
+const baseTheme = themes.vsDark;
+
+export default {
+  plain: {
+    color: '#D4D4D4',
+    backgroundColor: '#212121',
+  },
+  styles: [
+    ...baseTheme.styles,
+    {
+      types: ['title'],
+      style: {
+        color: '#569CD6',
+        fontWeight: 'bold',
+      },
+    },
+    {
+      types: ['property', 'parameter'],
+      style: {
+        color: '#9CDCFE',
+      },
+    },
+    {
+      types: ['script'],
+      style: {
+        color: '#D4D4D4',
+      },
+    },
+    {
+      types: ['boolean', 'arrow', 'atrule', 'tag'],
+      style: {
+        color: '#569CD6',
+      },
+    },
+    {
+      types: ['number', 'color', 'unit'],
+      style: {
+        color: '#B5CEA8',
+      },
+    },
+    {
+      types: ['font-matter'],
+      style: {
+        color: '#CE9178',
+      },
+    },
+    {
+      types: ['keyword', 'rule'],
+      style: {
+        color: '#C586C0',
+      },
+    },
+    {
+      types: ['regex'],
+      style: {
+        color: '#D16969',
+      },
+    },
+    {
+      types: ['maybe-class-name'],
+      style: {
+        color: '#4EC9B0',
+      },
+    },
+    {
+      types: ['constant'],
+      style: {
+        color: '#4FC1FF',
+      },
+    },
+  ],
+} satisfies PrismTheme;