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

Update the gallery detail page

Author: codytodonnell

config/strudel-config.json

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

src/components/layouts/GalleryDetailLayout.tsx

@@ -55,38 +55,43 @@ const GalleryDetailLayout: React.FC<PageProps<any, any>> = ({ pageContext, child
           >
             {pageContext.frontmatter.title}
           </Typography>
-          <Typography fontSize="large">
-            Contributed by {pageContext.frontmatter.contributors.join(', ')}
-          </Typography>
+          <Stack direction="row" spacing={2} alignItems="center">
+            <Chip label={pageContext.frontmatter.appType} variant="outlined" />
+            <Typography fontSize="large">
+              Contributed by {pageContext.frontmatter.contributors.join(', ')}
+            </Typography>
+          </Stack>
         </Stack>
       </PageHeader>
       <Hero>
         <Stack spacing={2}>
-          <Stack direction="row" spacing={2}>
-            <Chip label={pageContext.frontmatter.appType} variant="outlined" sx={{ color: 'white' }} />
-            {pageContext.frontmatter.liveUrl && (
-              <MuiLink  href={pageContext.frontmatter.liveUrl} target="_blank">
-                <Button 
-                  variant="contained"
-                  color="primary"
-                  startIcon={<VisibilityIcon />}
-                >
-                  Go to Live Project
-                </Button>
-              </MuiLink>
-            )}
-            {pageContext.frontmatter.repoUrl && (
-              <MuiLink  href={pageContext.frontmatter.repoUrl} target="_blank">
-                <Button
-                  variant="contained"
-                  color="primary"
-                  startIcon={<CodeIcon />}
-                >
-                  Code
-                </Button>
-              </MuiLink>
-            )}
-          </Stack>
+          {(pageContext.frontmatter.liveUrl || pageContext.frontmatter.repoUrl) && (
+            <Stack direction="row" spacing={2}>
+              {/* <Chip label={pageContext.frontmatter.appType} variant="outlined" sx={{ color: 'white' }} /> */}
+              {pageContext.frontmatter.liveUrl && (
+                <MuiLink  href={pageContext.frontmatter.liveUrl} target="_blank">
+                  <Button 
+                    variant="contained"
+                    color="primary"
+                    startIcon={<VisibilityIcon />}
+                  >
+                    Live Demo
+                  </Button>
+                </MuiLink>
+              )}
+              {pageContext.frontmatter.repoUrl && (
+                <MuiLink  href={pageContext.frontmatter.repoUrl} target="_blank">
+                  <Button
+                    variant="contained"
+                    color="primary"
+                    startIcon={<CodeIcon />}
+                  >
+                    Code
+                  </Button>
+                </MuiLink>
+              )}
+            </Stack>
+          )}
           <StyledMarkdown>
             {children}
           </StyledMarkdown>
@@ -95,15 +100,15 @@ const GalleryDetailLayout: React.FC<PageProps<any, any>> = ({ pageContext, child
       <PageContainer maxWidth={containerWidth}>
         <PhotoProvider>
           <PhotoView src={primaryImage?.images.fallback?.src}>
-            <ResponsiveImageWrapper>
+            <ResponsiveImageWrapper sx={{ boxShadow: 3 }}>
               <img src={primaryImage?.images.fallback?.src} alt="Primary Gallery Image" />
             </ResponsiveImageWrapper>
           </PhotoView>
           <Grid container spacing={2} sx={{ marginTop: 2 }}>
             {otherImages.map((image: any, index: number) => (
               <Grid item xs={12} sm={6} key={index}>
                 <PhotoView src={image?.images.fallback?.src}>
-                  <ResponsiveImageWrapper>
+                  <ResponsiveImageWrapper sx={{ boxShadow: 3 }}>
                     <img 
                       src={image?.images.fallback?.src} 
                       alt={`Gallery Image ${index + 1}`}