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

* docs: add a gallery page

* Adding image gallery

* linted

* add more screenshots

* a few more screenshots

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,