From dd6febe21014d3a990457dd995b8548ee75e86d3 Mon Sep 17 00:00:00 2001 From: tangly Date: Sun, 13 Nov 2022 16:20:11 +0800 Subject: [PATCH 1/2] mermaid --- components/Mermaid.js | 64 ++++++++++++++++++++++++++++++++++++++++ components/NotionPage.js | 4 +++ 2 files changed, 68 insertions(+) create mode 100644 components/Mermaid.js diff --git a/components/Mermaid.js b/components/Mermaid.js new file mode 100644 index 00000000..3717da23 --- /dev/null +++ b/components/Mermaid.js @@ -0,0 +1,64 @@ +import React from 'react' +import mermaid from 'mermaid' + +mermaid.initialize({ + startOnLoad: true, + theme: 'default', + securityLevel: 'loose', + themeCSS: ` + g.classGroup rect { + fill: #282a36; + stroke: #6272a4; + } + g.classGroup text { + fill: #f8f8f2; + } + g.classGroup line { + stroke: #f8f8f2; + stroke-width: 0.5; + } + .classLabel .box { + stroke: #21222c; + stroke-width: 3; + fill: #21222c; + opacity: 1; + } + .classLabel .label { + fill: #f1fa8c; + } + .relation { + stroke: #ff79c6; + stroke-width: 1; + } + #compositionStart, #compositionEnd { + fill: #bd93f9; + stroke: #bd93f9; + stroke-width: 1; + } + #aggregationEnd, #aggregationStart { + fill: #21222c; + stroke: #50fa7b; + stroke-width: 1; + } + #dependencyStart, #dependencyEnd { + fill: #00bcd4; + stroke: #00bcd4; + stroke-width: 1; + } + #extensionStart, #extensionEnd { + fill: #f8f8f2; + stroke: #f8f8f2; + stroke-width: 1; + }`, + fontFamily: 'Fira Code' +}) + +export default class Mermaid extends React.Component { + componentDidMount() { + mermaid.contentLoaded() + } + + render() { + return
{this.props.chart}
+ } +} diff --git a/components/NotionPage.js b/components/NotionPage.js index 863069a3..eafe7228 100644 --- a/components/NotionPage.js +++ b/components/NotionPage.js @@ -41,6 +41,7 @@ import 'prismjs/components/prism-swift.js' import 'prismjs/components/prism-wasm.js' import 'prismjs/components/prism-yaml.js' import 'prismjs/components/prism-r.js' +import Mermaid from './Mermaid' const Collection = dynamic(() => import('react-notion-x/build/third-party/collection').then((m) => m.Collection), { ssr: true } @@ -101,7 +102,10 @@ const NotionPage = ({ post }) => { addWatch4Dom() }, []) + const test = 'graph LR\nM{判断中位点
与旋转点的位置}--左侧元素小于中位点-->N[旋转点在中位点右侧
中位点左侧是有序序列]\nN-->O{目标值与
中位点的位置}\nO-- 最左侧元素 <= 目标 < 中位数-->B[目标值在中位点左侧
right=mid]\nO-- 否则 -->D[目标值在中位点的右侧
left=mid]\nM--左侧元素大于中位点-->E[旋转点在中位点左侧
中位点右侧是有序序列]\nE-->A{目标值与
中位点的位置}\nA--中位数 <= 查找目标 <= 最右侧元素-->F[目标值在中位点的右侧
left=mid]\nA--否则-->G[目标值在中位点的左侧
right=mid]\nM--左侧元素等于中位点
这种情况说明mid=0-->N\nM--右侧元素小于中位点-->N\nM--右侧元素大于中位点-->E\nM--右侧元素等于中位点
这种情况说明mid=-1-->E' + return
+ Date: Sun, 13 Nov 2022 18:22:16 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E6=94=AF=E6=8C=81mermaid=E5=9B=BE=E8=A1=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Mermaid.js | 64 ---------------------------------------- components/NotionPage.js | 17 +++++++---- package.json | 1 + 3 files changed, 12 insertions(+), 70 deletions(-) delete mode 100644 components/Mermaid.js diff --git a/components/Mermaid.js b/components/Mermaid.js deleted file mode 100644 index 3717da23..00000000 --- a/components/Mermaid.js +++ /dev/null @@ -1,64 +0,0 @@ -import React from 'react' -import mermaid from 'mermaid' - -mermaid.initialize({ - startOnLoad: true, - theme: 'default', - securityLevel: 'loose', - themeCSS: ` - g.classGroup rect { - fill: #282a36; - stroke: #6272a4; - } - g.classGroup text { - fill: #f8f8f2; - } - g.classGroup line { - stroke: #f8f8f2; - stroke-width: 0.5; - } - .classLabel .box { - stroke: #21222c; - stroke-width: 3; - fill: #21222c; - opacity: 1; - } - .classLabel .label { - fill: #f1fa8c; - } - .relation { - stroke: #ff79c6; - stroke-width: 1; - } - #compositionStart, #compositionEnd { - fill: #bd93f9; - stroke: #bd93f9; - stroke-width: 1; - } - #aggregationEnd, #aggregationStart { - fill: #21222c; - stroke: #50fa7b; - stroke-width: 1; - } - #dependencyStart, #dependencyEnd { - fill: #00bcd4; - stroke: #00bcd4; - stroke-width: 1; - } - #extensionStart, #extensionEnd { - fill: #f8f8f2; - stroke: #f8f8f2; - stroke-width: 1; - }`, - fontFamily: 'Fira Code' -}) - -export default class Mermaid extends React.Component { - componentDidMount() { - mermaid.contentLoaded() - } - - render() { - return
{this.props.chart}
- } -} diff --git a/components/NotionPage.js b/components/NotionPage.js index eafe7228..8b54e085 100644 --- a/components/NotionPage.js +++ b/components/NotionPage.js @@ -41,7 +41,7 @@ import 'prismjs/components/prism-swift.js' import 'prismjs/components/prism-wasm.js' import 'prismjs/components/prism-yaml.js' import 'prismjs/components/prism-r.js' -import Mermaid from './Mermaid' +import mermaid from 'mermaid' const Collection = dynamic(() => import('react-notion-x/build/third-party/collection').then((m) => m.Collection), { ssr: true } @@ -66,10 +66,18 @@ const NotionPage = ({ post }) => { const zoomRef = React.useRef(zoom ? zoom.clone() : null) React.useEffect(() => { + // 支持 Mermaid + const mermaids = document.querySelectorAll('.notion-code .language-mermaid') + for (const e of mermaids) { + const chart = e.innerText + e.parentElement.parentElement.innerHTML = `
${chart}
` + mermaid.contentLoaded() + } + setTimeout(() => { if (window.location.hash) { const tocNode = document.getElementById(window.location.hash.substring(1)) - if (tocNode && tocNode.className.indexOf('notion') > -1) { + if (tocNode && tocNode?.className?.indexOf('notion') > -1) { tocNode.scrollIntoView({ block: 'start', behavior: 'smooth' }) } } @@ -102,10 +110,7 @@ const NotionPage = ({ post }) => { addWatch4Dom() }, []) - const test = 'graph LR\nM{判断中位点
与旋转点的位置}--左侧元素小于中位点-->N[旋转点在中位点右侧
中位点左侧是有序序列]\nN-->O{目标值与
中位点的位置}\nO-- 最左侧元素 <= 目标 < 中位数-->B[目标值在中位点左侧
right=mid]\nO-- 否则 -->D[目标值在中位点的右侧
left=mid]\nM--左侧元素大于中位点-->E[旋转点在中位点左侧
中位点右侧是有序序列]\nE-->A{目标值与
中位点的位置}\nA--中位数 <= 查找目标 <= 最右侧元素-->F[目标值在中位点的右侧
left=mid]\nA--否则-->G[目标值在中位点的左侧
right=mid]\nM--左侧元素等于中位点
这种情况说明mid=0-->N\nM--右侧元素小于中位点-->N\nM--右侧元素大于中位点-->E\nM--右侧元素等于中位点
这种情况说明mid=-1-->E' - return
- -1) { + } else if (mutation.target.className && typeof (mutation.target.className) === 'string' && mutation?.target?.className?.indexOf('language-') > -1) { const copyCode = mutation.target.parentElement?.firstElementChild if (copyCode) { fixCopy(copyCode) diff --git a/package.json b/package.json index e9277d2a..94be47a9 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "lodash.throttle": "^4.1.1", "memory-cache": "^0.2.0", "mongodb": "^4.6.0", + "mermaid": "9.2.2", "next": "12.1.6", "notion-client": "6.15.6", "notion-utils": "6.15.6",