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>