feat: implement table of contents

src/pages/about.tsx

@@ -1,21 +1,28 @@
 import { graphql } from "gatsby"
 import React, { Fragment } from "react"
+import cx from "classnames"
 import { MarkdownRemark } from "../../generated/graphql"
 import { ComponentQuery } from "../../typings"
 import { Markdown } from "../components/Markdown"
 import { SEO } from "../components/SEO"
 import { PageContent } from "../components/PageContent"
 import { HeaderBarebone } from "../components/HeaderBarebone"
+import { buildToc } from "../utils"
 
 function AboutPage({ data }: ComponentQuery<{ md: MarkdownRemark }>) {
   const { md } = data
 
+  const toc = buildToc(md.headings!)
+
   return (
     <Fragment>
       <SEO title="About" />
-      <HeaderBarebone title="About us" />
+      <HeaderBarebone
+        title="About us"
+        className={cx({ shifted: toc.length })}
+      />
 
-      <PageContent content={<Markdown content={md.html!} />} />
+      <PageContent content={<Markdown content={md.html!} />} toc={toc} />
     </Fragment>
   )
 }
@@ -24,6 +31,10 @@ export const query = graphql`
   query AboutPage {
     md: markdownRemark(frontmatter: { path: { eq: "/about" } }) {
       html
+      headings {
+        depth
+        value
+      }
     }
   }
 `

src/pages/rules.tsx

@@ -1,21 +1,25 @@
 import { graphql } from "gatsby"
 import React, { Fragment } from "react"
+import cx from "classnames"
 import { MarkdownRemark } from "../../generated/graphql"
 import { ComponentQuery } from "../../typings"
 import { HeaderBarebone } from "../components/HeaderBarebone"
 import { Markdown } from "../components/Markdown"
 import { PageContent } from "../components/PageContent"
 import { SEO } from "../components/SEO"
+import { buildToc } from "../utils"
 
 function RulesPage({ data }: ComponentQuery<{ md: MarkdownRemark }>) {
   const { md } = data
 
+  const toc = buildToc(md.headings!)
+
   return (
     <Fragment>
       <SEO title="Rules" />
-      <HeaderBarebone title="Rules" />
+      <HeaderBarebone title="Rules" className={cx({ shifted: toc.length })} />
 
-      <PageContent content={<Markdown content={md.html!} />} />
+      <PageContent content={<Markdown content={md.html!} />} toc={toc} />
     </Fragment>
   )
 }
@@ -24,6 +28,10 @@ export const query = graphql`
   query RulesPage {
     md: markdownRemark(frontmatter: { path: { eq: "/rules" } }) {
       html
+      headings {
+        depth
+        value
+      }
     }
   }
 `