diff --git a/website/.babelrc b/website/.babelrc
index c5cb6c30f3..22f6e57dc3 100644
--- a/website/.babelrc
+++ b/website/.babelrc
@@ -6,6 +6,7 @@
"plugins": [
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-export-namespace-from",
+ "@babel/plugin-proposal-optional-chaining",
[
"module-resolver",
{
diff --git a/website/src/components/common/styled-components.js b/website/src/components/common/styled-components.js
index 5ee11bc244..d034b06449 100644
--- a/website/src/components/common/styled-components.js
+++ b/website/src/components/common/styled-components.js
@@ -18,8 +18,10 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
+import React from 'react';
import styled, {css} from 'styled-components';
import {media} from '../../styles';
+import {cdnUrl} from '../../utils';
const buttonStyles = css`
align-items: center;
@@ -128,3 +130,9 @@ export const CenteredContent = styled.div`
align-items: center;
justify-content: center;
`;
+
+export const GithubButton = ({href, style}) => (
+
+ Github
+
+);
diff --git a/website/src/components/ecosystems.js b/website/src/components/ecosystems.js
new file mode 100644
index 0000000000..835717480b
--- /dev/null
+++ b/website/src/components/ecosystems.js
@@ -0,0 +1,90 @@
+// Copyright (c) 2021 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React, {PureComponent} from 'react';
+import styled from 'styled-components';
+
+import {ECOSYSTEM} from '../content';
+import {media} from '../styles';
+import StaggeredScrollAnimation from './common/staggered-scroll-animation';
+import {GithubButton} from './common/styled-components';
+
+const FeaturesContainer = styled.div`
+ display: flex;
+ justify-content: center;
+ flex-wrap: wrap;
+ margin-bottom: ${props => props.theme.margins.large};
+`;
+
+const FeatureContainer = styled.div`
+ text-align: center;
+ width: 350px;
+ padding: 24px;
+ margin: ${props => props.theme.margins.small};
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ ${media.palm`
+ margin: 0px;
+ margin-bottom: ${props => props.theme.margins.small}
+ `};
+`;
+
+const FeatureImage = styled.img`
+ width: 75px;
+ height: 75px;
+`;
+
+const FeatureTitle = styled.div`
+ font-size: 20px;
+ font-weight: 400;
+ margin-bottom: ${props => props.theme.margins.small};
+ margin-top: ${props => props.theme.margins.small};
+`;
+
+const Feature = ({title, image, githubUrl}) => (
+
+
+ {title}
+
+
+);
+
+class Ecosystems extends PureComponent {
+ render() {
+ return (
+
+
+ {ECOSYSTEM.map(({title, description, image, githubUrl}, i) => (
+
+ ))}
+
+
+ );
+ }
+}
+
+export default Ecosystems;
diff --git a/website/src/components/hero.js b/website/src/components/hero.js
index bada2d2ddb..6d20115505 100644
--- a/website/src/components/hero.js
+++ b/website/src/components/hero.js
@@ -22,11 +22,10 @@ import React, {PureComponent} from 'react';
import styled, {keyframes} from 'styled-components';
import {window} from 'global';
-import {cdnUrl} from '../utils';
import {media, breakPoints} from '../styles';
import {HERO_IMAGES, HERO_IMAGES_SCALED} from '../content';
import SlideShow from './common/slideshow';
-import {LinkButton} from './common/styled-components';
+import {LinkButton, GithubButton} from './common/styled-components';
import {DEMO_LINK} from '../constants';
import {Container, Content, HeroImage, LogoImage, StyledCaption} from './common/styles';
@@ -111,14 +110,10 @@ export default class Hero extends PureComponent {
Get Started
-
- Github
-
+ />
diff --git a/website/src/components/home.js b/website/src/components/home.js
index 16e6a9cd1b..03b16ffd79 100644
--- a/website/src/components/home.js
+++ b/website/src/components/home.js
@@ -30,6 +30,7 @@ import Examples from './examples';
import Tutorials from './tutorials';
import Walkthrough from './walkthrough';
import Features from './features';
+import Ecosystems from './ecosystems';
import Footer from './footer';
import Section from './common/section';
import Header from './header';
@@ -45,7 +46,8 @@ const SECTION_CONTENT = {
walkthrough: Walkthrough,
features: Features,
examples: Examples,
- tutorials: Tutorials
+ tutorials: Tutorials,
+ ecosystems: Ecosystems
};
export default class Home extends PureComponent {
diff --git a/website/src/constants.js b/website/src/constants.js
index 92a7cc5f58..d2731002d6 100644
--- a/website/src/constants.js
+++ b/website/src/constants.js
@@ -22,3 +22,4 @@ export const CLOUDFRONT = 'https://d1a3f4spazzrp4.cloudfront.net';
export const KEPLER_GL_BUCKET = 'kepler.gl';
export const WEBSITE_ASSET_FOLDER = 'website';
export const DEMO_LINK = '/demo';
+export const KEPLER_UNFOLDED_BUCKET = 'https://cdn.unfolded.ai/statics/keplergl/images';
diff --git a/website/src/content.js b/website/src/content.js
index 001f9a72bb..48a1415b0b 100644
--- a/website/src/content.js
+++ b/website/src/content.js
@@ -18,7 +18,7 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
-import {cdnUrl} from './utils';
+import {cdnUrl, unfoldedCdnUrl} from './utils';
export const SECTIONS = [
{
@@ -40,6 +40,13 @@ export const SECTIONS = [
description: 'A customizable geospatial toolbox to help make data-driven decisions.',
icon: cdnUrl('icons/features.png')
},
+ {
+ id: 'ecosystems',
+ title: 'Ecosystem',
+ description: 'A collection of kepler.gl plugins built for common data analytics tools',
+ icon: unfoldedCdnUrl('ecosystem.png'),
+ isDark: true
+ },
{
id: 'examples',
title: 'See What People Created',
@@ -173,6 +180,31 @@ export const FEATURES = [
}
];
+export const ECOSYSTEM = [
+ {
+ title: 'Jupyter',
+ description:
+ 'Built with Deck.gl, Kepler.gl utilizes WebGL to render large datasets quickly and efficiently.',
+ image: unfoldedCdnUrl('ecosystem-jupyter.png'),
+ githubUrl: 'https://github.com/keplergl/kepler.gl/tree/master/bindings/kepler.gl-jupyter'
+ },
+ {
+ title: 'Tableau',
+ description:
+ 'You can easily drag and drop a dataset, add filters, apply scales, and do aggregation on the fly.',
+ image: unfoldedCdnUrl('ecosystem-tableau.png'),
+ githubUrl: 'https://github.com/keplergl/kepler.gl-tableau'
+ },
+ {
+ title: 'Visual Studio Code',
+ description:
+ 'Built on React & Redux, Kepler.gl can be embedded inside your own mapping applications.',
+ image: unfoldedCdnUrl('ecosystem-vscode.png'),
+ githubUrl:
+ 'https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.geo-data-viewer'
+ }
+];
+
export const EXAMPLES = [
{
title: 'California Earthquakes',
diff --git a/website/src/utils.js b/website/src/utils.js
index b68e90cafb..7c34a5ba3f 100644
--- a/website/src/utils.js
+++ b/website/src/utils.js
@@ -18,8 +18,16 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
-import {CLOUDFRONT, KEPLER_GL_BUCKET, WEBSITE_ASSET_FOLDER} from './constants';
+import {
+ CLOUDFRONT,
+ KEPLER_GL_BUCKET,
+ WEBSITE_ASSET_FOLDER,
+ KEPLER_UNFOLDED_BUCKET
+} from './constants';
export function cdnUrl(path) {
return `${CLOUDFRONT}/${KEPLER_GL_BUCKET}/${WEBSITE_ASSET_FOLDER}/${path}`;
}
+export function unfoldedCdnUrl(path) {
+ return `${KEPLER_UNFOLDED_BUCKET}/${path}`;
+}
diff --git a/website/webpack.config.js b/website/webpack.config.js
index b2ec98f659..b586e859c6 100644
--- a/website/webpack.config.js
+++ b/website/webpack.config.js
@@ -33,6 +33,7 @@ const BABEL_CONFIG = {
plugins: [
'@babel/plugin-proposal-class-properties',
'@babel/plugin-proposal-export-namespace-from',
+ '@babel/plugin-proposal-optional-chaining',
[
'module-resolver',
{