feat(v2): bootstrap MDX Components (#2709)

* feat(v2): Bootstrap MDX Componnets

* feat(v2): Add theme

packages/docusaurus-theme-bootstrap/package.json

@@ -9,7 +9,9 @@
   },
   "dependencies": {
     "bootstrap": "^4.4.1",
-    "reactstrap": "^8.4.1"
+    "prism-react-renderer": "^1.1.0",
+    "reactstrap": "^8.4.1",
+    "@mdx-js/react": "^1.5.8"
   },
   "peerDependencies": {
     "@docusaurus/core": "^2.0.0",

packages/docusaurus-theme-bootstrap/src/theme/BlogPostItem/index.js

@@ -6,6 +6,8 @@
  */
 
 import React from 'react';
+import {MDXProvider} from '@mdx-js/react';
+import MDXComponents from '@theme/MDXComponents';
 import Link from '@docusaurus/Link';
 
 const MONTHS = [
@@ -49,7 +51,7 @@ function BlogPostItem(props) {
   const day = parseInt(match[2], 10);
 
   return (
-    <article className="card h-100 shadow">
+    <article className="card shadow">
       <div className="row no-gutters rows-col-2 m-3">
         <div className="col-xs mr-3">
           {authorImageURL && (
@@ -100,7 +102,9 @@ function BlogPostItem(props) {
 
       <div className="card-body">
         <h3 className="card-title text-primary mr-2">{title}</h3>
-        <div className="lead">{children}</div>
+        <section>
+          <MDXProvider components={MDXComponents}>{children}</MDXProvider>
+        </section>
       </div>
 
       <footer className="row no-gutters m-3 justify-content-between">

packages/docusaurus-theme-bootstrap/src/theme/CodeBlock/index.js

@@ -0,0 +1,34 @@
+/**
+ * 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 React from 'react';
+import Highlight, {defaultProps} from 'prism-react-renderer';
+import theme from 'prism-react-renderer/themes/nightOwl';
+
+export default ({children, className}) => {
+  const language = className && className.replace(/language-/, '');
+
+  return (
+    <Highlight
+      {...defaultProps}
+      theme={theme}
+      code={children}
+      language={language}>
+      {({style, tokens, getLineProps, getTokenProps}) => (
+        <pre className={className} style={{...style, padding: '20px'}}>
+          {tokens.map((line, i) => (
+            <div key={i} {...getLineProps({line, key: i})}>
+              {line.map((token, key) => (
+                <span key={key} {...getTokenProps({token, key})} />
+              ))}
+            </div>
+          ))}
+        </pre>
+      )}
+    </Highlight>
+  );
+};

packages/docusaurus-theme-bootstrap/src/theme/MDXComponents/index.js

@@ -0,0 +1,37 @@
+/**
+ * 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 React from 'react';
+import CodeBlock from '@theme/CodeBlock';
+import {Table} from 'reactstrap';
+
+const Heading = (tag) => {
+  return function (props) {
+    return React.createElement(tag, {className: `${tag} my-3`, ...props});
+  };
+};
+
+export default {
+  h1: Heading('h1'),
+  h2: Heading('h2'),
+  h3: Heading('h3'),
+  h4: Heading('h4'),
+  h5: Heading('h5'),
+  h6: Heading('h6'),
+  code: (props) => {
+    const {children} = props;
+    if (typeof children === 'string') {
+      return <CodeBlock {...props} />;
+    }
+    return children;
+  },
+  table: Table,
+  blockquote: (props) => (
+    <blockquote className="blockquote-footer">{props.children}</blockquote>
+  ),
+  p: (props) => <div className="font-weight-light">{props.children}</div>,
+};