Add a Batfish demo site for testing components

.eslintignore

@@ -9,3 +9,6 @@ src/components/*/index.js
 packages/**/package-lock.json
 pkg
 src/test-cases-app/component-index.js
+_site*
+demo/vendor/*
+demo/batfish.config.js

.gitignore

@@ -5,3 +5,4 @@ dist
 pkg
 src/test-cases-app/component-index.js
 src/components/syntax-highlighting/index.js
+_site_*

.travis.yml

@@ -9,3 +9,7 @@ cache:
     - node_modules
 git:
   depth: 3
+
+script:
+  - npm test
+  - npm run build-batfish

README.md

@@ -40,9 +40,17 @@ npm start
 npm run start-legacy
 ```
 
-Docs build process and automated testing coming soon.
+The `demo/` directory contains a demo Batfish site to test components locally. You can add the component to the site and view it with:
 
-When making changes to the build script, test that the module builds correctly by running `npm run build` and then linking the local package with another local repo. Make sure you are able to run the local repo without errors from dr-ui.
+```bash
+npm run start-batfish
+```
+
+Travis will also build the demo site to make sure there are no errors at build time. You can also test that the demo site will build with:
+
+```bash
+npm run build-batfish
+```
 
 ## Tests
 

demo/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./conf/eslint-config-browser.json"
+}

demo/README.md

@@ -0,0 +1,6 @@
+# dr-ui demo site
+
+Sample [Batfish](https://github.com/mapbox/batfish) site to test dr-ui components.
+
+* Run: `npm run start`
+* Build: `npm run build`

demo/batfish.config.js

@@ -0,0 +1,101 @@
+'use strict';
+
+const path = require('path');
+const pageShellDir = path.join(__dirname, './vendor/docs-page-shell');
+module.exports = () => {
+  const config = {
+    siteOrigin: 'https://docs.mapbox.com',
+    siteBasePath: '/demo',
+    productionDevtool: 'source-map',
+    pagesDirectory: path.join(__dirname, 'src/pages/'),
+    outputDirectory: path.join(__dirname, '_site/'),
+    temporaryDirectory: path.join(__dirname, '_site_tmp/'),
+    stylesheets: [
+      require.resolve('@mapbox/mbx-assembly/dist/assembly.css'),
+      path.join(pageShellDir, 'page-shell-styles.css'),
+      path.join(__dirname, './src/css/site.css'),
+      require.resolve('../pkg/css/docs-prose.css'),
+      require.resolve('../pkg/css/prism.css')
+    ],
+    applicationWrapperPath: path.join(
+      __dirname,
+      'src/components/application-wrapper.js'
+    ),
+    inlineJs: [{ filename: path.join(pageShellDir, 'page-shell-script.js') }],
+    jsxtremeMarkdownOptions: {
+      wrapper: path.join(__dirname, 'src/components/markdown-page-shell.js'),
+      rehypePlugins: [
+        require('rehype-slug'),
+        require('@mapbox/rehype-prism'),
+        require('../pkg/plugins/add-links-to-headings'),
+        require('../pkg/plugins/create-sections'),
+        require('../pkg/plugins/make-table-scroll')
+      ]
+    },
+    devBrowserslist: false,
+    babelInclude: ['mimic-fn', 'debounce-fn'],
+    dataSelectors: {
+      listSubFolders: data => {
+        const folders = data.pages.filter(
+          file => file.path.split(path.sep).length === 4
+        );
+        return folders;
+      },
+      orderedPages: data => {
+        // get all pages and the meta we need to process
+        const pages = data.pages.map(p => ({
+          title: p.frontMatter.title,
+          description: p.frontMatter.description,
+          path: p.path,
+          order: p.frontMatter.order || undefined,
+          navOrder: p.frontMatter.navOrder || undefined,
+          layout: p.frontMatter.layout || undefined,
+          topic: p.frontMatter.topic || undefined,
+          thumbnail: p.frontMatter.thumbnail || undefined
+        }));
+        // get top level nav items
+        const navItems = pages
+          .filter(p => p.navOrder)
+          .sort((a, b) => parseFloat(a.navOrder) - parseFloat(b.navOrder));
+        // add second level items
+        const items = navItems.reduce((obj, parent) => {
+          const children = pages.filter(page =>
+            page.path.startsWith(parent.path)
+          );
+
+          const topics = [
+            ...new Set(
+              children.reduce((arr, page) => {
+                if (page.topic) arr = arr.concat(page.topic);
+                return arr;
+              }, [])
+            )
+          ];
+
+          obj[parent.path] = {
+            title: parent.title,
+            description: parent.description,
+            order: parent.order,
+            navOrder: parent.navOrder,
+            path: parent.path,
+            layout: parent.layout,
+            topics: topics,
+            pages: children
+              .reduce((arr, child) => {
+                // if parent layout is accordion, set childen layout to accordion
+                if (parent.layout === 'accordion') {
+                  child.layout = parent.layout;
+                }
+                arr = arr.concat(child);
+                return arr;
+              }, [])
+              .sort((a, b) => parseFloat(a.order) - parseFloat(b.order))
+          };
+          return obj;
+        }, {});
+        return items;
+      }
+    }
+  };
+  return config;
+};

demo/conf/eslint-config-base.json

@@ -0,0 +1,7 @@
+{
+  "extends": "eslint:recommended",
+  "env": {
+    "es6": true,
+    "node": true
+  }
+}

demo/conf/eslint-config-browser.json

@@ -0,0 +1,22 @@
+{
+  "extends": "./eslint-config-base.json",
+  "parser": "babel-eslint",
+  "env": {
+    "browser": true
+  },
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "globals": {
+    "MapboxPageShell": true
+  },
+  "plugins": ["react"],
+  "rules": {
+    "react/jsx-uses-react": "error",
+    "react/jsx-uses-vars": "error",
+    "node/no-unsupported-features": "off"
+  }
+}

demo/css/site.css

@@ -0,0 +1 @@
+/* extra styles here */