Merge pull request #110 from strudel-science/feature/showcase

Add initial app gallery

Author: codytodonnell

config/strudel-config.json

@@ -192,6 +192,10 @@
           "layoutComponent": "PageLayout"
         }
       ]
+    },
+    {
+      "name": "Gallery",
+      "path": "/gallery"
     }
   ]
 }

content/gallery/ameriflux.mdx

@@ -0,0 +1,12 @@
+---
+title: 'Ameriflux Dashboard'
+slug: 'ameriflux-dashboard'
+contributors: ['Sy-Toan Ngo']
+appType: 'Live Project'
+repoUrl: ''
+liveUrl: ''
+primaryImage: '../images/gallery/ameriflux-1.png'
+otherImages: ['../images/gallery/ameriflux-2.png', '../images/gallery/ameriflux-3.png']
+---
+
+The Ameriflux Dashboard is a monitoring tool designed to track real-time data status across the network, providing visibility into key stages such as uploads, processing and data availabilities. The teams can scan for potential issues instantly, enabling swift action to resolve discrepancies and maintain high standards.

content/images/gallery/ameriflux-1.png

@@ -24,7 +24,7 @@ const config: GatsbyConfig = {
       options: {
         name: 'content',
         path: `${__dirname}/content`,
-        ignore: [`**/engage/events/*`, `**/engage/news/*`],
+        ignore: [`**/engage/events/*`, `**/engage/news/*`, `${__dirname}/content/gallery/*`],
       }
     },
     {
@@ -41,6 +41,13 @@ const config: GatsbyConfig = {
         path: `${__dirname}/content/engage/news`,
       }
     },
+    {
+      resolve: 'gatsby-source-filesystem',
+      options: {
+        name: 'gallery',
+        path: `${__dirname}/content/gallery`,
+      }
+    },
     {
       resolve: 'gatsby-source-filesystem',
       options: {

content/images/gallery/ameriflux-2.png

@@ -1,7 +1,7 @@
 import path from "path";
 import type { GatsbyNode } from "gatsby";
 import { flattenPages } from "./src/utils/utils";
-import { EventFrontmatter, NewsFrontmatter, PageFrontmatter, StrudelPage, TaskFlowFrontmatter } from "./src/types/strudel-config";
+import { EventFrontmatter, GalleryFrontmatter, NewsFrontmatter, PageFrontmatter, StrudelPage, TaskFlowFrontmatter } from "./src/types/strudel-config";
 
 /**
  * Shape of the result from the graphql query
@@ -44,6 +44,17 @@ interface Result {
         }
       }[]
     }
+    gallery: {
+      nodes: {
+        frontmatter: GalleryFrontmatter,
+        internal: {
+          contentFilePath: string;
+        },
+        fields: {
+          source: string;
+        }
+      }[]
+    }
   }
 }
 
@@ -159,6 +170,37 @@ export const createPages: GatsbyNode["createPages"] = async ({
             }
           }
         }
+        gallery: allMdx(filter: {fields: {source: {eq: "gallery"}}}) {
+          nodes {
+            fields {
+              source
+            }
+            frontmatter {
+              title
+              slug
+              contributors
+              appType
+              repoUrl
+              liveUrl
+              primaryImage {
+                childImageSharp {
+                  gatsbyImageData
+                }
+                absolutePath
+              }
+              otherImages {
+                childImageSharp {
+                  gatsbyImageData
+                }
+                absolutePath
+              }
+            }
+            excerpt
+            internal {
+              contentFilePath
+            }
+          }
+        }
       }
     `
   );
@@ -173,6 +215,7 @@ export const createPages: GatsbyNode["createPages"] = async ({
   const mdxPages = result.data?.content.nodes;
   const eventPages = result.data?.events.nodes;
   const newsPages = result.data?.news.nodes;
+  const galleryPages = result.data?.gallery.nodes;
 
   /**
    * Create a page for each page object that has an associated markdown file.
@@ -243,6 +286,22 @@ export const createPages: GatsbyNode["createPages"] = async ({
     })
   }
 
+  /**
+   * Create a page for each gallery mdx node.
+   */
+  if (galleryPages) {
+    const galleryTemplate = path.resolve(`src/components/layouts/GalleryDetailLayout.tsx`)
+    galleryPages.forEach((galleryPage) => {
+      createPage({
+        path: `/gallery/${galleryPage.frontmatter.slug}`,
+        component: `${galleryTemplate}?__contentFilePath=${galleryPage.internal.contentFilePath}`,
+        context: {
+          frontmatter: galleryPage.frontmatter,
+        }
+      });
+    })
+  }
+
   /**
    * Add redirects for top-level routes that 
    * don't have specific pages associated with them.

content/images/gallery/ameriflux-3.png

@@ -37,7 +37,8 @@
     "gatsby-transformer-json": "^5.12.0",
     "gatsby-transformer-sharp": "^5.13.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-photo-view": "^1.2.7"
   },
   "devDependencies": {
     "@types/gatsbyjs__reach-router": "^2.0.3",

gatsby-config.ts

@@ -22,6 +22,11 @@ export const ResponsiveImageWrapper: React.FC<BoxProps> = ({ sx, children, ...re
         '& .gatsby-resp-image-wrapper .gatsby-resp-image-link': {
           width: 'auto !important'
         },
+        '& > img': {
+          width: '100%',
+          height: 'auto',
+          cursor: 'pointer',
+        },
         ...sx
       }}
     >