chore: upgrade docusaurus

Signed-off-by: Yue Yang <g1enyy0ung@gmail.com>

docusaurus.config.js

@@ -33,7 +33,7 @@ module.exports = {
           activeBasePath: 'docs',
           label: 'Documentation',
         },
-        { to: 'interactiveTutorial', label: 'Interactive Tutorial' },
+        { to: 'interactive-tutorial', label: 'Interactive Tutorial' },
         {
           href: 'https://github.com/chaos-mesh/chaos-mesh',
           label: 'GitHub',
@@ -53,12 +53,12 @@ module.exports = {
           title: 'Documentation',
           items: [
             {
-              label: 'Getting Started',
+              label: 'Get Started',
-              to: 'https://chaos-mesh.org/docs/get_started/get_started_on_kind',
+              to: 'docs/get_started/get_started_on_kind',
             },
             {
               label: 'User Guides',
-              to: 'https://chaos-mesh.org/docs/user_guides/installation',
+              to: 'docs/user_guides/installation',
             },
           ],
         },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "chaos-mesh-website",
-  "version": "1.0.2",
+  "version": "1.2.0",
   "private": true,
   "scripts": {
     "start": "docusaurus start",

src/components/PickVersion.jsx

@@ -1,13 +1,15 @@
 import BrowserOnly from '@docusaurus/BrowserOnly'
 import CodeBlock from '../theme/CodeBlock'
 import React from 'react'
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
 import { usePluginData } from '@docusaurus/useGlobalData'
 
 export const usePickVersion = () => {
+  const { siteConfig } = useDocusaurusContext()
   const pathname = window.location.pathname
 
   let preferred = window.localStorage.getItem('docs-preferred-version-default')
-  if (pathname === '/' && preferred) {
+  if (pathname === siteConfig.baseUrl && preferred) {
     return preferred === 'current' ? 'latest' : preferred
   }
 

src/pages/index.js

@@ -84,7 +84,11 @@ function Home() {
       <div className={clsx('hero', styles.hero)}>
         <div className="container text--center">
           <h2 className="hero__subtitle">
-            Chaos Mesh® is a <a href="https://cncf.io/">Cloud Native Computing Foundation</a> sandbox project
+            Chaos Mesh® is a{' '}
+            <a href="https://cncf.io/" target="_blank">
+              Cloud Native Computing Foundation
+            </a>{' '}
+            sandbox project
           </h2>
           <div className={clsx('cncf-logo', styles.cncfLogo)} />
         </div>

src/theme/CodeBlock/__tests__/index.test.js

@@ -0,0 +1,83 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import {parseCodeBlockTitle} from '../index';
+const metastringSamples = {
+  doubleQuote: {
+    input: `title="index.js"`,
+    expectedOutput: `index.js`,
+  },
+  singleQuote: {
+    input: `title='index.js'`,
+    expectedOutput: `index.js`,
+  },
+  mismatchedQuotes: {
+    input: `title="index.js'`,
+    expectedOutput: ``,
+  },
+  undefinedMetastring: {
+    input: undefined,
+    expectedOutput: ``,
+  },
+  noTitle: {
+    input: `{1,2-3}`,
+    expectedOutput: '',
+  },
+  otherMetadata: {
+    input: `title="index.js" label="JavaScript"`,
+    expectedOutput: `index.js`,
+  },
+  titleWithDoubleQuotes: {
+    input: `title='console.log("Hello, World!")'`,
+    expectedOutput: `console.log("Hello, World!")`,
+  },
+  titleWithSingleQuotes: {
+    input: `title="console.log('Hello, World!')"`,
+    expectedOutput: `console.log('Hello, World!')`,
+  },
+};
+describe('parseCodeBlockTitle', () => {
+  test('sholud parse double quote delimited title', () => {
+    const sample = metastringSamples.doubleQuote;
+    const result = parseCodeBlockTitle(sample.input);
+    expect(result).toEqual(sample.expectedOutput);
+  });
+  test('should parse single quote delimited title', () => {
+    const sample = metastringSamples.singleQuote;
+    const result = parseCodeBlockTitle(sample.input);
+    expect(result).toEqual(sample.expectedOutput);
+  });
+  test('should not parse mismatched quote delimiters', () => {
+    const sample = metastringSamples.mismatchedQuotes;
+    const result = parseCodeBlockTitle(sample.input);
+    expect(result).toEqual(sample.expectedOutput);
+  });
+  test('should parse undefined metastring', () => {
+    const sample = metastringSamples.undefinedMetastring;
+    const result = parseCodeBlockTitle(sample.input);
+    expect(result).toEqual(sample.expectedOutput);
+  });
+  test('should parse metastring with no title specified', () => {
+    const sample = metastringSamples.noTitle;
+    const result = parseCodeBlockTitle(sample.input);
+    expect(result).toEqual(sample.expectedOutput);
+  });
+  test('should parse only up to first matching delimiter', () => {
+    const sample = metastringSamples.otherMetadata;
+    const result = parseCodeBlockTitle(sample.input);
+    expect(result).toEqual(sample.expectedOutput);
+  });
+  test('should parse double quotes when delimited by single quotes', () => {
+    const sample = metastringSamples.titleWithDoubleQuotes;
+    const result = parseCodeBlockTitle(sample.input);
+    expect(result).toEqual(sample.expectedOutput);
+  });
+  test('should parse single quotes when delimited by double quotes', () => {
+    const sample = metastringSamples.titleWithSingleQuotes;
+    const result = parseCodeBlockTitle(sample.input);
+    expect(result).toEqual(sample.expectedOutput);
+  });
+});

src/theme/CodeBlock/__tests__/parseCodeBlockTitle.test.js

@@ -0,0 +1,83 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import parseCodeBlockTitle from '../parseCodeBlockTitle';
+const metastringSamples = {
+  doubleQuote: {
+    input: `title="index.js"`,
+    expectedOutput: `index.js`,
+  },
+  singleQuote: {
+    input: `title='index.js'`,
+    expectedOutput: `index.js`,
+  },
+  mismatchedQuotes: {
+    input: `title="index.js'`,
+    expectedOutput: ``,
+  },
+  undefinedMetastring: {
+    input: undefined,
+    expectedOutput: ``,
+  },
+  noTitle: {
+    input: `{1,2-3}`,
+    expectedOutput: '',
+  },
+  otherMetadata: {
+    input: `title="index.js" label="JavaScript"`,
+    expectedOutput: `index.js`,
+  },
+  titleWithDoubleQuotes: {
+    input: `title='console.log("Hello, World!")'`,
+    expectedOutput: `console.log("Hello, World!")`,
+  },
+  titleWithSingleQuotes: {
+    input: `title="console.log('Hello, World!')"`,
+    expectedOutput: `console.log('Hello, World!')`,
+  },
+};
+describe('parseCodeBlockTitle', () => {
+  test('sholud parse double quote delimited title', () => {
+    const sample = metastringSamples.doubleQuote;
+    const result = parseCodeBlockTitle(sample.input);
+    expect(result).toEqual(sample.expectedOutput);
+  });
+  test('should parse single quote delimited title', () => {
+    const sample = metastringSamples.singleQuote;
+    const result = parseCodeBlockTitle(sample.input);
+    expect(result).toEqual(sample.expectedOutput);
+  });
+  test('should not parse mismatched quote delimiters', () => {
+    const sample = metastringSamples.mismatchedQuotes;
+    const result = parseCodeBlockTitle(sample.input);
+    expect(result).toEqual(sample.expectedOutput);
+  });
+  test('should parse undefined metastring', () => {
+    const sample = metastringSamples.undefinedMetastring;
+    const result = parseCodeBlockTitle(sample.input);
+    expect(result).toEqual(sample.expectedOutput);
+  });
+  test('should parse metastring with no title specified', () => {
+    const sample = metastringSamples.noTitle;
+    const result = parseCodeBlockTitle(sample.input);
+    expect(result).toEqual(sample.expectedOutput);
+  });
+  test('should parse only up to first matching delimiter', () => {
+    const sample = metastringSamples.otherMetadata;
+    const result = parseCodeBlockTitle(sample.input);
+    expect(result).toEqual(sample.expectedOutput);
+  });
+  test('should parse double quotes when delimited by single quotes', () => {
+    const sample = metastringSamples.titleWithDoubleQuotes;
+    const result = parseCodeBlockTitle(sample.input);
+    expect(result).toEqual(sample.expectedOutput);
+  });
+  test('should parse single quotes when delimited by double quotes', () => {
+    const sample = metastringSamples.titleWithSingleQuotes;
+    const result = parseCodeBlockTitle(sample.input);
+    expect(result).toEqual(sample.expectedOutput);
+  });
+});

src/theme/CodeBlock/index.js

@@ -10,8 +10,9 @@ import Highlight, {defaultProps} from 'prism-react-renderer';
 import copy from 'copy-text-to-clipboard';
 import rangeParser from 'parse-numeric-range';
 import usePrismTheme from '@theme/hooks/usePrismTheme';
+import Translate, {translate} from '@docusaurus/Translate';
 import styles from './styles.module.css';
-import {useThemeConfig} from '@docusaurus/theme-common';
+import {useThemeConfig, parseCodeBlockTitle} from '@docusaurus/theme-common';
 const highlightLinesRangeRegex = /{([\d,-]+)}/;
 
 const getHighlightDirectiveRegex = (
@@ -82,8 +83,12 @@ const highlightDirectiveRegex = (lang) => {
   }
 };
 
-const codeBlockTitleRegex = /(?:title=")(.*)(?:")/;
+export default function CodeBlock({
-export default ({children, className: languageClassName, metastring}) => {
+  children,
+  className: languageClassName,
+  metastring,
+  title,
+}) {
   const {prism} = useThemeConfig();
   const [showCopied, setShowCopied] = useState(false);
   const [mounted, setMounted] = useState(false); // The Prism theme on SSR is always the default theme but the site theme
@@ -96,15 +101,16 @@ export default ({children, className: languageClassName, metastring}) => {
 
   useEffect(() => {
     setMounted(true);
-  }, []);
+  }, []); // TODO: the title is provided by MDX as props automatically
+  // so we probably don't need to parse the metastring
+  // (note: title="xyz" => title prop still has the quotes)
+
+  const codeBlockTitle = parseCodeBlockTitle(metastring) || title;
   const button = useRef(null);
   let highlightLines = [];
-  let codeBlockTitle = '';
   const prismTheme = usePrismTheme(); // In case interleaved Markdown (e.g. when using CodeBlock as standalone component).
 
-  if (Array.isArray(children)) {
+  const content = Array.isArray(children) ? children.join('') : children;
-    children = children.join('');
-  }
 
   if (metastring && highlightLinesRangeRegex.test(metastring)) {
     // Tested above
@@ -113,26 +119,22 @@ export default ({children, className: languageClassName, metastring}) => {
     highlightLines = rangeParser(highlightLinesRange).filter((n) => n > 0);
   }
 
-  if (metastring && codeBlockTitleRegex.test(metastring)) {
-    // Tested above
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    codeBlockTitle = metastring.match(codeBlockTitleRegex)[1];
-  }
-
   let language =
-    languageClassName && languageClassName.replace(/language-/, ''); // Force Prism's language union type to `any` because it does not contain all available languages
+    languageClassName && // Force Prism's language union type to `any` because it does not contain all available languages
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    languageClassName.replace(/language-/, '');
 
   if (!language && prism.defaultLanguage) {
     language = prism.defaultLanguage;
   } // only declaration OR directive highlight can be used for a block
 
-  let code = children.replace(/\n$/, '');
+  let code = content.replace(/\n$/, '');
 
   if (highlightLines.length === 0 && language !== undefined) {
     let range = '';
     const directiveRegex = highlightDirectiveRegex(language); // go through line by line
 
-    const lines = children.replace(/\n$/, '').split('\n');
+    const lines = content.replace(/\n$/, '').split('\n');
     let blockStart; // loop through lines
 
     for (let index = 0; index < lines.length; ) {
@@ -188,13 +190,13 @@ export default ({children, className: languageClassName, metastring}) => {
       code={code}
       language={language}>
       {({className, style, tokens, getLineProps, getTokenProps}) => (
-        <>
+        <div className={styles.codeBlockContainer}>
           {codeBlockTitle && (
             <div style={style} className={styles.codeBlockTitle}>
               {codeBlockTitle}
             </div>
           )}
-          <div className={styles.codeBlockContent}>
+          <div className={clsx(styles.codeBlockContent, language)}>
             <div
               /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
               tabIndex={0}
@@ -236,14 +238,30 @@ export default ({children, className: languageClassName, metastring}) => {
             <button
               ref={button}
               type="button"
-              aria-label="Copy code to clipboard"
+              aria-label={translate({
+                id: 'theme.CodeBlock.copyButtonAriaLabel',
+                message: 'Copy code to clipboard',
+                description: 'The ARIA label for copy code blocks button',
+              })}
               className={clsx(styles.copyButton)}
               onClick={handleCopyCode}>
-              {showCopied ? 'Copied' : 'Copy'}
+              {showCopied ? (
+                <Translate
+                  id="theme.CodeBlock.copied"
+                  description="The copied button label on code blocks">
+                  Copied
+                </Translate>
+              ) : (
+                <Translate
+                  id="theme.CodeBlock.copy"
+                  description="The copy button label on code blocks">
+                  Copy
+                </Translate>
+              )}
             </button>
           </div>
-        </>
+        </div>
       )}
     </Highlight>
   );
-};
+}

src/theme/CodeBlock/parseCodeBlockTitle.js

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+const codeBlockTitleRegex = /title=(["'])(.*?)\1/;
+
+const parseCodeBlockTitle = (metastring) => {
+  return (metastring && metastring.match(codeBlockTitleRegex)?.[2]) || '';
+};
+
+export default parseCodeBlockTitle;

src/theme/CodeBlock/styles.module.css

@@ -5,18 +5,23 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+.codeBlockContainer {
+  margin-bottom: var(--ifm-leading);
+}
+
 .codeBlockContent {
   position: relative;
+  /*rtl:ignore*/
+  direction: ltr;
 }
 
 .codeBlockTitle {
   border-top-left-radius: var(--ifm-global-radius);
   border-top-right-radius: var(--ifm-global-radius);
-  border-bottom: 1px solid var(--ifm-color-emphasis-200);
+  border-bottom: 1px solid var(--ifm-color-emphasis-300);
-  font-family: var(--ifm-font-family-monospace);
+  font-size: var(--ifm-code-font-size);
-  font-weight: bold;
+  font-weight: 500;
   padding: 0.75rem var(--ifm-pre-padding);
-  width: 100%;
 }
 
 .codeBlock {
@@ -51,9 +56,8 @@
 }
 
 .codeBlockLines {
-  font-family: var(--ifm-font-family-monospace);
+  font: var(--ifm-code-font-size) / var(--ifm-pre-line-height)
-  font-size: inherit;
+    var(--ifm-font-family-monospace);
-  line-height: var(--ifm-pre-line-height);
   white-space: pre;
   float: left;
   min-width: 100%;