feat: prototype blog & docs generation on dev

lib/core/blog/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import MarkdownBlock from '../markdown';
+
+class Docs extends React.Component {
+  render() {
+    const {content, siteConfig} = this.props;
+    return <MarkdownBlock siteConfig={siteConfig}>{content}</MarkdownBlock>;
+  }
+}
+
+module.exports = Docs;

lib/core/blogPost.js

@@ -1,13 +0,0 @@
-import React from 'react';
-import blogDatas from '@generated/blogDatas';
-
-// inner blog component for the article itself, without sidebar/header/footer
-class BlogPost extends React.Component {
-  render() {
-    const {match} = this.props;
-    const post = blogDatas.find(blog => blog.path === match.path);
-    return <div className="post">{post && post.content}</div>;
-  }
-}
-
-module.exports = BlogPost;

lib/core/devEntry.js

@@ -1,8 +1,19 @@
 import React from 'react';
 import {render} from 'react-dom';
 import {BrowserRouter, Route, Switch, Link} from 'react-router-dom';
-import blogDatas from '@generated/blogDatas';
-import BlogPost from './blogPost';
+import blogMetadata from '@generated/blogMetadata';
+import docsMetadata from '@generated/docsMetadata';
+import Blog from './blog';
+import Docs from './docs';
+
+const renderBlog = props => {
+  const metadata = blogMetadata.find(blog => blog.path === props.match.path);
+  return <Blog content={metadata.content} {...props} />;
+};
+const renderDocs = props => {
+  const metadata = docsMetadata.find(doc => doc.path === props.match.path);
+  return <Docs content={metadata.content} {...props} />;
+};
 
 class App extends React.Component {
   render() {
@@ -10,17 +21,13 @@ class App extends React.Component {
       <BrowserRouter>
         <div>
           <Switch>
-            {blogDatas.map(({path}) => (
-              <Route key={path} exact path={path} component={BlogPost} />
+            {blogMetadata.map(({path, content}) => (
+              <Route key={path} exact path={path} render={renderBlog} />
+            ))}
+            {docsMetadata.map(({path}) => (
+              <Route key={path} exact path={path} render={renderDocs} />
             ))}
           </Switch>
-          <div>
-            {blogDatas.map(({path}) => (
-              <div key={path}>
-                <Link to={path}>{path}</Link>
-              </div>
-            ))}
-          </div>
         </div>
       </BrowserRouter>
     );

lib/core/docs/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import MarkdownBlock from '../markdown';
+
+class Blog extends React.Component {
+  render() {
+    const {content, siteConfig} = this.props;
+    return <MarkdownBlock siteConfig={siteConfig}>{content}</MarkdownBlock>;
+  }
+}
+
+module.exports = Blog;

lib/core/markdown/index.js

@@ -10,6 +10,7 @@ class MarkdownBlock extends React.Component {
     const alias = {
       js: 'jsx'
     };
+    const {siteConfig} = this.props;
     const md = new Markdown({
       langPrefix: 'hljs css language-',
       highlight(str, lang) {
@@ -99,6 +100,9 @@ class MarkdownBlock extends React.Component {
 
   render() {
     const Container = this.props.container;
+    if (!Container) {
+      return <div>{this.content()}</div>;
+    }
     return <Container>{this.content()}</Container>;
   }
 }