fix stuff whew

content/3_Gold/1_Gold_DP.md

@@ -12,7 +12,6 @@ prerequisites:
      - Bit Operations (for Bitmask DP)
  -
      - DFS and Trees (for Tree DP)
----
 
 <div class="syllabus-only">
   An introduction into Dynamic Programming concepts needed (and not-so-needed but still useful) for USACO gold. 

gatsby-node.js

@@ -31,3 +31,13 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
     });
   });
 };
+
+exports.createSchemaCustomization = ({ actions }) => {
+  const { createTypes } = actions;
+  const typeDefs = `
+    type MarkdownRemarkFrontmatter implements Node {
+      prerequisites: [[String]]
+    }
+  `;
+  createTypes(typeDefs)
+};

src/components/SyllabusModule.js

@@ -1,6 +1,5 @@
 import React from "react";
 import { Link } from "gatsby";
-import Markdown from "./Markdown";
 
 const CompletedCheck = () => (<svg className="h-6 w-6 mr-2 text-green-500" fill="currentColor" viewBox="0 0 20 20">
   <path fillRule="evenodd"
@@ -30,7 +29,7 @@ const renderPrerequisite = (prerequisite) => {
       {link && <a href={link} className="text-blue-600">{prerequisite[0]}</a>}
       {!link && prerequisite[0]}
     </li>
-  )
+  );
 };
 
 const SyllabusModule = ({ title, children, author, problems, prerequisites, url }) => {
@@ -56,7 +55,7 @@ const SyllabusModule = ({ title, children, author, problems, prerequisites, url
 
         {problems&&(<>Problems:<ul className="ml-3 space-y-1 py-2">{problems.map(renderProblem)}</ul></>)}
 
-        {author&&<p className="mt-2">Author: {author}</p>}
+        {author&&<p className="mt-2 text-gray-500">Author: {author}</p>}
       </div>
       <Link to={url || "/"}
             className="block border-t border-gray-200 px-4 py-4 sm:px-6 text-blue-600 font-bold uppercase text-sm hover:bg-gray-50 transition duration-150">

src/templates/moduleTemplate.js

@@ -4,17 +4,55 @@ import Layout from "../components/layout";
 
 import Markdown from "../components/Markdown";
 
+const renderPrerequisite = (prerequisite) => {
+  const link = prerequisite.length > 1 ? prerequisite[1] : null;
+  return (
+    <li key={prerequisite[0]}>
+      {link && <a href={link} className="text-blue-600 underline">{prerequisite[0]}</a>}
+      {!link && prerequisite[0]}
+    </li>
+  );
+};
+
 export default function Template({
   data, // this prop will be injected by the GraphQL query below.
 }) {
   const { markdownRemark } = data; // data.markdownRemark holds your post data
   const { htmlAst } = markdownRemark;
+  const prereqs = markdownRemark.frontmatter.prerequisites;
+
   return (
     <Layout>
       <div className="max-w-4xl mx-auto my-8">
         <Link className="underline text-blue-600" to="/">&larr; Back to Home</Link>
-        <h1 className="text-3xl font-bold mb-4">{markdownRemark.frontmatter.title}</h1>
-        <p>Author: {markdownRemark.frontmatter.author}</p>
+        <h1 className="mt-8 text-3xl font-bold">{markdownRemark.frontmatter.title}</h1>
+        <p className={`${prereqs ? "mb-4" : "mb-8"} text-gray-500`}>Author: {markdownRemark.frontmatter.author}</p>
+
+
+        {prereqs &&
+        <div className="rounded-md bg-blue-50 p-4 mb-12">
+          <div className="flex">
+            <div className="flex-shrink-0">
+              <svg className="h-5 w-5 text-blue-400" fill="currentColor" viewBox="0 0 20 20">
+                <path fill-rule="evenodd"
+                      d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
+                      clip-rule="evenodd" />
+              </svg>
+            </div>
+            <div className="ml-3">
+              <h3 className="text-sm leading-5 font-medium text-blue-800">
+                Prerequisites
+              </h3>
+              <div className="mt-2 text-sm leading-5 text-blue-800">
+                <ul className="list-disc list-inside pl-3 space-y-1">
+                  {prereqs.map(renderPrerequisite)}
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>}
+
+
         <Markdown htmlAst={htmlAst} className="markdown--module" />
       </div>
     </Layout>
@@ -28,6 +66,7 @@ export const pageQuery = graphql`
         title
         author
         slug
+        prerequisites
       }
     }
   }