[docs] add prettier, tests, and travis (maplibre#11)

* add prettier * eslint, tests * run prettier * copyeditor * configurations * add travis * add examples unit test; tags.js -> tags.json * use tap-min instead of tap-spec * polyfill style-spec.js to prevent `Symbol is undefined` in IE 11
cigone-openindoor · Aug 6, 2019 · 89abcfb · 89abcfb
1 parent cef271e
commit 89abcfb
Show file tree

Hide file tree

Showing 53 changed files with 5,277 additions and 1,669 deletions.
diff --git a/.copyeditorrc b/.copyeditorrc
@@ -0,0 +1,4 @@
+{
+  "allow": ["fast"],
+  "dictionary": "local.dic"
+}
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,5 @@
+mapbox-gl-js
+vendor
+_site*
+_batfish*
+docs/pages/dist
diff --git a/.eslintrc b/.eslintrc
@@ -1,43 +1,4 @@
 {
-  "extends": [
-    "mourner",
-    "plugin:import/recommended"
-  ],
-  "parser": "babel-eslint",
-  "parserOptions": {
-    "sourceType": "module",
-    "ecmaFeatures": {
-      "jsx": true
-    }
-  },
-  "plugins": [
-    "import",
-    "react"
-  ],
-  "rules": {
-    "react/jsx-uses-vars": "error",
-    "import/no-duplicates": "error",
-    "import/no-commonjs": "error",
-    "no-confusing-arrow": ["error", {"allowParens": true}],
-    "prefer-const": ["error", {"destructuring": "all"}],
-    "no-restricted-properties": [2, {"object": "Object", "property": "assign"}],
-    "template-curly-spacing": "error",
-
-    "new-cap": "off",
-    "array-bracket-spacing": "off",
-    "consistent-return": "off",
-    "global-require": "off",
-    "object-curly-spacing": "off",
-    "quotes": "off",
-    "space-before-function-paren": "off",
-    "no-useless-escape": "off",
-    "no-multiple-empty-lines": [ "error", {"max": 1}]
-  },
-  "globals": {
-    "analytics": false,
-    "MapboxPageShell": false
-  },
-  "env": {
-    "browser": true
-  }
+  "root": true,
+  "extends": "./conf/eslint-config-base.json"
 }
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,4 @@
+_site*
+vendor
+mapbox-gl-js
+_batfish*
diff --git a/.remarkrc b/.remarkrc
@@ -0,0 +1,13 @@
+{
+  "plugins": [
+    ["@mapbox/remark-lint-link-text", [2]],
+    ["remark-frontmatter", ["yaml"]],
+    ["@mapbox/remark-lint-mapbox/frontmatter", [2]],
+    ["@mapbox/remark-lint-mapbox/link-checker", {
+      "constants": "docs/constants.json",
+      "pages": "docs/pages/",
+      "siteBasePath": "mapbox-gl-js",
+      "siteOrigin": "https://docs.mapbox.com"
+      }, [2]]
+  ]
+}
diff --git a/.travis.yml b/.travis.yml
@@ -0,0 +1,3 @@
+language: node_js
+node_js:
+  - 8
diff --git a/README.md b/README.md
@@ -37,7 +37,7 @@ code for the example, and a `.js` file containing example boilerplate and front
 
 * `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, see `docs/data/tags.js` for a list of tags
+* `tags`: An array of tags for the example, which determine the sections it is listed in in the sidebar navigation, see `docs/data/tags.json` for a list of tags
 * `pathname`: The relative path of the example, including leading `/mapbox-gl-js/example/` path
 
 In the `.html` file, write the HTML and JavaScript constituting the example.

diff --git a/batfish.config.js b/batfish.config.js
@@ -39,16 +39,22 @@ module.exports = () => {
             }
         ],
         jsxtremeMarkdownOptions: {
-            wrapper: path.join(__dirname, './docs/components/markdown-page-shell.js'),
+            wrapper: path.join(
+                __dirname,
+                './docs/components/markdown-page-shell.js'
+            ),
             rehypePlugins: [
                 require('@mapbox/dr-ui/plugins/add-links-to-headings'),
                 require('@mapbox/dr-ui/plugins/make-table-scroll')
             ]
         },
         dataSelectors: {
-            examples: ({pages}) => {
+            examples: ({ pages }) => {
                 return pages
-                    .filter(({path, frontMatter}) => /\/example\//.test(path) && frontMatter.tags)
+                    .filter(
+                        ({ path, frontMatter }) =>
+                            /\/example\//.test(path) && frontMatter.tags
+                    )
                     .map(example => {
                         return {
                             path: example.path,
@@ -71,11 +77,7 @@ module.exports = () => {
             }
         },
         devBrowserslist: false,
-        babelInclude: [
-          'documentation',
-          'debounce-fn',
-          'mimic-fn'
-        ]
+        babelInclude: ['documentation', 'debounce-fn', 'mimic-fn']
     };
 
     // Local builds treat the `dist` directory as static assets, allowing you to test examples against the

diff --git a/conf/eslint-config-base.json b/conf/eslint-config-base.json
@@ -0,0 +1,7 @@
+{
+  "extends": "eslint:recommended",
+  "env": {
+    "es6": true,
+    "node": true
+  }
+}
diff --git a/conf/eslint-config-browser.json b/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,
+    "analytics": true
+  },
+  "plugins": ["react"],
+  "rules": {
+    "react/jsx-uses-react": "error",
+    "react/jsx-uses-vars": "error"
+  }
+}
diff --git a/docs/.eslintrc b/docs/.eslintrc
@@ -0,0 +1,3 @@
+{
+  "extends": "../conf/eslint-config-browser.json"
+}
diff --git a/docs/bin/appropriate-images.js b/docs/bin/appropriate-images.js
@@ -1,9 +1,9 @@
 #!/usr/bin/env node
 'use strict';
 
-const path = require('path'); // eslint-disable-line import/no-commonjs
-const appropriateImages = require('@mapbox/appropriate-images'); // eslint-disable-line import/no-commonjs
-const imageConfig = require('../img/dist/image.config.json'); // eslint-disable-line import/no-commonjs
+const path = require('path');
+const appropriateImages = require('@mapbox/appropriate-images');
+const imageConfig = require('../img/dist/image.config.json');
 
 appropriateImages.createCli(imageConfig, {
     inputDirectory: path.join(__dirname, '../img/src'),

diff --git a/docs/bin/build-image-config.js b/docs/bin/build-image-config.js
@@ -4,21 +4,26 @@
 // it is also required in react component that loads the image in components/appropriate-image.js
 const imagePath = './docs/img/src/';
 
-const imageConfig = require('fs').readdirSync(imagePath).reduce((obj, image) => {
-    const ext = require('path').extname(`${imagePath}${image}`);
-    // only process png
-    if (ext === '.png') {
-        const key = image.replace(ext, '');
-        // set sizes for all images
-        const sizes = [{ width: 800 }, { width: 500 }];
-        // set additional sizes for specific images
-        if (key === 'simple-map') sizes.push({ width: 1200 });
-        obj[key] = {
-            basename: image,
-            sizes
-        };
-    }
-    return obj;
-}, {});
+const imageConfig = require('fs')
+    .readdirSync(imagePath)
+    .reduce((obj, image) => {
+        const ext = require('path').extname(`${imagePath}${image}`);
+        // only process png
+        if (ext === '.png') {
+            const key = image.replace(ext, '');
+            // set sizes for all images
+            const sizes = [{ width: 800 }, { width: 500 }];
+            // set additional sizes for specific images
+            if (key === 'simple-map') sizes.push({ width: 1200 });
+            obj[key] = {
+                basename: image,
+                sizes
+            };
+        }
+        return obj;
+    }, {});
 
-require('fs').writeFileSync('./docs/img/dist/image.config.json', JSON.stringify(imageConfig));
+require('fs').writeFileSync(
+    './docs/img/dist/image.config.json',
+    JSON.stringify(imageConfig)
+);
diff --git a/docs/bin/create-image.js b/docs/bin/create-image.js
@@ -5,23 +5,41 @@ const path = require('path'); // eslint-disable-line
 const pack = require('../../mapbox-gl-js/package.json'); // eslint-disable-line
 
 const fileName = process.argv[2];
-const token = process.argv[3] || process.env.MAPBOX_ACCESS_TOKEN || process.env.MapboxAccessToken;
+const token =
+    process.argv[3] ||
+    process.env.MAPBOX_ACCESS_TOKEN ||
+    process.env.MapboxAccessToken;
 
 if (!token || !fileName) {
-    throw new Error('\n  Usage: npm run create-image <file-name> <mapbox-access-token>\nExample: npm run create-image 3d-buildings pk000011110000111100001111\n\n');
+    throw new Error(
+        '\n  Usage: npm run create-image <file-name> <mapbox-access-token>\nExample: npm run create-image 3d-buildings pk000011110000111100001111\n\n'
+    );
 }
 
 // strip file extension from file name
 const fileNameFormatted = fileName.replace('.html', '').replace('.js', '');
 // get the example contents/snippet
-const snippet = require('fs').readFileSync(path.resolve(__dirname, '..', 'pages', 'example', `${fileNameFormatted}.html`), 'utf-8');
+const snippet = require('fs').readFileSync(
+    path.resolve(
+        __dirname,
+        '..',
+        'pages',
+        'example',
+        `${fileNameFormatted}.html`
+    ),
+    'utf-8'
+);
 // create an HTML page to display the example snippet
 const html = `<!DOCTYPE html>
 <html>
 <head>
 <meta charset='utf-8' />
-<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v${pack.version}/mapbox-gl.js'></script>
-<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v${pack.version}/mapbox-gl.css' rel='stylesheet' />
+<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v${
+    pack.version
+}/mapbox-gl.js'></script>
+<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v${
+    pack.version
+}/mapbox-gl.css' rel='stylesheet' />
 <style>
 body { margin:0; padding:0; }
 #map { position: absolute; top:0; bottom:0; width: 600px; max-height: 300px; }
@@ -36,28 +54,34 @@ ${snippet}
 </html>`;
 
 // initilize puppeteer
-(async() => {
+(async () => {
     const browser = await puppeteer.launch();
     const page = await browser.newPage();
     // set html for page and then wait until mapbox-gl-js loads
-    await page.setContent(html, {waitUntil: 'networkidle2'});
+    await page.setContent(html, { waitUntil: 'networkidle2' });
     // set viewport and double deviceScaleFactor to get a closer shot of the map
     await page.setViewport({
         width: 600,
         height: 600,
         deviceScaleFactor: 2
     });
     // create screenshot
-    await page.screenshot({
-        path: `./docs/img/src/${fileNameFormatted}.png`,
-        type: 'png',
-        clip: {
-            x: 0,
-            y: 0,
-            width: 600,
-            height: 250
-        }
-    }).then(() => console.log(`Created ./docs/img/src/${fileNameFormatted}.png`))
-        .catch((err) => { console.log(err); });
+    await page
+        .screenshot({
+            path: `./docs/img/src/${fileNameFormatted}.png`,
+            type: 'png',
+            clip: {
+                x: 0,
+                y: 0,
+                width: 600,
+                height: 250
+            }
+        })
+        .then(() =>
+            console.log(`Created ./docs/img/src/${fileNameFormatted}.png`)
+        )
+        .catch(err => {
+            console.log(err);
+        });
     await browser.close();
 })();