add embedded demos

visgl · Jun 22, 2020 · 26a709a · 26a709a
1 parent 59c3ec9
commit 26a709a
Show file tree

Hide file tree

Showing 45 changed files with 768 additions and 94 deletions.
diff --git a/docs/CONTRIBUTING.md b/docs/CONTRIBUTING.md
@@ -0,0 +1 @@
+../CONTRIBUTING.md
diff --git a/docs/developer-guide/views.md b/docs/developer-guide/views.md
@@ -9,15 +9,15 @@ View classes enable applications to specify one or more rectangular viewports an
   <tbody>
     <tr>
       <td style="vertical-align: top">
-        <img height=200 src="https://raw.github.com/visgl/deck.gl-data/master/images/docs/minimap.gif" />
+        <img height="200" src="https://raw.github.com/visgl/deck.gl-data/master/images/docs/minimap.gif" />
         <p><i>A "minimap" app, implemented as two overlapping, partially synchronized MapViews</i></p>
       </td>
       <td style="vertical-align: top">
-        <img height=200 src="https://raw.github.com/visgl/deck.gl-data/master/images/docs/first-person-view.gif" />
+        <img height="200" src="https://raw.github.com/visgl/deck.gl-data/master/images/docs/first-person-view.gif" />
         <p><i>A vehicle log rendered from the driver's perspective, implemented with FirstPersonView</i></p>
       </td>
       <td style="vertical-align: top">
-        <img height=200 src="https://raw.github.com/visgl/deck.gl-data/master/images/docs/orthographic-view.gif" />
+        <img height="200" src="https://raw.github.com/visgl/deck.gl-data/master/images/docs/orthographic-view.gif" />
         <p><i>A graph, implemented with OrthographicView</i></p>
       </td>
     </tr>

diff --git a/docs/layers/arc-layer.md b/docs/layers/arc-layer.md
@@ -1,4 +1,6 @@
-<!-- INJECT:"ArcLayerDemo" -->
+import {ArcLayerDemo} from 'website-components/doc-demos/layers';
+
+<ArcLayerDemo />
 
 <p class="badges">
   <img src="https://img.shields.io/badge/@deck.gl/layers-lightgrey.svg?style=flat-square" alt="@deck.gl/layers" />

diff --git a/docs/layers/bitmap-layer.md b/docs/layers/bitmap-layer.md
@@ -1,4 +1,6 @@
-<!-- INJECT:"BitmapLayerDemo" -->
+import {BitmapLayerDemo} from 'website-components/doc-demos/layers';
+
+<BitmapLayerDemo />
 
 <p class="badges">
   <img src="https://img.shields.io/badge/@deck.gl/layers-lightgrey.svg?style=flat-square" alt="@deck.gl/layers" />

diff --git a/docs/layers/column-layer.md b/docs/layers/column-layer.md
@@ -1,4 +1,6 @@
-<!-- INJECT:"ColumnLayerDemo" -->
+import {ColumnLayerDemo} from 'website-components/doc-demos/layers';
+
+<ColumnLayerDemo />
 
 <p class="badges">
   <img src="https://img.shields.io/badge/@deck.gl/layers-lightgrey.svg?style=flat-square" alt="@deck.gl/layers" />

diff --git a/docs/layers/contour-layer.md b/docs/layers/contour-layer.md
@@ -1,4 +1,6 @@
-<!-- INJECT:"ContourLayerDemo" -->
+import {ContourLayerDemo} from 'website-components/doc-demos/aggregation-layers';
+
+<ContourLayerDemo />
 
 <p class="badges">
   <img src="https://img.shields.io/badge/@deck.gl/aggregation--layers-lightgrey.svg?style=flat-square" alt="@deck.gl/aggregation-layers" />

