@t2ca/gatsby-theme-showcase 1.0.0 → 1.0.1

package/gatsby-config.js

@@ -3,6 +3,7 @@
  *
  * See: https://www.gatsbyjs.org/docs/gatsby-config/
  */
+const remarkPlugins = [require("remark-slug")]
 
 module.exports = ({ contentPath = "data", basePath = "/" }) => ({
   plugins: [
@@ -12,18 +13,39 @@ module.exports = ({ contentPath = "data", basePath = "/" }) => ({
         path: contentPath,
       },
     },
+    `gatsby-plugin-sharp`,
+    `gatsby-transformer-sharp`,
     {
-      resolve: `gatsby-transformer-yaml`,
+      resolve: `gatsby-transformer-remark`,
       options: {
-        // typeName: "",
+        plugins: [
+          {
+            resolve: `gatsby-remark-images`,
+            options: {
+              // It's important to specify the maxWidth (in pixels) of
+              // the content container as this plugin uses this as the
+              // base for generating different widths of each image.
+              maxWidth: 1200,
+            },
+          },
+        ],
       },
     },
+    `gatsby-transformer-yaml`,
+    // {
+    //   resolve: `gatsby-transformer-json`,
+    //   options: {
+    //     typeName: "Event",
+    //   },
+    // },
+    `gatsby-plugin-emotion`,
+    `gatsby-plugin-theme-ui`,
     {
-      resolve: `gatsby-transformer-json`,
+      resolve: "gatsby-plugin-mdx",
       options: {
-        typeName: "Project",
+        extensions: [".mdx", ".md"],
+        remarkPlugins,
       },
     },
-    `gatsby-plugin-theme-ui`,
   ],
 })

package/gatsby-node.js

@@ -11,18 +11,14 @@ exports.onPreBootstrap = ({ reporter }, options) => {
 }
 
 // 2. define the project type
