Initial working implementation for https://github.com/MeiK2333/github-style/issues/71

Although very messy. Needs refactoring

layouts/partials/post.html

@@ -1,3 +1,39 @@
+
+      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: scroll;
+  }
+  #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;
+  }
+</style>
 <div>
   <main>
     <div class="gisthead pagehead bg-gray-light pb-0 pt-3 mb-4">
@@ -42,10 +78,16 @@
         <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 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 -->
 
@@ -80,3 +122,56 @@
     </div>
   </main>
 </div>
+<script>
+ 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>