Allow examples to have associated markdown files (#335)

Author: mcnuttandrew

docs/docs-app/actions/index.js

@@ -1,19 +1,27 @@
 import {text} from 'd3-request';
-import {docPages} from '../constants/pages';
+import {docPages, examplePages} from '../constants/pages';
 export function loadContent() {
   return (dispatch, getState) => {
-    docPages.forEach(documentationSection => {
-      documentationSection.children.forEach(docPage => {
-        const filename = docPage.content.markdown;
-        const contents = getState();
-        if (contents.markdownPages.get(filename)) {
-          // already loaded
-          return;
-        }
-        dispatch(loadContentStart(filename));
-        text(filename, (error, response) => {
-          dispatch(loadContentSuccess(filename, error ? error.target.response : response));
-        });
+    docPages.forEach(loadDoc(dispatch, getState));
+    examplePages.forEach(loadDoc(dispatch, getState));
+  };
+}
+
+function loadDoc(dispatch, getState) {
+  return documentationSection => {
+    documentationSection.children.forEach(docPage => {
+      const filename = docPage.content.markdown;
+      if (!filename) {
+        return;
+      }
+      const contents = getState();
+      if (contents.markdownPages.get(filename)) {
+        // already loaded
+        return;
+      }
+      dispatch(loadContentStart(filename));
+      text(filename, (error, response) => {
+        dispatch(loadContentSuccess(filename, error ? error.target.response : response));
       });
     });
   };

docs/docs-app/components/documentation-page.js

@@ -1,29 +1,5 @@
 import React, {Component} from 'react';
-import marked from 'marked';
-
-import {docsRouting} from '../constants/pages';
-import {showCase} from '../../../showcase/index';
-
-const INJECTION_REG = /<!-- INJECT:"(.+)\" -->/g;
-
-function injectExamplesIntoHtml(content) {
-  return content.split(INJECTION_REG).map((__html, index) => {
-    const Example = showCase[__html];
-    if (!Example) {
-      /* eslint-disable react/no-danger */
-      return (<div
-        className="markdown-body"
-        key={`body-${index}`}
-        dangerouslySetInnerHTML={{__html}} />);
-      /* eslint-enable react/no-danger */
-    }
-    return (
-      <div className="markdown-example" key={`example-${index}`}>
-        <Example />
-      </div>
-    );
-  });
-}
+import {injectExamplesIntoHtml, convertMarkdownToReact} from './utils';
 
 class DocumentationPage extends Component {
   componentWillReceiveProps(nextProps) {
@@ -34,23 +10,12 @@ class DocumentationPage extends Component {
 
   render() {
     const {markdownPages, route} = this.props;
-
-    const renderer = new marked.Renderer();
-    renderer.link = (href, title, text) => {
-
-      if (docsRouting[href]) {
-        return `<a href=${docsRouting[href]} title=${title}>${text}</a>`;
-      }
-      return `<a href=${href} title=${title}>${text}</a>`;
-    };
-
     const content = markdownPages.get(route.content.markdown, '');
-    const __html = marked(content, {renderer});
 
     return (
       <div className="documentation-page f fg">
         <div className="markdown" ref="documentionContainer">
-          {injectExamplesIntoHtml(__html)}
+          {injectExamplesIntoHtml(convertMarkdownToReact(content))}
         </div>
       </div>
     );

docs/docs-app/components/example-page.js

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-
+import {convertMarkdownToReact, injectExamplesIntoHtml} from './utils';
 class ExamplePage extends Component {
 
   componentDidMount() {
@@ -10,12 +10,17 @@ class ExamplePage extends Component {
   }
 
   render() {
-    const {route} = this.props;
+    const {markdownPages, route} = this.props;
     const ExampleComponent = route.content.component;
 
+    const content = markdownPages.get(route.content.markdown, '');
+
     return (
       <div className="example-page">
         <ExampleComponent forExample />
+        {content && <div className="markdown" ref="documentionContainer">
+          {injectExamplesIntoHtml(convertMarkdownToReact(content))}
+        </div>}
       </div>
     );
   }

docs/docs-app/components/header.js

@@ -20,7 +20,9 @@ const renderTab = (tab, index) => (
 );
 
 const renderGithubLink = () => (
-  <a href="https://github.com/uber/react-vis" className="link"><i className="icon icon-github" /></a>
+  <a href="https://github.com/uber/react-vis" className="link" key="github-link">
+    <i className="icon icon-github" />
+  </a>
 );
 
 const mappedTabs = tabs.map(renderTab).concat(renderGithubLink());

docs/docs-app/components/home.js

@@ -25,7 +25,9 @@ const sections = [{
 
 function renderSection(section, index) {
   const content = [(
-    <div className={`fcol fg bullet-info ${(index % 2) ? '' : 'bullet-info-reversed'}`}>
+    <div
+      className={`fcol fg bullet-info ${(index % 2) ? '' : 'bullet-info-reversed'}`}
+      key={`section-${index}`}>
       <div className="bullet-point-title">
         {section.title}
       </div>
@@ -34,12 +36,12 @@ function renderSection(section, index) {
       </div>
     </div>
   ), (
-    <div className="bullet-example">
+    <div className="bullet-example" key={`bullet-example-${index}`}>
       {section.component}
     </div>
   )];
   return (
-    <div className="bullet-point f">
+    <div className="bullet-point f" key={`bullet-${index}`}>
       {!(index % 2) ? content.reverse() : content}
     </div>
   );

docs/docs-app/components/utils.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import marked from 'marked';
+
+import {docsRouting} from '../constants/pages';
+import {showCase} from '../../../showcase/index';
+
+const INJECTION_REG = /<!-- INJECT:"(.+)\" -->/g;
+
+export function injectExamplesIntoHtml(content) {
+  return content.split(INJECTION_REG).map((__html, index) => {
+    const Example = showCase[__html];
+    if (!Example) {
+      /* eslint-disable react/no-danger */
+      return (<div
+        className="markdown-body"
+        key={`body-${index}`}
+        dangerouslySetInnerHTML={{__html}} />);
+      /* eslint-enable react/no-danger */
+    }
+    return (
+      <div className="markdown-example" key={`example-${index}`}>
+        <Example />
+      </div>
+    );
+  });
+}
+
+export function convertMarkdownToReact(content) {
+  const renderer = new marked.Renderer();
+  renderer.link = (href, title, text) =>
+    `<a href=${docsRouting[href] || href} title=${title}>${text}</a>`;
+
+  return marked(content, {renderer});
+}

docs/docs-app/constants/pages.js

@@ -34,6 +34,7 @@ export const examplePages = generatePath([
     }, {
       name: 'Candlestick',
       content: {
+        markdown: getDocUrl('examples/extensibility.md'),
         pageType: 'example',
         component: Candlestick
       }

docs/markdown/examples/extensibility.md

@@ -0,0 +1,4 @@
+## Extensibility
+
+react-vis is easily extensible! If we don't have what you want it's easy to make! For instance, the above chart
+was made by simply extending abstract series and adding a little sugar. You can check out the code for your self [here](https://github.com/uber/react-vis/blob/master/examples/candlestick/candlestick.js)