@t2ca/gatsby-theme-showcase 1.0.120 → 1.1.0

package/gatsby-config.js

@@ -3,7 +3,6 @@
  *
  * See: https://www.gatsbyjs.org/docs/gatsby-config/
  */
-const remarkPlugins = [require("remark-slug")]
 
 module.exports = ({ contentPath = "data", basePath = "/" }) => ({
   plugins: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@t2ca/gatsby-theme-showcase",
-  "version": "1.0.120",
+  "version": "1.1.0",
   "main": "index.js",
   "license": "MIT",
   "devDependencies": {
@@ -22,20 +22,17 @@
     "react-dom": "^17.0.1"
   },
   "dependencies": {
-    "@emotion/react": "^11.0.0",
-    "@emotion/styled": "^11.0.0",
-    "@theme-ui/components": "^0.7.2",
-    "@theme-ui/preset-bootstrap": "^0.7.2",
-    "@theme-ui/preset-tailwind": "^0.7.2",
-    "@theme-ui/sidenav": "^0.7.2",
-    "@theme-ui/typography": "^0.7.2",
+    "@theme-ui/components": "^0.8.4",
+    "@theme-ui/preset-bootstrap": "^0.8.4",
+    "@theme-ui/preset-tailwind": "^0.8.4",
+    "@theme-ui/sidenav": "^0.8.4",
+    "@theme-ui/typography": "^0.8.4",
     "framer-motion": "^4.0.0",
     "gatsby": "^3.2.0",
     "gatsby-image": "^3.0.0",
-    "gatsby-plugin-emotion": "^6.0.0",
     "gatsby-plugin-react-helmet": "^4.0.0",
     "gatsby-plugin-sharp": "^3.0.0",
-    "gatsby-plugin-theme-ui": "^0.7.2",
+    "gatsby-plugin-theme-ui": "^0.8.4",
     "gatsby-remark-images": "^5.0.0",
     "gatsby-source-filesystem": "^3.0.0",
     "gatsby-transformer-json": "^3.0.0",
@@ -44,8 +41,7 @@
     "gatsby-transformer-yaml": "^3.0.0",
     "react-helmet": "^6.0.0",
     "react-icons": "^4.1.0",
-    "remark-slug": "^6.0.0",
-    "theme-ui": "^0.7.2",
+    "theme-ui": "^0.8.4",
     "yup": "^0.32.8"
   },
   "scripts": {

package/src/components/alert.js

@@ -1,5 +1,4 @@
 /** @jsx jsx */
-import React from "react"
 import { jsx } from "theme-ui"
 import { FaExclamationTriangle, FaCheckCircle } from "react-icons/fa"
 

package/src/components/button.js

@@ -1,5 +1,4 @@
 /** @jsx jsx */
-import React from "react"
 import { jsx } from "theme-ui"
 
 export default ({ type = "basic", ...props }) => (

package/src/components/card.js

@@ -1,5 +1,4 @@
 /** @jsx jsx */
-import React from "react"
 import { jsx, Themed } from "theme-ui"
 import Button from "./button"
 

package/src/components/color-mode-toggle.js

@@ -1,119 +1,190 @@
-import React, { useState, useEffect } from "react"
-import styled from "@emotion/styled"
-import { useThemeUI } from "theme-ui"
+/** @jsx jsx */
+import { useState, useEffect } from "react"
+// import styled from "@emotion/styled"
+import { jsx, useThemeUI } from "theme-ui"
 
-const IconWrapper = styled.button`
-  padding: 0;
-  appearance: none;
-  outline: none;
-  align-items: center;
-  background: transparent;
-  border-radius: 5px;
-  border: 0;
-  cursor: pointer;
-  display: inline-flex;
-  height: 40px;
-  justify-content: center;
-  opacity: 0.75;
-  overflow: hidden;
-  position: relative;
-  transform: scale(0.75);
-  transition: opacity 0.3s ease;
-  vertical-align: middle;
-  width: 40px;
-  &:hover {
-    opacity: 1;
-  }
-`
+// const IconWrapper = styled.button`
+//   padding: 0;
+//   appearance: none;
+//   outline: none;
+//   align-items: center;
+//   background: transparent;
+//   border-radius: 5px;
+//   border: 0;
+//   cursor: pointer;
+//   display: inline-flex;
+//   height: 40px;
+//   justify-content: center;
+//   opacity: 0.75;
+//   overflow: hidden;
+//   position: relative;
+//   transform: scale(0.75);
+//   transition: opacity 0.3s ease;
+//   vertical-align: middle;
+//   width: 40px;
+//   &:hover {
+//     opacity: 1;
+//   }
+// `
 
-const MoonOrSun = styled.div`
-  border: ${(p) => (p.isDark ? `4px` : `2px`)} solid
-    ${(p) => p.theme.colors.toggleIcon};
-  background: ${(p) => p.theme.colors.toggleIcon};
-  border-radius: 50%;
-  height: 24px;
-  overflow: ${(p) => (p.isDark ? `visible` : `hidden`)};
-  position: relative;
-  transform: scale(${(p) => (p.isDark ? 0.55 : 1)});
-  transition: all 0.45s ease;
-  width: 24px;
-  &::before {
-    border-radius: 50%;
-    border: 2px solid ${(p) => p.theme.colors.toggleIcon};
-    content: "";
-    height: 24px;
-    opacity: ${(p) => (p.isDark ? 0 : 1)};
-    position: absolute;
-    right: -9px;
-    top: -9px;
-    transform: translate(${(p) => (p.isDark ? `14px, -14px` : `0, 0`)});
-    transition: transform 0.45s ease;
-    width: 24px;
-  }
-  &::after {
-    border-radius: 50%;
-    box-shadow: 0 -23px 0 ${(p) => p.theme.colors.toggleIcon},
-      0 23px 0 ${(p) => p.theme.colors.toggleIcon},
-      23px 0 0 ${(p) => p.theme.colors.toggleIcon},
-      -23px 0 0 ${(p) => p.theme.colors.toggleIcon},
-      15px 15px 0 ${(p) => p.theme.colors.toggleIcon},
-      -15px 15px 0 ${(p) => p.theme.colors.toggleIcon},
-      15px -15px 0 ${(p) => p.theme.colors.toggleIcon},
-      -15px -15px 0 ${(p) => p.theme.colors.toggleIcon};
-    content: "";
-    height: 8px;
-    left: 50%;
-    margin: -4px 0 0 -4px;
-    position: absolute;
-    top: 50%;
-    width: 8px;
-    transform: scale(${(p) => (p.isDark ? 1 : 0)});
-    transition: all 0.35s ease;
-  }
-`
+// const MoonOrSun = styled.div`
+//   border: ${(p) => (p.isDark ? `4px` : `2px`)} solid
+//     ${(p) => p.theme.colors.toggleIcon};
+//   background: ${(p) => p.theme.colors.toggleIcon};
+//   border-radius: 50%;
+//   height: 24px;
+//   overflow: ${(p) => (p.isDark ? `visible` : `hidden`)};
+//   position: relative;
+//   transform: scale(${(p) => (p.isDark ? 0.55 : 1)});
+//   transition: all 0.45s ease;
+//   width: 24px;
+//   &::before {
+//     border-radius: 50%;
+//     border: 2px solid ${(p) => p.theme.colors.toggleIcon};
+//     content: "";
+//     height: 24px;
+//     opacity: ${(p) => (p.isDark ? 0 : 1)};
+//     position: absolute;
+//     right: -9px;
+//     top: -9px;
+//     transform: translate(${(p) => (p.isDark ? `14px, -14px` : `0, 0`)});
+//     transition: transform 0.45s ease;
+//     width: 24px;
+//   }
+//   &::after {
+//     border-radius: 50%;
+//     box-shadow: 0 -23px 0 ${(p) => p.theme.colors.toggleIcon},
+//       0 23px 0 ${(p) => p.theme.colors.toggleIcon},
+//       23px 0 0 ${(p) => p.theme.colors.toggleIcon},
+//       -23px 0 0 ${(p) => p.theme.colors.toggleIcon},
+//       15px 15px 0 ${(p) => p.theme.colors.toggleIcon},
+//       -15px 15px 0 ${(p) => p.theme.colors.toggleIcon},
+//       15px -15px 0 ${(p) => p.theme.colors.toggleIcon},
+//       -15px -15px 0 ${(p) => p.theme.colors.toggleIcon};
+//     content: "";
+//     height: 8px;
+//     left: 50%;
+//     margin: -4px 0 0 -4px;
+//     position: absolute;
+//     top: 50%;
+//     width: 8px;
+//     transform: scale(${(p) => (p.isDark ? 1 : 0)});
+//     transition: all 0.35s ease;
+//   }
+// `
 
-const MoonMask = styled.div`
-  background: ${(p) => p.theme.colors.MoonMask};
-  border-radius: 50%;
-  border: 0;
-  height: 24px;
-  opacity: ${(p) => (p.isDark ? 0 : 1)};
-  position: absolute;
-  right: 0;
-  top: 0;
-  transform: translate(${(p) => (p.isDark ? `14px, -14px` : `0, 0`)});
-  transition: background 0.25s ease, transform 0.45s ease;
-  width: 24px;
-`
+// const MoonMask = styled.div`
+//   background: ${(p) => p.theme.colors.MoonMask};
+//   border-radius: 50%;
+//   border: 0;
+//   height: 24px;
+//   opacity: ${(p) => (p.isDark ? 0 : 1)};
+//   position: absolute;
+//   right: 0;
+//   top: 0;
+//   transform: translate(${(p) => (p.isDark ? `14px, -14px` : `0, 0`)});
+//   transition: background 0.25s ease, transform 0.45s ease;
+//   width: 24px;
+// `
 
 const ColorModeToggle = () => {
-  // const [hasMounted, setHasMounted] = useState(false)
+  const [hasMounted, setHasMounted] = useState(false)
   const context = useThemeUI()
-  const { theme, colorMode, setColorMode } = context
+  const { colorMode, setColorMode } = context
   const isDark = colorMode === `dark`
 
-  // useEffect(() => {
-  //   setHasMounted(true)
-  // }, [])
-
-  // if (!hasMounted) {
-  //   return null
-  // }
-
   const toggleColorMode = (e) => {
     e.preventDefault()
     setColorMode(isDark ? `default` : `dark`)
   }
 
+  useEffect(() => {
+    setHasMounted(true)
+  }, [])
+
+  if (!hasMounted) {
+    return null
+  }
+
   return (
-    <IconWrapper
+    // <IconWrapper
+    //   onClick={toggleColorMode}
+    //   aria-label={isDark ? `Activate light mode` : `Activate dark mode`}
+    //   title={isDark ? `Activate light mode` : `Activate dark mode`}
+    // >
+    //   <MoonOrSun isDark={isDark} theme={theme} />
+    //   <MoonMask isDark={isDark} theme={theme} />
+    // </IconWrapper>
+
+    <button
       onClick={toggleColorMode}
-      aria-label={isDark ? `Activate light mode` : `Activate dark mode`}
-      title={isDark ? `Activate light mode` : `Activate dark mode`}
+      type="button"
+      aria-label={isDark ? `Activate Light mode` : `Activate Dark mode`}
+      title={isDark ? `Activate Light mode` : `Activate Dark mode`}
+      sx={{
+        opacity: 0.65,
+        position: `relative`,
+        borderRadius: `5px`,
+        width: `40px`,
+        height: `25px`,
+        display: `flex`,
+        alignItems: `center`,
+        justifyContent: `center`,
+        transition: `opacity 0.3s ease`,
+        border: `none`,
+        outline: `none`,
+        background: `none`,
+        cursor: `pointer`,
+        transform: `scale(0.75)`,
+        padding: 0,
+        appearance: `none`,
+        "&:hover, &:focus": { opacity: 1 },
+      }}
     >
-      <MoonOrSun isDark={isDark} theme={theme} />
-      <MoonMask isDark={isDark} theme={theme} />
-    </IconWrapper>
+      <div
+        sx={{
+          position: `relative`,
+          width: `24px`,
+          height: `24px`,
+          borderRadius: `50%`,
+          border: (t) => (isDark ? `4px solid ${t.colors.toggleIcon}` : `none`),
+          backgroundColor: isDark ? `toggleIcon` : `transparent`,
+          transform: isDark ? `scale(0.55)` : `scale(1)`,
+          transition: `all 0.45s ease`,
+          overflow: isDark ? `visible` : `hidden`,
+          boxShadow: (t) =>
+            isDark ? `none` : `inset 8px -8px 0px 0px ${t.colors.toggleIcon}`,
+          "&:before": {
+            content: `""`,
+            position: `absolute`,
+            right: `-9px`,
+            top: `-9px`,
+            height: `24px`,
+            width: `24px`,
+            border: (t) =>
+              isDark ? `2px solid ${t.colors.toggleIcon}` : `none`,
+            borderRadius: `50%`,
+            transform: isDark ? `translate(14px, -14px)` : `translate(0, 0)`,
+            opacity: isDark ? 0 : 1,
+            transition: `transform 0.45s ease`,
+          },
+          "&:after": {
+            content: `""`,
+            width: `8px`,
+            height: `8px`,
+            borderRadius: `50%`,
+            margin: `-4px 0 0 -4px`,
+            position: `absolute`,
+            top: `50%`,
+            left: `50%`,
+            boxShadow: (t) =>
+              `0 -23px 0 ${t.colors.toggleIcon}, 0 23px 0 ${t.colors.toggleIcon}, 23px 0 0 ${t.colors.toggleIcon}, -23px 0 0 ${t.colors.toggleIcon}, 15px 15px 0 ${t.colors.toggleIcon}, -15px 15px 0 ${t.colors.toggleIcon}, 15px -15px 0 ${t.colors.toggleIcon}, -15px -15px 0 ${t.colors.toggleIcon}`,
+            transform: isDark ? `scale(1)` : `scale(0)`,
+            transition: `all 0.35s ease`,
+          },
+        }}
+      />
+    </button>
   )
 }
 

package/src/components/footer.js

@@ -1,11 +1,15 @@
 /** @jsx jsx */
-import React from "react"
 import { jsx, Box, Container } from "theme-ui"
 import { FaTwitter, FaGithub, FaLinkedin, FaInstagram } from "react-icons/fa"
 
 export default ({ name }) => {
   return (
-    <Box bg="Menu">
+    <Box
+      bg="Menu"
+      sx={{
+        pb: [`3.75rem`, `initial`],
+      }}
+    >
       <Container>
         <footer
           sx={{

package/src/components/header.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { useEffect } from "react"
+import { useState, useEffect } from "react"
 import { Link } from "gatsby"
 import { jsx, Container, Box, Alert } from "theme-ui"
 import NavLink from "./nav-link"
@@ -29,10 +29,10 @@ export default ({
   svgLogo,
   button,
   alertMsg,
-  setIsAlert,
+  callBack,
 }) => {
   useEffect(() => {
-    setIsAlert(alertMsg ? true : false)
+    callBack(alertMsg ? true : false)
   }, [])
 
   return (

package/src/components/layout.js

@@ -1,7 +1,6 @@
 /** @jsx jsx */
 import { useState, useEffect } from "react"
 import { jsx, Themed } from "theme-ui"
-import { Global } from "@emotion/react"
 import { Helmet } from "react-helmet"
 
 import MobileNavigation from "./navigation-mobile"
@@ -10,30 +9,16 @@ import Footer from "./footer"
 import Sidebar from "./sidebar"
 
 const Layout = ({ header, children }) => {
-  const [hasMounted, setHasMounted] = useState(false)
   const [menuOpen, setMenuOpen] = useState(false)
-  const [isAlert, setIsAlert] = useState(null)
+  const [isAlert, setIsAlert] = useState(false)
+  const [hasMounted, setHasMounted] = useState(false)
 
   useEffect(() => {
     setHasMounted(true)
   }, [])
 
-  if (!hasMounted) {
-    return null
-  }
-
   return (
     <Themed.root>
-      <Global
-        styles={{
-          html: {
-            fontSize: `16px`,
-            WebkitFontSmoothing: `antialiased`,
-            MozOsxFontSmoothing: `grayscale`,
-          },
-        }}
-      />
-
       <Helmet>
         <html lang="en" />
       </Helmet>
@@ -42,20 +27,22 @@ const Layout = ({ header, children }) => {
         styles={header}
         menuOpen={menuOpen}
         setMenuOpen={setMenuOpen}
-        setIsAlert={setIsAlert}
+        callBack={setIsAlert}
       />
 
       <Sidebar open={menuOpen} isAlert={isAlert} />
 
-      <div
-        sx={{
-          pt: isAlert ? `6.875rem` : `4.25rem`,
-          pb: [`3.75rem`, `initial`],
-        }}
-      >
-        {children}
-        <Footer />
-      </div>
+      {!hasMounted ? null : (
+        <div
+          sx={{
+            pt: isAlert ? `6.875rem` : `4.25rem`,
+          }}
+        >
+          {children}
+        </div>
+      )}
+
+      <Footer />
 
       <MobileNavigation />
     </Themed.root>

package/src/components/logo-banner.js

@@ -1,5 +1,4 @@
 /** @jsx jsx */
-import React from "react"
 import { useStaticQuery, graphql } from "gatsby"
 import { jsx } from "theme-ui"
 import Img from "gatsby-image"

package/src/components/menu-button.js

@@ -1,5 +1,4 @@
 /** @jsx jsx */
-import React from "react"
 import { jsx } from "theme-ui"
 
 const Burger = ({ size = "1.5rem" }) => (
@@ -18,7 +17,7 @@ const Burger = ({ size = "1.5rem" }) => (
   </svg>
 )
 
-export default props => {
+export default (props) => {
   return (
     <button
       title="Toggle Menu"

package/src/gatsby-plugin-theme-ui/index.js

@@ -4,7 +4,7 @@ import styles from "./styles"
 import colors from "./colors"
 
 export default merge(tailwind, {
-  useColorSchemeMediaQuery: false,
+  initialColorModeName: "light",
   colors,
   styles,
   buttons: {

package/src/gatsby-plugin-theme-ui/styles.js

@@ -1,4 +1,9 @@
 export default {
+  root: {
+    fontSize: `16px`,
+    WebkitFontSmoothing: `antialiased`,
+    MozOsxFontSmoothing: `grayscale`,
+  },
   Container: {
     py: 3,
     width: ["100%", "90%"],