feat: add TableOfContents component to blog post template

[meganesu]

Closes #107.

Requirements

• When I go to a blog post page, then there's a table of contents before the post contents, which shows a list of links to each heading in the post.
• When I use keyboard navigation to click a link in the table of contents, my focus is moved to the link element for the corresponding heading.

To Do

• Bugs related to Markdown formatting in headings:
  • Bug: Headings with backticks (`) in the text return weird titles. See /blog/managing-focus-with-react-and-jest/
  • Bug: Links in the headings return weird titles. See /blog/dev-ed-reading-list/
  • Bug: Text formatting in the headings return weird titles. See /blog/how-to-run-a-speedback/ and /blog/how-to-run-a-retro/
• Bug: Clicking a link in the Table of Contents doesn't actually move me down to the correct heading, because the RouteTargetHeading link takes over and moves me back up to the top of the page.
• Refactor: Adjust the recursive rendering logic to reduce duplication. (Shift the recursive component to start with the items prop instead of the url and title?)
• Review headings for all existing blog posts, to remove any : at the end

[netlify]

✅ Deploy Preview for meganesulli ready!

Name	Link
🔨 Latest commit	49dc2cb
🔍 Latest deploy log	https://app.netlify.com/sites/meganesulli/deploys/6440be03c2da5b00082e902e
😎 Deploy Preview	https://deploy-preview-109--meganesulli.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[meganesu]

Bug: MDX node tableOfContents field doesn't play nicely with headings that have Markdown formatting

Waiting on gatsbyjs/gatsby#37704

Investigation

Investigating title errors when heading has formatting:

If I change node_modules/gatsby-plugin-mdx/dist/remark-infer-toc-meta.js check on nodes with type: "text" to this:

if (item.type === `text`) {
  typedCurrent.title ?
    typedCurrent.title = typedCurrent.title + item.value
    : typedCurrent.title = item.value;
}

...and then run gatsby clean and restart the dev server, then it works for headings that include bold formatting and headings that include links.

Still investigating how to fix when heading includes backticks for inline code.

Update: Updating the check on nodes with type: "text" to this:

if (item.type === `text` || item.type === `inlineCode`) {
  typedCurrent.title ?
    typedCurrent.title = typedCurrent.title + item.value
    : typedCurrent.title = item.value;
}

...works for headings with bold/italics formatting, headings with links, and headings with backticks.

Reference

Original code in node_modules/gatsby-plugin-mdx/dist/remark-infer-toc-meta.js:

if (item.type === `text`) {
  typedCurrent.title = item.value;
}

link item when heading contains backticks:

e.g., "Step 1: Create a new ref object"

{
  type: 'link',
  title: null,
  url: '#step-1-create-a-new-ref-object',
  children: [
    { type: 'text', value: 'Step 1: Create a new ' },
    { type: 'inlineCode', value: 'ref' },
    { type: 'text', value: ' object' }
  ]
}

link item when heading contains an anchor element:

e.g., "Teach Like a Champion, by Doug Lemov"

{
  type: 'link',
  title: null,
  url: '#teach-like-a-champion-by-doug-lemov',
  children: [
    { type: 'text', value: 'Teach Like a Champion' },
    { type: 'text', value: ', by Doug Lemov' }
  ]
}

link item when heading contains formatted text:

e.g., "Do we really need a retro at the end of every sprint?"

{
  type: 'link',
  title: null,
  url: '#do-we-really-need-a-retro-at-the-end-of-every-sprint',
  children: [
    { type: 'text', value: 'Do we ' },
    { type: 'emphasis', children: [Array] },
    {
      type: 'text',
      value: ' need a retro at the end of every sprint?'
    }
  ]
}

e.g., "If you have an even number of participants:"

{
  type: 'link',
  title: null,
  url: '#if-you-have-an-even-number-of-participants',
  children: [
    { type: 'text', value: 'If you have an ' },
    { type: 'strong', children: [Array] },
    { type: 'text', value: ' number of participants:' }
  ]
}