@t2ca/gatsby-theme-showcase 1.0.20 → 1.0.22

package/gatsby-config.js

@@ -44,6 +44,7 @@ module.exports = ({ contentPath = "data", basePath = "/" }) => ({
     //     typeName: "Event",
     //   },
     // },
+    `gatsby-plugin-react-helmet`,
     `gatsby-plugin-emotion`,
     `gatsby-plugin-theme-ui`,
     {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@t2ca/gatsby-theme-showcase",
-  "version": "1.0.20",
+  "version": "1.0.22",
   "main": "index.js",
   "license": "MIT",
   "devDependencies": {
@@ -24,7 +24,6 @@
   },
   "dependencies": {
     "@emotion/styled": "^10.0.17",
-    "@hot-loader/react-dom": "^16.9.0",
     "@mdx-js/mdx": "^1.4.0",
     "@theme-ui/components": "^0.3.0",
     "@theme-ui/preset-bootstrap": "^0.3.0",
@@ -36,18 +35,18 @@
     "gatsby-image": "^2.2.7",
     "gatsby-plugin-emotion": "^4.1.2",
     "gatsby-plugin-mdx": "^1.0.33",
+    "gatsby-plugin-react-helmet": "^3.1.21",
     "gatsby-plugin-sharp": "^2.2.9",
-    "gatsby-plugin-theme-ui": "^0.3.0-alpha.6",
+    "gatsby-plugin-theme-ui": "^0.3.0",
     "gatsby-remark-images": "^3.1.7",
     "gatsby-source-filesystem": "^2.1.4",
     "gatsby-transformer-json": "^2.2.2",
     "gatsby-transformer-remark": "^2.6.10",
     "gatsby-transformer-sharp": "^2.2.5",
     "gatsby-transformer-yaml": "^2.2.1",
-    "react-google-maps": "^9.4.5",
+    "react-helmet": "6.0.0-beta.2",
     "react-icons": "^3.7.0",
     "react-spring": "^8.0.27",
-    "react-switch": "^5.0.0",
     "remark-slug": "^5.1.2",
     "theme-ui": "^0.3.0"
   },

package/src/components/header.js

@@ -3,10 +3,25 @@ import React from "react"
 import { Link } from "gatsby"
 import { jsx, Container, Box } from "theme-ui"
 
-import MenuButton from "./menu-button"
 import NavLink from "./nav-link"
 import ColorModeToggle from "./color-mode-toggle"
 
+const Burger = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1.5rem"
+    height="1.5rem"
+    fill="currentcolor"
+    viewBox="0 0 24 24"
+    sx={{
+      display: "block",
+      margin: 0,
+    }}
+  >
+    <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />
+  </svg>
+)
+
 export default ({ setMenuOpen, styles, menuOpen, nav, name, menuList }) => {
   return (
     <Box
@@ -21,15 +36,36 @@ export default ({ setMenuOpen, styles, menuOpen, nav, name, menuList }) => {
             alignItems: `center`,
           }}
         >
-          <MenuButton
-            onClick={e => {
-              setMenuOpen(!menuOpen)
-              // if (!props.menuOpen) return props.setMenuOpen(!props.menuOpen)
-              if (!nav.current) return
-              const navLink = nav.current.querySelector("a")
-              if (navLink) navLink.focus()
-            }}
-          />
+          {!menuOpen ? (
+            <button
+              title="Toggle Menu"
+              onClick={e => {
+                setMenuOpen(!menuOpen)
+                // if (!props.menuOpen) return props.setMenuOpen(!props.menuOpen)
+                if (!nav.current) return
+                const navLink = nav.current.querySelector("a")
+                if (navLink) navLink.focus()
+              }}
+              sx={{
+                appearance: "none",
+                bg: "transparent",
+                border: 0,
+                color: "text",
+                display: ["initial", "none"],
+                fontFamily: "inherit",
+                fontSize: 24,
+                p: 0,
+                m: 0,
+                ":focus": {
+                  outline: "none",
+                },
+              }}
+            >
+              <Burger />
+            </button>
+          ) : (
+            <Burger />
+          )}
           <Link to="/" sx={{ color: "inherit", textDecoration: "none" }}>
             <span
               sx={{

package/src/components/layout.js

@@ -8,7 +8,7 @@ import Header from "./header"
 import Footer from "./footer"
 import Sidebar from "./sidebar"
 
-const Layout = ({ header, main, location, children }) => {
+const Layout = ({ header, main, children }) => {
   const [menuOpen, setMenuOpen] = useState(false)
   const nav = useRef(null)
 

package/src/components/logo-banner.js

@@ -3,64 +3,6 @@ import React from "react"
 import { useStaticQuery, graphql } from "gatsby"
 import { jsx } from "theme-ui"
 import Img from "gatsby-image"
-import styled from "@emotion/styled"
-
-// import { colors, space, mediaQueries } from "../../utils/presets"
-// import { Name } from "./homepage-section"
-
-// const Section = styled(`section`)`
-//   overflow: hidden;
-//   padding: ${space[5]} 0;
-//   width: 100%;
-//   border-bottom: 1px solid ${colors.ui.border.subtle};
-
-//   ${mediaQueries.xl} {
-//     margin: -1px 0;
-//     padding: ${space[5]} 0;
-//   }
-
-//   ${mediaQueries.xxl} {
-//     padding: ${space[7]} 0;
-//   }
-// `
-
-// const Title = styled(`header`)`
-//   padding-right: ${space[6]};
-//   padding-left: ${space[6]};
-//   ${mediaQueries.md} {
-//     max-width: 30rem;
-//   }
-
-//   ${mediaQueries.lg} {
-//     margin-left: ${space[9]};
-//   }
-
-//   ${mediaQueries.xl} {
-//     padding-right: 5%;
-//     padding-left: 5%;
-//   }
-
-//   ${mediaQueries.xxl} {
-//     padding-right: 8%;
-//     padding-left: 8%;
-//   }
-// `
-
-// const LogoGroup = styled(`div`)`
-//   position: relative;
-//   display: grid;
-//   grid-auto-flow: column;
-//   grid-auto-columns: auto;
-//   grid-gap: 16;
-//   align-items: center;
-//   overflow-x: scroll;
-//   padding-left: 3;
-//   padding-bottom: 1;
-
-//   &::-webkit-scrollbar {
-//     display: none;
-//   }
-// `
 
 const LogoBanner = () => {
   const data = useStaticQuery(graphql`

package/src/components/map-styles-dark.js

@@ -1,32 +0,0 @@
-const jsonMapStylesDark = [
-  {
-    stylers: [
-      {
-        hue: "#ff1a00",
-      },
-      {
-        invert_lightness: true,
-      },
-      {
-        saturation: -100,
-      },
-      {
-        lightness: 33,
-      },
-      {
-        gamma: 0.5,
-      },
-    ],
-  },
-  {
-    featureType: "water",
-    elementType: "geometry",
-    stylers: [
-      {
-        color: "#2D333C",
-      },
-    ],
-  },
-]
-
-export default jsonMapStylesDark

package/src/components/map-styles.js

@@ -1,136 +0,0 @@
-const jsonMapStyles = [
-  {
-    featureType: "administrative",
-    elementType: "all",
-    stylers: [
-      {
-        saturation: "-100",
-      },
-    ],
-  },
-  {
-    featureType: "administrative.province",
-    elementType: "all",
-    stylers: [
-      {
-        visibility: "off",
-      },
-    ],
-  },
-  {
-    featureType: "landscape",
-    elementType: "all",
-    stylers: [
-      {
-        saturation: -100,
-      },
-      {
-        lightness: 65,
-      },
-      {
-        visibility: "on",
-      },
-    ],
-  },
-  {
-    featureType: "poi",
-    elementType: "all",
-    stylers: [
-      {
-        saturation: -100,
-      },
-      {
-        lightness: "50",
-      },
-      {
-        visibility: "simplified",
-      },
-    ],
-  },
-  {
-    featureType: "poi",
-    elementType: "labels.icon",
-    stylers: [
-      {
-        visibility: "off",
-      },
-    ],
-  },
-  {
-    featureType: "road",
-    elementType: "all",
-    stylers: [
-      {
-        saturation: "-100",
-      },
-    ],
-  },
-  {
-    featureType: "road.highway",
-    elementType: "all",
-    stylers: [
-      {
-        visibility: "simplified",
-      },
-    ],
-  },
-  {
-    featureType: "road.arterial",
-    elementType: "all",
-    stylers: [
-      {
-        lightness: "30",
-      },
-    ],
-  },
-  {
-    featureType: "road.local",
-    elementType: "all",
-    stylers: [
-      {
-        lightness: "40",
-      },
-    ],
-  },
-  {
-    featureType: "transit",
-    elementType: "all",
-    stylers: [
-      {
-        saturation: -100,
-      },
-      {
-        visibility: "simplified",
-      },
-    ],
-  },
-  {
-    featureType: "water",
-    elementType: "geometry",
-    stylers: [
-      {
-        hue: "#ffff00",
-      },
-      {
-        lightness: -25,
-      },
-      {
-        saturation: -97,
-      },
-    ],
-  },
-  {
-    featureType: "water",
-    elementType: "labels",
-    stylers: [
-      {
-        lightness: -25,
-      },
-      {
-        saturation: -100,
-      },
-    ],
-  },
-]
-
-export default jsonMapStyles