mirror of
https://github.com/apache/superset.git
synced 2026-04-16 22:55:52 +00:00
8e4a1c8356
* docs: add a gallery page * Adding image gallery * linted * add more screenshots * a few more screenshots
111 lines
3.3 KiB
TypeScript
111 lines
3.3 KiB
TypeScript
/**
|
|
* 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;
|