@t2ca/gatsby-theme-showcase 1.0.0

package/.eslintrc.json

@@ -0,0 +1,40 @@
+{
+  "extends": [
+    "eslint:recommended",
+    "plugin:import/errors",
+    "plugin:react/recommended",
+    "plugin:jsx-a11y/recommended",
+    "prettier",
+    "prettier/react"
+  ],
+  "plugins": ["react", "react-hooks", "import", "jsx-a11y", "emotion"],
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaVersion": 2018,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "env": {
+    "es6": true,
+    "browser": true,
+    "node": true
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "rules": {
+    "react-hooks/rules-of-hooks": "error",
+    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
+    "jsx-a11y/anchor-is-valid": ["error", { "components": ["Link"], "specialLink": ["to"] }],
+    "no-console": "off",
+    "react/prop-types": [0],
+    "react/display-name": [0]
+  },
+  "globals": {
+    "graphql": true
+  }
+}

package/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "endOfLine": "lf",
+  "semi": false,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "es5"
+}

package/gatsby-config.js

@@ -0,0 +1,29 @@
+/**
+ * Configure your Gatsby site with this file.
+ *
+ * See: https://www.gatsbyjs.org/docs/gatsby-config/
+ */
+
+module.exports = ({ contentPath = "data", basePath = "/" }) => ({
+  plugins: [
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        path: contentPath,
+      },
+    },
+    {
+      resolve: `gatsby-transformer-yaml`,
+      options: {
+        // typeName: "",
+      },
+    },
+    {
+      resolve: `gatsby-transformer-json`,
+      options: {
+        typeName: "Project",
+      },
+    },
+    `gatsby-plugin-theme-ui`,
+  ],
+})

package/gatsby-node.js

@@ -0,0 +1,91 @@
+const fs = require("fs")
+
+// 1. make sure data directory exists
+exports.onPreBootstrap = ({ reporter }, options) => {
+  const contentPath = options.contentPath || "data"
+
+  if (!fs.existsSync(contentPath)) {
+    reporter.info(`creating the ${contentPath} directory`)
+    fs.mkdirSync(contentPath)
+  }
+}
+
+// 2. define the project type
+exports.sourceNodes = ({ actions }) => {
+  const { createTypes } = actions
+
+  const typeDefs = `
+    type Project implements Node @dontInfer {
+      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!
+    }
+ `
+  createTypes(typeDefs)
+}
+
+// 3. define resolvers for any custom fields (slug)
+exports.createResolvers = ({ createResolvers }, options) => {
+  const basePath = options.basePath || "/"
+
+  const slugify = str => {
+    const slug = str
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, "-")
+      .replace(/(^-|-$)+/g, "")
+
+    return `/${basePath}/${slug}/`.replace(/\/\/+/g, "/")
+  }
+
+  createResolvers({
+    Project: {
+      slug: {
+        resolve: source => slugify(source.title),
+      },
+    },
+  })
+}
+
+// 4. query for projects and create pages
+exports.createPages = async ({ actions, graphql, reporter }, options) => {
+  const basePath = options.basePath || "/"
+  actions.createPage({
+    path: basePath,
+    component: require.resolve("./src/templates/projects.js"),
+  })
+
+  const result = await graphql(`
+    query {
+      allProject(sort: { fields: date, order: ASC }) {
+        nodes {
+          id
+          slug
+        }
+      }
+    }
+  `)
+
+  if (result.errors) {
+    reporter.panic("error loading projects", reporter.errors)
+    return
+  }
+
+  const projects = result.data.allProject.nodes
+
+  projects.forEach(project => {
+    const slug = project.slug
+
+    actions.createPage({
+      path: slug,
+      component: require.resolve("./src/templates/project.js"),
+      context: {
+        slug: project.slug,
+        projectID: project.id,
+      },
+    })
+  })
+}

package/index.js

