M0nica · M0nica · Sep 28, 2020 · Sep 29, 2020 · Sep 29, 2020 · Sep 30, 2020
diff --git a/pull_request_template.md b/pull_request_template.md
@@ -1,11 +1,13 @@
 **Description**
+
 <!--- Customize the site footer to render your conference title from siteMetadata instead of the hard-coded value of SketchXConf 2020 -->
 
-**Related Exercise:** 
+**Related Exercise:**
 
 - https://github.com/M0nica/gatsby-workshop/blob/main/site/INSTRUCTIONS/XX_instructions.md
 
 **Approach:**
+
 <!---  add static query to footer -->
 
 **Files Changed:**

diff --git a/site/INSTRUCTIONS/03_instructions.md b/site/INSTRUCTIONS/03_instructions.md
@@ -1,8 +1,11 @@
 # 03 • Create a new page in Gatsby
+
 ## Background 📚
-Gatsby automagically turns Reacts component defined in `src/pages/*`into pages. The page will be created based on the default export in the file. For example you can look at the starter code and see that the component defined in `src/pages/index.js` is used to generate the site’s index.html file. 
-
+
+Gatsby automagically turns Reacts component defined in `src/pages/*`into pages. The page will be created based on the default export in the file. For example you can look at the starter code and see that the component defined in `src/pages/index.js` is used to generate the site’s index.html file.
+
 ## Exercise 🤓
+
 1. Create a new file `tickets.js` in `src/pages` and copy and paste the below starter code
 2. Go to http://localhost:8000/tickets to view the base tickets page
 3. Update the ticket page to dynamically replace placeholder conference with then name of the conference from the `gatsby-config` file. 
@@ -11,47 +14,48 @@ Gatsby automagically turns Reacts component defined in `src/pages/*`into pages.
 ![screenshot of ticket page with ticket information](./images/exercise-3-add-tickets-page.png)
 
 ## Starter Code for tickets.js
- 
- ```
+
+```
 import React from "react";
 import { useStaticQuery, graphql } from "gatsby";
