clickable headers and toc black on scroll

redeploy: gh actions networking is borked
azuline · Jun 26, 2024 · 1687c67 · 1687c67
1 parent f6b15f2
commit 1687c67
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 14 deletions.
diff --git a/scripts/build.py b/scripts/build.py
@@ -5,6 +5,7 @@
 import functools
 import json
 import os
+import re
 import shutil
 import subprocess
 import tempfile
@@ -159,6 +160,15 @@ def compile_posts(posts: PostIndex, commit: str):
         # Wrap the main article inside a div.
         nav_end = post.find("</nav>") + len("</nav>")
         post = post[:nav_end] + '<div id="POST">' + post[nav_end:] + "</div>"
+        # Add dots after ToC and header section numbers.
+        post = re.sub(r'(-section-number">[^<]*)', r"\1.", post)
+        # Add clickable links to headings.
+        post = re.sub(
+            r'(<h[1-6])(.*?)id="([^"]+)"([^>]*)>(.+?)</h',
+            r'\1\2id="\3"\4><a href="#\3" class="heading">\5</a></h',
+            post,
+            flags=re.MULTILINE | re.DOTALL,
+        )
 
         # Wrap the post with a Jinja template.
         slug = f.stem

diff --git a/src/assets/css/global.css b/src/assets/css/global.css
@@ -151,9 +151,10 @@ html {
   --color-bg-base: #f6f5f4;
   --color-bg-nested: #f5f3ef;
   --color-fg-primary: #000000;
-  --color-fg-secondary: #464138;
+  --color-fg-secondary: #5c554a;
   --color-border-primary: #c5b194;
   --color-border-secondary: #ece8e2;
+  --color-detail: #a9a39b;
 
   /* Font Variables */
   --font-size-xxl: 2.25rem;
@@ -218,10 +219,12 @@ code {
 /* Background color. */
 .bg-base { background: var(--color-bg-base) }
 .bg-nested { background: var(--color-bg-nested) }
+.bg-detail { background: var(--color-detail) }
 
 /* Foreground color. */
 .fg-primary { color: var(--color-fg-primary) }
 .fg-secondary { color: var(--color-fg-secondary) }
+.fg-detail { color: var(--color-detail) }
 
 /* Border color. */
 .br-primary { color: var(--color-border-primary) }

diff --git a/src/assets/css/post.css b/src/assets/css/post.css
@@ -1,11 +1,14 @@
-.pandoc .toc-section-number::after,
-.pandoc .header-section-number::after {
-  content: ".";
-}
-
 .pandoc a[href^="#"] {
   color: var(--color-fg-primary);
 }
+.pandoc a[href^="#"].heading {
+  text-decoration: none;
+}
+.pandoc a[href^="#"].heading:hover::after {
+  padding-left: .5rem;
+  content: "#";
+  color: var(--color-detail);
+}
 
 .column {
   max-width: 36rem;
@@ -31,6 +34,9 @@
 .pandoc #TOC a {
   color: var(--color-fg-primary);
 }
+.pandoc #TOC a.active {
+  color: var(--color-fg-primary);
+}
 
 @media screen and (min-width: 1200px) {
   .column {

diff --git a/src/posts/post.html.jinja b/src/posts/post.html.jinja
@@ -9,12 +9,29 @@
       {{ meta.title }}
     </title>
     <link rel="stylesheet" type="text/css" href="/assets/css/post.css?v={{ commit }}" />
+    <script>
+      window.addEventListener("DOMContentLoaded", () => {
+        const observer = new IntersectionObserver(entries => {
+          entries.forEach(entry => {
+            const id = entry.target.getAttribute("id");
+            const element = document.querySelector(`#TOC li a[href="#${id}"]`);
+            if (entry.intersectionRatio > 0) {
+              element.classList.add("active");
+            } else {
+              element.classList.remove("active");
+            }
+          });
+        });
+        const selector = ".pandoc h1[id], .pandoc h2[id], .pandoc h3[id], .pandoc h4[id]";
+        document.querySelectorAll(selector).forEach((section) => observer.observe(section));
+      });
+    </script>
   </head>
   <body>
     <div class="w-content mx-auto py-8 px-6">
       <div class="column">
         <div class="text-sm label mono"><a class="decoration-none fg-primary" href="/">sunset glow</a></div>
-        <div class="py-16" />
+        <div class="py-16 flex flex-col gap-8" />
         <div class="flex flex-col gap-4">
           <div class="flex flex-col gap-2">
             <div class="display text-xxl medium">{{ meta.title }}</div>
@@ -24,20 +41,17 @@
           </div>
           <div class="display text-sm fg-secondary italic">{{ meta.timestamp.strftime("%B %-d, %Y") }}</div>
         </div>
-        <div class="pb-8 w-full"></div>
         <div class="pandoc">
           {{ body | safe }}
         </div>
-        <div class="py-8">
-          <div class="br-top br-secondary"></div>
-        </div>
+        <div class="br-top br-secondary"></div>
         <div class="flex justify-between">
           <div class="text-xs fg-secondary">
-            <a href="https://github.com/azuline/sunsetglow/blob/master/src/posts/tex/{{ slug }}.tex" class="fg-secondary">Source</a>
-            | Found an error or typo? PRs welcome!
+            <a href="https://sunsetglow.net/atom.xml" class="fg-secondary">Feed</a>
           </div>
           <div class="text-xs fg-secondary">
-            <a href="https://sunsetglow.net/atom.xml" class="fg-secondary">Feed</a>
+            Found an error or typo? PRs welcome! |
+            <a href="https://github.com/azuline/sunsetglow/blob/master/src/posts/tex/{{ slug }}.tex" class="fg-secondary">Source</a>
           </div>
         </div>
       </div>