[Website] Add ecosystem Section (#1491)

Signed-off-by: Shan He <heshan0131@gmail.com>

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",
       {

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}) => (
+  <LinkButton large outlineDark href={href} style={style}>
+    <img src={cdnUrl('icons/github.svg')} /> Github
+  </LinkButton>
+);

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}) => (
+  <FeatureContainer>
+    <FeatureImage src={image} />
+    <FeatureTitle>{title}</FeatureTitle>
+    <GithubButton href={githubUrl} style={{marginTop: '2rem'}} />
+  </FeatureContainer>
+);
+
+class Ecosystems extends PureComponent {
+  render() {
+    return (
+      <div>
+        <StaggeredScrollAnimation Container={FeaturesContainer}>
+          {ECOSYSTEM.map(({title, description, image, githubUrl}, i) => (
+            <Feature
+              key={`feature-${i}`}
+              title={title}
+              description={description}
+              image={image}
+              githubUrl={githubUrl}
+            />
+          ))}
+        </StaggeredScrollAnimation>
+      </div>
+    );
+  }
+}
+
+export default Ecosystems;

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 {
               <LinkButton large href={DEMO_LINK}>
                 Get Started
               </LinkButton>
-              <LinkButton
-                large
-                outlineDark
+              <GithubButton
                 href="https://github.com/keplergl/kepler.gl"
                 style={{marginLeft: '5px'}}
-              >
-                <img src={cdnUrl('icons/github.svg')} /> Github
-              </LinkButton>
+              />
             </ButtonContainer>
           </StyledCaption>
           <FadeIn>

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 {

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';

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',

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}`;
+}

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',
       {