Merge pull request #17 from Aron-HD/dev

FIXES: colorMode & minor errors

.github/workflows/deployment.yml

@@ -19,7 +19,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x, 14.x, 16.x]
+        node-version: [18.x, 20.x, 21.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:

src/components/Header.js

@@ -4,6 +4,23 @@ import ThemeSwitch from './ThemeSwitcher'
 import NavBurger from './Nav/NavBurger'
 import NavBurgerMenu from './Nav/NavBurgerMenu'
 
+const Header = () => {
+  const [open, setOpen] = useState(false)
+  return (
+    <StyledHeader>
+      <div className="left">
+        <ThemeSwitch />
+      </div>
+      <div className="right">
+        <NavBurger open={open} setOpen={setOpen} />
+        <NavBurgerMenu open={open} setOpen={setOpen} />
+      </div>
+    </StyledHeader>
+  )
+}
+
+export default Header
+
 const StyledHeader = styled.header`
   display: -webkit-flex;
   display: -webkit-box;
@@ -48,19 +65,3 @@ const StyledHeader = styled.header`
   }
 `
 
-const Header = () => {
-  const [open, setOpen] = useState(false)
-  return (
-    <StyledHeader>
-      <div className="left">
-        <ThemeSwitch />
-      </div>
-      <div className="right">
-        <NavBurger open={open} setOpen={setOpen} />
-        <NavBurgerMenu open={open} setOpen={setOpen} />
-      </div>
-    </StyledHeader>
-  )
-}
-
-export default Header

src/components/Nav/NavBurger.js

@@ -22,16 +22,16 @@ const StyledBurger = styled.button`
     opacity: 0.9;
     transform-origin: 5px;
 
-    :first-child {
+    :first-of-type {
       transform: ${({ open }) => (open ? 'rotate(45deg)' : 'rotate(0)')};
     }
 
-    :nth-child(2) {
+    :nth-of-type(2) {
       opacity: ${({ open }) => (open ? '0' : '1')};
       transform: ${({ open }) => (open ? 'translateX(20px)' : 'translateX(0)')};
     }
 
-    :nth-child(3) {
+    :nth-of-type(3) {
       transform: ${({ open }) => (open ? 'rotate(-45deg)' : 'rotate(0)')};
     }
   }

src/components/ThemeSwitcher.js

@@ -1,15 +1,18 @@
 import React from 'react'
 import { useColorMode, Button } from 'theme-ui'
 
-const ThemeSwitch = (props) => {
+const ThemeSwitch = (_props) => {
   const [colorMode, setColorMode] = useColorMode()
   return (
     <Button
-      onClick={(e) => {
-        setColorMode(colorMode === 'default' ? 'dark' : 'default')
+      onClick={(_e) => {
+        const mode = colorMode === 'default' || colorMode === 'dark' ? 'light' : 'dark'
+        setColorMode(mode)
+        localStorage.setItem('theme', mode)
+        console.debug(mode)
       }}
     >
-      {colorMode === 'default' ? 'Dark' : 'Light'}
+      {colorMode !== 'light' ? 'Light' : 'Dark'}
     </Button>
   )
 }

src/pages/index.js

@@ -29,6 +29,7 @@ const RootIndex = () => {
             {item}
         </Text>
     ))
+
     return (
         <Layout>
             <Seo title="Home" />

src/templates/project.js

@@ -1,9 +1,10 @@
 /** @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'
 import { GatsbyImage, getImage } from 'gatsby-plugin-image'
+import { useEffect } from 'react'
 
 import LayoutAlt from '../components/LayoutAlt'
 import Seo from '../components/Seo'
@@ -74,11 +75,25 @@ const Project = (props) => {
     },
   }
 
-  // const [colorMode, setColorMode] = useColorMode()
-  // const theme = props.data.contentfulProject.theme
-  // if (theme) {
-  //   setColorMode(theme.toLowerCase())
-  // }
+  const theme = props.data.contentfulProject.theme
+  const [colorMode, setColorMode] = useColorMode()
+
+  useEffect(() => {
+    const t = theme?.toLowerCase() ?? "default"
+    // set page based color mode from cms
+    if (t !== 'default' && t !== colorMode) {
+      console.debug(`setting color mode: ${theme}`)
+      setColorMode(t)
+    }
+    // reset to the original color mode when unmounting
+    return () => {
+      const original = localStorage.getItem('theme')?.toLowerCase()
+      if (original && original !== colorMode) {
+        setColorMode(original)
+        console.debug('resetting color mode.')
+      }
+    }
+  }, [theme, colorMode, setColorMode])
 
   return (
     <LayoutAlt>
@@ -87,6 +102,7 @@ const Project = (props) => {
         <GatsbyImage
           className={styles.backgroundImage}
           image={getImage(backgroundImage)}
+          alt={backgroundImage.description ?? "Background image"}
         />
       )}
       <section className={styles.title}>
@@ -112,10 +128,10 @@ const Project = (props) => {
               src={heroVideo}
               width="800px"
               height="450px"
-              frameborder="0"
+              frameBorder="0"
               webkitallowfullscreen=""
               mozallowfullscreen=""
-              allowfullscreen=""
+              allowFullScreen=""
             />
           </section>
         )}
@@ -124,12 +140,13 @@ const Project = (props) => {
         </section>
         {linkedAssets && (
           <section className={styles.linkedAssets}>
-            {linkedAssets.map((asset) => {
+            {linkedAssets.map((asset, i) => {
               return (
                 <GatsbyImage
                   className={styles.asset}
                   image={getImage(asset)}
-                  alt={asset.description}
+                  alt={asset.description ?? "Blank"}
+                  key={i}
                 />
               )
             })}