docs: switch to native mermaid support (#2306)

This commit is contained in:
Moritz Eckert 2023-09-05 11:24:20 +02:00 committed by GitHub
parent 6e5ba774d8
commit c7996481f2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 37 additions and 34 deletions

View File

@ -6,8 +6,6 @@ const darkCodeTheme = require('prism-react-renderer').themes.dracula;
/** @type {import('@docusaurus/types').Config} */
async function createConfig() {
const mdxMermaid = await import('mdx-mermaid')
return {
title: 'Constellation',
tagline: 'Constellation: The world\'s most secure Kubernetes',
@ -37,38 +35,18 @@ async function createConfig() {
locales: ['en'],
},
// mermaid
markdown: {
mermaid: true,
},
themes: ['@docusaurus/theme-mermaid'],
presets: [
[
'classic',
/** @type {import('@docusaurus/preset-classic').Options} */
({
docs: {
remarkPlugins: [[mdxMermaid.default, {
mermaid: {
theme: 'base',
themeVariables: {
// general
'fontFamily': '"Open Sans", sans-serif',
'primaryColor': '#90FF99', // edgeless green
'primaryTextColor': '#000000',
'secondaryColor': '#A5A5A5', // edgeless grey
'secondaryTextColor': '#000000',
'tertiaryColor': '#E7E6E6', // edgeless light grey
'tertiaryTextColor': '#000000',
// flowchart
'clusterBorder': '#A5A5A5',
'clusterBkg': '#ffffff',
'edgeLabelBackground': '#ffffff',
// sequence diagram
'activationBorderColor': '#000000',
'actorBorder': '#A5A5A5',
'actorFontFamily': '"Open Sans", sans-serif', // not released by mermaid yet
'noteBkgColor': '#8B04DD', // edgeless purple
'noteTextColor': '#ffffff',
},
startOnLoad: true
}
}]],
sidebarPath: require.resolve('./sidebars.js'),
// sidebarPath: 'sidebars.js',
// Please change this to your repo.
@ -216,6 +194,32 @@ async function createConfig() {
darkTheme: darkCodeTheme,
additionalLanguages: ['shell-session'],
},
mermaid: {
theme: { light: 'base', dark: 'base' },
options: {
themeVariables: {
// general
fontFamily: '"Open Sans", sans-serif',
primaryColor: '#90FF99', // edgeless green
primaryTextColor: '#000000',
secondaryColor: '#A5A5A5', // edgeless grey
secondaryTextColor: '#000000',
tertiaryColor: '#E7E6E6', // edgeless light grey
tertiaryTextColor: '#000000',
// flowchart
clusterBorder: '#A5A5A5',
clusterBkg: '#ffffff',
edgeLabelBackground: '#ffffff',
// sequence diagram
activationBorderColor: '#000000',
actorBorder: '#A5A5A5',
actorFontFamily: '"Open Sans", sans-serif', // not released by mermaid yet
noteBkgColor: '#8B04DD', // edgeless purple
noteTextColor: '#ffffff',
},
startOnLoad: true,
},
},
}),
plugins: [

View File

@ -14,17 +14,16 @@
"write-heading-ids": "docusaurus write-heading-ids"
},
"dependencies": {
"@cmfcmf/docusaurus-search-local": "^1.0.0",
"@cmfcmf/docusaurus-search-local": "^1.1.0",
"@docusaurus/core": "^2.2.0",
"@docusaurus/module-type-aliases": "^2.2.0",
"@docusaurus/plugin-google-gtag": "^2.4.1",
"@docusaurus/preset-classic": "^2.2.0",
"@docusaurus/preset-classic": "^2.4.1",
"@docusaurus/theme-mermaid": "^2.4.1",
"@mdx-js/react": "^1.6.22",
"asciinema-player": "^3.0.1",
"asciinema-player": "^3.5.0",
"clsx": "^1.2.1",
"mdx-mermaid": "^1.3.2",
"mermaid": "^10.0.0",
"prism-react-renderer": "^2.0.0",
"prism-react-renderer": "^2.0.6",
"react": "^17.0.2",
"react-dom": "^17.0.2"
},