@@ -0,0 +1,3 @@
+// noop
+export { default as Layout } from "./src/components/layout"
+export { default as Tiles } from "./src/components/tiles"

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@t2ca/gatsby-theme-showcase",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "devDependencies": {
+    "@hot-loader/react-dom": "^16.8.6",
+    "babel-eslint": "^10.0.2",
+    "eslint": "^6.0.1",
+    "eslint-config-prettier": "^6.0.0",
+    "eslint-plugin-emotion": "^10.0.14",
+    "eslint-plugin-graphql": "^3.0.3",
+    "eslint-plugin-import": "^2.18.0",
+    "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",
+    "gatsby": "^2.13.3",
+    "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"
+  },
+  "dependencies": {
+    "@emotion/core": "^10.0.14",
+    "@mdx-js/react": "^1.0.21",
+    "@theme-ui/presets": "^0.2.5",
+    "@theme-ui/typography": "^0.2.5",
+    "deepmerge": "^4.0.0",
+    "gatsby-plugin-theme-ui": "^0.2.5",
+    "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-switch": "^5.0.0",
+    "theme-ui": "^0.2.5"
+  },
+  "scripts": {
+    "build": "gatsby build",
+    "develop": "gatsby develop",
+    "clean": "gatsby clean",
+    "format": "prettier --write src/**/*.{js,jsx}",
+    "start": "npm run develop",
+    "serve": "gatsby serve",
+    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\""
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/t2ca/gatsby-theme-showcase.git"
+  },
+  "author": "",
+  "bugs": {
+    "url": "https://github.com/t2ca/gatsby-theme-showcase/issues"
+  },
+  "homepage": "https://github.com/t2ca/gatsby-theme-showcase#readme",
+  "description": ""
+}

package/src/components/button.js

@@ -0,0 +1,25 @@
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from 'theme-ui';
+
+export default 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'
+      }
+    }}
+  />
+);

package/src/components/footer.js

@@ -0,0 +1,11 @@
+/** @jsx jsx */
+import React from "react"
+import { jsx, Footer, Container } from "theme-ui"
+
+export default ({ name }) => {
+  return (
+    <Footer>
+      <Container sx={{ px: 3, py: 4 }}>{name}</Container>
+    </Footer>
+  )
+}

package/src/components/header.js

@@ -0,0 +1,90 @@
+/** @jsx jsx */
+import React from "react"
+import { Link } from "gatsby"
+import { jsx, Header, Container, useColorMode } from "theme-ui"
+import NavLink from "./nav-link"
+import Switch from "./switch"
+import sun from "../assets/sun.png"
+import moon from "../assets/moon.png"
+
+export default props => {
+  const [colorMode, setColorMode] = useColorMode()
+  const isDark = colorMode === `dark`
+  const toggleColorMode = e => {
+    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 }}>
+      <Container sx={{ py: 0 }}>
+        <div
+          sx={{
+            display: `flex`,
+            justifyContent: `space-between`,
+            alignItems: `center`,
+          }}
+        >
+          <Link to="/" sx={{ color: "inherit", textDecoration: "none" }}>
+            <span sx={{ fontSize: [`1.25rem`, `1.5rem`], fontWeight: 600 }}>
+              {props.name}
+            </span>
+          </Link>
+          <div
+            sx={{
+              display: `flex`,
+              justifyContent: `space-between`,
+              alignItems: `center`,
+              mb: 0,
+              p: 0,
+              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>
+
+            <Switch
+              aria-label="Toggle dark mode"
+              checkedIcon={checkedIcon}
+              uncheckedIcon={uncheckedIcon}
+              checked={isDark}
+              onChange={toggleColorMode}
+            />
+          </div>
+        </div>
+      </Container>
+    </Header>
+  )
+}

package/src/components/layout.js

