Starting point for docs

package.json

@@ -17,7 +17,7 @@
     "serve-examples": "mkdir -p build/examples && webpack --config examples/webpack/config.js --mode development --watch & serve build/examples",
     "build-examples": "webpack --config examples/webpack/config.js --mode production",
     "build-index": "node tasks/generate-index",
-    "build-site": "cd site && npm install && npm run build",
+    "build-site": "node tasks/generate-info.js && cd site && npm install && npm run build",
     "prebuild": "npm run build-index",
     "build": "rollup --config config/rollup.js",
     "presrc-closure": "npm run prebuild",
@@ -40,6 +40,7 @@
     "css/ol.css"
   ],
   "dependencies": {
+    "babel-eslint": "^8.2.3",
     "pbf": "3.1.0",
     "pixelworks": "1.1.0",
     "rbush": "2.0.2"

site/.eslintrc

@@ -1,5 +1,6 @@
 {
   "extends": "openlayers/react",
+  "parser": "babel-eslint",
   "globals": {
     "graphql": false
   }

site/src/layouts/index.js

@@ -29,6 +29,7 @@ const Layout = ({children}) => (
         <Link to="/">OpenLayers</Link>
       </h1>
       <div>
+        <Link to="/docs/">docs</Link>&nbsp;
         <Link to="/examples/">examples</Link>
       </div>
     </Header>

site/src/pages/docs.js

@@ -0,0 +1,67 @@
+import React, {Component} from 'react';
+
+import info from '../../../build/info.json';
+
+const modules = [];
+const moduleLookup = {};
+info.modules.forEach(mod => {
+  moduleLookup[mod.path] = mod;
+  modules.push(mod);
+});
+
+info.symbols.forEach(symbol => {
+  const mod = moduleLookup[symbol.path];
+  if (!mod) {
+    throw new Error(`No module for symbol ${symbol.name}`);
+  }
+  const kind = symbol.kind;
+  if (!mod[kind]) {
+    mod[kind] = [];
+  }
+  mod[kind].push(symbol);
+});
+
+function getModuleName(longname) {
+  return longname.slice(7);
+}
+
+function getClassName(longname) {
+  return longname.split('~').pop();
+}
+
+function slugify(name) {
+  return name.replace(/[#~\.]/g, '-');
+}
+
+class Docs extends Component {
+  renderModule = mod => {
+    const slug = slugify(mod.name);
+    return (
+      <section key={mod.name}>
+        <a name={slug} href={`#${slug}`}>
+          <h1>{getModuleName(mod.name)}</h1>
+          <h2>Classes</h2>
+          {mod.class.map(cls => this.renderClass(cls, mod))}
+        </a>
+      </section>
+    );
+  };
+
+  renderClass(cls, mod) {
+    return (
+      <p key={cls.name}>
+        <code>
+          import {getClassName(cls.name)} from &apos;{getModuleName(mod.name)}&apos;;
+        </code>
+      </p>
+    );
+  }
+
+  render() {
+    return (
+      <div>{modules.filter(mod => !!mod.class).map(this.renderModule)}</div>
+    );
+  }
+}
+
+export default Docs;