docs/src/pages/gallery.tsx

/**
 * 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;