feat: implement table of contents

src/components/PageContent/index.tsx

@@ -1,11 +1,14 @@
 import React, { FC, Fragment } from "react"
 
+import { ITocItem } from "../../types"
 import { humanize } from "../../utils"
-import * as SC from "./styles"
 import { Container } from "../Container"
+import { Toc } from "../Toc"
+import * as SC from "./styles"
 
 interface IPageContentProps {
   content: JSX.Element
+  toc?: ITocItem[]
   recommendedReading?: string[]
   externalResources?: string[]
 }
@@ -42,6 +45,7 @@ function ExtraLink({
 
 export const PageContent: FC<IPageContentProps> = ({
   content,
+  toc = [],
   recommendedReading,
   externalResources,
 }) => {
@@ -52,6 +56,13 @@ export const PageContent: FC<IPageContentProps> = ({
       </SC.Content>
 
       <SC.Sidebar>
+        {toc.length > 0 && (
+          <Toc
+            header={<SC.SidebarHeader>Table of Contents</SC.SidebarHeader>}
+            items={toc}
+          />
+        )}
+
         {recommendedReading && (
           <SC.RecommendedReading>
             <SC.SidebarHeader>Recommended reading</SC.SidebarHeader>

src/components/PageContent/styles.tsx

@@ -21,6 +21,8 @@ export const Sidebar = styled.div`
   color: ${props => (props.theme.name === "dark" ? "#f9f9f9" : "#172129")};
   margin: 64px 0;
   padding: 0 32px;
+  position: sticky;
+  top: 32px;
 
   &:empty {
     display: none;
@@ -50,7 +52,11 @@ export const SidebarHeader = styled.div`
 `
 
 const ExtraLinks = styled.div`
-  margin-top: 16px;
+  margin-top: 32px;
+
+  &:first-child {
+    margin-top: 0;
+  }
 `
 
 export const RecommendedReading = styled(ExtraLinks)``