@t2ca/gatsby-theme-showcase 1.1.4 → 1.2.0

package/gatsby-config.js

@@ -4,17 +4,19 @@
  * See: https://www.gatsbyjs.org/docs/gatsby-config/
  */
 
-module.exports = ({ contentPath = "data", basePath = "/" }) => ({
+module.exports = {
   plugins: [
     {
       resolve: `gatsby-source-filesystem`,
       options: {
-        path: contentPath,
+        name: `content`,
+        path: `content`,
       },
     },
     {
       resolve: `gatsby-source-filesystem`,
       options: {
+        name: `assets`,
         path: "./src/assets",
       },
     },
@@ -37,13 +39,8 @@ module.exports = ({ contentPath = "data", basePath = "/" }) => ({
       },
     },
     `gatsby-transformer-yaml`,
-    // {
-    //   resolve: `gatsby-transformer-json`,
-    //   options: {
-    //     typeName: "Event",
-    //   },
-    // },
+    `gatsby-transformer-json`,
     `gatsby-plugin-react-helmet`,
     `gatsby-plugin-theme-ui`,
   ],
-})
+}

package/gatsby-node.js

@@ -1,87 +1,15 @@
-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.createSchemaCustomization = ({ actions }) => {
-  const { createTypes } = actions
-
-  const typeDefs = `
-    type ProjectsYaml implements Node @infer {
-      id: ID!
-      slug: String!
-      date: Date @dateformat
-    }
- `
-  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({
-    ProjectsYaml: {
-      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 {
-      allProjectsYaml(sort: { fields: slug, order: ASC }) {
-        nodes {
-          id
-          slug
-        }
-      }
-    }
-  `)
-
-  if (result.errors) {
-    reporter.panic("error loading projects", reporter.errors)
-    return
-  }
-
-  const projects = result.data.allProjectsYaml.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,
-      },
+/**
+ * Implement Gatsby's Node APIs in this file.
+ *
+ * See: https://www.gatsbyjs.com/docs/node-apis/
+ */
+
+// You can delete this file if you're not using it
+
+exports.onCreateWebpackConfig = ({ stage, actions }) => {
+  if (stage === `build-javascript`) {
+    actions.setWebpackConfig({
+      devtool: false,
     })
-  })
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@t2ca/gatsby-theme-showcase",
-  "version": "1.1.4",
+  "version": "1.2.0",
   "main": "index.js",
   "license": "MIT",
   "devDependencies": {
@@ -22,17 +22,17 @@
     "react-dom": "^17.0.1"
   },
   "dependencies": {
-    "@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",
+    "@theme-ui/components": "^0.9.1",
+    "@theme-ui/preset-bootstrap": "^0.9.1",
+    "@theme-ui/preset-tailwind": "^0.9.1",
+    "@theme-ui/sidenav": "^0.9.1",
+    "@theme-ui/typography": "^0.9.1",
     "framer-motion": "^4.0.0",
     "gatsby": "^3.2.0",
     "gatsby-image": "^3.0.0",
     "gatsby-plugin-react-helmet": "^4.0.0",
     "gatsby-plugin-sharp": "^3.0.0",
-    "gatsby-plugin-theme-ui": "^0.8.4",
+    "gatsby-plugin-theme-ui": "^0.9.1",
     "gatsby-remark-images": "^5.0.0",
     "gatsby-source-filesystem": "^3.0.0",
     "gatsby-transformer-json": "^3.0.0",
@@ -41,7 +41,7 @@
     "gatsby-transformer-yaml": "^3.0.0",
     "react-helmet": "^6.0.0",
     "react-icons": "^4.1.0",
-    "theme-ui": "^0.8.4",
+    "theme-ui": "^0.9.1",
     "yup": "^0.32.8"
   },
   "scripts": {

package/src/components/layout.js

@@ -33,13 +33,13 @@ const Layout = ({ noBorder, children }) => {
       <Sidebar open={menuOpen} isAlert={isAlert} />
 
       {!hasMounted ? null : (
-        <div
+        <main
           sx={{
             pt: isAlert ? `6.875rem` : `4.25rem`,
           }}
         >
           {children}
-        </div>
+        </main>
       )}
 
       <Footer />

package/src/components/project-list.js

@@ -1,20 +0,0 @@
-import React from "react"
-import { Link } from "gatsby"
-import { Themed, Container } from "theme-ui"
-
-const ProjectList = ({ projects }) => (
-  <Container>
-    <Themed.h1>Projects</Themed.h1>
-    <Themed.ul>
-      {projects.map((project) => (
-        <Themed.li key={project.id}>
-          <Themed.a as={Link} to={project.slug}>
-            {project.title}
-          </Themed.a>
-        </Themed.li>
-      ))}
-    </Themed.ul>
-  </Container>
-)
-
-export default ProjectList

package/src/components/project.js

@@ -1,69 +0,0 @@
-/** @jsx jsx */
-import React from "react"
-import { Themed, jsx, Container } from "theme-ui"
-import { Link } from "gatsby"
-import Img from "gatsby-image"
-
-import { motion } from "framer-motion"
-import { FaArrowLeft } from "react-icons/fa"
-import Wave from "./wave"
-
-const Project = (data) => {
-  return (
-    <React.Fragment>
-      <Container sx={{ px: [0, 0, 4], py: 0 }}>
-        <div
-          sx={{
-            py: "15rem",
-            px: ["1.5rem", "1.5rem", "3rem"],
-            zIndex: "1",
-            position: "relative",
-            minHeight: `75vh`, // screenHeight
-          }}
-        >
-          <motion.div
-            initial={{ opacity: 0, y: -150 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.5 }}
-          >
-            <Themed.a as={Link} to="/projects/">
-              <FaArrowLeft size={12} sx={{ marginRight: ".25rem" }} />
-              Back to showcase
-            </Themed.a>
-            <Themed.h1>{data.title}</Themed.h1>
-          </motion.div>
-
-          <motion.div
-            initial={{ opacity: 0, y: 0 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ delay: 0.5 }}
-          >
-            <Img
-              fluid={data.hero.childImageSharp.fluid}
-              sx={{
-                position: "absolute !important",
-                top: "0",
-                left: "10vw",
-                right: "0",
-                bottom: "0",
-                zIndex: "-1",
-              }}
-            />
-          </motion.div>
-        </div>
-      </Container>
-
-      <Wave background="cBg" />
-
-      <div sx={{ bg: `mBg` }}>
-        <Container>
-          <div sx={{ width: `2/3`, m: `0 auto` }}>
-            <Img fluid={data.laptop.childImageSharp.fluid} sx={{}} />
-          </div>
-        </Container>
-      </div>
-    </React.Fragment>
-  )
-}
-
-export default Project

package/src/menu.mdx

@@ -1 +0,0 @@
-- [Showcase](/projects/)

package/src/templates/project.js

@@ -1,43 +0,0 @@
-import React from "react"
-import { graphql } from "gatsby"
-import Layout from "../components/layout"
-import Project from "../components/project"
-
-const ProjectTemplates = ({ data: { projectsYaml } }) => {
-  const styles = {
-    variant: "styles.Header.secondary",
-  }
-
-  return (
-    <Layout main={{ ...styles, borderBottom: `inherit` }} header={styles}>
-      <Project {...projectsYaml} />
-    </Layout>
-  )
-}
-
-export default ProjectTemplates
-
-export const query = graphql`
-  query($projectID: String!) {
-    projectsYaml(id: { eq: $projectID }) {
-      title
-      url
-      body
-      date
-      hero {
-        childImageSharp {
-          fluid(cropFocus: ENTROPY, maxWidth: 1200, quality: 90) {
-            ...GatsbyImageSharpFluid_withWebp_tracedSVG
-          }
-        }
-      }
-      laptop {
-        childImageSharp {
-          fluid(cropFocus: ENTROPY, maxWidth: 1200) {
-            ...GatsbyImageSharpFluid_withWebp_tracedSVG
-          }
-        }
-      }
-    }
-  }
-`

package/src/templates/projects.js

@@ -1,34 +0,0 @@
-import React from "react"
-import { graphql, useStaticQuery } from "gatsby"
-import Layout from "../components/layout"
-import ProjectList from "../components/project-list"
-
-const ProjectsTemplates = (props) => {
-  const data = useStaticQuery(graphql`
-    query {
-      allProjectsYaml(sort: { fields: slug, order: ASC }) {
-        nodes {
-          id
-          title
-          slug
-        }
-      }
-    }
-  `)
-
-  const projects = data.allProjectsYaml.nodes
-
-  const styles = {
-    bg: `Menu`,
-    borderBottom: `1px solid transparent`,
-    borderColor: `MenuBorder`,
-  }
-
-  return (
-    <Layout header={styles} location={props.location}>
-      <ProjectList projects={projects} />
-    </Layout>
-  )
-}
-
-export default ProjectsTemplates