Task: Restructure to support markdown

package.json

@@ -35,9 +35,11 @@
     "formidable-landers": "^5.1.1",
     "history": "~1.17.0",
     "lodash": "^4.6.1",
+    "markdown-it": "^8.0.0",
+    "markdown-it-toc-and-anchor": "^4.1.1",
     "marked": "^0.3.5",
     "mocha": "^2.3.3",
-    "prismjs": "^1.4.1",
+    "prismjs": "^1.5.1",
     "radium": "0.17.2",
     "react": "^15.1.0",
     "react-addons-test-utils": "^15.1.0",

src/components/config-recipes.js

@@ -7,7 +7,7 @@ import SharedEvents from "../screens/recipes/components/shared-events/docs";
 import CandlestickDashboard from "../screens/recipes/components/candlestick-dashboard/docs";
 import ThemePark from "../screens/recipes/components/theme-park";
 
-export const recipesComponents = [
+export const configRecipes = [
   {
     text: "Candlestick Dashboard",
     slug: "candlestick-dashboard",

src/components/config.js

@@ -1,21 +1,20 @@
-// Victory Component Ecology Docs
-import VAnimationDocs from "victory-core/docs/victory-animation/docs";
-import VAreaDocs from "victory-chart/docs/victory-area/docs";
-import VAxisDocs from "victory-chart/docs/victory-axis/docs";
-import VBarDocs from "victory-chart/docs/victory-bar/docs";
-import VChartDocs from "victory-chart/docs/victory-chart/docs";
-import VGroupDocs from "victory-chart/docs/victory-group/docs";
-import VLabelDocs from "victory-core/docs/victory-label/docs";
-import VLineDocs from "victory-chart/docs/victory-line/docs";
-import VPieDocs from "victory-pie/docs/victory-pie/docs";
-import VScatterDocs from "victory-chart/docs/victory-scatter/docs";
-import VCandlestickDocs from "victory-chart/docs/victory-candlestick/docs";
-import VErrorBarDocs from "victory-chart/docs/victory-errorbar/docs";
-import VThemeDocs from "victory-chart/docs/victory-theme/docs";
-import VTooltipDocs from "victory-chart/docs/victory-tooltip/docs";
-import VVoronoiDocs from "victory-chart/docs/victory-voronoi/docs";
+import VAnimationDocs from "../../docs/victory-animation/docs.md";
+import VAreaDocs from "../../docs/victory-area/docs.md";
+import VAxisDocs from "../../docs/victory-axis/docs.md";
+import VBarDocs from "../../docs/victory-bar/docs.md";
+import VChartDocs from "../../docs/victory-chart/docs.md";
+import VGroupDocs from "../../docs/victory-group/docs.md";
+import VLabelDocs from "../../docs/victory-label/docs.md";
+import VLineDocs from "../../docs/victory-line/docs.md";
+import VPieDocs from "../../docs/victory-pie/docs.md";
+import VScatterDocs from "../../docs/victory-scatter/docs.md";
+import VCandlestickDocs from "../../docs/victory-candlestick/docs.md";
+import VErrorBarDocs from "../../docs/victory-errorbar/docs.md";
+import VThemeDocs from "../../docs/victory-theme/docs.md";
+import VTooltipDocs from "../../docs/victory-tooltip/docs.md";
+import VVoronoiDocs from "../../docs/victory-voronoi/docs.md";
 
-export const components = [
+export const config = [
   {
     text: "VictoryAnimation",
     slug: "victory-animation",

src/components/sidebar.js

@@ -2,8 +2,8 @@ import React from "react";
 import Radium from "radium";
 
 // Children
-import { components } from "./config";
-import { recipesComponents } from "./config-recipes";
+import { config } from "./config";
+import { configRecipes } from "./config-recipes";
 import NavLink from "./navlink";
 import Icon from "./icon";
 
@@ -153,8 +153,8 @@ Sidebar.propTypes = {
 };
 
 Sidebar.defaultProps = {
-  docs: components,
-  recipes: recipesComponents,
+  docs: config,
+  recipes: configRecipes,
   active: null,
   style: null
 };

src/screens/docs/components/markdown.js

@@ -1,60 +1,117 @@
 import React from "react";
-import ReactDOM from "react-dom";
-import Radium from "radium";
-import TitleMeta from "../../../components/title-meta";
 import find from "lodash/find";
-import Ecology from "ecology";
-import { VictoryBar, VictoryChart, VictoryAxis, VictoryTheme, VictoryStack } from "victory";
 
-// VictoryComponent Docs
-import { components } from "../../../components/config";
+import MarkdownIt from "markdown-it";
+import markdownItTocAndAnchor from "markdown-it-toc-and-anchor";
+import Prism from "prismjs";
+/* eslint-disable no-unused-vars */
+// add more language support
+import jsx from "prismjs/components/prism-jsx";
+import sh from "prismjs/components/prism-bash";
+import yaml from "prismjs/components/prism-yaml";
+/* eslint-enable no-unused-vars */
 
-class GettingStarted extends React.Component {
-  render() {
-    const overview = require("!!raw!../getting-started.md");
+import basename from "../../../basename";
+import { config } from "../../../components/config";
 
-    return (
-      <Ecology
-        overview={overview}
-        scope={{
-          React, ReactDOM, VictoryBar, VictoryChart, VictoryAxis, VictoryTheme, VictoryStack
-        }}
-        playgroundtheme="elegant"
-      />
-    );
+class Markdown extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      renderedMd: ""
+    };
   }
-}
 
-class MarkdownDocs extends React.Component {
-  renderDocsContent(activeComponent) {
-    if (activeComponent === "index") {
-      return <GettingStarted/>;
+  componentDidMount() {
+    Prism.highlightAll();
+  }
+
+  componentDidUpdate() { // is this the right one??
+    Prism.highlightAll();
+  }
+
+  componentWillMount() {
+    this.renderMd(this.props);
+  }
+
+  componentWillReceiveProps(newProps) {
+    if (newProps.location.pathname !== this.props.location.pathname) {
+      this.renderMd(newProps);
     }
-    const conf = find(components, {slug: activeComponent});
-    const Docs = conf.docs;
-    return (
-      <TitleMeta title={`${conf.text} | Documentation`}>
-        <Docs />
-      </TitleMeta>
-    );
   }
+
+  renderMd(props) {
+    if (props.active === "index") {
+      return;
+    }
+    this.setMarkdownRenderer(props.location.pathname);
+    const docsMarkdown = find(config, { slug: props.active }).docs;
+    this.setState({
+      renderedMd: this.md.render(docsMarkdown)
+    });
+  }
+
+  /* eslint-disable camelcase, max-params */
+  // Create a markdown renderer that builds relative links
+  // based on the currentPath and site's base href
+  setMarkdownRenderer(currentPath) {
+    const md = new MarkdownIt({
+      html: true,
+      linkify: true,
+      typographer: true
+    });
+
+    md.use(markdownItTocAndAnchor, {
+      anchorLinkSymbol: "",
+      anchorClassName: "Anchor",
+      tocCallback: (tocMarkdown, tocArray) => {
+        this.props.updateTocArray(tocArray);
+      }
+    });
+
+    // store the original rule
+    const defaultRender = md.renderer.rules.link_open || function (tokens, idx, options, env, renderer) {
+      return renderer.renderToken(tokens, idx, options);
+    };
+    //
+    // Update anchor links to include the basename
+    md.renderer.rules.link_open = function (tokens, idx, options, env, renderer) {
+      const anchor = tokens[idx].attrs[1];
+      if (anchor.length > 0) {
+        const href = anchor[1];
+        if (href.indexOf("#") === 0) {
+          tokens[idx].attrs[1][1] = `${basename}${currentPath}${href}`;
+          tokens[idx].attrs.push(["aria-hidden", "true"]);
+        }
+      }
+      return defaultRender(tokens, idx, options, env, renderer);
+    };
+
+    this.md = md;
+  }
+
   render() {
     return (
-      <div className="Markdown playgroundsMaxHeight" style={this.props.style}>
-        {this.renderDocsContent(this.props.active)}
-      </div>
+      <div
+        className="Overview Markdown"
+        dangerouslySetInnerHTML={{
+          __html: this.state.renderedMd
+        }}
+      />
     );
   }
 }
 
-MarkdownDocs.propTypes = {
-  active: React.PropTypes.string,
-  style: React.PropTypes.object
+Markdown.propTypes = {
+  active: React.PropTypes.string.isRequired,
+  location: React.PropTypes.object.isRequired,
+  params: React.PropTypes.object,
+  updateTocArray: React.PropTypes.func.isRequired
 };
 
-MarkdownDocs.defaultProps = {
+Markdown.defaultProps = {
   active: "index",
-  style: null
+  params: null
 };
 
-export default Radium(MarkdownDocs);
+export default Markdown;

src/screens/docs/index.js

@@ -1,4 +1,7 @@
 import React from "react";
+import ReactDOM from "react-dom";
+import Ecology from "ecology";
+import { VictoryBar, VictoryChart, VictoryAxis, VictoryTheme, VictoryStack } from "victory";
 import Radium from "radium";
 
 // Child components
@@ -7,6 +10,42 @@ import Markdown from "./components/markdown";
 import TitleMeta from "../../components/title-meta";
 
 class Docs extends React.Component {
+  constructor() {
+    super();
+
+    this.state = {
+      tocArray: []
+    };
+  }
+
+  updateTocArray(tocArray) {
+    this.setState({tocArray});
+  }
+
+  renderContent(activePage) {
+    if (activePage === "index") {
+      return (
+        <div className="Markdown">
+          <Ecology
+            overview={require("!!raw!../../../docs/index.md")}
+            scope={{
+              React, ReactDOM, VictoryBar, VictoryChart, VictoryAxis, VictoryTheme, VictoryStack
+            }}
+            playgroundtheme="elegant"
+          />
+        </div>
+      );
+    }
+    return (
+      <Markdown
+        location={this.props.location}
+        params={this.props.params}
+        updateTocArray={this.updateTocArray.bind(this)}
+        active={activePage}
+      />
+    );
+  }
+
   render() {
     const activePage = this.props.params.component ?
       this.props.params.component :
@@ -15,14 +54,15 @@ class Docs extends React.Component {
     return (
       <TitleMeta title="Victory | Documentation">
         <InternalPage sidebar={activePage}>
-          <Markdown active={activePage} />
+          { this.renderContent(activePage) }
         </InternalPage>
       </TitleMeta>
     );
   }
 }
 
 Docs.propTypes = {
+  location: React.PropTypes.object,
   params: React.PropTypes.object
 };
 

src/screens/recipes/components/recipe.js

@@ -5,7 +5,7 @@ import find from "lodash/find";
 import marked from "marked";
 
 // VictoryComponent Docs
-import { recipesComponents } from "../../../components/config-recipes";
+import { configRecipes } from "../../../components/config-recipes";
 
 class RecipeDocs extends React.Component {
   renderDocsContent(activeComponent) {
@@ -20,7 +20,7 @@ class RecipeDocs extends React.Component {
         </TitleMeta>
       );
     }
-    const conf = find(recipesComponents, {slug: activeComponent});
+    const conf = find(configRecipes, {slug: activeComponent});
     const Docs = conf.docs;
     // This structure matches the <Ecology> /docs components:
     return (