From 4246c9ec2094ae2cf7ff0ad12fc8c7d3e8d795bb Mon Sep 17 00:00:00 2001 From: Nathan Wang Date: Tue, 16 Jun 2020 18:39:47 -0700 Subject: [PATCH] clean up some code --- content/ordering.js | 11 ++- gatsby-node.esm.js | 109 ++++++----------------- src/components/{layout.js => layout.tsx} | 2 +- src/pages/index.tsx | 3 + src/templates/syllabusTemplate.js | 69 +++++--------- 5 files changed, 63 insertions(+), 131 deletions(-) rename src/components/{layout.js => layout.tsx} (78%) diff --git a/content/ordering.js b/content/ordering.js index e7c0cdb..4dfaecc 100644 --- a/content/ordering.js +++ b/content/ordering.js @@ -107,4 +107,13 @@ const ModuleOrdering = { ] }; -export default ModuleOrdering; \ No newline at end of file +export default ModuleOrdering; +export const divisions = Object.keys(ModuleOrdering); +export const divisionLabels = { + "intro": "Intro", + "general": "General", + "bronze": "Bronze", + "silver": "Silver", + "gold": "Gold", + "plat": "Platinum", +}; \ No newline at end of file diff --git a/gatsby-node.esm.js b/gatsby-node.esm.js index 3b43344..d1d98b5 100644 --- a/gatsby-node.esm.js +++ b/gatsby-node.esm.js @@ -1,103 +1,44 @@ import { getModule } from "./src/utils"; +import ModuleOrdering, { divisions } from "./content/ordering"; exports.createPages = async ({ actions, graphql, reporter }) => { const { createPage } = actions; + + // Generate Module Pages // const moduleTemplate = require.resolve(`./src/templates/moduleTemplate.js`); - const result = await graphql(` - { - allMarkdownRemark { - edges { - node { - frontmatter { - id - } - } - } - } - } - `); - // Handle errors - if (result.errors) { - reporter.panicOnBuild(`Error while running GraphQL query.`); - return; - } - - const allModules = result.data.allMarkdownRemark.edges.reduce((acc, cur) => { - acc[cur.node.frontmatter.id] = cur.node; - return acc; - }, {}); - const divisions = ["intro", "general", "bronze", "silver", "gold", "plat"]; - - divisions.forEach(d => getModule(allModules, d).forEach((node) => { - // todo spaghetti code - if (node.hasOwnProperty("items")) { - node.items.forEach(n => { + Object.keys(ModuleOrdering).forEach(division => { + const processItem = item => { + if (typeof item === "object") { + // this is a nested module + item.items.forEach(x => processItem(x)); + } else { createPage({ - path: `/${d}/${n.frontmatter.id}`, + path: `/${division}/${item}`, component: moduleTemplate, context: { // additional data can be passed via context - id: n.frontmatter.id, - division: d, + id: item, + division: division, }, }); - }); - return; - } + } + }; + ModuleOrdering[division].forEach(item => processItem(item)); + }); + // End Generate Module Pages // + + // Generate Syllabus Pages // + const syllabusTemplate = require.resolve(`./src/templates/syllabusTemplate.js`); + divisions.forEach(division => { createPage({ - path: `/${d}/${node.frontmatter.id}`, - component: moduleTemplate, + path: `/${division}`, + component: syllabusTemplate, context: { - // additional data can be passed via context - id: node.frontmatter.id, - division: d, + division: division }, }); - })); - - const syllabusTemplate = require.resolve(`./src/templates/syllabusTemplate.js`); - createPage({ - path: "/intro", - component: syllabusTemplate, - context: { - division: 0 - }, - }); - createPage({ - path: "/general", - component: syllabusTemplate, - context: { - division: 1 - }, - }); - createPage({ - path: "/bronze", - component: syllabusTemplate, - context: { - division: 2 - }, - }); - createPage({ - path: "/silver", - component: syllabusTemplate, - context: { - division: 3 - }, - }); - createPage({ - path: "/gold", - component: syllabusTemplate, - context: { - division: 4 - }, - }); - createPage({ - path: "/plat", - component: syllabusTemplate, - context: { - division: 5 - }, }); + // End Generate Syllabus Pages // }; exports.createSchemaCustomization = ({ actions }) => { diff --git a/src/components/layout.js b/src/components/layout.tsx similarity index 78% rename from src/components/layout.js rename to src/components/layout.tsx index 4f76277..f1ba08b 100644 --- a/src/components/layout.js +++ b/src/components/layout.tsx @@ -1,4 +1,4 @@ -import React from "react" +import * as React from "react" const Layout = ({ children }) => { return ( diff --git a/src/pages/index.tsx b/src/pages/index.tsx index b0f5c4d..0b13c67 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,10 +1,13 @@ import * as React from "react"; import {Link, PageProps} from "gatsby"; import Layout from "../components/layout"; +import SEO from "../components/seo"; export default function IndexPage(props: PageProps) { return ( + + {/* Begin Hero */}
diff --git a/src/templates/syllabusTemplate.js b/src/templates/syllabusTemplate.js index 15803ca..a299b67 100644 --- a/src/templates/syllabusTemplate.js +++ b/src/templates/syllabusTemplate.js @@ -5,7 +5,7 @@ import SEO from "../components/seo" import SyllabusModule from "../components/SyllabusModule"; import { graphql, Link } from "gatsby"; import Markdown from "../components/Markdown"; -import ModuleOrdering from "../../content/ordering"; +import ModuleOrdering, { divisionLabels, divisions } from "../../content/ordering"; import { getModule } from "../utils"; const renderModule = (node, idx, parentIdx = -1) => { @@ -39,12 +39,16 @@ export default function Template(props) { }, {}); const [selectedDivision, setSelectedDivision] = React.useState(props.pageContext.division); - const divisions = ["intro", "general", "bronze", "silver", "gold", "plat"]; - const colors = ["blue", "pink", "orange", "teal", "yellow", "purple"]; + const colors = { + "intro": "blue", + "general": "pink", + "bronze": "orange", + "silver": "teal", + "gold": "yellow", + "plat": "purple" + }; const color = colors[selectedDivision]; - // const module = modules[selectedDivision]; - // console.log(module); - const module = getModule(allModules, divisions[selectedDivision]); + const module = getModule(allModules, selectedDivision); // for purgecss, we have to list all the classes that are dynamically generated... /* @@ -68,7 +72,7 @@ export default function Template(props) { const handleDivisionChange = d => { setSelectedDivision(d); - window.history.pushState(null, "", `/${divisions[d]}/`); + window.history.pushState(null, "", `/${d}/`); }; return ( @@ -117,7 +121,7 @@ export default function Template(props) {
- Learn More + About This Guide
@@ -133,49 +137,24 @@ export default function Template(props) {