Port docs to batfish

.flowconfig

@@ -3,6 +3,9 @@
 .*/node_modules/stylelint/.*
 .*/node_modules/unflowify/.*
 .*/node_modules/flow-coverage-report/.*
+.*/node_modules/babel-plugin-transform-react-remove-prop-types/.*
+.*/node_modules/conventional-changelog-core/.*
+.*/node_modules/htmltojsx/.*
 .*/test/unit/style-spec/fixture/invalidjson.input.json
 
 [options]

.gitignore

@@ -1,6 +1,4 @@
-/docs/api
-/docs/style-spec/index.html
-/_site
+/docs/components/api.json
 /dist/mapbox-gl-dev.js
 /dist/mapbox-gl.js
 *.js.map
@@ -17,3 +15,5 @@ test/integration/**/index*.html
 test/integration/**/actual.png
 test/integration/**/diff.png
 .eslintcache
+_batfish_site
+_batfish_tmp

_config.yml

@@ -1,9 +1,3 @@
-url: https://122e4e-mapbox.global.ssl.fastly.net
-api: https://122e4e-mapbox.global.ssl.fastly.net/core
-tileApi: https://api-maps-staging.tilestream.net
-source: docs
-permalink: /:categories/:title/
-baseurl: /mapbox-gl-js
-excerpt_separator: ""
-mapboxglbase: /mapbox-gl-js/dist
-future: true
+# When Publisher runs Jekyll (which it always does), it will simply copy this
+# source directory to _site. Then Publisher will copy _site to S3.
+source: _batfish_site

batfish.config.js

@@ -0,0 +1,51 @@
+const webpack = require('webpack');
+
+module.exports = () => {
+    const config = {
+        siteBasePath: '/mapbox-gl-js',
+        siteOrigin: 'https://www.mapbox.com',
+        pagesDirectory: `${__dirname}/docs/pages`,
+        stylesheets: [
+            `${__dirname}/docs/components/site.css`,
+            `${__dirname}/docs/components/prism_highlight.css`,
+            `${__dirname}/vendor/dotcom-page-shell/page-shell-styles.css`
+        ],
+        applicationWrapperPath: `${__dirname}/docs/components/application-wrapper.js`,
+        webpackLoaders: [
+            // Use raw loader to get the HTML string contents of examples
+            {
+                test: /\.html$/,
+                use: 'raw-loader'
+            }
+        ],
+        ignoreWithinPagesDirectory: ['example/*.html'],
+        webpackPlugins: [
+            // Make environment variables available within JS that Webpack compiles.
+            new webpack.DefinePlugin({
+                // DEPLOY_ENV is used in config to pick between local/production.
+                'process.env.DEPLOY_ENV': `"${process.env.DEPLOY_ENV}"`
+            })
+        ],
+        inlineJs: [
+            {
+                filename: `${__dirname}/vendor/dotcom-page-shell/page-shell-script.js`
+            }
+        ],
+        dataSelectors: {
+            examples: ({pages}) => {
+                return pages
+                    .filter(({path, frontMatter}) => /\/example\//.test(path) && frontMatter.tags)
+                    .map(({frontMatter}) => frontMatter);
+            }
+        }
+    };
+
+    // Local builds treat the `dist` directory as static assets, allowing you to test examples against the
+    // local branch build. Non-local builds ignore the `dist` directory, and examples load assets from the CDN.
+    config.unprocessedPageFiles = ['dist/**/*.*'];
+    if (process.env.DEPLOY_ENV !== 'local') {
+        config.ignoreWithinPagesDirectory.push('dist/**/*.*');
+    }
+
+    return config;
+};

convert-examples.js

@@ -0,0 +1,41 @@
+const fs = require('fs');
+const matter = require('gray-matter');
+
+fs.readdirSync(`examples`).forEach((file) => {
+    if (file[0] === '.') {
+        return;
+    }
+
+    const name = /\d\d\d\d-\d\d-\d\d-(.*)\.html$/.exec(file)[1];
+    const example = matter(fs.readFileSync(`examples/${file}`, 'utf8'));
+
+    fs.writeFileSync(`docs/pages/example/${name}.html`, example.content);
+
+    delete example.data.layout;
+    delete example.data.category;
+    delete example.data.permalink;
+
+    example.data.pathname = `/mapbox-gl-js/example/${name}/`;
+
+    fs.writeFileSync(`docs/pages/example/${name}.js`,
+`/*${matter.stringify('', example.data).slice(0, -2)}*/
+import Example from '../../components/example';
+import html from './${name}.html';
+export default Example(html);
+`)
+});
+
+fs.readdirSync(`redirects`).forEach((file) => {
+    if (file[0] === '.') {
+        return;
+    }
+
+    const name = /\d\d\d\d-\d\d-\d\d-(.*)\.html$/.exec(file)[1];
+    const example = matter(fs.readFileSync(`redirects/${file}`, 'utf8'));
+
+    fs.writeFileSync(`docs/pages/example/${name}.js`,
+        `import Redirect from '../../components/redirect';
+import {prefixUrl} from '@mapbox/batfish/modules/prefix-url';
+export default Redirect(prefixUrl('${example.data.redirect}'));
+`)
+});

docs/README.md

@@ -18,14 +18,15 @@ API documentation is written as [JSDoc comments](http://usejsdoc.org/) and proce
 
 ## Writing Examples
 
-Examples are written as Jekyll posts in `docs/_posts/examples`. The Jekyll front matter should include the following items:
+Examples are written as [Batfish](https://github.com/mapbox/batfish) pages in `docs/pages/example`. Each example requires two files: an `.html` file containing the source
+code for the example, and a `.js` file containing example boilerplate and front matter. The front matter should include the following items:
 
-* `layout`: `example`
-* `category`: `example`
 * `title`: A short title for the example in **sentence case** as a **verb phrase**
 * `description`: A one sentence description of the example
+* `tags`: An array of tags for the example, which determine the sections it is listed in in the sidebar navigation
+* `pathname`: The relative path of the example, including leading `/mapbox-gl-js/example/` path
 
-In the post body, write the HTML and JavaScript constituting the example.
+In the `.html` file, write the HTML and JavaScript constituting the example.
 
 * Use **4 space indentation**. Exception: do not add an initial level of indentation to code within `<script>` tags (it should start flush left).
 * Do **not** include an access token in the example code. The access token will be inserted automatically by the template, using the current logged in user's default public token, or a placeholder `<insert token here>` string if the user is not logged in.
@@ -39,26 +40,7 @@ To start a documentation server locally run
 npm run start-docs
 ```
 
-You can view the documentation at
-
-```bash
-open http://127.0.0.1:4000/mapbox-gl-js/
-```
-
-### Troubleshooting
-
-Ensure you have the right version of all dependencies
-
-```bash
-npm install
-```
-
-Ensure you are running Jekyll version 3.2.x
-
-```bash
-jekyll -v
- > jekyll 3.2.1
-```
+The command will print the URL you can use to view the documentation.
 
 ## Committing and Publishing Documentation