Upgrade website (visgl#1137)

* Upgrade website

* fix CI

Author: Pessimistress

CONTRIBUTING.md

@@ -1,4 +1,4 @@
-## Contributing to react-map-gl
+# Contributing to react-map-gl
 
 **Thanks for taking the time to contribute!**
 

docs/contributing.md

@@ -0,0 +1 @@
+../CONTRIBUTING.md

docs/get-started/adding-custom-data.md

@@ -80,7 +80,7 @@ There are a couple of [additional overlays](https://github.com/visgl/react-map-g
 
 Third party overlays can also be created. For example, the [heatmap-overlay](https://github.com/vicapow/react-map-gl-heatmap-overlay) uses [webgl-heatmap](https://github.com/vicapow/webgl-heatmap) to create geographic heatmaps.
 
-<img width=200 src="https://cloud.githubusercontent.com/assets/499192/11028150/33f34640-86bc-11e5-9678-3fa1798394d5.gif" />
+<img width="200" src="https://cloud.githubusercontent.com/assets/499192/11028150/33f34640-86bc-11e5-9678-3fa1798394d5.gif" />
 
 ```js
 import HeatmapOverlay from 'react-map-gl-heatmap-overlay';

docs/table-of-contents.json

@@ -7,7 +7,7 @@
         { "entry": "docs" },
         { "entry": "docs/whats-new" },
         { "entry": "docs/upgrade-guide" },
-        { "entry": "CONTRIBUTING" }
+        { "entry": "docs/contributing" }
       ]
     },
     {

test/render/test-cases.js

@@ -45,7 +45,7 @@ export default [
       latitude: 37.78,
       zoom: 12.5
     },
-    mapError: /Unauthorized/
+    mapError: /access token/
   },
   {
     title: 'Custom tile server',

website/gatsby-config.js

@@ -1,6 +1,8 @@
-const resolve = require('path').resolve;
+const {resolve} = require('path');
 const DOC_TABLE_OF_CONTENTS = require('../docs/table-of-contents.json');
 
+const ROOT_DIR = resolve('..');
+
 module.exports = {
   plugins: [
     {
@@ -10,24 +12,28 @@ module.exports = {
 
         // Folders
         DIR_NAME: __dirname,
-        ROOT_FOLDER: `${__dirname}/../`,
+        ROOT_FOLDER: ROOT_DIR,
 
         DOCS: DOC_TABLE_OF_CONTENTS,
         DOC_FOLDERS: [
-          `${__dirname}/../docs/`
+          resolve(ROOT_DIR, 'docs')
+        ],
+        SOURCE: [
+          resolve('./static'),
+          resolve('./src'),
         ],
-        SOURCE: [`${__dirname}/static`],
 
         PROJECT_TYPE: 'github',
 
         PROJECT_NAME: 'react-map-gl',
         PROJECT_ORG: 'uber',
-        PROJECT_ORG_LOGO: 'images/uber-logo.png',
+        PROJECT_ORG_LOGO: 'images/visgl-logo.png',
         PROJECT_URL: 'https://github.com/visgl/',
         PROJECT_DESC: 'React wrapper for Mapbox GL JS',
-        PATH_PREFIX: '/react-map-gl/',
+        PROJECT_IMAGE: 'images/hero-sm.jpg',
+        PATH_PREFIX: '/react-map-gl',
 
-        GA_TRACKING: null,
+        GA_TRACKING_ID: 'UA-74374017-2',
 
         // For showing star counts and contributors.
         // Should be like btoa('YourUsername:YourKey') and should be readonly.
@@ -56,7 +62,7 @@ module.exports = {
 
         LINK_TO_GET_STARTED: '/docs/get-started/get-started',
 
-        ADDITIONAL_LINKS: [{name: 'Blog', href: 'http://medium.com/vis-gl', index: 1}],
+        ADDITIONAL_LINKS: [{name: 'Blog', href: 'http://medium.com/vis-gl', index: 4}],
 
         INDEX_PAGE_URL: resolve(__dirname, './src/home.js'),
 
@@ -147,6 +153,8 @@ module.exports = {
           }
         ],
 
+        THEME_OVERRIDES: require('./src/theme.json'),
+
         STYLESHEETS: [
           'https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.0/mapbox-gl.css',
           'https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.0.9/mapbox-gl-draw.css',

website/gatsby-node.js

@@ -27,7 +27,9 @@ module.exports.onCreateWebpackConfig = function onCreateWebpackConfigOverride(op
   }
 
   Object.assign(config.resolve.alias, {
-    'react-map-gl': resolve(__dirname, '../dist/es6')
+    'react-map-gl': resolve(__dirname, '../dist/es6'),
+    react: resolve('node_modules/react'),
+    'react-dom': resolve('node_modules/react-dom')
   }, dependencyAliases);
 
   // turf.js uses mjs

website/package.json

@@ -18,14 +18,16 @@
     "d3-scale": "^1.0.6",
     "gl-matrix": "^3.0.0",
     "immutable": "^3.7.5",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
     "react-map-gl-draw": "^0.17.2",
     "styled-components": "^4.3.2"
   },
   "devDependencies": {
-    "gatsby": "~2.20.24",
+    "gatsby": "^2.20.24",
     "gatsby-plugin-env-variables": "^1.0.1",
     "gatsby-plugin-no-sourcemaps": "^2.1.1",
-    "gatsby-theme-ocular": "^1.2.0-beta.6",
+    "gatsby-theme-ocular": "^1.2.1",
     "gh-pages": "^2.1.0"
   }
 }

website/src/home.js

@@ -19,11 +19,19 @@ const HeroExample = styled.div`
   height: 100%;
 `;
 
+const ContentContainer = styled.div`
+  padding: 64px;
+
+  @media screen and (max-width: 768px) {
+    padding: 48px;
+  }
+`;
+
 export default class IndexPage extends React.Component {
   render() {
     return (
       <Home HeroExample={HeroExample}>
-        <div>
+        <ContentContainer>
           <h2>
             react-map-gl makes using Mapbox GL JS in React applications easy.
           </h2>
@@ -59,7 +67,7 @@ export default class IndexPage extends React.Component {
             WebGL visualizations on top of your Mapbox GL JS based maps.
           </p>
 
-        </div>
+        </ContentContainer>
       </Home>
     );
   }

website/src/theme.json

@@ -0,0 +1,13 @@
+{
+  "primary400": "#00ADE6",
+  "mono100": "#FFFFFF",
+  "mono200": "#f7fcfb",
+  "mono300": "#ecf7f5",
+  "mono400": "#e1f0ee",
+  "mono500": "#cae0dc",
+  "mono600": "#9ec0bb",
+  "mono700": "#6f9691",
+  "mono800": "#486865",
+  "mono900": "#2b4845",
+  "mono1000": "#101918"
+}