docs: add a "Gallery" page (#10968)
* docs: add a gallery page * Adding image gallery * linted * add more screenshots * a few more screenshots
|
@ -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/
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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;
|
|
@ -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>
|
||||
|
|
|
@ -28,6 +28,8 @@ const footerStyle = css`
|
|||
text-align: center;
|
||||
color: #ccc;
|
||||
padding: 10px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const copyrightStyle = css`
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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>
|
||||
<Layout css={baseLayoutStyle}>
|
||||
<div className="content-wrap">
|
||||
{children}
|
||||
</div>
|
||||
<div className="layout-footer">
|
||||
<Footer />
|
||||
</div>
|
||||
</Layout>
|
||||
)}
|
||||
</Layout>
|
||||
|
|
Before Width: | Height: | Size: 39 KiB After Width: | Height: | Size: 39 KiB |
Before Width: | Height: | Size: 210 KiB After Width: | Height: | Size: 210 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 5.1 KiB After Width: | Height: | Size: 5.1 KiB |
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 9.0 KiB After Width: | Height: | Size: 9.0 KiB |
Before Width: | Height: | Size: 7.5 KiB After Width: | Height: | Size: 7.5 KiB |
Before Width: | Height: | Size: 119 KiB After Width: | Height: | Size: 119 KiB |
Before Width: | Height: | Size: 8.4 KiB After Width: | Height: | Size: 8.4 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
Before Width: | Height: | Size: 7.4 KiB After Width: | Height: | Size: 7.4 KiB |
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 17 KiB |
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 8.0 KiB After Width: | Height: | Size: 8.0 KiB |
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 29 KiB |
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 19 KiB |
Before Width: | Height: | Size: 43 KiB After Width: | Height: | Size: 43 KiB |
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 37 KiB After Width: | Height: | Size: 37 KiB |
Before Width: | Height: | Size: 6.6 KiB After Width: | Height: | Size: 6.6 KiB |
After Width: | Height: | Size: 233 KiB |
After Width: | Height: | Size: 745 KiB |
After Width: | Height: | Size: 595 KiB |
After Width: | Height: | Size: 2.2 MiB |
After Width: | Height: | Size: 193 KiB |
After Width: | Height: | Size: 208 KiB |
After Width: | Height: | Size: 1.3 MiB |
After Width: | Height: | Size: 1.7 MiB |
After Width: | Height: | Size: 1.2 MiB |
After Width: | Height: | Size: 1.5 MiB |
After Width: | Height: | Size: 1.7 MiB |
After Width: | Height: | Size: 6.5 MiB |
After Width: | Height: | Size: 518 KiB |
After Width: | Height: | Size: 422 KiB |
After Width: | Height: | Size: 422 KiB |
After Width: | Height: | Size: 270 KiB |
After Width: | Height: | Size: 614 KiB |
After Width: | Height: | Size: 3.2 MiB |
After Width: | Height: | Size: 517 KiB |
After Width: | Height: | Size: 461 KiB |
After Width: | Height: | Size: 366 KiB |
After Width: | Height: | Size: 2.2 MiB |
After Width: | Height: | Size: 544 KiB |
After Width: | Height: | Size: 437 KiB |
After Width: | Height: | Size: 446 KiB |
After Width: | Height: | Size: 1.9 MiB |
After Width: | Height: | Size: 762 KiB |
Before Width: | Height: | Size: 163 KiB |
Before Width: | Height: | Size: 21 KiB |
|
@ -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;
|
|
@ -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,
|
||||
|
|