Add project images

src/components/Header.js

@@ -13,6 +13,7 @@ const StyledHeader = styled.header`
   padding: 1rem;
   position: -webkit-sticky; /* Safari */
   position: sticky;
+  z-index: 1;
   top: 0;
   width: 100vw;
   .left,

src/components/LayoutAlt.js

@@ -13,6 +13,7 @@ const StyledHeader = styled.header`
   padding: 1rem;
   position: -webkit-sticky; /* Safari */
   position: sticky;
+  z-index: 1;
   top: 0;
   /* width: 100vw; */
   display: flex;

src/styles/global.scss

@@ -1,3 +1,6 @@
+$primary: #00ffaa;
+$background: #9595959b;
+
 body {
   display: flex;
   width: 100vw;
@@ -14,11 +17,10 @@ body {
   }
   a {
     text-decoration: none;
+    color: $primary;
   }
 }
 
-$primary: #00ffaa;
-$background: #9595959b;
 /* Works on Firefox */
 * {
   scrollbar-width: thin;

src/styles/project.module.scss

@@ -1,50 +1,68 @@
 main {
   padding: 0 1rem;
+  .backgroundImage {
+    position: absolute;
+    margin-left: auto;
+    margin-right: auto;
+    top: 0;
+    width: 100vw;
+    z-index: -1;
+  }
   section.title {
     width: 100%;
     display: flex;
     text-align: left;
     justify-content: flex-start;
     align-items: flex-start;
+    margin-bottom: 2rem;
   }
-}
-
-article.content {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  max-width: 800px;
-  padding: 5px;
-  text-align: left;
-
-  section.heroImageSection {
-    justify-content: center;
-    text-align: center;
-    .heroImage {
-      display: block;
-    }
-  }
-  section.heroVideoSection {
+  article.content {
     display: flex;
+    flex-direction: column;
     justify-content: center;
-    text-align: center;
-    position: relative;
-    padding-bottom: 56.25%;
-    padding-top: 35px;
-    height: 0;
-    overflow: hidden;
-    iframe.heroVideo {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
+    max-width: 800px;
+    padding: 5px;
+    text-align: left;
+
+    section.heroImageSection {
+      justify-content: center;
+      text-align: center;
+      margin-bottom: 1rem;
+      .heroImage {
+        display: block;
+      }
+    }
+    section.heroVideoSection {
+      display: flex;
+      justify-content: center;
+      text-align: center;
+      position: relative;
+      padding-bottom: 56.25%;
+      padding-top: 35px;
+      height: 0;
+      overflow: hidden;
+      iframe.heroVideo {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
+    }
+    section.body {
+      // min-height: 65vh;
+      padding: 5px 7rem;
+      // background-color: lightyellow;
+    }
+    section.linkedAssets {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      .asset {
+        margin: 0.5rem 0;
+      }
     }
-  }
-  section.body {
-    min-height: 65vh;
-    padding: 5px 7rem;
-    // background-color: lightyellow;
   }
 }
 

src/templates/project.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { jsx, Heading, Text } from 'theme-ui'
+import { jsx, Heading, Text, useColorMode } from 'theme-ui'
 import { graphql } from 'gatsby'
 import { BLOCKS, MARKS } from '@contentful/rich-text-types'
 import { renderRichText } from 'gatsby-source-contentful/rich-text'
@@ -14,9 +14,17 @@ export const query = graphql`
   query MyQuery($slug: String!) {
     contentfulProject(slug: { eq: $slug }) {
       title
+      theme
       body {
         raw
       }
+      backgroundImage {
+        gatsbyImageData(
+          formats: AUTO
+          layout: CONSTRAINED
+          placeholder: BLURRED
+        )
+      }
       heroImage {
         gatsbyImageData(
           formats: AUTO
@@ -25,6 +33,14 @@ export const query = graphql`
         )
       }
       heroVideo
+      mediaAssets {
+        description
+        gatsbyImageData(
+          formats: AUTO
+          layout: CONSTRAINED
+          placeholder: BLURRED
+        )
+      }
     }
   }
 `
@@ -33,7 +49,8 @@ const Project = (props) => {
   const bodyRichText = props.data.contentfulProject.body
   const heroImage = props.data.contentfulProject.heroImage
   const heroVideo = props.data.contentfulProject.heroVideo
-  const backgroundImage = props.data.contentfulProject.heroImage // change to backgroundImage
+  const backgroundImage = props.data.contentfulProject.backgroundImage
+  const linkedAssets = props.data.contentfulProject.mediaAssets
 
   const Bold = ({ children }) => <b>{children}</b>
 
@@ -43,27 +60,40 @@ const Project = (props) => {
       [BLOCKS.HEADING_1]: (node, children) => (
         <Heading as="h1">{children}</Heading>
       ),
+      [BLOCKS.EMBEDDED_ASSET]: (node) => {
+        if (node) {
+          console.log(node.data)
+        }
+        // return (
+        //   <GatsbyImage image={getImage(gatsbyImageData)} alt={description} />
+        // )
+      },
     },
     renderMark: {
       [MARKS.BOLD]: (text) => <Bold>{text}</Bold>,
     },
   }
 
+  const [colorMode, setColorMode] = useColorMode()
+  const theme = props.data.contentfulProject.theme
+  if (theme) {
+    setColorMode(theme.toLowerCase())
+  }
+
   return (
     <LayoutAlt>
       <Seo title={projTitle} />
+      {backgroundImage && (
+        <GatsbyImage
+          className={styles.backgroundImage}
+          image={getImage(backgroundImage)}
+        />
+      )}
       <section className={styles.title}>
         <Heading as="h1" variant="styles.H1">
           {projTitle}
         </Heading>
       </section>
-      {backgroundImage && (
-        // use gatsby-background-image plugin
-        <section
-          className={styles.backgroundImage}
-          style={{ backgroundImage: `url(${backgroundImage})` }}
-        />
-      )}
       <article className={styles.content}>
         {heroImage && (
           <section className={styles.heroImageSection}>
@@ -92,6 +122,19 @@ const Project = (props) => {
         <section className={styles.body}>
           {bodyRichText && renderRichText(bodyRichText, options)}
         </section>
+        {linkedAssets && (
+          <section className={styles.linkedAssets}>
+            {linkedAssets.map((asset) => {
+              return (
+                <GatsbyImage
+                  className={styles.asset}
+                  image={getImage(asset)}
+                  alt={asset.description}
+                />
+              )
+            })}
+          </section>
+        )}
       </article>
     </LayoutAlt>
   )