更新 toc

layouts/partials/post.html

@@ -1,5 +1,3 @@
-<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">
@@ -44,16 +42,22 @@
         <div>
           <div class="js-gist-file-update-container js-task-list-container file-box">
             <div id="file-pytest" class="file my-2">
-              <div id="post-header" class="file-header d-flex flex-md-items-center flex-items-start sticky-header">
+              <div id="post-header" class="file-header d-flex flex-md-items-center flex-items-start sticky-header" style="z-index: 2">
                 <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">
                     <!-- 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">
+                    <summary id="toc-toggle" onclick="clickToc()" class="btn btn-octicon m-0 mr-2 p-2">
                       <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
+                    <details-menu class="SelectMenu" id="toc-details" style="display: none;">
+                      <div class="SelectMenu-modal rounded-3 mt-1" style="max-height: 340px;">
+                        <div class="SelectMenu-list SelectMenu-list--borderless p-2" style="overscroll-behavior: contain;" id="toc-list">
+                        </div>
+                      </div>
+                    </details-menu>
+                      {{ countwords .Content }} Words
                     <!-- <span class="file-info-divider"></span>
                                         {{ .ReadingTime }} min -->
 
@@ -76,7 +80,7 @@
               </div>
 
 
-              <div class="Box-body px-5 pb-5">
+              <div class="Box-body px-5 pb-5" style="z-index: 1">
                 <article class="markdown-body entry-content container-lg">
                   {{- .Content -}}
                 </article>
@@ -88,66 +92,5 @@
     </div>
   </main>
 </div>
-<script>
+<script type="application/javascript" src='{{ "js/toc.js" | absURL }}'></script>
- // Set up `scroll-padding-top` which is relevant for preventing
+<link rel="stylesheet" href='{{ "css/toc.css" | absURL }}' />
- // 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/toc.css

@@ -0,0 +1,4 @@
+.toc-item {
+    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
+    line-height: 1.5;
+}

static/js/toc.js

@@ -0,0 +1,43 @@
+const details = document.querySelector("#toc-details");
+
+function clickToc() {
+    switch (details.style.display) {
+        case 'none':
+            details.style.display = 'block';
+            setTimeout(() =>
+                document.body.addEventListener('click', closeToc), 1);
+            break;
+        case 'block':
+            details.style.display = 'none';
+            break;
+    }
+}
+
+function openToc() {
+    details.style.display = 'block';
+}
+
+function closeToc() {
+    details.style.display = 'none';
+    document.body.removeEventListener('click', closeToc);
+}
+
+function getToc() {
+    const hs = document.querySelector('.markdown-body').querySelectorAll('h1, h2, h3, h4, h5, h6');
+    const toc_list = document.querySelector("#toc-list");
+    for (const h of hs) {
+        const size = Number(h.tagName.toLowerCase().replace('h', ''));
+        const a = document.createElement('a');
+        a.classList.add("filter-item", "SelectMenu-item", "ws-normal", "wb-break-word", "line-clamp-2", "py-1", "toc-item");
+        a.href = `#${h.id}`;
+        a.innerText = h.innerHTML;
+        a.style.paddingLeft = `${size * 12}px`;
+        toc_list.appendChild(a);
+    }
+}
+
+
+// TODO: highlight on scroll
+(() => {
+    getToc();
+})();