Merge pull request #48 from RENCI/staging

gatsby-browser.js

@@ -1,6 +1,15 @@
 import React from "react"
 import { Layout } from "./src/components/layout"
+import { CssVarsProvider } from '@mui/joy/styles';
+import theme from './src/styles/theme'
+import { PositionsProvider } from './src/components/positions'
 
 export const wrapPageElement = ({ element, props }) => {
-  return <Layout {...props}>{element}</Layout>
-}
+  return (
+    <CssVarsProvider theme={theme}>
+      <PositionsProvider>
+        <Layout {...props}>{element}</Layout>
+      </PositionsProvider>
+    </CssVarsProvider>
+  )
+}

gatsby-config.js

@@ -1,5 +1,10 @@
+require('dotenv').config({
+  path: `.env.${ process.env.NODE_ENV }`,
+})
+
 module.exports = {
   plugins: [
+    /* image plugins */
     `gatsby-plugin-image`,
     {
       resolve: `gatsby-source-filesystem`,
@@ -8,6 +13,9 @@ module.exports = {
         path: `${__dirname}/src/images`,
       },
     },
+    `gatsby-transformer-sharp`,
+    `gatsby-plugin-sharp`,
+    /* content plugins */
     `gatsby-transformer-yaml`,
     {
       resolve: `gatsby-source-filesystem`,
@@ -37,18 +45,23 @@ module.exports = {
         path: `${__dirname}/src/content/theme`,
       },
     },
-    `gatsby-transformer-sharp`,
-    `gatsby-plugin-sharp`,
+    /* custom plugins */
+    {
+      resolve: `gatsby-source-monday`,
+      options: {
+        API_TOKEN: process.env.MONDAY_API_TOKEN,
+      }
+    },
+    `gatsby-transformer-monday`,
+    /* manifest */
     {
       resolve: `gatsby-plugin-manifest`,
       options: {
-        name: `gatsby-starter-default`,
-        short_name: `starter`,
+        name: `star-website`,
+        short_name: `star`,
         start_url: `/`,
-        background_color: `#663399`,
-        // This will impact how browsers show your PWA/website
-        // https://css-tricks.com/meta-theme-color-and-trickery/
-        // theme_color: `#663399`,
+        background_color: `#007abc`,
+        theme_color: `#007abc`,
         display: `minimal-ui`,
         icon: `src/images/favicon.png`, // This path is relative to the root of the site.
       },

gatsby-node.js

@@ -5,29 +5,7 @@ const { paramCase, pascalCase } = require('change-case')
 
 //
 
-const contentYamlDir = path.join(`src`, `pages`)
-const sectionYamlDir = path.join(`src`, `content`, `sections`)
-const contentImagesDir = path.join(`src`, `content`, `images`)
-const pageTemplate = require.resolve('./src/templates/page.js')
-
-// page yaml files
-const pageFilenames = [
-  `home.yaml`,
-  `students.yaml`,
-  `staff.yaml`,
-]
-
-/**
- * looks up section content by its id.
- *
- * @param      {string}   sectionId  The section id to lookup.
- * @returns    {object}   the section's YAML data as an object
- */
-function getSectionContent(sectionId) {
-    const sectionFile = fs.readFileSync(path.join(sectionYamlDir, `${ sectionId }.yaml`), 'utf8')
-    const content = yaml.load(sectionFile)
-    return content
-}
+const stackedPageTemplate = require.resolve('./src/templates/stacked-page.js')
 
 exports.createPages = async ({ actions, graphql, reporter }) => {
   const { createPage } = actions
@@ -36,7 +14,6 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
     allPagesYaml {
       nodes {
         path
-        sections
       }
     }
   }`)
@@ -46,7 +23,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
     // create page and pass section content in context
     createPage({
       path: node.path,
-      component: pageTemplate,
+      component: stackedPageTemplate,
       context: {
         pagePath: node.path,
       },
@@ -70,7 +47,7 @@ exports.createSchemaCustomization = ({ actions }) => {
       hero: Hero
       sections: [String!]!
     }
-    type Project {
+    type Student {
       student_name: String!
       student_photo: File! @link(by: "relativePath")
       project_description: String!
@@ -80,7 +57,7 @@ exports.createSchemaCustomization = ({ actions }) => {
       background_image: File! @link(by: "relativePath")
     }
     type SectionsYaml implements Node {
-      projects: [Project!]
+      students: [Student!]
       students_cta: CtaButton!
       staff_cta: CtaButton!
     }

gatsby-ssr.js

@@ -1,6 +1,15 @@
 import React from "react"
 import { Layout } from "./src/components/layout"
+import { CssVarsProvider } from '@mui/joy/styles';
+import theme from './src/styles/theme'
+import { PositionsProvider } from './src/components/positions'
 
 export const wrapPageElement = ({ element, props }) => {
-  return <Layout {...props}>{element}</Layout>
-}
+  return (
+    <CssVarsProvider theme={theme}>
+      <PositionsProvider>
+        <Layout {...props}>{element}</Layout>
+      </PositionsProvider>
+    </CssVarsProvider>
+  )
+}