[chore] upgrading docs packages (#109)

.eslintrc.js

@@ -59,6 +59,6 @@ module.exports = {
     }
   },
   parserOptions: {
-    ecmaVersion: 2018
+    ecmaVersion: 2020
   }
 };

.markdownlintrc

@@ -0,0 +1,12 @@
+{
+  "default": true,
+  "colors": true,
+  "header-increment": false,
+  "line-length": false,
+  "ul-style": {"style": "sublist"},
+  "no-trailing-punctuation": {"punctuation": ".,;:"},
+  "no-duplicate-header": false,
+  "no-inline-html": false,
+  "no-hard-tabs": false,
+  "whitespace": false
+}

docs/README.md

@@ -87,7 +87,7 @@ export default function App() {
     <div style={{position: 'relative'}}>
       <DeckGL
         ref={deckRef}
-        {...adapter.getProps({deckRef, setReady, onNextFrame})}
+        {...adapter.getProps({deckRef, setReady, onNextFrame, getLayers})}
       />
       <div style={{position: 'absolute'}}>{ready && <BasicControls adapter={adapter} busy={busy} setBusy={setBusy} timecode={timecode} getCameraKeyframes={getCameraKeyframes}/>}</div>
     </div>

docs/api-reference/README.md

@@ -0,0 +1,12 @@
+# API Overview
+
+#### Adapter
+
+ - [DeckAdapter](/docs/api-reference/deck-adapter)
+
+#### Scene
+
+ - [DeckScene](/docs/api-reference/scene/deck-scene)
+
+
+

modules/core/docs/deck-adapter.md → docs/api-reference/deck-adapter.md

@@ -10,7 +10,7 @@ new DeckAdapter(sceneBuilder);
 
 ##### `sceneBuilder` (`(timeline) => Promise<DeckScene> | DeckScene`)
 
-Function to build scene, async or sync. See [DeckScene](/modules/core/docs/scene/deck-scene) for more information.
+Function to build scene, async or sync. See [DeckScene](/docs/api-reference/scene/deck-scene) for more information.
 
 ```js
 async function sceneBuilder(timeline) {
@@ -55,11 +55,11 @@ This function is called after the last frame is rendered and a file is created f
 
 * **`Encoder` (`typeof FrameEncoder`, Optional) - Default: `PreviewEncoder`.**
 
-Provide a FrameEncoder class for capturing deck canvas. See [Encoders Overview](/modules/core/docs/encoder) for options.
+Provide a FrameEncoder class for capturing deck canvas. See [Encoders Overview](/docs/api-reference/encoder) for options.
 
 * **`formatConfigs` (`Object`, Optional) - Default: `{}`.**
 
-See [FrameEncoder](/modules/core/docs/encoder/frame-encoder#constructor-1) for internal defaults.
+See [FrameEncoder](/docs/api-reference/encoder/frame-encoder#constructor-1) for internal defaults.
 
 * **`timecode` (`{start: number, end: number, framerate: number}`)**
 

modules/core/docs/encoder/README.md → docs/api-reference/encoder/README.md

@@ -1,10 +1,10 @@
 # Overview
 
-Encoders are used to capture frames of an HTML canvas and construct them into videos. They're constructed and configured internally before each video capture. During capture, they provide asynchronous functions for adding frames and saving videos. See [DeckAdapter.render](/modules/core/docs/deck-adapter#render) for usage.
+Encoders are used to capture frames of an HTML canvas and construct them into videos. They're constructed and configured internally before each video capture. During capture, they provide asynchronous functions for adding frames and saving videos. See [DeckAdapter.render](/docs/api-reference/deck-adapter#render) for usage.
 
 ##### Video
 
-All encoder classes inherit from the [`FrameEncoder`](/modules/core/docs/encoder/frame-encoder) class.
+All encoder classes inherit from the [`FrameEncoder`](/docs/api-reference/encoder/frame-encoder) class.
 
  - WebMEncoder
 

modules/core/docs/encoder/frame-encoder.md → docs/api-reference/encoder/frame-encoder.md

@@ -42,7 +42,7 @@ Generic quality value. For canvas capture see [HTMLCanvasElement.toDataURL](http
 
 Initialize a capture and flush the existing encoder state.
 
-##### add(canvas: HTMLCanvasElement): Promise<void>
+##### add(canvas: HTMLCanvasElement): `Promise<void>`
 
 Add a canvas frame to an in-progress capture.
 

modules/core/docs/encoder/gif-encoder.md → docs/api-reference/encoder/gif-encoder.md

@@ -1,14 +1,14 @@
 # GifEncoder
 
-A GIF animated photo format encoder that inherits [FrameEncoder](/modules/core/docs/encoder/frame-encoder).
+A GIF animated photo format encoder that inherits [FrameEncoder](/docs/api-reference/encoder/frame-encoder).
 
 ## Constructor
 
-Construction of the encoder class is not required. Refer to [DeckAdapter.render](/modules/core/docs/deck-adapter#render) for usage. The constructor accepts a `FrameEncoderSettings` object.
+Construction of the encoder class is not required. Refer to [DeckAdapter.render](/docs/api-reference/deck-adapter#render) for usage. The constructor accepts a `FrameEncoderSettings` object.
 
 ## FrameEncoderSettings
 
-In addition to the top level [FrameEncoder](/modules/core/docs/encoder/frame-encoder) settings, these settings are available under the `gif` namespace.
+In addition to the top level [FrameEncoder](/docs/api-reference/encoder/frame-encoder) settings, these settings are available under the `gif` namespace.
 
 * `width` - The width in pixels the GIF is scaled to. Defaults to 720.
 
@@ -25,7 +25,7 @@ In addition to the top level [FrameEncoder](/modules/core/docs/encoder/frame-enc
 
 * `mimeType` - `"image/gif"`
 
-* `options` - The object under the `gif` namespace in the [FrameEncoder](/modules/core/docs/encoder/frame-encoder) settings, see above.
+* `options` - The object under the `gif` namespace in the [FrameEncoder](/docs/api-reference/encoder/frame-encoder) settings, see above.
 
 ## Source
 

modules/core/docs/encoder/jpeg-sequence-encoder.md → docs/api-reference/encoder/jpeg-sequence-encoder.md

@@ -1,14 +1,14 @@
 # JPEGSequenceEncoder
 
-A photo sequence encoder that inherits [FrameEncoder](/modules/core/docs/encoder/frame-encoder). Saves each frame as a photo contained in a `".tar"` archive.
+A photo sequence encoder that inherits [FrameEncoder](/docs/api-reference/encoder/frame-encoder). Saves each frame as a photo contained in a `".tar"` archive.
 
 ## Constructor
 
-Construction of the encoder class is not required. Refer to [DeckAdapter.render](/modules/core/docs/deck-adapter#render) for usage. The constructor accepts a `FrameEncoderSettings` object.
+Construction of the encoder class is not required. Refer to [DeckAdapter.render](/docs/api-reference/deck-adapter#render) for usage. The constructor accepts a `FrameEncoderSettings` object.
 
 ## FrameEncoderSettings
 
-In addition to the top level [FrameEncoder](/modules/core/docs/encoder/frame-encoder) settings, these settings are available under the `jpeg` namespace.
+In addition to the top level [FrameEncoder](/docs/api-reference/encoder/frame-encoder) settings, these settings are available under the `jpeg` namespace.
 
 * `quality` - See member note. Defaults to 0.8.
 

modules/core/docs/encoder/png-sequence-encoder.md → docs/api-reference/encoder/png-sequence-encoder.md

@@ -1,10 +1,10 @@
 # PNGSequenceEncoder
 
-A photo sequence encoder that inherits [FrameEncoder](/modules/core/docs/encoder/frame-encoder). Saves each frame as a photo contained in a `".tar"` archive.
+A photo sequence encoder that inherits [FrameEncoder](/docs/api-reference/encoder/frame-encoder). Saves each frame as a photo contained in a `".tar"` archive.
 
 ## Constructor
 
-Construction of the encoder class is not required. Refer to [DeckAdapter.render](/modules/core/docs/deck-adapter#render) for usage. The constructor accepts a `FrameEncoderSettings` object.
+Construction of the encoder class is not required. Refer to [DeckAdapter.render](/docs/api-reference/deck-adapter#render) for usage. The constructor accepts a `FrameEncoderSettings` object.
 
 **Notes:**
 

modules/core/docs/encoder/preview-encoder.md → docs/api-reference/encoder/preview-encoder.md

@@ -1,10 +1,10 @@
 # PreviewEncoder
 
-A utility encoder is used to quickly preview animations in the browser that inherits [FrameEncoder](/modules/core/docs/encoder/frame-encoder). It doesn't produce file artifacts or capture the canvas.
+A utility encoder is used to quickly preview animations in the browser that inherits [FrameEncoder](/docs/api-reference/encoder/frame-encoder). It doesn't produce file artifacts or capture the canvas.
 
 ## Constructor
 
-Construction of the encoder class is not required. Refer to [DeckAdapter.render](/modules/core/docs/deck-adapter#render) for usage. The constructor accepts a `FrameEncoderSettings` object.
+Construction of the encoder class is not required. Refer to [DeckAdapter.render](/docs/api-reference/deck-adapter#render) for usage. The constructor accepts a `FrameEncoderSettings` object.
 
 # Usage
 

modules/core/docs/encoder/webm-encoder.md → docs/api-reference/encoder/webm-encoder.md

@@ -1,14 +1,14 @@
 # WebmEncoder
 
-A WebM video format encoder that inherits [FrameEncoder](/modules/core/docs/encoder/frame-encoder).
+A WebM video format encoder that inherits [FrameEncoder](/docs/api-reference/encoder/frame-encoder).
 
 ## Constructor
 
-Construction of the encoder class is not required. Refer to [DeckAdapter.render](/modules/core/docs/deck-adapter#render) for usage. The constructor accepts a `FrameEncoderSettings` object.
+Construction of the encoder class is not required. Refer to [DeckAdapter.render](/docs/api-reference/deck-adapter#render) for usage. The constructor accepts a `FrameEncoderSettings` object.
 
 ## FrameEncoderSettings
 
-In addition to the top level [FrameEncoder](/modules/core/docs/encoder/frame-encoder) settings, these settings are available under the `webm` namespace.
+In addition to the top level [FrameEncoder](/docs/api-reference/encoder/frame-encoder) settings, these settings are available under the `webm` namespace.
 
 * `quality` - See member note. Defaults to 0.8.
 

modules/core/docs/keyframe/README.md → docs/api-reference/keyframe/README.md

@@ -6,13 +6,13 @@ It's very straightforward to define new kinds of `Keyframe` classes, so hubble.g
 
 ##### Keyframes
 
-All keyframe classes inherit from the hubble.gl [`Keyframes`](/modules/core/docs/keyframe/keyframes) base class.
+All keyframe classes inherit from the hubble.gl [`Keyframes`](/docs/api-reference/keyframe/keyframes) base class.
 
  - CameraKeyframes
 
 ##### LayersKeyframes
 
-All layer keyframe classes inherit from the [`LayerKeyframes`](/modules/core/docs/keyframe/layer-keyframes) base class. Each instance is associated with a deck.gl `layerId`.
+All layer keyframe classes inherit from the [`LayerKeyframes`](/docs/api-reference/keyframe/layer-keyframes) base class. Each instance is associated with a deck.gl `layerId`.
 
  - ScatterPlotLayerKeyframes
 

docs/rendering-tip.md

@@ -15,39 +15,40 @@ There are plenty of free converters out there. The ones written in this guide wi
 
 **Step 1: Pick your WebM file**
 
-<img src="/images/convertio-step1.jpg" alt="Convertio Step 1" width="600px">
+<img src="/images/convertio-step1.jpg" alt="Convertio Step 1" width="600px"/>
 
 **Step 2: Click the "..." option to open up a menu**
 
 **Step 3: Select the filetype that you want. We recommend GIF/MP4 for use in your presentations**
 
 **Step 4: Click Convert**
 
-<img src="/images/convertio-step2-3-4.jpg" alt="Convertio Step 2, 3, & 4" width="600px">
+<img src="/images/convertio-step2-3-4.jpg" alt="Convertio Step 2, 3, & 4" width="600px"/>
 
 ### Convert JPEG sequence to GIF
 There are plenty of free converters out there. The ones written in this guide will be based off of: https://gifmaker.me/
 
 **Step 1: Untar the file. On Windows a tool like [7-Zip](https://www.7-zip.org/) can be used**
 
 **Step 2: Click on Upload Images**
-<img src="/images/gifmaker-step2.jpg" alt="GIFMaker Step 2" width="600px">
+<img src="/images/gifmaker-step2.jpg" alt="GIFMaker Step 2" width="600px"/>
 
 **Step 3: Select all the images in the folder that was created**
 
 **Step 4: Open all the images**
 
-<img src="/images/gifmaker-step3-4.jpg" alt="GIFMaker Step 3 & 4" width="600px">
+<img src="/images/gifmaker-step3-4.jpg" alt="GIFMaker Step 3 & 4" width="600px"/>
 
 **Step 4a: A preview will be generated at the top. Settings such as order and pacing can be adjusted if anything looks wrong**
 
 **Step 5: Click on "Create GIF Animation"**
 
-<img src="/images/gifmaker-step4a-5.jpg" alt="GIFMaker Step 4a & 5" width="600px">
+<img src="/images/gifmaker-step4a-5.jpg" alt="GIFMaker Step 4a & 5" width="600px"/>
 
 **Step 6: Click on "Download the GIF"**
 
-<img src="/images/gifmaker-step6.jpg" alt="GIFMaker Step 6" width="600px">
+<img src="/images/gifmaker-step6.jpg" alt="GIFMaker Step 6" width="600px"/>
 
 ### Convert PNG sequence to GIF
-See "Convert JPEG sequence to GIF" section
+
+See "Convert JPEG sequence to GIF" section.

docs/table-of-contents.json

@@ -30,55 +30,55 @@
           "title": "Adapter",
           "entries": [
             {
-              "entry": "modules/core/docs/deck-adapter"
+              "entry": "docs/api-reference/deck-adapter"
             }
           ]
         },
         {
           "title": "Scenes",
           "entries": [
             {
-              "entry": "modules/core/docs/scene/deck-scene"
+              "entry": "docs/api-reference/scene/deck-scene"
             }
           ]
         },
         {
           "title": "Keyframes",
           "entries": [
             {
-              "entry": "modules/core/docs/keyframe"
+              "entry": "docs/api-reference/keyframe"
             },
             {
-              "entry": "modules/core/docs/keyframe/keyframes"
+              "entry": "docs/api-reference/keyframe/keyframes"
             },
             {
-              "entry": "modules/core/docs/keyframe/camera-keyframes"
+              "entry": "docs/api-reference/keyframe/camera-keyframes"
             },
             {
-              "entry": "modules/core/docs/keyframe/layer-keyframes"
+              "entry": "docs/api-reference/keyframe/layer-keyframes"
             }
           ]
         },
         {
           "title": "Encoders",
           "entries": [
             {
-              "entry": "modules/core/docs/encoder"
+              "entry": "docs/api-reference/encoder"
             },
             {
-              "entry": "modules/core/docs/encoder/frame-encoder"
+              "entry": "docs/api-reference/encoder/frame-encoder"
             },
             {
-              "entry": "modules/core/docs/encoder/webm-encoder"
+              "entry": "docs/api-reference/encoder/webm-encoder"
             },
             {
-              "entry": "modules/core/docs/encoder/gif-encoder"
+              "entry": "docs/api-reference/encoder/gif-encoder"
             },
             {
-              "entry": "modules/core/docs/encoder/jpeg-sequence-encoder"
+              "entry": "docs/api-reference/encoder/jpeg-sequence-encoder"
             },
             {
-              "entry": "modules/core/docs/encoder/png-sequence-encoder"
+              "entry": "docs/api-reference/encoder/png-sequence-encoder"
             }
           ]
         }

ocular-dev-tools.config.js

@@ -4,7 +4,7 @@ const {resolve} = require('path');
 module.exports = {
   lint: {
     paths: ['docs', 'modules', 'examples', 'test'],
-    extensions: ['js', 'md']
+    extensions: ['js']
   },
 
   // aliases: {

package.json

@@ -69,7 +69,7 @@
     "kepler.gl": "^2.5.1",
     "lerna": "^3.16.4",
     "lodash": "4.17.21",
-    "ocular-dev-tools": "^0.1.10",
+    "ocular-dev-tools": "^0.3.0",
     "pre-commit": "^1.2.2",
     "pre-push": "^0.1.1",
     "prettier": "^1.18.2",

website/gatsby-config.js

@@ -13,8 +13,7 @@ module.exports = {
 
         DOCS: require('../docs/table-of-contents.json'),
         DOC_FOLDERS: [
-          `${__dirname}/../docs/`,
-          `${__dirname}/../modules/`
+          `${__dirname}/../docs/`
         ],
         SOURCE: [
           `${__dirname}/static`,
@@ -37,9 +36,20 @@ module.exports = {
         // Should be like btoa('YourUsername:YourKey') and should be readonly.
         GITHUB_KEY: null,
 
-        HOME_PATH: '/',
+        HOME_PATH: '',
         LINK_TO_GET_STARTED: '/docs',
-        INDEX_PAGE_URL: resolve(__dirname, './templates/index.jsx'),
+        PAGES: [
+          {
+            path: '/',
+            componentUrl: resolve(__dirname, './templates/index.jsx'),
+            content: ''
+          },
+          {
+            title: 'Showcase',
+            path: '/showcase',
+            componentUrl: resolve(__dirname, './src/pages/showcase.jsx'),
+          }
+        ],
 
         PROJECTS: [
           {name: 'deck.gl', url: 'https://deck.gl'},

website/package.json

@@ -29,9 +29,9 @@
     "styled-components": "^4.4.1"
   },
   "devDependencies": {
-    "gatsby": "^2.20.0",
+    "gatsby": "^2.32.13",
     "gatsby-plugin-no-sourcemaps": "^2.1.2",
-    "gatsby-theme-ocular": "^1.2.0-beta.8",
+    "gatsby-theme-ocular": "^1.2.4",
     "gh-pages": "^2.2.0"
   }
 }

website/src/pages/showcase.jsx

@@ -23,7 +23,7 @@ export default function Showcase() {
 function Video({name, source, src}) {
     return (
         <div style={{paddingRight: "64px", paddingBottom: "64px", font: "normal 14px/20px 'Uber Move',Helvetica,Arial,sans-serif"}}>
-            <iframe frameBorder="0" width="640" height="360" allowFullScreen="true" src={src}/>
+            <iframe frameBorder="0" width="640" height="360" allowFullScreen={true} title={name} src={src}/>
             <H3 style={{margin: "12px 0 4px 0"}}>{name}</H3>
             <P style={{margin: 0}}>Source: {source}</P>
         </div>