feat: support rendering syntax diagrams

gatsby-config.js

@@ -1,4 +1,5 @@
 const purgecssWhitelist = require('./purgecss-whitelist')
+const { remarkSyntaxDiagram } = require('./src/lib/remarkSyntaxDiagram')
 
 module.exports = {
   siteMetadata: {
@@ -52,6 +53,7 @@ module.exports = {
             },
           },
         ],
+        remarkPlugins: [() => remarkSyntaxDiagram],
       },
     },
     {

package.json

@@ -46,16 +46,21 @@
     "remark-html": "^11.0.1"
   },
   "devDependencies": {
+    "@prantlf/railroad-diagrams": "^1.0.1",
+    "anafanafo": "^1.0.0",
     "bulma": "^0.8.2",
     "husky": "^4.2.5",
+    "jest": "^26.2.2",
     "lint-staged": "^10.2.6",
     "node-sass": "^4.14.1",
+    "pegjs": "^0.10.0",
     "prettier": "2.0.5",
     "replacestream": "^4.0.3",
     "resolve-url-loader": "^3.1.1",
     "rimraf": "^3.0.2",
     "signale": "^1.4.0",
     "to-readable-stream": "^2.1.0",
+    "unist-util-flatmap": "^1.0.0",
     "yargs": "^15.3.1"
   },
   "keywords": [
@@ -68,7 +73,7 @@
     "start:0.0.0.0": "gatsby develop --host 0.0.0.0",
     "serve": "gatsby serve",
     "clean": "gatsby clean",
-    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1",
+    "test": "jest --coverage --roots src",
     "clean:docs:docs-tidb:en": "rimraf ./markdown-pages/contents/en/docs-tidb/**/*.md",
     "clean:docs:docs-tidb:zh": "rimraf ./markdown-pages/contents/zh/docs-tidb/**/*.md",
     "clean:docs:docs-tidb-operator:en": "rimraf ./markdown-pages/contents/en/docs-tidb-operator/**/*.md",

src/components/shortcodes/index.js

@@ -6,6 +6,7 @@ import NavColumn from './navColumn'
 import ColumnTitle from './columnTitle'
 import WithCopy from './withCopy'
 import TabsPanel from './tabsPanel'
+import SyntaxDiagram from './syntaxDiagram'
 import EmbedYouTube from './embedYouTube'
 
 export {
@@ -17,5 +18,6 @@ export {
   ColumnTitle,
   WithCopy,
   TabsPanel,
+  SyntaxDiagram,
   EmbedYouTube,
 }

src/components/shortcodes/syntaxDiagram.js

@@ -0,0 +1,46 @@
+import PropTypes from 'prop-types'
+import { FormattedMessage } from 'react-intl'
+import React from 'react'
+import AccountTreeRoundedIcon from '@material-ui/icons/AccountTreeRounded'
+import CodeIcon from '@material-ui/icons/Code'
+import '../../styles/components/syntaxDiagram.scss'
+
+const SyntaxDiagram = ({ children }) => {
+  const [value, setValue] = React.useState(0)
+
+  return (
+    <div className="PingCAP-Doc-syntax-diagram-root">
+      <div className="PingCAP-Doc-syntax-diagram-toolbar buttons are-small are-light has-addons is-right">
+        <button className="button is-light" onClick={() => setValue(0)}>
+          <span className="icon">
+            <AccountTreeRoundedIcon fontSize="small" />
+          </span>
+          <span>
+            <FormattedMessage id="syntaxDiagram.syntaxDiagram" />
+          </span>
+        </button>
+        <button className="button is-light" onClick={() => setValue(1)}>
+          <span className="icon">
+            <CodeIcon fontSize="small" />
+          </span>
+          <span>
+            <FormattedMessage id="syntaxDiagram.ebnf" />
+          </span>
+        </button>
+      </div>
+      <div
+        hidden={value !== 0}
+        className="PingCAP-Doc-syntax-diagram-container"
+      >
+        {children[0]}
+      </div>
+      <div hidden={value !== 1}>{children[1]}</div>
+    </div>
+  )
+}
+
+SyntaxDiagram.propTypes = {
+  children: PropTypes.node.isRequired,
+}
+
+export default SyntaxDiagram

src/intl/en.json

@@ -18,6 +18,10 @@
     "tip": "Tip",
     "error": "Error"
   },
+  "syntaxDiagram": {
+    "syntaxDiagram": "Diagram",
+    "ebnf": "Source"
+  },
   "search": {
     "type": "Type:",
     "version": "Version:",

src/intl/zh.json

@@ -18,6 +18,10 @@
     "tip": "小贴士",
     "error": "错误"
   },
+  "syntaxDiagram": {
+    "syntaxDiagram": "语法图",
+    "ebnf": "代码"
+  },
   "search": {
     "type": "分类：",
     "version": "版本：",