From 10b371816696de5a6d9e7783b7e1435f63fb00ff Mon Sep 17 00:00:00 2001
From: Monica Powell <monica@aboutmonica.com>
Date: Tue, 29 Sep 2020 20:19:24 -0400
Subject: [PATCH 1/3] generate speaker pages

---
 site/gatsby-node.js                | 47 ++++++++++++++++++++++++++++++
 site/src/templates/speaker-page.js | 24 +++++++++++++++
 2 files changed, 71 insertions(+)
 create mode 100644 site/gatsby-node.js
 create mode 100644 site/src/templates/speaker-page.js

diff --git a/site/gatsby-node.js b/site/gatsby-node.js
new file mode 100644
index 0000000..ccc2ded
--- /dev/null
+++ b/site/gatsby-node.js
@@ -0,0 +1,47 @@
+const { createFilePath } = require(`gatsby-source-filesystem`);
+
+const path = require(`path`);
+
+exports.onCreateNode = ({ node, getNode, actions }) => {
+  const { createNodeField } = actions;
+  if (node.internal.type === `SpeakersYaml`) {
+    const slug = createFilePath({ node, getNode, basePath: `speaker` });
+
+    createNodeField({
+      node,
+      name: `slug`,
+      value: `speaker/${node.name
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/(^-|-$)+/g, "")}`,
+    });
+  }
+};
+
+exports.createPages = async ({ graphql, actions }) => {
+  const { createPage } = actions;
+  const result = await graphql(`
+    query {
+      allSpeakersYaml {
+        edges {
+          node {
+            fields {
+              slug
+            }
+          }
+        }
+      }
+    }
+  `);
+  result.data.allSpeakersYaml.edges.forEach(({ node }) => {
+    createPage({
+      path: node.fields.slug,
+      component: path.resolve(`./src/templates/speaker-page.js`),
+      context: {
+        // Data passed to context is available
+        // in page queries as GraphQL variables.
+        slug: node.fields.slug,
+      },
+    });
+  });
+};
diff --git a/site/src/templates/speaker-page.js b/site/src/templates/speaker-page.js
new file mode 100644
index 0000000..820d45d
--- /dev/null
+++ b/site/src/templates/speaker-page.js
@@ -0,0 +1,24 @@
+import React from "react";
+import { graphql } from "gatsby";
+import Layout from "../components/layout";
+
+export default function SpeakerPage({ data }) {
+  const speaker = data.speakersYaml;
+  return (
+    <Layout>
+      <div>
+        <h1>{speaker.title}</h1>
+        <div dangerouslySetInnerHTML={{ __html: speaker.name }} />
+      </div>
+    </Layout>
+  );
+}
+
+export const query = graphql`
+  query($slug: String!) {
+    speakersYaml(fields: { slug: { eq: $slug } }) {
+      name
+      title
+    }
+  }
+`;

From a7123c4fba56a4db92297439c296038a69b23234 Mon Sep 17 00:00:00 2001
From: Monica Powell <monica@aboutmonica.com>
Date: Tue, 29 Sep 2020 20:26:47 -0400
Subject: [PATCH 2/3] add comments to gatsby-node

---
 site/gatsby-node.js | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/site/gatsby-node.js b/site/gatsby-node.js
index ccc2ded..7f88d3a 100644
--- a/site/gatsby-node.js
+++ b/site/gatsby-node.js
@@ -2,11 +2,14 @@ const { createFilePath } = require(`gatsby-source-filesystem`);
 
 const path = require(`path`);
 
+// onCreateNode is called when a node is created
+// this API allows us to modify nodes during the creation process
 exports.onCreateNode = ({ node, getNode, actions }) => {
   const { createNodeField } = actions;
-  if (node.internal.type === `SpeakersYaml`) {
-    const slug = createFilePath({ node, getNode, basePath: `speaker` });
 
+  // we only care about the SpeakersYaml node type where our speaker data is defined
+  if (node.internal.type === `SpeakersYaml`) {
+    // let's add a new field to the node for the slug
     createNodeField({
       node,
       name: `slug`,
@@ -18,8 +21,10 @@ exports.onCreateNode = ({ node, getNode, actions }) => {
   }
 };
 
+// createPages lets us programmatically create pages
 exports.createPages = async ({ graphql, actions }) => {
   const { createPage } = actions;
+  // lets query to get back all of the slugs that we generated for speaker data
   const result = await graphql(`
     query {
       allSpeakersYaml {
@@ -33,6 +38,10 @@ exports.createPages = async ({ graphql, actions }) => {
       }
     }
   `);
+  // for each speaker that was returned from the above graphql query
+  // let's create a new page at it's slug using the speaker-page component
+  // the speaker page component has a query that relies on the slug being passed in,
+  // we'll pass in the slug via the context parameter in createPage
   result.data.allSpeakersYaml.edges.forEach(({ node }) => {
     createPage({
       path: node.fields.slug,

From 1daa710fd1e3ccd29c269537be64217fb67d5941 Mon Sep 17 00:00:00 2001
From: Monica Powell <github@aboutmonica.com>
Date: Sun, 4 Oct 2020 16:03:14 -0400
Subject: [PATCH 3/3] Update speaker-page.js

---
 site/src/templates/speaker-page.js | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/site/src/templates/speaker-page.js b/site/src/templates/speaker-page.js
index 820d45d..61bff0f 100644
--- a/site/src/templates/speaker-page.js
+++ b/site/src/templates/speaker-page.js
@@ -6,10 +6,14 @@ export default function SpeakerPage({ data }) {
   const speaker = data.speakersYaml;
   return (
     <Layout>
-      <div>
-        <h1>{speaker.title}</h1>
-        <div dangerouslySetInnerHTML={{ __html: speaker.name }} />
-      </div>
+     <div>
+        <h1 className="text-5xl font-extrabold text-blue-500 tracking-tight font-inter p-4">
+          {speaker.title}
+        </h1>
+        <h2 className="text-4xl font-extrabold  tracking-tight font-inter p-4">
+          with {speaker.name}
+        </h2>
+     </div>
     </Layout>
   );
 }