docs: add a "Gallery" page (#10968)

* docs: add a gallery page

* Adding image gallery

* linted

* add more screenshots

* a few more screenshots

.pre-commit-config.yaml

@@ -34,7 +34,6 @@ repos:
   - repo: https://github.com/pre-commit/pre-commit-hooks
     rev: v3.2.0
     hooks:
-      - id: check-added-large-files
       - id: check-docstring-first
       - id: check-yaml
         exclude: ^helm/superset/templates/

docs/package-lock.json

@@ -3157,6 +3157,15 @@
         "normalize-path": "^2.1.1"
       }
     },
+    "aphrodite": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/aphrodite/-/aphrodite-0.5.0.tgz",
+      "integrity": "sha1-pLmokCZiOV0nAucKx6K0ymbyVwM=",
+      "requires": {
+        "asap": "^2.0.3",
+        "inline-style-prefixer": "^2.0.0"
+      }
+    },
     "application-config-path": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/application-config-path/-/application-config-path-0.1.0.tgz",
@@ -4318,6 +4327,11 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
     },
+    "bowser": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/bowser/-/bowser-1.9.4.tgz",
+      "integrity": "sha512-9IdMmj2KjigRq6oWhmwv1W36pDuA4STQZ8q6YO9um+x07xgYNCD3Oou+WP/3L1HNz7iqythGet3/p4wvc8AAwQ=="
+    },
     "boxen": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/boxen/-/boxen-4.2.0.tgz",
@@ -7281,6 +7295,14 @@
         "utila": "~0.4"
       }
     },
+    "dom-helpers": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
+      "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==",
+      "requires": {
+        "@babel/runtime": "^7.1.2"
+      }
+    },
     "dom-iterator": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/dom-iterator/-/dom-iterator-1.0.0.tgz",
@@ -8405,6 +8427,11 @@
         }
       }
     },
+    "exenv": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
+      "integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50="
+    },
     "exif-parser": {
       "version": "0.1.12",
       "resolved": "https://registry.npmjs.org/exif-parser/-/exif-parser-0.1.12.tgz",
@@ -12267,6 +12294,11 @@
         }
       }
     },
+    "hyphenate-style-name": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
+      "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
+    },
     "iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -12880,6 +12912,15 @@
       "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.1.1.tgz",
       "integrity": "sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q=="
     },
+    "inline-style-prefixer": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-2.0.5.tgz",
+      "integrity": "sha1-wVPH6I/YT+9cYC6VqBaLJ3BnH+c=",
+      "requires": {
+        "bowser": "^1.0.0",
+        "hyphenate-style-name": "^1.0.1"
+      }
+    },
     "inquirer": {
       "version": "7.3.3",
       "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-7.3.3.tgz",
@@ -18424,6 +18465,15 @@
         "github-buttons": "^2.8.0"
       }
     },
+    "react-grid-gallery": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/react-grid-gallery/-/react-grid-gallery-0.5.5.tgz",
+      "integrity": "sha512-DkKg2/Am+VZPDG39fazelTcsZSQrfM/YllnIcWToyUEfOZcrzHxUoqCziCkuTPmCuMbHnrjidBFuDbAFgvSnvQ==",
+      "requires": {
+        "prop-types": "^15.5.8",
+        "react-images": "^0.5.16"
+      }
+    },
     "react-helmet": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
@@ -18491,6 +18541,17 @@
         "camelcase": "^5.0.0"
       }
     },
+    "react-images": {
+      "version": "0.5.19",
+      "resolved": "https://registry.npmjs.org/react-images/-/react-images-0.5.19.tgz",
+      "integrity": "sha512-B3d4W1uFJj+m17K8S65iAyEJShKGBjPk7n7N1YsPiAydEm8mIq9a6CoeQFMY1d7N2QMs6FBCjT9vELyc5jP5JA==",
+      "requires": {
+        "aphrodite": "^0.5.0",
+        "prop-types": "^15.6.0",
+        "react-scrolllock": "^2.0.1",
+        "react-transition-group": "2"
+      }
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -18545,6 +18606,11 @@
         }
       }
     },
+    "react-prop-toggle": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/react-prop-toggle/-/react-prop-toggle-1.0.2.tgz",
+      "integrity": "sha512-JmerjAXs7qJ959+d0Ygt7Cb2+4fG+n3I2VXO6JO0AcAY1vkRN/JpZKAN67CMXY889xEJcfylmMPhzvf6nWO68Q=="
+    },
     "react-reconciler": {
       "version": "0.25.1",
       "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.25.1.tgz",
@@ -18605,6 +18671,15 @@
         "resize-observer-polyfill": "^1.5.1"
       }
     },
