diff --git a/site/components/Heading.js b/site/components/Heading.js
index 85e2b45..9265ef6 100644
--- a/site/components/Heading.js
+++ b/site/components/Heading.js
@@ -3,12 +3,12 @@ import React, { useEffect, useState } from 'react';
 
 export const Heading = ({ level, observer }) => (props) => {
   useEffect(() => {
+    // start observing heading's intersection with the bounding box set by observer's `rootMargin`
     if (observer) {
       observer.observe(document.getElementById(props.id));
     }
   });
 
-
   return React.createElement(`h${level}`, {
     ...props,
     className: "scroll-mt-16 cursor-pointer"
diff --git a/site/components/Layout.js b/site/components/Layout.js
index 68af9fa..cbd1921 100644
--- a/site/components/Layout.js
+++ b/site/components/Layout.js
@@ -3,7 +3,7 @@ import Head from 'next/head'
 import siteConfig from '../config/siteConfig'
 import navLinks from '../config/navLinks'
 import Nav from './Nav'
-import Sidebar from './Sidebar'
+// import Sidebar from './Sidebar'
 
 
 export default function Layout({ children }) {
diff --git a/site/components/Toc.js b/site/components/Toc.js
deleted file mode 100644
index 4a46545..0000000
--- a/site/components/Toc.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import Link from 'next/link'
-
-
-export const Toc = ({ headings }) => {
-  return (
-    <nav>
-      <h4>
-        On this page
-      </h4>
-      { headings.map(({url, title, level}, i) => (
-        <div key={i} className={`flex leading-5 pl-${(level-1)*4}`}>
-          <Link href={`#${url}`} >
-            <a className="py-1 text-slate-400 hover:text-white no-underline transition-colors">
-              { title }
-            </a>
-          </Link>
-        </div>
-    ))}
-    </nav>
-  )
-}