feat: add TableOfContents component to blog post template

blog/how-to-run-a-speedback/index.mdx

@@ -14,9 +14,7 @@ A **360˚ speedback** is a type of meeting used for quickly sharing 1:1 feedback
 In this post, you'll learn how to prepare for and facilitate your first speedback.
 
 
-## How it works
-
-### Before the meeting:
+## Before the meeting
 
 1. Teammates share their individual **goals** for what they want feedback on.
 
@@ -41,7 +39,7 @@ In this post, you'll learn how to prepare for and facilitate your first speedbac
 3. The speedback facilitator creates the **meeting invite**.
     - The total meeting duration should be 7 minutes times the number of pair rotations. (So if your team has 5 rounds of pair rotations, the meeting should be 35 minutes long.)
 
-### During the meeting:
+## During the meeting
 
 Complete as many rounds as it takes to get through all the pair rotations.
 
@@ -90,7 +88,7 @@ Here are some resources with tips on how to give and receive feedback gracefully
 
 Once the group makes it through all the pair rotations, you're done! 🥳
 
-### After the meeting:
+## After the meeting
 
 1. The facilitator schedules the next speedback! (I've found that having one speedback every 4-6 weeks is a good cadence. It's frequent enough to check in regularly, and spaced out enough to leave time to make meaningful progress.)
 
@@ -118,7 +116,7 @@ If something feels off about a suggestion, you don't *have* to address it. It's
 
 These instructions will help the facilitator create the list of pair rotations for the speedback.
 
-### If you have an **odd** number of participants:
+### If you have an **odd** number of participants
 
 1. For the first round, write everyone's names in two rows. Each column represents a pair who will be matched up for that round. There should be one empty space left in one of the rooms.
 
@@ -161,7 +159,7 @@ Once more, all the names rotate one position clockwise. In round 5:
 
 </Collapsible>
 
-### If you have an **even** number of participants:
+### If you have an **even** number of participants
 
 The process for assigning pairs is similar, with one difference: After step 1, choose one person to stay in the same position for every round. Then rotate everyone else using the same process as before.
 

gatsby-browser.js

