Gatsby setup for API docs

site/components/Class.js

@@ -0,0 +1,29 @@
+import {object} from 'prop-types';
+import React from 'react';
+import Markdown from 'react-markdown';
+import Code from './Code';
+
+function Class({cls, module}) {
+  const exportedName = module.getExportedName(cls.name);
+  let importCode;
+  if (exportedName === 'default') {
+    importCode = `import ${cls.name} from '${module.id}';`;
+  } else {
+    importCode = `import {${exportedName}} from '${module.id}';`;
+  }
+
+  return (
+    <div>
+      <h3>{cls.name}</h3>
+      <Code value={importCode} />
+      <Markdown source={cls.doc.classdesc} renderers={{code: Code}} />
+    </div>
+  );
+}
+
+Class.propTypes = {
+  cls: object.isRequired,
+  module: object.isRequired
+};
+
+export default Class;

site/components/Code.js

@@ -0,0 +1,26 @@
+import React, {PureComponent} from 'react';
+import {string} from 'prop-types';
+import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter';
+import {coy} from 'react-syntax-highlighter/dist/styles/prism';
+
+class Code extends PureComponent {
+  render() {
+    let language = this.props.language;
+    if (!language) {
+      language = 'js';
+    }
+
+    return (
+      <SyntaxHighlighter language={language} style={coy}>
+        {this.props.value}
+      </SyntaxHighlighter>
+    );
+  }
+}
+
+Code.propTypes = {
+  value: string.isRequired,
+  language: string
+};
+
+export default Code;

site/components/Func.js

@@ -0,0 +1,29 @@
+import {object} from 'prop-types';
+import React from 'react';
+import Markdown from 'react-markdown';
+import Code from './Code';
+
+function Func({func, module}) {
+  const exportedName = module.getExportedName(func.name);
+  let importCode;
+  if (exportedName === 'default') {
+    importCode = `import ${func.name} from '${module.id}';`;
+  } else {
+    importCode = `import {${exportedName}} from '${module.id}';`;
+  }
+
+  return (
+    <div>
+      <h3>{func.name}</h3>
+      <Code value={importCode} />
+      <Markdown source={func.doc.description} renderers={{code: Code}} />
+    </div>
+  );
+}
+
+Func.propTypes = {
+  func: object.isRequired,
+  module: object.isRequired
+};
+
+export default Func;

site/components/Module.js

@@ -0,0 +1,25 @@
+import {object} from 'prop-types';
+import React from 'react';
+import Class from './Class';
+import Func from './Func';
+
+function Module({module}) {
+  return (
+    <div>
+      <hr />
+      <h2>{module.id}</h2>
+      {module.classes.map(cls => (
+        <Class key={cls.name} cls={cls} module={module} />
+      ))}
+      {module.functions.map(func => (
+        <Func key={func.name} func={func} module={module} />
+      ))}
+    </div>
+  );
+}
+
+Module.propTypes = {
+  module: object.isRequired
+};
+
+export default Module;

site/components/layout.js

@@ -0,0 +1,8 @@
+import styled from '@emotion/styled';
+import {baseSpacingPx} from '../util/typography';
+
+export const Page = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  margin: 2 * baseSpacingPx
+});