+    "react-scrolllock": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/react-scrolllock/-/react-scrolllock-2.0.7.tgz",
+      "integrity": "sha512-Gzpu8+ulxdYcybAgJOFTXc70xs7SBZDQbZNpKzchZUgLCJKjz6lrgESx6LHHZgfELx1xYL4yHu3kYQGQPFas/g==",
+      "requires": {
+        "exenv": "^1.2.2",
+        "react-prop-toggle": "^1.0.2"
+      }
+    },
     "react-side-effect": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.0.tgz",
@@ -18625,6 +18700,17 @@
         "tslib": "^1.0.0"
       }
     },
+    "react-transition-group": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz",
+      "integrity": "sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==",
+      "requires": {
+        "dom-helpers": "^3.4.0",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2",
+        "react-lifecycles-compat": "^3.0.4"
+      }
+    },
     "read": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz",

docs/package.json

@@ -32,6 +32,7 @@
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-github-btn": "^1.2.0",
+    "react-grid-gallery": "^0.5.5",
     "react-helmet": "^6.1.0",
     "theme-ui": "^0.3.1",
     "three": "^0.68.0"

docs/src/components/DbImage.tsx

@@ -0,0 +1,49 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { useStaticQuery, graphql } from 'gatsby';
+import Img from 'gatsby-image';
+
+interface Props {
+  imageName?: string;
+}
+
+const DbImage = ({ imageName }: Props) => {
+  const data = useStaticQuery(graphql`
+    query {
+      allImages: allFile(filter: {relativeDirectory: {eq: "src/images/databases"}}) {
+        edges {
+          node {
+            childImageSharp {
+              fixed(height: 50) {
+                ...GatsbyImageSharpFixed
+                originalName
+              }
+            }
+          }
+        }
+      }
+    }
+  `);
+  const images = data.allImages.edges.map((img) => img.node?.childImageSharp?.fixed);
+  const filter = images.filter((img) => img?.originalName === imageName);
+  return <Img fixed={filter[0]} />;
+};
+
+export default DbImage;

docs/src/components/MainMenu.tsx

