Feature: Table of Contents + Fixed Header

layouts/partials/post.html

@@ -1,3 +1,5 @@
+<script src="https://unpkg.com/@popperjs/core@2"></script>
+<script src="https://unpkg.com/tippy.js@6"></script>
 <div>
   <main>
     <div class="gisthead pagehead bg-gray-light pb-0 pt-3 mb-4">
@@ -42,10 +44,16 @@ <h1 class="break-word f3 text-normal mb-md-0 mb-1">
         <div>
           <div class="js-gist-file-update-container js-task-list-container file-box">
             <div id="file-pytest" class="file my-2">
-              <div class="file-header d-flex flex-md-items-center flex-items-start">
+              <div id="post-header" class="file-header d-flex flex-md-items-center flex-items-start sticky-header">
                 <div class="file-info d-flex flex-md-items-center flex-items-start flex-order-1 flex-auto">
                   <div class="text-mono f6 flex-auto pr-3 flex-order-2 flex-md-order-1 mt-2 mt-md-0">
-                    {{ countwords .Content }} Words
+                    <!-- Copied from github -->
+                    <summary id="toc-toggle" class="btn btn-octicon m-0 mr-2 p-2" aria-haspopup="menu" aria-label="Table of Contents" role="button">
+                      <svg aria-hidden="true" viewBox="0 0 16 16" height="16" width="16" class="octicon octicon-list-unordered">
+                        <path fill-rule="evenodd" d="M2 4a1 1 0 100-2 1 1 0 000 2zm3.75-1.5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zM3 8a1 1 0 11-2 0 1 1 0 012 0zm-1 6a1 1 0 100-2 1 1 0 000 2z"></path>
+                      </svg>
+                    </summary>
+                          {{ countwords .Content }} Words
                     <!-- <span class="file-info-divider"></span>
                                         {{ .ReadingTime }} min -->
 
@@ -79,4 +87,67 @@ <h1 class="break-word f3 text-normal mb-md-0 mb-1">
       </div>
     </div>
   </main>
-</div>
+</div>
+<script>
+ // Set up `scroll-padding-top` which is relevant for preventing
+ // fixed headers from covering content
+ // See https://css-tricks.com/fixed-headers-on-page-links-and-overlapping-content-oh-my
+ window.onload = function () {
+   const header = document.getElementById('post-header');
+   const headerHeight = header.offsetHeight;
+   // 10px for a bit of leeway
+   document.documentElement.style.scrollPaddingTop = headerHeight + 10 + "px";
+ }
+
+ const tocToggleButton = document.getElementById("toc-toggle");
+
+ const tippyInstance = tippy('#toc-toggle', {
+  trigger: 'click',
+  content: '<div id="table-of-contents">{{ .TableOfContents }}</div>',
+  allowHTML: true,
+  placement: 'bottom-start',
+  interactive: true,
+  arrow: false,
+  maxWidth: "none",
+  onHide: function () { tocToggleButton.classList.remove("hover"); },
+  onShow: function () { tocToggleButton.classList.add("hover"); },
+  onShown: function () {
+    selectTableOfContentsOption();
+
+    if (window.hasSetupTableOfContentsListeners) {
+      return;
+    }
+
+    const tableOfContents = document.getElementById("table-of-contents");
+    tableOfContents.addEventListener('click', function () {
+      // Assumes there's only ever 1 tooltip
+      tippyInstance[0].hide();
+    });
+
+    window.hasSetupTableOfContentsListeners = true;
+  }
+ });
+
+ function selectTableOfContentsOption () {
+   const optionSelectedClass = 'table-of-contents-option-selected';
+
+   const tableOfContentsOptions = document.querySelectorAll("#table-of-contents > nav > ul li");
+
+   for (const option of tableOfContentsOptions) {
+     // Find anchors and either select/unselect it based on the URL's hash
+
+     const [child] = option.children;
+     if (child.tagName.toLowerCase() !== 'a') {
+       continue;
+     }
+
+     if (window.location.href === child.href) {
+       child.classList.add(optionSelectedClass);
+     } else {
+       child.classList.remove(optionSelectedClass);
+     }
+   }
+ }
+
+ window.onhashchange = selectTableOfContentsOption;
+</script>

static/css/dark.css

@@ -138,6 +138,9 @@
   --color-bg-secondary: #0d1117;
   --color-bg-success: rgba(46, 160, 67, 0.1);
   --color-bg-success-inverse: #2ea043;
+  --color-bg-table-of-contents-container: rgb(28, 33, 40);
+  --color-bg-table-of-contents-option-selected: rgb(31, 111, 235);
+  --color-fg-table-of-contents-option-selected: var(--color-text-primary);
   --color-bg-tertiary: #161b22;
   --color-bg-warning: rgba(187, 128, 9, 0.1);
   --color-bg-warning-inverse: #bb8009;
@@ -681,4 +684,4 @@
   --color-workflow-card-header-shadow: transparent;
   --color-workflow-card-progress-complete-bg: #8b949e;
   --color-workflow-card-progress-incomplete-bg: #30363d;
-}
+}

static/css/github-style.css

@@ -1,3 +1,7 @@
+html {
+  scroll-padding-top: 5em;
+}
+
 body {
   margin: 0;
 }
@@ -115,6 +119,53 @@ body {
   outline: none;
 }
 
+.sticky-header {
+  position: sticky;
+  top: 0;
+}
+
+.tippy-box {
+  border-radius: 10px;
+}
+
+.tippy-content {
+  border-radius: 10px;
+  background-color: var(--color-bg-table-of-contents-container);
+  border: 1px solid var(--color-border-primary);
+  overflow-y: hidden;
+  padding: 0;
+}
+
+#table-of-contents {
+  max-height: 30em;
+  overflow-y: auto;
+}
+#table-of-contents > nav ul {
+  list-style-type: none;
+}
+
+#table-of-contents > nav > ul li > a {
+  color: var(--color-text-primary);
+  text-decoration: none;
+  padding: 0.5em;
+  border-radius: 6px;
+  display: block;
+}
+
+#table-of-contents > nav > ul li > a.table-of-contents-option-selected {
+  background-color: var(--color-bg-table-of-contents-option-selected);
+  color: var(--color-fg-table-of-contents-option-selected);
+}
+
+#table-of-contents > nav ul > li {
+  margin-left: 1em;
+  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
+}
+
+#table-of-contents > nav > ul > li {
+  margin-left: 0;
+}
+
 @media (max-width: 768px) {
   .Header {
     padding-left: 24px!important;
@@ -137,4 +188,4 @@ body {
 
 .pinned-item-desc img {
   max-width: 100%;
-}
+}

static/css/light.css

@@ -138,6 +138,9 @@
   --color-bg-secondary: #fafbfc;
   --color-bg-success: #dcffe4;
   --color-bg-success-inverse: #28a745;
+  --color-bg-table-of-contents-container: rgb(255, 255, 255);
+  --color-bg-table-of-contents-option-selected: rgb(31, 111, 235);
+  --color-fg-table-of-contents-option-selected: rgb(255, 255, 255);
   --color-bg-tertiary: #f6f8fa;
   --color-bg-warning: #fff5b1;
   --color-bg-warning-inverse: #ffd33d;
@@ -681,4 +684,4 @@
   --color-workflow-card-header-shadow: rgba(27, 31, 35, 0.04);
   --color-workflow-card-progress-complete-bg: #959da5;
   --color-workflow-card-progress-incomplete-bg: #e1e4e8;
-}
+}