diff --git a/docs/layers/cpu-grid-layer.md b/docs/layers/cpu-grid-layer.md
@@ -1,4 +1,6 @@
-<!-- INJECT:"CPUGridLayerDemo" -->
+import {CPUGridLayerDemo} from 'website-components/doc-demos/aggregation-layers';
+
+<CPUGridLayerDemo />
 
 <p class="badges">
   <img src="https://img.shields.io/badge/@deck.gl/aggregation--layers-lightgrey.svg?style=flat-square" alt="@deck.gl/aggregation-layers" />
@@ -101,7 +103,7 @@ Color scale domain, default is set to the range of point counts in each cell.
 
 ##### `colorRange` (Array, optional)
 
-* Default: <img src="/website/src/static/images/colorbrewer_YlOrRd_6.png"/></a>
+* Default: <img src="/website/src/static/images/colorbrewer_YlOrRd_6.png"/>
 
 Specified as an array of 6 colors [color1, color2, ... color6]. Each color is an array of 3 or 4 values [R, G, B] or [R, G, B, A], representing intensities of Red, Green, Blue and Alpha channels.  Each intensity is a value between 0 and 255. When Alpha not provided a value of 255 is used. By default `colorRange` is set to
 [colorbrewer](http://colorbrewer2.org/#type=sequential&scheme=YlOrRd&n=6) `6-class YlOrRd`.

diff --git a/docs/layers/geojson-layer.md b/docs/layers/geojson-layer.md
@@ -1,4 +1,6 @@
-<!-- INJECT:"GeoJsonLayerDemo" -->
+import {GeoJsonLayerDemo} from 'website-components/doc-demos/layers';
+
+<GeoJsonLayerDemo />
 
 <p class="badges">
   <img src="https://img.shields.io/badge/@deck.gl/layers-lightgrey.svg?style=flat-square" alt="@deck.gl/layers" />

diff --git a/docs/layers/gpu-grid-layer.md b/docs/layers/gpu-grid-layer.md
@@ -1,4 +1,6 @@
-<!-- INJECT:"GPUGridLayerDemo" -->
+import {GPUGridLayerDemo} from 'website-components/doc-demos/aggregation-layers';
+
+<GPUGridLayerDemo />
 
 <p class="badges">
   <img src="https://img.shields.io/badge/@deck.gl/aggregation--layers-lightgrey.svg?style=flat-square" alt="@deck.gl/aggregation-layers" />
@@ -99,7 +101,7 @@ Size of each cell in meters. Must be greater than `0`.
 
 ##### `colorRange` (Array, optional)
 
-* Default: <img src="/website/src/static/images/colorbrewer_YlOrRd_6.png"/></a>
+* Default: <img src="/website/src/static/images/colorbrewer_YlOrRd_6.png"/>
 
 Specified as an array of 6 colors [color1, color2, ... color6]. Each color is an array of 3 or 4 values [R, G, B] or [R, G, B, A], representing intensities of Red, Green, Blue and Alpha channels.  Each intensity is a value between 0 and 255. When Alpha not provided a value of 255 is used. By default `colorRange` is set to
 [colorbrewer](http://colorbrewer2.org/#type=sequential&scheme=YlOrRd&n=6) `6-class YlOrRd`.

diff --git a/docs/layers/great-circle-layer.md b/docs/layers/great-circle-layer.md
@@ -1,4 +1,6 @@
-<!-- INJECT:"GreatCircleLayerDemo" -->
+import {GreatCircleLayerDemo} from 'website-components/doc-demos/geo-layers';
+
+<GreatCircleLayerDemo />
 
 <p class="badges">
   <img src="https://img.shields.io/badge/64--bit-support-blue.svg?style=flat-square" alt="64-bit" />

diff --git a/docs/layers/grid-cell-layer.md b/docs/layers/grid-cell-layer.md
@@ -1,5 +1,6 @@
+import {GridCellLayerDemo} from 'website-components/doc-demos/layers';
 
-<!-- INJECT:"GridCellLayerDemo" -->
+<GridCellLayerDemo />
 
 <p class="badges">
   <img src="https://img.shields.io/badge/@deck.gl/layers-lightgrey.svg?style=flat-square" alt="@deck.gl/layers" />

diff --git a/docs/layers/grid-layer.md b/docs/layers/grid-layer.md
@@ -1,4 +1,6 @@
-<!-- INJECT:"GridLayerDemo" -->
+import {GridLayerDemo} from 'website-components/doc-demos/aggregation-layers';
+
+<GridLayerDemo />
 
 <p class="badges">
   <img src="https://img.shields.io/badge/@deck.gl/aggregation--layers-lightgrey.svg?style=flat-square" alt="@deck.gl/aggregation-layers" />
@@ -100,7 +102,7 @@ Color scale domain, default is set to the range of point counts in each cell.
 
 ##### `colorRange` (Array, optional)
 
-* Default: <img src="/website/src/static/images/colorbrewer_YlOrRd_6.png"/></a>
+* Default: <img src="/website/src/static/images/colorbrewer_YlOrRd_6.png"/>
 
 Specified as an array of 6 colors [color1, color2, ... color6]. Each color is an array of 3 or 4 values [R, G, B] or [R, G, B, A], representing intensities of Red, Green, Blue and Alpha channels.  Each intensity is a value between 0 and 255. When Alpha not provided a value of 255 is used. By default `colorRange` is set to
 [colorbrewer](http://colorbrewer2.org/#type=sequential&scheme=YlOrRd&n=6) `6-class YlOrRd`.

diff --git a/docs/layers/h3-cluster-layer.md b/docs/layers/h3-cluster-layer.md
@@ -1,4 +1,6 @@
-<!-- INJECT:"H3ClusterLayerDemo" -->
+import {H3ClusterLayerDemo} from 'website-components/doc-demos/geo-layers';
+
+<H3ClusterLayerDemo />
 
 <p class="badges">
   <img src="https://img.shields.io/badge/@deck.gl/geo--layers-lightgrey.svg?style=flat-square" alt="@deck.gl/geo-layers" />

diff --git a/docs/layers/h3-hexagon-layer.md b/docs/layers/h3-hexagon-layer.md
@@ -1,4 +1,6 @@
-<!-- INJECT:"H3HexagonLayerDemo" -->
+import {H3HexagonLayerDemo} from 'website-components/doc-demos/geo-layers';
+
+<H3HexagonLayerDemo />
 
 <p class="badges">
   <img src="https://img.shields.io/badge/@deck.gl/geo--layers-lightgrey.svg?style=flat-square" alt="@deck.gl/geo-layers" />

diff --git a/docs/layers/heatmap-layer.md b/docs/layers/heatmap-layer.md
@@ -1,4 +1,6 @@
-<!-- INJECT:"HeatmapLayerDemo" -->
+import {HeatmapLayerDemo} from 'website-components/doc-demos/aggregation-layers';
+
+<HeatmapLayerDemo />
 
 <p class="badges">
   <img src="https://img.shields.io/badge/@deck.gl/aggregation--layers-lightgrey.svg?style=flat-square" alt="@deck.gl/aggregation-layers" />
@@ -77,7 +79,7 @@ Radius of the circle in pixels, to which the weight of an object is distributed.
 
 ##### `colorRange` (Array, optional)
 
-* Default: <img src="/website/src/static/images/colorbrewer_YlOrRd_6.png"/></a>
+* Default: <img src="/website/src/static/images/colorbrewer_YlOrRd_6.png"/>
 
 Specified as an array of colors [color1, color2, ... color6]. Each color is an array of 3 or 4 values [R, G, B] or [R, G, B, A], representing Red, Green, Blue and Alpha channels.  Each channel is a value between 0 and 255. When Alpha is not provided, a value of 255 is used. By default `colorRange` is set to
 [colorbrewer](http://colorbrewer2.org/#type=sequential&scheme=YlOrRd&n=6) `6-class YlOrRd`.

diff --git a/docs/layers/hexagon-layer.md b/docs/layers/hexagon-layer.md
@@ -1,4 +1,6 @@
-<!-- INJECT:"HexagonLayerDemo" -->
+import {HexagonLayerDemo} from 'website-components/doc-demos/aggregation-layers';
+
+<HexagonLayerDemo />
 
 <p class="badges">
   <img src="https://img.shields.io/badge/@deck.gl/aggregation--layers-lightgrey.svg?style=flat-square" alt="@deck.gl/aggregation-layers" />
@@ -115,7 +117,7 @@ to number of counts by passing in an arbitrary color domain. This property is ex
 
 ##### `colorRange` (Array, optional)
 
-* Default: <img src="/website/src/static/images/colorbrewer_YlOrRd_6.png"/></a>
+* Default: <img src="/website/src/static/images/colorbrewer_YlOrRd_6.png"/>
 
 Specified as an array of 6 colors [color1, color2, ... color6]. Each color is an array of 3 or 4 values [R, G, B] or [R, G, B, A], representing intensities of Red, Green, Blue and Alpha channels.  Each intensity is a value between 0 and 255. When Alpha not provided a value of 255 is used. By default `colorRange` is set to
 [colorbrewer](http://colorbrewer2.org/#type=sequential&scheme=YlOrRd&n=6) `6-class YlOrRd`.

diff --git a/docs/layers/icon-layer.md b/docs/layers/icon-layer.md
@@ -1,4 +1,6 @@
-<!-- INJECT:"IconLayerDemo" -->
+import {IconLayerDemo} from 'website-components/doc-demos/layers';
+
+<IconLayerDemo />
 
 <p class="badges">
   <img src="https://img.shields.io/badge/@deck.gl/layers-lightgrey.svg?style=flat-square" alt="@deck.gl/layers" />

diff --git a/docs/layers/line-layer.md b/docs/layers/line-layer.md
@@ -1,4 +1,6 @@
-<!-- INJECT:"LineLayerDemo" -->
+import {LineLayerDemo} from 'website-components/doc-demos/layers';
+
+<LineLayerDemo />
 
 <p class="badges">
   <img src="https://img.shields.io/badge/@deck.gl/layers-lightgrey.svg?style=flat-square" alt="@deck.gl/layers" />

diff --git a/docs/layers/mvt-layer.md b/docs/layers/mvt-layer.md
@@ -1,4 +1,6 @@
-<!-- INJECT:"MVTLayerDemo" -->
+import {MVTLayerDemo} from 'website-components/doc-demos/geo-layers';
+
+<MVTLayerDemo />
 
 <p class="badges">
   <img src="https://img.shields.io/badge/@deck.gl/geo--layers-lightgrey.svg?style=flat-square" alt="@deck.gl/geo-layers" />

diff --git a/docs/layers/path-layer.md b/docs/layers/path-layer.md
@@ -1,4 +1,6 @@
-<!-- INJECT:"PathLayerDemo" -->
+import {PathLayerDemo} from 'website-components/doc-demos/layers';
+
+<PathLayerDemo />
 
 <p class="badges">
   <img src="https://img.shields.io/badge/@deck.gl/layers-lightgrey.svg?style=flat-square" alt="@deck.gl/layers" />

diff --git a/docs/layers/point-cloud-layer.md b/docs/layers/point-cloud-layer.md
@@ -1,4 +1,6 @@
-<!-- INJECT:"PointCloudLayerDemo" -->
+import {PointCloudLayerDemo} from 'website-components/doc-demos/layers';
+
+<PointCloudLayerDemo />
 
 <p class="badges">
   <img src="https://img.shields.io/badge/@deck.gl/layers-lightgrey.svg?style=flat-square" alt="@deck.gl/layers" />

diff --git a/docs/layers/polygon-layer.md b/docs/layers/polygon-layer.md
@@ -1,4 +1,6 @@
-<!-- INJECT:"PolygonLayerDemo" -->
+import {PolygonLayerDemo} from 'website-components/doc-demos/layers';
+
+<PolygonLayerDemo />
 
 <p class="badges">
   <img src="https://img.shields.io/badge/@deck.gl/layers-lightgrey.svg?style=flat-square" alt="@deck.gl/layers" />

diff --git a/docs/layers/s2-layer.md b/docs/layers/s2-layer.md
@@ -1,4 +1,6 @@
-<!-- INJECT:"S2LayerDemo" -->
+import {S2LayerDemo} from 'website-components/doc-demos/geo-layers';
+
+<S2LayerDemo />
 
 <p class="badges">
   <img src="https://img.shields.io/badge/@deck.gl/geo--layers-lightgrey.svg?style=flat-square" alt="@deck.gl/geo-layers" />

diff --git a/docs/layers/scatterplot-layer.md b/docs/layers/scatterplot-layer.md
@@ -1,4 +1,6 @@
-<!-- INJECT:"ScatterplotLayerDemo" -->
+import {ScatterplotLayerDemo} from 'website-components/doc-demos/layers';
+
+<ScatterplotLayerDemo />
 
 <p class="badges">
   <img src="https://img.shields.io/badge/@deck.gl/layers-lightgrey.svg?style=flat-square" alt="@deck.gl/layers" />

diff --git a/docs/layers/screen-grid-layer.md b/docs/layers/screen-grid-layer.md
@@ -1,4 +1,6 @@
-<!-- INJECT:"ScreenGridLayerDemo" -->
+import {ScreenGridLayerDemo} from 'website-components/doc-demos/aggregation-layers';
+
+<ScreenGridLayerDemo />
 
 <p class="badges">
   <img src="https://img.shields.io/badge/@deck.gl/aggregation--layers-lightgrey.svg?style=flat-square" alt="@deck.gl/aggregation-layers" />
@@ -128,7 +130,7 @@ to value of its weight by passing in an arbitrary color domain. This property is
 
 ##### `colorRange` (Array, optional)
 
-* Default: <img src="/website/src/static/images/colorbrewer_YlOrRd_6.png"/></a>
+* Default: <img src="/website/src/static/images/colorbrewer_YlOrRd_6.png"/>
 
 Specified as an array of 6 colors [color1, color2, ... color6]. Each color is an array of 3 or 4 values [R, G, B] or [R, G, B, A], representing intensities of Red, Green, Blue and Alpha channels.  Each intensity is a value between 0 and 255. When Alpha not provided a value of 255 is used. By default `colorRange` is set to
 [colorbrewer](http://colorbrewer2.org/#type=sequential&scheme=YlOrRd&n=6) `6-class YlOrRd`.

diff --git a/docs/layers/terrain-layer.md b/docs/layers/terrain-layer.md
@@ -1,4 +1,6 @@
-<!-- INJECT:"TerrainLayerDemo" -->
+import {TerrainLayerDemo} from 'website-components/doc-demos/geo-layers';
+
+<TerrainLayerDemo />
 
 <p class="badges">
   <img src="https://img.shields.io/badge/@deck.gl/geo--layers-lightgrey.svg?style=flat-square" alt="@deck.gl/geo-layers" />

diff --git a/docs/layers/text-layer.md b/docs/layers/text-layer.md
@@ -1,4 +1,6 @@
-<!-- INJECT:"TextLayerDemo" -->
+import {TextLayerDemo} from 'website-components/doc-demos/layers';
+
+<TextLayerDemo />
 
 <p class="badges">
   <img src="https://img.shields.io/badge/@deck.gl/layers-lightgrey.svg?style=flat-square" alt="@deck.gl/layers" />

diff --git a/docs/layers/tile-layer.md b/docs/layers/tile-layer.md
@@ -1,4 +1,6 @@
-<!-- INJECT:"TileLayerDemo" -->
+import {TileLayerDemo} from 'website-components/doc-demos/geo-layers';
+
+<TileLayerDemo />
 
 <p class="badges">
   <img src="https://img.shields.io/badge/@deck.gl/geo--layers-lightgrey.svg?style=flat-square" alt="@deck.gl/geo-layers" />

diff --git a/docs/layers/trips-layer.md b/docs/layers/trips-layer.md
@@ -1,4 +1,7 @@
-<!-- INJECT:"TripsLayerDemo" -->
+import {TripsLayerDemo} from 'website-components/doc-demos/geo-layers';
+
+<TripsLayerDemo />
+
 <p class="badges">
   <img src="https://img.shields.io/badge/@deck.gl/geo--layers-lightgrey.svg?style=flat-square" alt="@deck.gl/geo-layers" />
 </p>

diff --git a/docs/table-of-contents.json b/docs/table-of-contents.json
@@ -8,7 +8,7 @@
         {"entry": "docs/whats-new"},
         {"entry": "docs/upgrade-guide"},
         {"entry": "docs/roadmap"},
-        {"entry": "CONTRIBUTING"},
+        {"entry": "docs/CONTRIBUTING"},
         {"entry": "docs/faq"}
       ]
     },
@@ -78,29 +78,29 @@
             {"entry": "docs/layers/column-layer"},
             {"entry": "docs/layers/contour-layer"},
             {"entry": "docs/layers/geojson-layer"},
-            {"entry": "docs/layers/icon-layer"},
-            {"entry": "docs/layers/line-layer"},
-            {"entry": "docs/layers/path-layer"},
-            {"entry": "docs/layers/point-cloud-layer"},
-            {"entry": "docs/layers/polygon-layer"},
-            {"entry": "docs/layers/solid-polygon-layer"},
-            {"entry": "docs/layers/scatterplot-layer"},
-            {"entry": "docs/layers/text-layer"},
             {"entry": "docs/layers/gpu-grid-layer"},
             {"entry": "docs/layers/great-circle-layer"},
-            {"entry": "docs/layers/grid-layer"},
             {"entry": "docs/layers/grid-cell-layer"},
-            {"entry": "docs/layers/hexagon-layer"},
+            {"entry": "docs/layers/grid-layer"},
             {"entry": "docs/layers/h3-cluster-layer"},
             {"entry": "docs/layers/h3-hexagon-layer"},
+            {"entry": "docs/layers/hexagon-layer"},
+            {"entry": "docs/layers/icon-layer"},
+            {"entry": "docs/layers/line-layer"},
+            {"entry": "docs/layers/mvt-layer"},
+            {"entry": "docs/layers/path-layer"},
+            {"entry": "docs/layers/point-cloud-layer"},
+            {"entry": "docs/layers/polygon-layer"},
             {"entry": "docs/layers/s2-layer"},
+            {"entry": "docs/layers/scatterplot-layer"},
             {"entry": "docs/layers/scenegraph-layer"},
             {"entry": "docs/layers/screen-grid-layer"},
             {"entry": "docs/layers/simple-mesh-layer"},
-            {"entry": "docs/layers/tile-layer"},
-            {"entry": "docs/layers/trips-layer"},
+            {"entry": "docs/layers/solid-polygon-layer"},
             {"entry": "docs/layers/terrain-layer"},
-            {"entry": "docs/layers/mvt-layer"}
+            {"entry": "docs/layers/text-layer"},
+            {"entry": "docs/layers/tile-layer"},
+            {"entry": "docs/layers/trips-layer"}
           ]
         },
         {
@@ -133,7 +133,6 @@
             {"entry": "docs/api-reference/globe-view"},
             {"entry": "docs/api-reference/first-person-view"},
             {"entry": "docs/api-reference/orthographic-view"},
-            {"entry": "docs/api-reference/perspective-view"},
             {"entry": "docs/api-reference/orbit-view"},
             {"entry": "docs/api-reference/view-state-transitions"}
           ]
@@ -178,7 +177,8 @@
           "entries": [
             {"entry": "docs/api-reference/json/overview"},
             {"entry": "docs/api-reference/json/json-converter"},
-            {"entry": "docs/api-reference/json/json-layer"}
+            {"entry": "docs/api-reference/json/json-configuration"},
+            {"entry": "docs/api-reference/json/conversion-reference"}
           ]
         },
         {