refactor events with template and Gatsby data layer

gatsby-config.js

@@ -1,12 +1,12 @@
 module.exports = {
   siteMetadata: {
-    title: `Gatsby Default Starter`,
-    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
-    author: `@gatsbyjs`,
+    title: `Cross Year Website`,
+    description: `Cross Year Website for VandyHacks, with information about the org, our events and more!`,
+    author: `Dmitry Semenov, Ashwin Kumar, Xue Zou, Sam Lee`,
   },
   plugins: [
     {
-      resolve: 'gatsby-plugin-react-svg',
+      resolve: "gatsby-plugin-react-svg",
       options: {
         rule: {
           include: /assets/, // See below to configure properly
@@ -23,16 +23,17 @@ module.exports = {
       },
     },
     `gatsby-transformer-sharp`,
+    `gatsby-transformer-json`,
     `gatsby-plugin-sharp`,
     `gatsby-plugin-css-literal-loader`,
-    'gatsby-plugin-scss-typescript',
+    `gatsby-plugin-scss-typescript`,
     {
-      resolve: 'gatsby-plugin-astroturf',
+      resolve: "gatsby-plugin-astroturf",
       // defaults:
       options: {
-        tagName: 'css',
-        styledTag: 'styled',
-        extension: '.module.css',
+        tagName: "css",
+        styledTag: "styled",
+        extension: ".module.css",
       },
     },
     {
@@ -47,6 +48,13 @@ module.exports = {
         icon: `src/images/Big_VH_Logo.png`, // This path is relative to the root of the site.
       },
     },
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `src`,
+        path: `${__dirname}/src/`,
+      },
+    },
     // this (optional) plugin enables Progressive Web App + Offline functionality
     // To learn more, visit: https://gatsby.dev/offline
     // `gatsby-plugin-offline`,

gatsby-node.js

@@ -4,4 +4,46 @@
  * See: https://www.gatsbyjs.org/docs/node-apis/
  */
 
+const { node } = require("prop-types");
+const path = require(`path`);
+
 // You can delete this file if you're not using it
+
+exports.onCreateNode = ({ node, getNode, actions }) => {
+  const { createNodeField } = actions;
+  if (node.internal.type === "EventsJson") {
+    const slug = `events/${node.Year}`;
+    createNodeField({
+      node,
+      name: "slug",
+      value: slug,
+    });
+  }
+};
+
+exports.createPages = async ({ graphql, actions }) => {
+  const { createPage } = actions;
+  const result = await graphql(`
+    query {
+      allEventsJson {
+        edges {
+          node {
+            fields {
+              slug
+            }
+          }
+        }
+      }
+    }
+  `);
+
+  result.data.allEventsJson.edges.forEach(({ node }) => {
+    createPage({
+      path: node.fields.slug,
+      component: path.resolve(`./src/templates/year.tsx`),
+      context: {
+        slug: node.fields.slug,
+      },
+    });
+  });
+};

src/components/events/EventBox.tsx

@@ -1,10 +1,10 @@
 import React from "react"
+import { useStaticQuery, graphql } from "gatsby"
 import './panel.scss'
 import styled from "astroturf";
-import totalevents from './events.json';
 
 // TODO: stupid but need to wrap in grid otherwise breaks on iOS
-const ANecessaryEvil = styled("section")`
+const iOSGrid = styled("section")`
   display: grid;
   grid-template-columns: 100vw;
   color: #ffffff;
@@ -20,19 +20,43 @@ const T1BG = styled('div')`
   background-position: center center;
   transition: filter 0.5s ease;  
 `
+
+interface eventPreviewData {
+  allEventsJson: {
+      nodes: {
+        Year: string,
+        Information: {
+          Title: string
+        }[]
+      }[]
+  }
+}
 export const EventsBox: React.FC<{}> = () => {
+        const data = useStaticQuery(
+       graphql`
+        query {
+          allEventsJson {
+            nodes {
+              Year
+              Information {
+                Title
+              }
+            }
+          }
+      }`
+     )
+     const info = data.allEventsJson.nodes;
+     const allYears = info.map((year) => {
 
-    const allYears = totalevents.map((year) => {
-
       const eventsThisYear = year.Information.map((event) => {
         return(
-        <a className="text-container" href={"/years/".concat(year.Year).concat('/#').concat(event.Title)}>
+        <a className="text-container" key={event.Title} href={"/events/".concat(year.Year).concat('/#').concat(event.Title)}>
           <p className="text-container-text">{`▶ ${event.Title}`}</p>
         </a>);
       });
 
       return (
-        <div className="tl-item">
+        <div className="tl-item" key="tl-item">
           <T1BG className={`TLBG${year.Year}`}/>
           <div className="year">
             <p>{year.Year}</p>
@@ -45,10 +69,11 @@ export const EventsBox: React.FC<{}> = () => {
     })
 
     return (
-      <ANecessaryEvil>
+      <iOSGrid>
         <section id="timeline">
           {allYears}
         </section>
-      </ANecessaryEvil>
+      </iOSGrid>
     );
-};
+};
+

src/pages/about.tsx

@@ -1,5 +1,4 @@
 import React from "react"
-import styled from "astroturf";
 
 import {MissionStatement} from "../components/about/MissionStatement"
 import {Members} from "../components/about/Members"

src/templates/year.tsx

@@ -0,0 +1,58 @@
+import React from "react"
+import { graphql } from "gatsby"
+import {PageLinks} from "../components/PageLinks";
+import {Footer} from "../components/Footer";
+import "../components/events/events.scss"
+
+interface eventsProps {
+    data: {
+        eventsJson: {
+            Information: {
+                Description: string,
+                Image: string, 
+                Title: string
+            }[],
+            BackgroundColor: string
+        }
+    }
+}
+
+const events2020: React.FC<eventsProps> = ({ data }) => {
+    const info = data.eventsJson.Information;
+    const bg = data.eventsJson.BackgroundColor;
+    const timelineItems = info.map((item) => (
+        <div className="timeline-item" data-text={item.Title} key={item.Title}>
+            {/* TODO: Kinda dumb but you need to have a bit of the string static or else Webkit starts to complain */}
+            <div className="timeline__content"><img className="timeline__img" src={require(`../images/${item.Image}`)}/>
+                <p className="timeline__content-desc">{item.Description}</p>
+            </div>
+        </div>
+    ));
+    return(
+        <body style={{backgroundImage: "None", backgroundColor: bg}}>
+            <div className="timeline-header">
+                <PageLinks />
+                <div className="timeline-container" style={{backgroundColor: `${bg}`}}>
+                    <div className="timeline">
+                        {timelineItems}
+                    </div>
+                </div>
+                <Footer />
+            </div>
+        </body>
+    );
+};
+
+export const query = graphql`
+  query($slug: String!) {
+    eventsJson(fields: { slug: { eq: $slug } }) {
+        BackgroundColor
+    Information {
+      Description
+      Image
+      Title
+    }
+  }
+}`
+
+export default events2020;