Example list on each example page

site/plugins/examples/components/Example.js

@@ -1,36 +1,47 @@
 import React, {Component, Fragment} from 'react';
 import {object} from 'prop-types';
 import injectSheet from 'react-jss';
+import ExampleList from './ExampleList';
 
 class Example extends Component {
   render() {
     const example = this.props.data.sitePage.context;
 
     return (
-      <Fragment>
-        <h1>{example.frontmatter.title}</h1>
-        <iframe
-          className={this.props.classes.embed}
-          src={example.embedUrl}
-          frameBorder="0"
-        />
-        <h3>script</h3>
-        <pre>
-          <code>{example.js}</code>
-        </pre>
-        <h3>markup</h3>
-        <pre>
-          <code>{example.html}</code>
-        </pre>
-        {example.css && (
-          <Fragment>
-            <h3>style</h3>
-            <pre>
-              <code>{example.css}</code>
-            </pre>
-          </Fragment>
-        )}
-      </Fragment>
+      <section className={this.props.classes.wrapper}>
+        <div className={this.props.classes.nav}>
+          <ExampleList active={example.slug} />
+        </div>
+        <div className={this.props.classes.content}>
+          <h1>{example.frontmatter.title}</h1>
+          <iframe
+            className={this.props.classes.embed}
+            src={example.embedUrl}
+            frameBorder="0"
+          />
+          <aside className={this.props.classes.aside}>
+            <p>
+              <a href={example.embedUrl}>stand-alone version</a>
+            </p>
+          </aside>
+          <h3>script</h3>
+          <pre className={this.props.classes.pre}>
+            <code>{example.js}</code>
+          </pre>
+          <h3>markup</h3>
+          <pre className={this.props.classes.pre}>
+            <code>{example.html}</code>
+          </pre>
+          {example.css && (
+            <Fragment>
+              <h3>style</h3>
+              <pre className={this.props.classes.pre}>
+                <code>{example.css}</code>
+              </pre>
+            </Fragment>
+          )}
+        </div>
+      </section>
     );
   }
 }
@@ -58,11 +69,28 @@ export const query = graphql`
 `;
 
 const styles = {
+  wrapper: {
+    display: 'flex'
+  },
+  nav: {
+    marginRight: '1em'
+  },
+  content: {
+    minWidth: 300,
+    flexGrow: 1
+  },
+  pre: {
+    overflow: 'auto'
+  },
   embed: {
     margin: 0,
     padding: 0,
     height: 350,
     width: '100%'
+  },
+  aside: {
+    textAlign: 'right',
+    fontSize: '0.75em'
   }
 };
 

site/plugins/examples/components/ExampleList.js

@@ -0,0 +1,62 @@
+import React, {Component} from 'react';
+import {object} from 'prop-types';
+import injectSheet from 'react-jss';
+import Link from 'gatsby-link';
+
+class ExampleList extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      index: null
+    };
+  }
+
+  componentDidMount() {
+    fetch('../index.json')
+      .then(response => response.json())
+      .then(index => {
+        this.setState({index});
+      });
+  }
+
+  renderList() {
+    const index = this.state.index;
+    if (!index) {
+      return '...';
+    }
+
+    const list = [];
+    for (const id in index) {
+      const example = index[id];
+      list.push(
+        <li key={id}>
+          <Link to={example.slug}>{example.title}</Link>
+        </li>
+      );
+    }
+    return <ul className={this.props.classes.list}>{list}</ul>;
+  }
+
+  render() {
+    return (
+      <div className={this.props.classes.wrapper}>{this.renderList()}</div>
+    );
+  }
+}
+
+ExampleList.propTypes = {
+  classes: object.isRequired
+};
+
+const styles = {
+  wrapper: {
+    minWidth: '10em'
+  },
+  list: {
+    margin: 0,
+    listStyle: 'none'
+  }
+};
+
+export default injectSheet(styles)(ExampleList);