-exports.sourceNodes = ({ actions }) => {
+exports.createSchemaCustomization = ({ actions }) => {
   const { createTypes } = actions
 
   const typeDefs = `
-    type Project implements Node @dontInfer {
+    type ProjectYaml implements Node @infer {
       id: ID!
-      title: String!
-      notes: String
-      address: String
-      date: Date @dateformat @proxy(from: "next_date")
-      dateTime: Date! @dateformat @proxy(from: "next_date_times")
       slug: String!
+      date: Date @dateformat
     }
  `
   createTypes(typeDefs)
@@ -42,7 +38,7 @@ exports.createResolvers = ({ createResolvers }, options) => {
   }
 
   createResolvers({
-    Project: {
+    ProjectYaml: {
       slug: {
         resolve: source => slugify(source.title),
       },
@@ -60,7 +56,7 @@ exports.createPages = async ({ actions, graphql, reporter }, options) => {
 
   const result = await graphql(`
     query {
-      allProject(sort: { fields: date, order: ASC }) {
+      allProjectYaml(sort: { fields: slug, order: ASC }) {
         nodes {
           id
           slug
@@ -74,7 +70,7 @@ exports.createPages = async ({ actions, graphql, reporter }, options) => {
     return
   }
 
-  const projects = result.data.allProject.nodes
+  const projects = result.data.allProjectYaml.nodes
 
   projects.forEach(project => {
     const slug = project.slug

package/index.js

@@ -1,3 +1,5 @@
 // noop
 export { default as Layout } from "./src/components/layout"
-export { default as Tiles } from "./src/components/tiles"
+export { default as Alert } from "./src/components/alert"
+export { default as Card } from "./src/components/card"
+export { default as Button } from "./src/components/button"

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@t2ca/gatsby-theme-showcase",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "main": "index.js",
   "license": "MIT",
   "devDependencies": {
-    "@hot-loader/react-dom": "^16.8.6",
+    "@hot-loader/react-dom": "^16.9.0",
     "babel-eslint": "^10.0.2",
     "eslint": "^6.0.1",
     "eslint-config-prettier": "^6.0.0",
@@ -14,31 +14,45 @@
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-prettier": "^3.1.0",
     "eslint-plugin-react": "^7.14.2",
-    "eslint-plugin-react-hooks": "^1.6.1",
+    "eslint-plugin-react-hooks": "^2.0.0",
     "gatsby": "^2.13.3",
+    "gatsby-image": "^2.2.7",
+    "gatsby-plugin-sharp": "^2.2.9",
+    "gatsby-remark-images": "^3.1.7",
+    "gatsby-transformer-remark": "^2.6.10",
+    "gatsby-transformer-sharp": "^2.2.5",
     "prettier": "^1.18.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6"
   },
   "peerDependencies": {
     "gatsby": "^2.13.3",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6"
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0"
   },
   "dependencies": {
     "@emotion/core": "^10.0.14",
-    "@mdx-js/react": "^1.0.21",
-    "@theme-ui/presets": "^0.2.5",
+    "@emotion/styled": "^10.0.17",
+    "@hot-loader/react-dom": "^16.9.0",
+    "@mdx-js/mdx": "^1.4.0",
+    "@mdx-js/react": "^1.4.0",
+    "@theme-ui/preset-bootstrap": "^0.2.25",
+    "@theme-ui/preset-tailwind": "^0.2.30",
+    "@theme-ui/sidenav": "^0.2.36",
     "@theme-ui/typography": "^0.2.5",
     "deepmerge": "^4.0.0",
-    "gatsby-plugin-theme-ui": "^0.2.5",
+    "gatsby-plugin-emotion": "^4.1.2",
+    "gatsby-plugin-mdx": "^1.0.33",
+    "gatsby-plugin-theme-ui": "^0.2.29",
     "gatsby-source-filesystem": "^2.1.4",
     "gatsby-transformer-json": "^2.2.2",
     "gatsby-transformer-yaml": "^2.2.1",
     "react-google-maps": "^9.4.5",
     "react-headroom": "^2.2.8",
     "react-icons": "^3.7.0",
+    "react-spring": "^8.0.27",
     "react-switch": "^5.0.0",
+    "remark-slug": "^5.1.2",
     "theme-ui": "^0.2.5"
   },
   "scripts": {

package/src/components/alert.js

@@ -0,0 +1,23 @@
+/** @jsx jsx */
+import React from "react"
+import { jsx } from "theme-ui"
+import { FaExclamationTriangle } from "react-icons/fa"
+
+export default props => (
+  <div sx={{ variant: `alerts.error` }}>
+    <FaExclamationTriangle
+      size={40}
+      sx={{
+        flex: `0 0 auto`,
+        width: `auto`,
+        lineHeight: 1,
+        verticalAlign: `middle`,
+        fontSize: `3rem`,
+      }}
+    />
+    <div sx={{ pl: `1rem`, margin: `.5rem` }}>
+      <span sx={{ fontWeight: `extrabold` }}>Sorry, there was a problem.</span>
+      {props.children}
+    </div>
+  </div>
+)

package/src/components/button.js

@@ -1,25 +1,12 @@
 /** @jsx jsx */
-import React from 'react';
-import { jsx } from 'theme-ui';
+import React from "react"
+import { jsx } from "theme-ui"
 
-export default props => (
+export default ({ type = "basic", ...props }) => (
   <button
     {...props}
     sx={{
-      appearance: 'none',
-      fontFamily: 'inherit',
-      fontSize: 1,
-      fontWeight: 'bold',
-      m: 0,
-      px: 2,
-      py: 2,
-      color: 'text',
-      bg: 'muted',
-      border: 0,
-      borderRadius: 2,
-      ':focus': {
-        outline: '2px solid'
-      }
+      variant: `buttons.${type}`,
     }}
   />
-);
+)

package/src/components/card.js

@@ -0,0 +1,23 @@
+/** @jsx jsx */
+import React from "react"
+import { jsx, Styled } from "theme-ui"
+import Button from "./button"
+
+export default props => (
+  <Styled.li>
+    <Styled.h4
+      sx={{
+        svg: {
+          width: 5,
+          height: 5,
+          marginRight: `.5rem`,
+        },
+      }}
+    >
+      {props.icon}
+      {props.title}
+    </Styled.h4>
+    <p>{props.desc}</p>
+    <Button type={props.buttonType}>{props.button}</Button>
+  </Styled.li>
+)

package/src/components/cards.js

@@ -0,0 +1,13 @@
+/** @jsx jsx */
+import React from "react"
+import { jsx, Styled } from "theme-ui"
+
+export default ({ children }) => (
+  <div
+    sx={{
+      variant: `cards.primary`,
+    }}
+  >
+    <Styled.ul>{children}</Styled.ul>
+  </div>
+)

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

@@ -0,0 +1,75 @@
+/** @jsx jsx */
+import React from "react"
+import { jsx } from "theme-ui"
+
+const ColorModeToggle = ({ isDark, toggle }) => (
+  <React.Fragment>
+    <button
+      onClick={toggle}
+      type="button"
+      aria-label={isDark ? `Light Mode` : `Dark Mode`}
+      title={isDark ? `Light Mode` : `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`,
+        "&:hover, &:focus": { opacity: 1 },
+      }}
+    >
+      <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.40)` : `scale(0.80)`,
+          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>
+  </React.Fragment>
+)
+
+export default ColorModeToggle

package/src/components/header.js

@@ -1,49 +1,29 @@
 /** @jsx jsx */
 import React from "react"
 import { Link } from "gatsby"
-import { jsx, Header, Container, useColorMode } from "theme-ui"
+import { jsx, Header, Container } from "theme-ui"
+
+import MenuButton from "./menu-button"
 import NavLink from "./nav-link"
-import Switch from "./switch"
-import sun from "../assets/sun.png"
-import moon from "../assets/moon.png"
+import ColorModeToggle from "./color-mode-toggle"
 
-export default props => {
-  const [colorMode, setColorMode] = useColorMode()
-  const isDark = colorMode === `dark`
+export default ({
+  setColorMode,
+  setMenuOpen,
+  isDark,
+  styles,
+  menuOpen,
+  nav,
+  name,
+  menuList,
+}) => {
   const toggleColorMode = e => {
+    e.preventDefault()
     setColorMode(isDark ? `light` : `dark`)
   }
 
-  const checkedIcon = (
-    <img
-      alt="moon indicating dark mode"
-      src={moon}
-      width="16"
-      height="16"
-      role="presentation"
-      css={{
-        pointerEvents: `none`,
-        margin: 4,
-      }}
-    />
-  )
-
-  const uncheckedIcon = (
-    <img
-      alt="sun indicating light mode"
-      src={sun}
-      width="16"
-      height="16"
-      role="presentation"
-      css={{
-        pointerEvents: `none`,
-        margin: 4,
-      }}
-    />
-  )
-
   return (
-    <Header sx={{ ...props.styles }}>
+    <Header sx={{ ...styles }}>
       <Container sx={{ py: 0 }}>
         <div
           sx={{
@@ -52,9 +32,25 @@ export default props => {
             alignItems: `center`,
           }}
         >
+          <MenuButton
+            disabled={menuOpen}
+            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()
+            }}
+          />
           <Link to="/" sx={{ color: "inherit", textDecoration: "none" }}>
-            <span sx={{ fontSize: [`1.25rem`, `1.5rem`], fontWeight: 600 }}>
-              {props.name}
+            <span
+              sx={{
+                fontSize: [`1.25rem`, `1.5rem`],
+                fontWeight: 600,
+                color: "brand",
+              }}
+            >
+              {name}
             </span>
           </Link>
           <div
@@ -67,21 +63,16 @@ export default props => {
               height: 59,
             }}
           >
-            <div sx={{ display: ["none", "initial"] }}>
-              <NavLink to="/projects/">Showcase</NavLink>
-              <NavLink to="/about/">About</NavLink>
-              <NavLink to="/contact/" sx={{ marginRight: "3rem" }}>
-                Contact
-              </NavLink>
+            <div sx={{ display: ["none", "inherit"] }}>
+              {menuList &&
+                menuList.map(({ node: { label, link, id } }) => (
+                  <NavLink key={id} to={link}>
+                    {label}
+                  </NavLink>
+                ))}
             </div>
 
-            <Switch
-              aria-label="Toggle dark mode"
-              checkedIcon={checkedIcon}
-              uncheckedIcon={uncheckedIcon}
-              checked={isDark}
-              onChange={toggleColorMode}
-            />
+            <ColorModeToggle isDark={isDark} toggle={toggleColorMode} />
           </div>
         </div>
       </Container>

package/src/components/hero.js

@@ -0,0 +1,61 @@
+/** @jsx jsx */
+import React from "react"
+import { jsx, Styled, Container } from "theme-ui"
+import { useSpring, animated } from "react-spring"
+
+export default props => {
+  const titleProps = useSpring({
+    from: { opacity: 0, transform: "translate3d(0, -200px, 0)" },
+    to: { opacity: 1, transform: "translate3d(0, 0, 0)" },
+  })
+
+  return (
+    <React.Fragment>
+      <div
+        sx={{
+          py: "9rem",
+          px: ["1.5rem", "3rem"],
+          position: "relative",
+          bg: `MainHero`,
+          minHeight: `80vh`,
+        }}
+      >
+        <Container>
+          <animated.div style={titleProps}>
+            <Styled.h1 sx={{ fontSize: [6, 7] }}>{props.headingTop}</Styled.h1>
+            <Styled.h1 sx={{ fontSize: [6, 7] }}>
+              {props.headingMiddle}
+            </Styled.h1>
+            <Styled.h1 sx={{ fontSize: [6, 7] }}>
+              {props.headingBottom}
+            </Styled.h1>
+          </animated.div>
+        </Container>
+      </div>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 200">
+        <path
+          fill={props.isDark ? "#1b1c1d" : "#ffffff"}
+          d="M0,96L40,112C80,128,160,160,240,170.7C320,181,400,171,480,160C560,149,640,139,720,112C800,85,880,43,960,37.3C1040,32,1120,64,1200,96C1280,128,1360,160,1400,176L1440,192L1440,0L1400,0C1360,0,1280,0,1200,0C1120,0,1040,0,960,0C880,0,800,0,720,0C640,0,560,0,480,0C400,0,320,0,240,0C160,0,80,0,40,0L0,0Z"
+        ></path>
+        <g transform="translate(0.000000, 44.000000)">
+          <path
+            fill={props.isDark ? "#777777" : props.color}
+            d="M0,0 C90.7283404,0.927527913 147.912752,27.187927 291.910178,59.9119003 C387.908462,81.7278826 543.605069,89.334785 759,82.7326078 C469.336065,156.254352 216.336065,153.6679 0,74.9732496"
+            opacity="0.100000001"
+          ></path>
+          <path
+            fill={props.isDark ? "#999999" : props.color}
+            d="M100,104.708498 C277.413333,72.2345949 426.147877,52.5246657 546.203633,45.5787101 C666.259389,38.6327546 810.524845,41.7979068 979,55.0741668 C931.069965,56.122511 810.303266,74.8455141 616.699903,111.243176 C423.096539,147.640838 250.863238,145.462612 100,104.708498 Z"
+            opacity="0.100000001"
+          ></path>
+          <path
+            fill={props.isDark ? "#555555" : props.color}
+            d="M920,51.6521276 C1130.83045,29.328812 1279.08318,17.607883 1439,40.1656806 L1439,120 C1271.17211,77.9435312 1140.17211,55.1609071 1046,51.6521276 Z"
+            id="Path-4"
+            opacity="0.200000003"
+          ></path>
+        </g>
+      </svg>
+    </React.Fragment>
+  )
+}

package/src/components/icon.js

@@ -0,0 +1,15 @@
+import React from "react"
+
+import { FiLayout, FiEdit, FiPhone, FiHome, FiLayers } from "react-icons/fi"
+
+const reactIcons = {
+  Home: <FiHome size={20} />,
+  "Web Design": <FiLayout size={20} />,
+  Showcase: <FiLayers size={20} />,
+  Quote: <FiEdit size={20} />,
+  Contact: <FiPhone size={20} />,
+}
+
+const Icon = ({ label }) => reactIcons[label]
+
+export default Icon