- 
+
 import Layout from "../components/layout";
 import SEO from "../components/seo";
 const Ticket = ({ title = "placeholder conference" }) => (
- <div className="text-center ">
-   <h1 className="text-5xl font-extrabold text-blue-500 leading-9 tracking-tight">
-     Grab Your Ticket To {title}
-   </h1>
-   <br />
-   <div className="flex flex-col">
-     <div className="bg-gray-300 rounded-lg m-2 p-2 h-30 align-middle hover:bg-purple-200 ">
-       <h2>Full Pass</h2>
-       <p className="text-3xl">$20</p>
-     </div>
-     <div className="bg-gray-300 rounded-lg m-2 p-2 h-30 align-middle hover:bg-purple-200 ">
-       <div>
-         <h2>VIP Pass</h2>
-         <p className="text-3xl">$45</p>
-       </div>
-     </div>
-   </div>
- </div>
+<div className="text-center ">
+  <h1 className="text-5xl font-extrabold text-blue-500 leading-9 tracking-tight">
+    Grab Your Ticket To {title}
+  </h1>
+  <br />
+  <div className="flex flex-col">
+    <div className="bg-gray-300 rounded-lg m-2 p-2 h-30 align-middle hover:bg-purple-200 ">
+      <h2>Full Pass</h2>
+      <p className="text-3xl">$20</p>
+    </div>
+    <div className="bg-gray-300 rounded-lg m-2 p-2 h-30 align-middle hover:bg-purple-200 ">
+      <div>
+        <h2>VIP Pass</h2>
+        <p className="text-3xl">$45</p>
+      </div>
+    </div>
+  </div>
+</div>
+);
+
+function TicketsPage() {
+return (
+  <Layout>
+    <SEO title="Tickets" keywords={[`Tickets`]} />
+    <Ticket />
+  </Layout>
 );
-
-function TicketsPage() { 
- return (
-   <Layout>
-     <SEO title="Tickets" keywords={[`Tickets`]} />
-     <Ticket />
-   </Layout>
- );
 }
- 
+
 export default TicketsPage;
-``` 
- 
+```
+
 ## Files 🗂
+
 - src/pages/👀
 
 ## Extra Credit 💯

diff --git a/site/INSTRUCTIONS/05_instructions.md b/site/INSTRUCTIONS/05_instructions.md
@@ -1,8 +1,11 @@
 # 05 • Add site-wide banner
+
 ## Background 📚
-A convention in React applications that have shared layouts across different pages is to have a Layout component that is imported into other Page level components and wrap their contents. The Layout component can be used to render elements like a header, navigation, footer, sidebar, etc. In particular the Layout component uses the `children` property from props to render all of the content within the component that is using the Layout component. You can read more about various approaches to creating Layout components in the Gatsby documentation: https://www.gatsbyjs.com/docs/layout-components/ 
-
-A sample Layout component: 
+
+A convention in React applications that have shared layouts across different pages is to have a Layout component that is imported into other Page level components and wrap their contents. The Layout component can be used to render elements like a header, navigation, footer, sidebar, etc. In particular the Layout component uses the `children` property from props to render all of the content within the component that is using the Layout component. You can read more about various approaches to creating Layout components in the Gatsby documentation: https://www.gatsbyjs.com/docs/layout-components/
+
+A sample Layout component:
+
 ```
 import React from "react";
 import Header from "./header";
@@ -20,8 +23,8 @@ function Layout({ children }) {
 }
 export default Layout;
 ```
- 
-A sample component for a 404 page component that uses the above Layout component to add a Header and Footer to around an `H2` message.  
+
+A sample component for a 404 page component that uses the above Layout component to add a Header and Footer to around an `H2` message.
 
 ```
 import React from "react";
@@ -37,22 +40,25 @@ function NotFoundPage() {
    </Layout>
  );
 }
- 
+
 export default NotFoundPage;
 ```
- 
+
 ## Exercise 🤓
-- Update the Header to add a site-wide banner announcing tickets are available to the top of every page. 
-- Update the banner component so that it has a performant Link to the tickets page. 
-- The banner should also dynamically pull in the name of the conference from the site configuration in the gatsby-config 
+
+- Update the Header to add a site-wide banner announcing tickets are available to the top of every page.
+- Update the banner component so that it has a performant Link to the tickets page.
+- The banner should also dynamically pull in the name of the conference from the site configuration in the gatsby-config
 
 ## Preview of Finished Exercise:
 ![screenshot of site with banner at the top advertising that tickets are on sale](./images/exercise-5-add-sitewide-banner.png )
 
 ## Starter Code
-- There’s a pre-made Banner component you can use in src/components/banner.js for this exercise. 
-
+
+- There’s a pre-made Banner component you can use in src/components/banner.js for this exercise.
+
 ## Files 🗂
+
 - src/components/header.js
 - src/components/banner.js
 

diff --git a/site/INSTRUCTIONS/06_instructions.md b/site/INSTRUCTIONS/06_instructions.md
@@ -1,27 +1,28 @@
 # 06 • Adding Speaker/Talk Data Type
+
 ## Background 📚
-The Gatsby ecosystem involves a wide variety of plugins that help support the core functionality of Gatsby sites as well as provide additional enhancements. A popular Gatsby plugin is the gatsby-source-file-system plugin (https://www.gatsbyjs.com/plugins/gatsby-source-filesystem/) which enables you to add local data to the site’s internal GraphQL API. 
-
+
+The Gatsby ecosystem involves a wide variety of plugins that help support the core functionality of Gatsby sites as well as provide additional enhancements. A popular Gatsby plugin is the gatsby-source-file-system plugin (https://www.gatsbyjs.com/plugins/gatsby-source-filesystem/) which enables you to add local data to the site’s internal GraphQL API.
+
 > The plugin creates File nodes from files. The various “transformer” plugins can transform File nodes into various other types of data e.g. gatsby-transformer-json transforms JSON files into JSON data nodes and gatsby-transformer-remark transforms markdown files into MarkdownRemark nodes from which you can query an HTML representation of the markdown.
-In order to use the `gatsby-source-filesystem` plugin once it is installed as a project dependency you will need to update the `gatsby-config.js` file to use the plugin. This is the same file where we configured the site meta data earlier. In addition to the `siteMetaData` key of the config object is an array named `plugins` which is where Gatsby plugins are generally installed.
-In our case in addition to using the gatsby-source-filesystem plugin we should use the gatsby-transformer-yaml function to parse data from YAML files. Below is an example of a `gatsby-config.js` where the plugins has the gatsby-source-filesystem configured to add the data that lives in the `data` directory to its GraphQL API. 
-
-
+> In order to use the `gatsby-source-filesystem` plugin once it is installed as a project dependency you will need to update the `gatsby-config.js` file to use the plugin. This is the same file where we configured the site meta data earlier. In addition to the `siteMetaData` key of the config object is an array named `plugins` which is where Gatsby plugins are generally installed.
+> In our case in addition to using the gatsby-source-filesystem plugin we should use the gatsby-transformer-yaml function to parse data from YAML files. Below is an example of a `gatsby-config.js` where the plugins has the gatsby-source-filesystem configured to add the data that lives in the `data` directory to its GraphQL API.
+
 ```module.exports = () => ({
- 
+
  siteMetadata: {
- 
+
    title: `Gatsby`,
- 
+
    siteUrl: `https://www.gatsbyjs.org`,
- 
+
    description: `Blazing fast modern site generator for React`,
- 
+
    longDescription: `Blazing fast modern site generator for React`
- 
+
  },
- 
- plugins: [ 
+
+ plugins: [
 `gatsby-transformer-yaml`,
    {
      resolve: `gatsby-source-filesystem`,
@@ -32,17 +33,18 @@ In our case in addition to using the gatsby-source-filesystem plugin we should u
  ]
 });
 ```
-
-
+
 ## Exercise 🤓
-Add a new data type for conference speakers. Hint: You will need to configure `gatsby-transformer-yaml` and `gatsby-source-filesystem` in the `gatsby-config` file. 
+
+Add a new data type for conference speakers. Hint: You will need to configure `gatsby-transformer-yaml` and `gatsby-source-filesystem` in the `gatsby-config` file.
 
 ## Files 🗂
+
 - site/gatsby-config.js
 
 For the path of the data you can use the pre-existing conference speaker data which lives in `site/src/data`
- 
-If you successfully added the speaker data to the GraphQL API then you can run: 
+
+If you successfully added the speaker data to the GraphQL API then you can run:
 
 ```
 query FetchSpeakers {
@@ -58,37 +60,37 @@ query FetchSpeakers {
 	}
   }
 }
- 
+
 ```
 
-  in the [GraphQL Playground](http://localhost:8000/___graphql?query=query%20FetchSpeakers%20%7B%0A%20%20allSpeakersYaml%20%7B%0A%20%20%20%20edges%20%7B%0A%20%20%20%20%20%20node%20%7B%0A%20%20%20%20%20%20%20%20id%0A%20%20%20%20%20%20%20%20avatar%0A%20%20%20%20%20%20%20%20name%0A%20%20%20%20%20%20%20%20title%0A%20%20%20%20%20%20%20%20time%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A&operationName=FetchSpeakers) and have it return something that looks like: 
-
-  ```
-  {
-  "data": {
-    "allSpeakersYaml": {
-      "edges": [
-        {
-          "node": {
-            "id": "d1251971-3091-5906-a241-e66474a66273",
-            "avatar": "woman-generated-avatar-1.png",
-            "name": "Angela Toad",
-            "title": "Introduction to Sketching Animals",
-            "time": "12:00"
-          }
-        },
-        {
-          "node": {
-            "id": "79791060-9578-5381-b772-4678f8e833f6",
-            "avatar": "man-generated-avatar-1.png",
-            "name": "Larry Foam",
-            "title": "Getting Started with Sketchnoting",
-            "time": "10:00"
-          }
+in the [GraphQL Playground](http://localhost:8000/___graphql?query=query%20FetchSpeakers%20%7B%0A%20%20allSpeakersYaml%20%7B%0A%20%20%20%20edges%20%7B%0A%20%20%20%20%20%20node%20%7B%0A%20%20%20%20%20%20%20%20id%0A%20%20%20%20%20%20%20%20avatar%0A%20%20%20%20%20%20%20%20name%0A%20%20%20%20%20%20%20%20title%0A%20%20%20%20%20%20%20%20time%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A&operationName=FetchSpeakers) and have it return something that looks like:
+
+```
+{
+"data": {
+  "allSpeakersYaml": {
+    "edges": [
+      {
+        "node": {
+          "id": "d1251971-3091-5906-a241-e66474a66273",
+          "avatar": "woman-generated-avatar-1.png",
+          "name": "Angela Toad",
+          "title": "Introduction to Sketching Animals",
+          "time": "12:00"
         }
-      ]
-    }
-  },
+      },
+      {
+        "node": {
+          "id": "79791060-9578-5381-b772-4678f8e833f6",
+          "avatar": "man-generated-avatar-1.png",
+          "name": "Larry Foam",
+          "title": "Getting Started with Sketchnoting",
+          "time": "10:00"
+        }
+      }
+    ]
+  }
+},
 }
 ```
 

diff --git a/site/src/components/header.js b/site/src/components/header.js
@@ -5,7 +5,10 @@ import Logo from "../images/pencil-icon.png";
 
 function Header({ siteTitle }) {
   const [isExpanded, toggleExpansion] = useState(false);
-  const NavLinks = [{ href: "/", name: "Home" }];
+  const NavLinks = [
+    { href: "/", name: "Home" },
+    { href: "/tickets", name: "Tickets" },
+  ];
 
   return (
     <nav className="bg-white">