@@ -1,9 +1,24 @@
 exports.onRouteUpdate = ({location, prevLocation}) => {
-  if (prevLocation) {
+  // if you got to the current page from a different page on this site
+  //  (and not from clicking a link in the table of contents),
+  //  move focus to the route heading link next to the h1
+  if (prevLocation && prevLocation.pathname != location.pathname) {
     const skipLink = document.querySelector("#skip-link")
 
     if (skipLink) {
       skipLink.focus()
     }
   }
+
+  // if current location has a hash (for heading id), move focus to
+  //  the link for that heading
+  //  e.g. http://localhost:8000/blog/post/#heading
+  if (location.hash !== "") {
+    const headingIdWithoutHash = location.hash.slice(1)
+    const headingElement = document.querySelector(`[id="${headingIdWithoutHash}"] a`)
+
+    if (headingElement) {
+      headingElement.focus()
+    }
+  }
 }

package.json

@@ -18,7 +18,7 @@
     "gatsby-plugin-feed": "^5.2.0",
     "gatsby-plugin-google-gtag": "^5.2.0",
     "gatsby-plugin-image": "^3.2.0",
-    "gatsby-plugin-mdx": "^5.2.0",
+    "gatsby-plugin-mdx": "^5.8.0",
     "gatsby-plugin-netlify": "^5.1.0",
     "gatsby-plugin-react-helmet": "^6.2.0",
     "gatsby-plugin-sharp": "^5.2.0",

src/components/callout-box/index.js

@@ -1,9 +1,25 @@
 import React from 'react'
-import { container as containerStyles } from './styles.module.css'
+import {
+  container as containerStyles,
+  blue as blueStyles,
+  orange as orangeStyles,
+} from './styles.module.css'
+
+const CalloutBox = ({ children, color = "blue" }) => {
+  let colorClassName;
+  switch (color) {
+    case "blue":
+      colorClassName = blueStyles
+      break
+    case "orange":
+      colorClassName = orangeStyles
+      break
+    default:
+      colorClassName = blueStyles
+  }
 
-const CalloutBox = ({ children }) => {
   return (
-    <aside className={containerStyles}>
+    <aside className={`${containerStyles} ${colorClassName}`}>
       {children}
     </aside>
   )

src/components/callout-box/styles.module.css

@@ -1,7 +1,5 @@
 .container {
-  background-color: var(--light-blue);
   padding: 1rem;
-  border-left: 0.5rem solid var(--blue);
   margin: 1rem 3rem;
   overflow-wrap: break-word;
 }
@@ -19,3 +17,13 @@
 .container :last-child {
   margin-bottom: 0rem;
 }
+
+.blue {
+  background-color: var(--light-blue);
+  border-left: 0.5rem solid var(--blue);
+}
+
+.orange {
+  background-color: var(--light-orange);
+  border-left: 0.5rem solid var(--orange);
+}

src/components/header/components/nav-bar/index.js

@@ -7,7 +7,7 @@ import {
 } from "./styles.module.css"
 
 const NavBar = () => (
-  <nav id="navigation">
+  <nav id="navigation" aria-label="Main Menu">
     <ul className={navBarStyles}>
       <li>
         <Link to="/" activeClassName={activeLinkStyles}>

src/components/table-of-contents/__snapshots__/index.test.js.snap

@@ -0,0 +1,183 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TableOfContents component renders nested links in the correct DOM structure 1`] = `
+<ul>
+  <li
+    class="link"
+  >
+    <a
+      href="/#introduction"
+    >
+      Introduction
+    </a>
+  </li>
+  <li
+    class="link"
+  >
+    <a
+      href="/#a-quick-crash-course-on-rss-feeds"
+    >
+      A Quick Crash Course on RSS Feeds
+    </a>
+  </li>
+  <ul>
+    <li
+      class="link"
+    >
+      <a
+        href="/#how-does-an-rss-feed-work"
+      >
+        How does an RSS feed work?
+      </a>
+    </li>
+    <li
+      class="link"
+    >
+      <a
+        href="/#what-does-an-rss-feed-actually-look-like"
+      >
+        What does an RSS feed actually look like?
+      </a>
+    </li>
+  </ul>
+  <li
+    class="link"
+  >
+    <a
+      href="/#prerequisites"
+    >
+      Prerequisites
+    </a>
+  </li>
+  <li
+    class="link"
+  >
+    <a
+      href="/#the-starter-code"
+    >
+      The Starter Code
+    </a>
+  </li>
+  <li
+    class="link"
+  >
+    <a
+      href="/#adding-an-rss-feed"
+    >
+      Adding an RSS Feed
+    </a>
+  </li>
+  <ul>
+    <li
+      class="link"
+    >
+      <a
+        href="/#prerequisite-confirm-that-you-have-sitemetadata"
+      >
+        Prerequisite: Confirm that you have siteMetadata
+      </a>
+    </li>
+    <li
+      class="link"
+    >
+      <a
+        href="/#step-1-install-gatsby-plugin-feed"
+      >
+        Step 1: Install gatsby-plugin-feed
+      </a>
+    </li>
+    <li
+      class="link"
+    >
+      <a
+        href="/#step-2-configure-the-plugin-in-your-gatsby-configjs-file"
+      >
+        Step 2: Configure the plugin in your gatsby-config.js file
+      </a>
+    </li>
+    <ul>
+      <li
+        class="link"
+      >
+        <a
+          href="/#configuring-optionsquery-and-feedquery"
+        >
+          Configuring options.query and feed.query
+        </a>
+      </li>
+      <li
+        class="link"
+      >
+        <a
+          href="/#configuring-serialize"
+        >
+          Configuring serialize
+        </a>
+      </li>
+      <li
+        class="link"
+      >
+        <a
+          href="/#the-full-plugin-configuration"
+        >
+          The Full Plugin Configuration
+        </a>
+      </li>
+    </ul>
+    <li
+      class="link"
+    >
+      <a
+        href="/#step-3-build-and-serve-your-site-locally-to-test-the-rss-feed"
+      >
+        Step 3: Build and serve your site locally to test the RSS feed
+      </a>
+    </li>
+    <li
+      class="link"
+    >
+      <a
+        href="/#step-4-optional-add-a-link-to-your-rss-feed-to-your-site"
+      >
+        Step 4: (Optional) Add a link to your RSS feed to your site
+      </a>
+    </li>
+  </ul>
+  <li
+    class="link"
+  >
+    <a
+      href="/#troubleshooting-errors"
+    >
+      Troubleshooting Errors
+    </a>
+  </li>
+  <li
+    class="link"
+  >
+    <a
+      href="/#takeaways"
+    >
+      Takeaways
+    </a>
+  </li>
+  <li
+    class="link"
+  >
+    <a
+      href="/#wrap-it-up"
+    >
+      Wrap It Up
+    </a>
+  </li>
+  <li
+    class="link"
+  >
+    <a
+      href="/#additional-resources"
+    >
+      Additional Resources
+    </a>
+  </li>
+</ul>
+`;

src/components/table-of-contents/index.js

@@ -0,0 +1,40 @@
+import { Link } from "gatsby"
+import React from "react"
+
+import CalloutBox from "../callout-box"
+
+import {
+  tocWrapper as tocWrapperStyles,
+  heading as headingStyles,
+  link as linkStyles,
+} from "./styles.module.css"
+
+const ContentsList = ({ contents }) => {
+  return (
+    <ul>
+      {contents.map(({ url, title, items }) => {
+        return (
+          <React.Fragment key={url}>
+            <li className={linkStyles}>
+              <Link to={url}>{title}</Link>
+            </li>
+            {items != undefined && <ContentsList contents={items} />}
+          </React.Fragment>
+        )
+      })}
+    </ul>
+  )
+}
+
+const TableOfContents = ({ tableOfContents }) => {
+  return (
+    <CalloutBox color="orange">
+      <nav aria-label="Table of Contents" className={tocWrapperStyles}>
+        <h2 className={headingStyles}>Table of Contents</h2>
+        <ContentsList contents={tableOfContents.items} />
+      </nav>
+    </CalloutBox>
+  )
+}
+
+export default TableOfContents