update at 2023-11-28 16:51:44

Author: imroc

content/sidebars.js content/sidebars.ts

@@ -1,19 +1,5 @@
-/**
- * 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
-
- The sidebars can be generated from the filesystem, or explicitly defined here.
-
- Create as many sidebars as you want.
- */
-
-// @ts-check
-
-// ref: https://docusaurus.io/docs/sidebar/items
-/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
-const sidebars = {
+import type { SidebarsConfig } from '@docusaurus/plugin-content-docs';
+const sidebars: SidebarsConfig = {
   istioSidebar: [
     {
       type: "doc",
@@ -176,4 +162,4 @@ const sidebars = {
   ],
 };
 
-module.exports = sidebars;
+export default sidebars;

docusaurus.config.js docusaurus.config.ts

@@ -1,13 +1,8 @@
-// @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';
 const beian = '蜀ICP备2021009081号-1'
 
-/** @type {import('@docusaurus/types').Config} */
-const config = {
+const config: Config = {
   title: 'istio 实践指南', // 网站标题
   tagline: '云原生老司机带你飞', // slogan
   favicon: 'img/logo.svg', // 电子书 favicon 文件，注意替换
@@ -64,7 +59,7 @@ const config = {
         // 文档的路由前缀
         routeBasePath: '/',
         // 左侧导航栏的配置
-        sidebarPath: require.resolve('./content/sidebars.js'),
+        sidebarPath: require.resolve('./content/sidebars.ts'),
         // 每个文档左下角 "编辑此页" 的链接
         editUrl: ({ docPath }) =>
           `https://github.com/imroc/istio-guide/edit/main/content/${docPath}`,
@@ -148,7 +143,7 @@ const config = {
       },
       // 自定义代码高亮
       prism: {
-        theme: require('prism-react-renderer/themes/vsDark'),
+        theme: PrismDark,
         magicComments: [
           {
             className: 'code-block-highlighted-line',
@@ -177,9 +172,11 @@ const config = {
           'java',
           'json',
           'hcl',
+          'bash',
+          'diff',
         ],
       },
     }),
 };
 
-module.exports = config;
+export default config;

package-lock.json

@@ -15,25 +15,25 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@docusaurus/core": "3.0.0-beta.0",
-    "@docusaurus/plugin-ideal-image": "^3.0.0-beta.0",
-    "@docusaurus/plugin-pwa": "^3.0.0-beta.0",
-    "@docusaurus/preset-classic": "3.0.0-beta.0",
+    "@docusaurus/core": "3.0.0",
+    "@docusaurus/plugin-ideal-image": "^3.0.0",
+    "@docusaurus/plugin-pwa": "^3.0.0",
+    "@docusaurus/preset-classic": "^3.0.0",
     "@giscus/react": "^2.3.0",
-    "@mdx-js/react": "^2.3.0",
+    "@mdx-js/react": "^3.0.0",
     "clsx": "^1.2.1",
     "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",
-    "sass": "^1.69.3"
+    "sass": "^1.69.5"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "3.0.0-beta.0",
-    "@docusaurus/tsconfig": "3.0.0-beta.0",
+    "@docusaurus/module-type-aliases": "^3.0.0",
+    "@docusaurus/tsconfig": "^3.0.0",
     "typescript": "~5.2.2"
   },
   "browserslist": {
@@ -49,6 +49,6 @@
     ]
   },
   "engines": {
-    "node": ">=16.14"
+    "node": ">=18.0"
   }
 }

package.json

@@ -0,0 +1,75 @@
+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;
+