@@ -81,6 +81,9 @@ const MenuItems = ({ mode, toggleDrawer }: menuProps) => {
       <Menu.Item key="docsintro" style={leftStyle} className="menu-lg">
         <Link to="/docs/intro">Documentation</Link>
       </Menu.Item>
+      <Menu.Item key="gallery" style={leftStyle} className="menu-lg">
+        <Link to="/gallery">Gallery</Link>
+      </Menu.Item>
       <Menu.Item key="community" style={leftStyle} className="menu-lg">
         <Link to="/community">Community</Link>
       </Menu.Item>

docs/src/components/footer.tsx

@@ -28,6 +28,8 @@ const footerStyle = css`
   text-align: center;
   color: #ccc;
   padding: 10px;
+  height: 100%;
+  width: 100%;
 `;
 
 const copyrightStyle = css`

docs/src/components/image.tsx

@@ -22,14 +22,13 @@ import Img from 'gatsby-image';
 
 interface Props {
   imageName?: string;
-  type?: string;
   width?: string;
   height?: string;
   otherProps?: any;
 }
 
 const Image = ({
-  imageName, type, width, height, ...otherProps
+  imageName, width, height, ...otherProps
 }: Props) => {
   const data = useStaticQuery(graphql`
     query {
@@ -82,30 +81,10 @@ const Image = ({
           }
         }
       }
-
-      getAllImages: allImageSharp {
-        edges {
-          node {
-            fixed(height: 50) {
-              ...GatsbyImageSharpFixed
-              originalName
-            }
-          }
-        }
-      }
     }
   `);
 
-  const filter = data.getAllImages.edges.filter(
-    (n) => n.node.fixed.originalName === imageName,
-  );
-  const imgStyle = width && height ? { width, height } : {};
-
-  return type === 'db' ? (
-    <Img fixed={filter[0]?.node?.fixed} style={imgStyle} imgStyle={imgStyle} />
-  ) : (
-    <Img fixed={data[imageName]?.childImageSharp?.fixed} {...otherProps} />
-  );
+  return <Img fixed={data[imageName]?.childImageSharp?.fixed} {...otherProps} />;
 };
 
 export default Image;

docs/src/components/layout.tsx

@@ -74,7 +74,7 @@ const sidebarStyle = css`
   border-right: 1px solid #bfbfbf;
 `;
 
-const contentStyle = css`
+const doczLayoutStyle = css`
   margin-top: 3px;
   background-color: white;
   img {
@@ -124,6 +124,20 @@ const contentLayoutDocsStyle = css`
     overflow: auto;
   }
 `;
+const footerHeight = 135;
+const baseLayoutStyle = css`
+  min-height: 100vh;
+  position: relative;
+  .layout-footer {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: ${footerHeight}px;
+  }
+  .content-wrap {
+    padding-bottom: ${footerHeight}px;
+  }
+`;
 
 interface Props {
   children: React.ReactNode;
@@ -153,7 +167,7 @@ const AppLayout = ({ children }: Props) => {
             <Sider width={leftPaneWidth} css={sidebarStyle}>
               <DoczMenu />
             </Sider>
-            <Layout css={contentStyle}>
+            <Layout css={doczLayoutStyle}>
               <div css={centerLayoutStyle}>
                 <h1 className="doc-hamburger" onClick={() => setDrawer(true)}>
                   <MenuOutlined
@@ -168,9 +182,13 @@ const AppLayout = ({ children }: Props) => {
           </Layout>
         </>
       ) : (
-        <Layout>
-          {children}
-          <Footer />
+        <Layout css={baseLayoutStyle}>
+          <div className="content-wrap">
+            {children}
+          </div>
+          <div className="layout-footer">
+            <Footer />
+          </div>
         </Layout>
       )}
     </Layout>

docs/src/pages/gallery.tsx

@@ -0,0 +1,110 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { css } from '@emotion/core';
+import { useStaticQuery, graphql } from 'gatsby';
+import Gallery from 'react-grid-gallery';
+import Layout from '../components/layout';
+
+const galleryStyle = css`
+  margin-bottom: 25px;
+  padding-top: 100px;
+  padding-left: 50px;
+  padding-right: 50px;
+  text-align: center;
+  .ReactGridGallery_tile-viewport {
+    overflow: visible !important;
+  }
+  .ReactGridGallery img {
+    box-shadow: 0px 0px 3px 1px #AAA;
+  }
+`;
+
+// This defines the ordering of the images in the gallery
+// and allows to add metadata to images.
+const imageMeta = {
+  'worldbank_dashboard.png': { caption: "World's Bank Dashboard" },
+  'sqllab.png': { caption: 'SQL Lab' },
+  'explore.png': { caption: 'Explore!' },
+  'visualizations.png': { caption: 'Visualizations' },
+  'chord_diagram.png': { caption: 'Explore' },
+  'deck_scatter.png': { caption: 'Geospatial Scatterplot' },
+  'deck_polygon.png': { caption: 'Geospatial Polygon' },
+  'deck_arc.png': { caption: 'Geospatial Arc' },
+  'deck_path.png': { caption: 'Geospatial Path' },
+};
+
+const GalleryPage = () => {
+  const data = useStaticQuery(graphql`
+    query {
+      allImages: allFile(filter: {extension: {eq: "png"}, relativeDirectory: {regex: "/gallery/"}})  {
+        edges {
+          node {
+            thumb: childImageSharp {
+              fixed(height: 350) {
+                ...GatsbyImageSharpFixed
+                originalName
+              }
+            }
+            full: childImageSharp {
+              fixed(height: 1600) {
+                ...GatsbyImageSharpFixed
+                originalName
+              }
+            }
+          }
+        }
+      }
+    }
+  `);
+  const imagesMap = {};
+  data.allImages.edges.map((img) => img.node).forEach((img) => {
+    imagesMap[img.thumb.fixed.originalName] = {
+      src: img.full.fixed.src,
+      thumbnail: img.thumb.fixed.src,
+      // caption: img.thumb.fixed.originalName,
+    };
+  });
+
+  const augmentedImages = [];
+  Object.keys(imageMeta).forEach((originalName) => {
+    const img = imagesMap[originalName];
+    delete imagesMap[originalName];
+    augmentedImages.push({
+      ...img,
+      ...imageMeta[originalName],
+    });
+  });
+  Object.values(imagesMap).forEach((img) => {
+    augmentedImages.push(img);
+  });
+  return (
+    <Layout>
+      <div css={galleryStyle}>
+        <Gallery
+          images={augmentedImages}
+          margin={10}
+          rowHeight={200}
+          enableImageSelection={false}
+        />
+      </div>
+    </Layout>
+  );
+};
+export default GalleryPage;

docs/src/pages/index.tsx

@@ -36,6 +36,7 @@ import GitHubButton from 'react-github-btn';
 import { Databases } from '../resources/data';
 import Layout from '../components/layout';
 import Image from '../components/image';
+import DbImage from '../components/DbImage';
 import 'antd/dist/antd.css';
 import SEO from '../components/seo';
 import logo from '../images/superset-logo-horiz-apache.svg';
@@ -179,7 +180,7 @@ const integrationSection = css`
     font-size: 18px;
   }
 
-  .databaseList {
+  .database-list {
     margin-top: 100px;
     list-style-type: none;
     padding: 0px;
@@ -448,7 +449,7 @@ const Theme = () => {
           <div css={integrationSection}>
             <h2 css={secondaryHeading}>Supported Databases</h2>
 
-            <ul className="databaseList">
+            <ul className="database-list">
               {Databases.map(
                 ({
                   title, href, imgName: imageName, width, height,
@@ -459,10 +460,9 @@ const Theme = () => {
                     key={imageName}
                     rel="noreferrer"
                   >
-                    <Image
+                    <DbImage
                       {...{
                         imageName,
-                        type: 'db',
                         width,
                         height,
                         alt: title,