@@ -0,0 +1,132 @@
+/** @jsx jsx */
+import React, { useState, useRef } from "react"
+import {
+  jsx,
+  css,
+  Layout as DefaultLayout,
+  Main,
+  Container,
+  Styled,
+} from "theme-ui"
+import { Global } from "@emotion/core"
+import Headroom from "react-headroom"
+import {
+  withGoogleMap,
+  withScriptjs,
+  GoogleMap,
+  Marker,
+} from "react-google-maps"
+import jsonMapStyles from "./map-styles"
+
+import Header from "./header"
+import Footer from "./footer"
+// import MenuButton from "./menu-button"
+// import Button from "./button"
+// import Sidebar from "./sidebar"
+
+const Layout = props => {
+  // const [menuOpen, setMenuOpen] = useState(false)
+  // const nav = useRef(null)
+
+  const Map = () => {
+    return (
+      <GoogleMap
+        defaultZoom={10}
+        defaultCenter={{ lat: 51.0486, lng: -114.0708 }}
+        defaultOptions={{
+          styles: jsonMapStyles,
+          disableDefaultUI: true,
+          zoomControl: false,
+          scaleControl: false,
+          scrollwheel: false,
+          disableDoubleClickZoom: true,
+        }}
+      >
+        <Marker position={{ lat: 51.0486, lng: -114.0708 }} />
+      </GoogleMap>
+    )
+  }
+
+  const WrapperMap = withScriptjs(withGoogleMap(Map))
+
+  return (
+    <Styled.root>
+      <DefaultLayout>
+        <Global
+          styles={{
+            "*": {
+              boxSizing: "border-box",
+            },
+            body: {
+              margin: 0,
+            },
+            html: {
+              WebkitFontSmoothing: `antialiased`,
+              MozOsxFontSmoothing: `grayscale`,
+            },
+            ".mapElement > div": {
+              backgroundColor: "transparent !important",
+            },
+            ".headroom": {
+              top: 0,
+              left: 0,
+              right: 0,
+              zIndex: 1,
+            },
+            ".headroom--unfixed": {
+              position: `relative`,
+              transform: `translateY(0)`,
+            },
+            ".headroom--scrolled": {
+              transition: `transform 200ms ease-in-out`,
+            },
+            ".headroom--unpinned": {
+              position: `fixed`,
+              transform: `translateY(-100%)`,
+            },
+            ".headroom--pinned": {
+              position: `fixed`,
+              transform: `translateY(0%)`,
+              borderBottom: `1px solid transparent`,
+              ...props.headRoomStyles,
+            },
+          }}
+        />
+
+        <Headroom disableInlineStyles={true}>
+          <Header styles={props.headerStyles} />
+        </Headroom>
+
+        <Main>
+          <div
+            sx={{
+              ...props.mainStyles,
+            }}
+          >
+            <Container>{props.children}</Container>
+          </div>
+        </Main>
+
+        <WrapperMap
+          googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=AIzaSyBOY0sT1quks122bprrLM_0wrWLDWyVnMQ`}
+          loadingElement={<div sx={{ height: `350px` }} />}
+          containerElement={
+            <div sx={{ height: `350px`, backgroundColor: "#f8f9fa" }} />
+          }
+          mapElement={
+            <div
+              sx={{
+                height: `100%`,
+              }}
+              className="mapElement"
+            />
+          }
+        />
+
+        <Footer />
+      </DefaultLayout>
+    </Styled.root>
+  )
+}
+
+export default Layout

package/src/components/map-styles.js

@@ -0,0 +1,136 @@
+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

package/src/components/menu-button.js

@@ -0,0 +1,44 @@
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from 'theme-ui';
+
+const Burger = ({ size = '1.5rem' }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    fill="currentcolor"
+    viewBox="0 0 24 24"
+    sx={{
+      display: 'block',
+      margin: 0
+    }}
+  >
+    <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />
+  </svg>
+);
+
+export default props => (
+  <button
+    title="Toggle Menu"
+    {...props}
+    sx={{
+      fontFamily: 'inherit',
+      fontSize: 24,
+      color: '#333',
+      bg: 'transparent',
+      p: 0,
+      m: 0,
+      border: 0,
+      appearance: 'none',
+      ':focus': {
+        outline: '0'
+      },
+      '@media screen and (min-width: 40em)': {
+        display: 'none'
+      }
+    }}
+  >
+    <Burger />
+  </button>
+);

package/src/components/nav-link.js

@@ -0,0 +1,37 @@
+/** @jsx jsx */
+import React from "react"
+import { jsx } from "theme-ui"
+import { Link } from "gatsby"
+import isAbsoluteURL from "is-absolute-url"
+
+const styles = {
+  display: "inline-block",
+  px: 0,
+  py: 0,
+  color: "primary",
+  margin: "1rem",
+  textDecoration: "none",
+  borderBottom: `2px solid transparent`,
+  lineHeight: "2rem",
+  transition: `all .5s ease-in;`,
+  "&.active": {
+    color: "secondary",
+    cursor: "default",
+  },
+  "&:hover:not(.active)": {
+    borderColor: "primary",
+  },
+}
+
+export default ({ href, ...props }) => {
+  const isExternal = isAbsoluteURL(href || "")
+  if (isExternal) {
+    return (
+      <a href={href} sx={styles}>
+        {props}
+      </a>
+    )
+  }
+  const to = props.to || href
+  return <Link {...props} to={to} sx={styles} activeClassName="active" />
+}

package/src/components/project-list.js

@@ -0,0 +1,21 @@
+import React from "react"
+import { Link } from "gatsby"
+import { Styled } from "theme-ui"
+
+const ProjectList = ({ projects }) => (
+  <React.Fragment>
+    <Styled.h1>City of Calgary Events</Styled.h1>
+    <Styled.ul>
+      {projects.map(project => (
+        <Styled.li key={project.id}>
+          <Styled.a as={Link} to={project.slug}>
+            {project.title}
+          </Styled.a>
+          <p>{project.dateTime}</p>
+        </Styled.li>
+      ))}
+    </Styled.ul>
+  </React.Fragment>
+)
+
+export default ProjectList

package/src/components/project.js

@@ -0,0 +1,25 @@
+/** @jsx jsx */
+import React from "react"
+import { Styled, jsx } from "theme-ui"
+import { Link } from "gatsby"
+import { FaArrowLeft } from "react-icons/fa"
+
+const Project = ({ title, address, notes }) => (
+  <div>
+    <div
+      sx={{ py: "9rem", px: "3rem", marginTop: "12rem", marginBottom: "3rem" }}
+    >
+      <Styled.a as={Link} to="/projects/">
+        <FaArrowLeft size={12} sx={{ marginRight: ".25rem" }} />
+        Back to showcase
+      </Styled.a>
+
+      <Styled.h1>
+        {title} - {address}
+      </Styled.h1>
+      <Styled.h6>{notes}</Styled.h6>
+    </div>
+  </div>
+)
+
+export default Project

package/src/components/sidebar.js

@@ -0,0 +1,41 @@
+/** @jsx jsx */
+import React from 'react';
+import { jsx, Box } from 'theme-ui';
+
+import { MDXProvider } from '@mdx-js/react';
+import NavLink from './nav-link';
+
+const components = {
+  a: NavLink
+};
+
+export default React.forwardRef(({ fullwidth, ...props }, ref) => (
+  <>
+    {props.open ? (
+      <Box
+        {...props}
+        ref={ref}
+        sx={{
+          display: 'block',
+          position: 'fixed',
+          top: 87,
+          left: 0,
+          bottom: 0,
+          width: 256,
+          px: 2,
+          bg: 'background',
+          transition: 'transform .2s ease-out',
+          transform: props.open ? 'translateX(0)' : 'translateX(-100%)',
+
+          ul: {
+            listStyle: 'none',
+            m: 0,
+            p: 0
+          }
+        }}
+      >
+        <MDXProvider components={components}>Home</MDXProvider>
+      </Box>
+    ) : null}
+  </>
+));

package/src/components/switch.js

@@ -0,0 +1,19 @@
+import React from "react"
+import ReactSwitch from "react-switch"
+import { css } from "theme-ui"
+
+export const Switch = props => <ReactSwitch {...props} />
+
+Switch.defaultProps = {
+  checkedIcon: false,
+  uncheckedIcon: false,
+  height: 24,
+  width: 48,
+  handleDiameter: 16,
+  offColor: `#00bfff`,
+  onColor: `#000`,
+
+  // boxShadow: `inset 0 0 0 1px #000`,
+}
+
+export default Switch

package/src/components/tiles.js

@@ -0,0 +1,32 @@
+import React from "react"
+import { ThemeProvider } from "theme-ui"
+
+export default props => (
+  <ThemeProvider
+    theme={{
+      styles: {
+        ul: {
+          listStyle: `none`,
+          display: [`block`, `flex`],
+          margin: [`0`, `0 -16px`],
+          p: 0,
+          m: 0,
+        },
+        li: {
+          bg: `cBg`,
+          boxShadow: `0 1px 2px 0 rgba(34,36,38,.15)`,
+          borderRadius: `.125rem`,
+          border: `1px solid rgba(34,36,38,.15)`,
+          textAlign: `center`,
+          // fontSize: `.875rem`,
+          mx: [0, 3],
+          mb: 4,
+          mt: 2,
+          p: 3,
+        },
+      },
+    }}
+  >
+    <div {...props} />
+  </ThemeProvider>
+)

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

@@ -0,0 +1,46 @@
+import merge from "deepmerge"
+import { bootstrap } from "@theme-ui/presets"
+import styles from "./styles"
+
+const overwriteMerge = (destinationArray, sourceArray, options) => sourceArray
+
+export default merge(
+  bootstrap,
+  {
+    breakpoints: ["768px", "992px", "1200px"],
+    initialColorMode: `light`,
+    useCustomProperties: true,
+    textStyles: {
+      heading: {
+        fontFamily: "heading",
+        fontWeight: "heading",
+        lineHeight: "heading",
+      },
+    },
+    colors: {
+      mBg: `#f8f9fa`,
+      cBg: `#ffffff`,
+      sBg: `#e2e8f0`,
+      modes: {
+        dark: {
+          background: `#333333`,
+          text: `#ffffff`,
+          mBg: `#333333`,
+          cBg: `#333333`,
+          sBg: `#333333`,
+          primary: `pink`,
+        },
+      },
+    },
+    project: {
+      primary: {
+        bg: "cBg",
+      },
+      secondary: {
+        bg: "sBg",
+      },
+    },
+    styles,
+  },
+  { arrayMerge: overwriteMerge }
+)

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

@@ -0,0 +1,30 @@
+export default {
+  Container: {
+    py: 3,
+    width: ["100%", "90%"],
+    maxWidth: "1168px",
+  },
+  Header: {
+    primary: {
+      bg: `cBg`,
+      borderBottom: `1px solid transparent`,
+      borderColor: `rgb(212, 212, 213)`,
+    },
+    secondary: {
+      bg: `cBg`,
+      borderBottom: `1px solid transparent`,
+    },
+  },
+  p: {
+    fontSize: [2],
+  },
+  h1: {
+    variant: "textStyles.heading",
+    fontSize: [5, 6],
+  },
+  h2: {
+    variant: "textStyles.heading",
+    fontSize: [4, 5],
+    fontWeight: 500,
+  },
+}

package/src/templates/project.js

@@ -0,0 +1,32 @@
+import React from "react"
+import { graphql } from "gatsby"
+import Layout from "../components/layout"
+import Project from "../components/project"
+
+const ProjectTemplates = ({ data: { project } }) => {
+  const mainStyles = {
+    variant: "styles.Header.secondary",
+  }
+
+  const headRoomStyles = {
+    borderColor: `rgb(212, 212, 213)`,
+  }
+
+  return (
+    <Layout mainStyles={mainStyles} headRoomStyles={headRoomStyles}>
+      <Project {...project} />
+    </Layout>
+  )
+}
+
+export default ProjectTemplates
+
+export const query = graphql`
+  query($projectID: String!) {
+    project(id: { eq: $projectID }) {
+      title
+      notes
+      address
+    }
+  }
+`

package/src/templates/projects.js

@@ -0,0 +1,39 @@
+import React from "react"
+import { graphql, useStaticQuery } from "gatsby"
+import Layout from "../components/layout"
+import ProjectList from "../components/project-list"
+
+const ProjectsTemplates = () => {
+  const data = useStaticQuery(graphql`
+    query {
+      allProject(
+        sort: { fields: date, order: ASC }
+        filter: { date: { ne: null } }
+      ) {
+        nodes {
+          id
+          title
+          address
+          notes
+          date
+          dateTime
+          slug
+        }
+      }
+    }
+  `)
+
+  const projects = data.allProject.nodes
+
+  const styles = {
+    variant: "styles.Header.primary",
+  }
+
+  return (
+    <Layout headerStyles={styles}>
+      <ProjectList projects={projects} />
+    </Layout>
+  )
+}
+
+export default ProjectsTemplates