Example list on each example page

new-examples/layers.js

@@ -30,6 +30,6 @@ const map = new Map({
   target: 'map',
   view: new View({
     center: [0, 0],
-    zoom: 1
+    zoom: 2
   })
 });

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>
+      <section className={this.props.classes.wrapper}>
-        <h1>{example.frontmatter.title}</h1>
+        <div className={this.props.classes.nav}>
-        <iframe
+          <ExampleList active={example.slug} />
-          className={this.props.classes.embed}
+        </div>
-          src={example.embedUrl}
+        <div className={this.props.classes.content}>
-          frameBorder="0"
+          <h1>{example.frontmatter.title}</h1>
-        />
+          <iframe
-        <h3>script</h3>
+            className={this.props.classes.embed}
-        <pre>
+            src={example.embedUrl}
-          <code>{example.js}</code>
+            frameBorder="0"
-        </pre>
+          />
-        <h3>markup</h3>
+          <aside className={this.props.classes.aside}>
-        <pre>
+            <p>
-          <code>{example.html}</code>
+              <a href={example.embedUrl}>stand-alone version</a>
-        </pre>
+            </p>
-        {example.css && (
+          </aside>
-          <Fragment>
+          <h3>script</h3>
-            <h3>style</h3>
+          <pre className={this.props.classes.pre}>
-            <pre>
+            <code>{example.js}</code>
-              <code>{example.css}</code>
+          </pre>
-            </pre>
+          <h3>markup</h3>
-          </Fragment>
+          <pre className={this.props.classes.pre}>
-        )}
+            <code>{example.html}</code>
-      </Fragment>
+          </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);

site/plugins/examples/gatsby-node.js

@@ -50,7 +50,15 @@ exports.createPages = async (
   {graphql, boundActionCreators},
   {sourceInstanceName, baseCss = ''}
 ) => {
-  const {createPage} = boundActionCreators;
+  const {createPage, createRedirect} = boundActionCreators;
+
+  createRedirect({
+    fromPath: `/examples/`,
+    isPermanent: false,
+    redirectInBrowser: true,
+    toPath: `/examples/map/`
+  });
+
   const {data} = await graphql(`
     {
       allFile(
@@ -100,6 +108,7 @@ exports.createPages = async (
 
   const embedDirName = 'example-embeds';
   const embedDir = path.join(__dirname, '..', '..', 'public', embedDirName);
+  const exampleDir = path.join(__dirname, '..', '..', 'public', 'examples');
 
   rollupCache = await bundle.write({
     format: 'es',
@@ -108,6 +117,7 @@ exports.createPages = async (
   });
 
   const writes = [];
+  const index = {};
 
   for (const name in examples) {
     const node = examples[name].md;
@@ -162,6 +172,10 @@ exports.createPages = async (
     writes.push(writeFile(path.join(embedDir, embedName), embed));
 
     const slug = markdownNode.fields.slug;
+    index[name] = {
+      title: markdownNode.frontmatter.title,
+      slug
+    };
 
     createPage({
       path: slug,
@@ -177,5 +191,9 @@ exports.createPages = async (
     });
   }
 
+  writes.push(
+    writeFile(path.join(exampleDir, 'index.json'), JSON.stringify(index))
+  );
+
   await Promise.all(writes);
 };