From a64455fc9360a41eb99a0c29c7b187f8dd8ccc54 Mon Sep 17 00:00:00 2001 From: roc Date: Tue, 28 Nov 2023 16:32:21 +0800 Subject: [PATCH] update at 2023-11-28 16:32:21 --- content/{sidebars.js => sidebars.ts} | 18 +---- docusaurus.config.js => docusaurus.config.ts | 19 +++-- package-lock.json | 62 +++++----------- package.json | 2 +- src/utils/prismDark.ts | 74 ++++++++++++++++++++ 5 files changed, 103 insertions(+), 72 deletions(-) rename content/{sidebars.js => sidebars.ts} (98%) rename docusaurus.config.js => docusaurus.config.ts (90%) create mode 100644 src/utils/prismDark.ts diff --git a/content/sidebars.js b/content/sidebars.ts similarity index 98% rename from content/sidebars.js rename to content/sidebars.ts index 64a165e..6d13770 100644 --- a/content/sidebars.js +++ 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; diff --git a/docusaurus.config.js b/docusaurus.config.ts similarity index 90% rename from docusaurus.config.js rename to docusaurus.config.ts index 9bfc815..0706b27 100644 --- a/docusaurus.config.js +++ 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; diff --git a/package-lock.json b/package-lock.json index 667442d..53cc4b3 100644 --- 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": { diff --git a/package.json b/package.json index 967b8b1..9d53315 100644 --- 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", diff --git a/src/utils/prismDark.ts b/src/utils/prismDark.ts new file mode 100644 index 0000000..51c2397 --- /dev/null +++ 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;