Gatsby setup for API docs

site/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "tschaub/react"
+}

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

site/pages/API.js

@@ -0,0 +1,26 @@
+import {object} from 'prop-types';
+import React from 'react';
+import {Page} from '../components/layout';
+import Module from '../components/Module';
+import {getHelper} from '../util/api';
+
+function API({pageContext: {docs}}) {
+  const helper = getHelper(docs);
+
+  return (
+    <Page>
+      <h1>API</h1>
+      {helper.modules
+        .filter(module => module.visible)
+        .map(module => (
+          <Module key={module.id} module={module} />
+        ))}
+    </Page>
+  );
+}
+
+API.propTypes = {
+  pageContext: object.isRequired
+};
+
+export default API;

site/pages/Info.js

@@ -0,0 +1,33 @@
+import {object} from 'prop-types';
+import React from 'react';
+import {Page} from '../components/layout';
+
+function Info({pageContext: {docs}}) {
+  return (
+    <Page>
+      <h1>API</h1>
+      <table>
+        <tbody>
+          <tr>
+            <th>kind</th>
+            <th>longname</th>
+            <th>memberof</th>
+          </tr>
+          {docs.map(doc => (
+            <tr key={doc.longname}>
+              <td>{doc.kind}</td>
+              <td>{doc.longname}</td>
+              <td>{doc.memberof}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </Page>
+  );
+}
+
+Info.propTypes = {
+  pageContext: object.isRequired
+};
+
+export default Info;

site/util/api.js

@@ -0,0 +1,179 @@
+class FunctionDoc {
+  constructor(doc) {
+    this.name = doc.name;
+    this.doc = doc;
+  }
+}
+
+class ClassDoc {
+  constructor(name) {
+    this.name = name;
+  }
+
+  processDoc(doc) {
+    if (doc.kind === 'class') {
+      this.doc = doc;
+    }
+  }
+}
+
+class ModuleDoc {
+  constructor(id) {
+    this.id = id;
+
+    this.classLookup = {};
+    this.classes = [];
+
+    this.functionLookup = {};
+    this.functions = [];
+  }
+
+  processDoc(doc) {
+    if (doc.kind === 'module') {
+      this.doc = doc;
+      return;
+    }
+
+    if (doc.kind === 'class') {
+      const name = nameFromLongname(doc.longname);
+      if (!(name in this.classLookup)) {
+        const cls = new ClassDoc(name);
+        this.classLookup[name] = cls;
+        this.classes.push(cls);
+      }
+
+      this.classLookup[name].processDoc(doc);
+      return;
+    }
+
+    if (doc.kind === 'function') {
+      if (nameFromLongname(doc.memberof)) {
+        // belongs to a class or other
+        return;
+      }
+
+      if (doc.name in this.functionLookup) {
+        throw new Error(`Duplicate function ${doc.name} in ${this.id}`);
+      }
+
+      const func = new FunctionDoc(doc);
+      this.functionLookup[doc.name] = func;
+      this.functions.push(func);
+      return;
+    }
+  }
+
+  finalize() {
+    this.classes.sort(byName);
+    this.functions.sort(byName);
+    this.visible = this.classes.length > 0 || this.functions.length > 0;
+  }
+
+  getExportedName(localName) {
+    if (!this.doc || !this.doc.exportMap) {
+      throw new Error(`Expected to find export map in module doc: ${this.id}`);
+    }
+
+    if (!(localName in this.doc.exportMap)) {
+      throw new Error(
+        `No local name "${localName}" in export map for module: ${this.id}`
+      );
+    }
+
+    return this.doc.exportMap[localName];
+  }
+}
+
+const longnameRE = /^module:(?<module>.*?)([~\.](?<name>\w+)(#(?<member>\w+))?(:(?<type>\w+))?)?$/;
+
+function moduleIDFromLongname(longname) {
+  const match = longname.match(longnameRE);
+  if (!match) {
+    throw new Error(`could not match module id in longname: ${longname}`);
+  }
+  return match.groups.module;
+}
+
+function nameFromLongname(longname) {
+  const match = longname.match(longnameRE);
+  if (!match) {
+    throw new Error(`could not match name in longname: ${longname}`);
+  }
+  return match.groups.name;
+}
+
+function memberFromLongname(longname) {
+  const match = longname.match(longnameRE);
+  if (!match) {
+    throw new Error(`could not match member in longname: ${longname}`);
+  }
+  return match.groups.member;
+}
+
+function byName(a, b) {
+  if (a.name < b.name) {
+    return -1;
+  }
+  if (a.name > b.name) {
+    return 1;
+  }
+  return 0;
+}
+
+function byModuleId(a, b) {
+  const aParts = a.id.split('/');
+  const bParts = b.id.split('/');
+  const len = Math.max(aParts.length, bParts.length);
+  for (let i = 0; i < len; ++i) {
+    if (aParts[i] && bParts[i]) {
+      if (aParts[i] < bParts[i]) {
+        return -1;
+      }
+      if (aParts[i] > bParts[i]) {
+        return 1;
+      }
+    } else if (!aParts[i]) {
+      return -1;
+    } else {
+      return 1;
+    }
+  }
+  return 0;
+}
+
+class DocHelper {
+  constructor(docs) {
+    this.moduleLookup = {};
+    this.modules = [];
+
+    docs.forEach(doc => {
+      const moduleID = moduleIDFromLongname(doc.longname);
+      if (!(moduleID in this.moduleLookup)) {
+        const module = new ModuleDoc(moduleID);
+        this.moduleLookup[moduleID] = module;
+        this.modules.push(module);
+      }
+
+      const module = this.moduleLookup[moduleID];
+      module.processDoc(doc);
+    });
+
+    this.modules.sort(byModuleId);
+    this.modules.forEach(module => module.finalize());
+  }
+}
+
+let cachedDocs;
+let cachedHelper;
+
+export function getHelper(docs) {
+  if (docs !== cachedDocs) {
+    if (cachedDocs) {
+      console.warn('creating new doc helper'); // eslint-disable-line
+    }
+    cachedHelper = new DocHelper(docs);
+    cachedDocs = docs;
+  }
+
+  return cachedHelper;
+}

site/util/typography.js

@@ -0,0 +1,9 @@
+import Typography from 'typography';
+import theme from 'typography-theme-alton';
+
+const typography = new Typography(theme);
+
+export const baseSpacingPx = parseInt(theme.baseFontSize, 10);
+
+export {theme};
+export default typography;