Styled components

site/plugins/examples/components/Example.js

@@ -1,54 +1,78 @@
-import React, {Component, Fragment} from 'react';
 import {object} from 'prop-types';
-import injectSheet from 'react-jss';
 import ExampleList from './ExampleList';
+import React, {Component, Fragment} from 'react';
+import styled from 'react-emotion';
+
+const Wrapper = styled('div')({
+  display: 'flex'
+});
+
+const Sidebar = styled('div')({
+  marginRight: '1em'
+});
+
+const Content = styled('div')({
+  minWidth: 300,
+  flexGrow: 1
+});
+
+const Embed = styled('iframe')({
+  margin: 0,
+  padding: 0,
+  height: 350,
+  width: '100%'
+});
+
+const Aside = styled('aside')({
+  textAlign: 'right',
+  fontSize: '0.75em'
+});
+
+const Block = styled('pre')({
+  overflow: 'auto'
+});
 
 class Example extends Component {
   render() {
     const example = this.props.data.sitePage.context;
 
     return (
-      <section className={this.props.classes.wrapper}>
-        <div className={this.props.classes.nav}>
+      <Wrapper>
+        <Sidebar>
           <ExampleList active={example.slug} />
-        </div>
-        <div className={this.props.classes.content}>
+        </Sidebar>
+        <Content>
           <h1>{example.frontmatter.title}</h1>
-          <iframe
-            className={this.props.classes.embed}
-            src={example.embedUrl}
-            frameBorder="0"
-          />
-          <aside className={this.props.classes.aside}>
+          <Embed src={example.embedUrl} frameBorder="0" />
+          <Aside>
             <p>
               <a href={example.embedUrl}>stand-alone version</a>
             </p>
-          </aside>
+          </Aside>
           <h3>script</h3>
-          <pre className={this.props.classes.pre}>
+          <Block>
             <code>{example.js}</code>
-          </pre>
+          </Block>
           <h3>markup</h3>
-          <pre className={this.props.classes.pre}>
+          <Block>
             <code>{example.html}</code>
-          </pre>
+          </Block>
           {example.css && (
             <Fragment>
               <h3>style</h3>
-              <pre className={this.props.classes.pre}>
+              <Block>
                 <code>{example.css}</code>
-              </pre>
+              </Block>
             </Fragment>
           )}
-        </div>
-      </section>
+        </Content>
+      </Wrapper>
     );
   }
 }
 
 Example.propTypes = {
-  data: object.isRequired,
-  classes: object.isRequired
+  data: object.isRequired
 };
 
 export const query = graphql`
@@ -68,30 +92,4 @@ 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'
-  }
-};
-
-export default injectSheet(styles)(Example);
+export default Example;

site/plugins/examples/components/ExampleList.js

@@ -1,7 +1,15 @@
-import React, {Component} from 'react';
-import {object} from 'prop-types';
-import injectSheet from 'react-jss';
 import Link from 'gatsby-link';
+import React, {Component} from 'react';
+import styled from 'react-emotion';
+
+const Wrapper = styled('div')({
+  minWidth: '10em'
+});
+
+const List = styled('ul')({
+  margin: 0,
+  listStyle: 'none'
+});
 
 class ExampleList extends Component {
   constructor(props) {
@@ -35,28 +43,12 @@ class ExampleList extends Component {
         </li>
       );
     }
-    return <ul className={this.props.classes.list}>{list}</ul>;
+    return <List>{list}</List>;
   }
 
   render() {
-    return (
-      <div className={this.props.classes.wrapper}>{this.renderList()}</div>
-    );
+    return <Wrapper>{this.renderList()}</Wrapper>;
   }
 }
 
-ExampleList.propTypes = {
-  classes: object.isRequired
-};
-
-const styles = {
-  wrapper: {
-    minWidth: '10em'
-  },
-  list: {
-    margin: 0,
-    listStyle: 'none'
-  }
-};
-
-export default injectSheet(styles)(ExampleList);
+export default ExampleList;

site/plugins/examples/gatsby-node.js

@@ -3,13 +3,10 @@ const {createFilePath} = require('gatsby-source-filesystem');
 const rollup = require('rollup');
 const resolve = require('rollup-plugin-node-resolve');
 const common = require('rollup-plugin-commonjs');
-const fs = require('fs');
+const fse = require('fs-extra');
 const promisify = require('util').promisify;
 const compileTemplate = require('string-template/compile');
 
-const writeFile = promisify(fs.writeFile);
-const readFile = promisify(fs.readFile);
-
 let rollupCache;
 const rollupPlugins = [resolve(), common()];
 
@@ -19,7 +16,7 @@ async function getOLCss() {
     return olCss;
   }
   const cssPath = path.join(__dirname, '..', '..', '..', 'css', 'ol.css');
-  olCss = await readFile(cssPath, {encoding: 'utf8'});
+  olCss = await fse.readFile(cssPath, {encoding: 'utf8'});
   return olCss;
 }
 
@@ -29,7 +26,7 @@ async function getEmbedTemplate() {
     return embedTemplate;
   }
   const embedPath = path.join(__dirname, 'embed.html');
-  const src = await readFile(embedPath, {encoding: 'utf8'});
+  const src = await fse.readFile(embedPath, {encoding: 'utf8'});
   embedTemplate = compileTemplate(src);
   return embedTemplate;
 }
@@ -54,7 +51,7 @@ exports.createPages = async (
 
   createRedirect({
     fromPath: `/examples/`,
-    isPermanent: false,
+    isPermanent: true,
     redirectInBrowser: true,
     toPath: `/examples/map/`
   });
@@ -154,8 +151,8 @@ exports.createPages = async (
     let exampleCss = '';
     const cssNode = examples[name].css;
     if (cssNode) {
-      exampleCss = await readFile(cssNode.absolutePath, {encoding: 'utf8'});
-      await writeFile(path.join(embedDir, cssNode.base), exampleCss);
+      exampleCss = await fse.readFile(cssNode.absolutePath, {encoding: 'utf8'});
+      await fse.writeFile(path.join(embedDir, cssNode.base), exampleCss);
     }
 
     const embedTemplate = await getEmbedTemplate();
@@ -169,7 +166,7 @@ exports.createPages = async (
     });
 
     const embedName = `${name}.html`;
-    writes.push(writeFile(path.join(embedDir, embedName), embed));
+    writes.push(fse.writeFile(path.join(embedDir, embedName), embed));
 
     const slug = markdownNode.fields.slug;
     index[name] = {
@@ -191,8 +188,10 @@ exports.createPages = async (
     });
   }
 
+  await fse.ensureDir(exampleDir);
+
   writes.push(
-    writeFile(path.join(exampleDir, 'index.json'), JSON.stringify(index))
+    fse.writeFile(path.join(exampleDir, 'index.json'), JSON.stringify(index))
   );
 
   await Promise.all(writes);