feat: add @theme/Markdown to allow user modify their own markdown react component

lib/load/theme.js

@@ -7,7 +7,7 @@ module.exports = function loadConfig(siteDir) {
     ? customThemePath
     : path.resolve(__dirname, '../theme');
 
-  const themeComponents = ['Docs', 'Loading', 'NotFound'];
+  const themeComponents = ['Docs', 'Loading', 'NotFound', 'Markdown'];
   themeComponents.forEach(component => {
     if (!require.resolve(path.join(themePath, component))) {
       throw new Error(

lib/theme/Docs/index.js

@@ -9,27 +9,10 @@ export default class Docs extends React.Component {
     const {route, docsData, siteConfig} = this.props;
     const currentDoc = docsData.find(data => data.path === route.path);
 
-    const highlight = Object.assign(
-      {},
-      {
-        version: '9.12.0',
-        theme: 'default'
-      },
-      siteConfig.highlight
-    );
-
-    // Use user-provided themeUrl if it exists, else construct one from version and theme.
-    const highlightThemeURL = highlight.themeUrl
-      ? highlight.themeUrl
-      : `https://cdnjs.cloudflare.com/ajax/libs/highlight.js/${
-          highlight.version
-        }/styles/${highlight.theme}.min.css`;
-
     return (
       <Layout {...this.props}>
         <Helmet>
           <title>{(currentDoc && currentDoc.title) || siteConfig.title}</title>
-          <link rel="stylesheet" type="text/css" href={highlightThemeURL} />
         </Helmet>
         <div className={styles.mainContainer}>{this.props.children}</div>
       </Layout>

lib/theme/Markdown/index.js

@@ -2,6 +2,7 @@
 
 import React from 'react';
 import Markdown from 'remarkable';
+import Helmet from 'react-helmet';
 import highlight from './highlight';
 import anchors from './anchors';
 
@@ -58,16 +59,35 @@ class MarkdownBlock extends React.Component {
   }
 
   render() {
-    const Container = this.props.container;
-    if (!Container) {
-      return <div>{this.content()}</div>;
-    }
-    return <Container>{this.content()}</Container>;
+    const {siteConfig} = this.props;
+    const highlight = Object.assign(
+      {},
+      {
+        version: '9.12.0',
+        theme: 'default'
+      },
+      siteConfig.highlight
+    );
+
+    // Use user-provided themeUrl if it exists, else construct one from version and theme.
+    const highlightThemeURL = highlight.themeUrl
+      ? highlight.themeUrl
+      : `https://cdnjs.cloudflare.com/ajax/libs/highlight.js/${
+          highlight.version
+        }/styles/${highlight.theme}.min.css`;
+
+    return (
+      <div>
+        <Helmet>
+          <link rel="stylesheet" type="text/css" href={highlightThemeURL} />
+        </Helmet>
+        {this.content()}
+      </div>
+    );
   }
 }
 
 MarkdownBlock.defaultProps = {
-  container: 'div',
   siteConfig: {}
 };
 

lib/theme/NotFound.js

@@ -7,7 +7,10 @@ export default class NotFound extends React.Component {
       <Layout>
         <div>404 Page Not Found</div>
         <div>
-          <img alt="Not found" src="https://i.imgur.com/yG7L3Lb.gif" />
+          <img
+            alt="Not found"
+            src="https://d2gg9evh47fn9z.cloudfront.net/800px_COLOURBOX3889253.jpg"
+          />
         </div>
       </Layout>
     );

lib/webpack/loader/markdown.js

@@ -5,14 +5,19 @@ module.exports = function(fileString) {
   const options = getOptions(this);
 
   const {body} = fm(fileString);
-  const source = JSON.stringify(body);
+
+  const content = JSON.stringify(body);
+  // TODO replace all the markdown linking to correct url depends on whether it's versioned/translated/normal docs
+  // e.g: [test](test.md) become [test](/docs/test)
   const siteConfig = JSON.stringify(options.siteConfig);
 
   return (
     `import React from 'react';\n` +
-    `import MarkdownBlock from '@core/components/Markdown'\n` +
-    `export default () => <MarkdownBlock source={${source}} siteConfig={${siteConfig}} />;`
+    `import Markdown from '@theme/Markdown'\n` +
+    `export default () => (
+      <Markdown siteConfig={${siteConfig}}>
+        {${content}}
+      </Markdown>
+    );`
   );
-
-  // return `export default () => <MarkdownBlock source={${source}} siteConfig={${siteConfig}} />`;
 };