Example list on each example page

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);