jekyll-theme-amethyst 2.7.2 → 2.8.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1862052f2e939b117bac0d111234895d4103a5a39223c98fcf6794a1116f92f0
-  data.tar.gz: 5a0eb362913341106ea1f20eba8b6c50e3830b74e00ca4bc0928db95be0f8c9a
+  metadata.gz: d7bc014f3e7b88c3d75ac915dd7f40e7c3ab9034fd5f2f079bf5021b62430d9a
+  data.tar.gz: a57427dae152217ce9ff7edc81a26bc10b48d270d474a6ae5e8c40dcf5807bed
 SHA512:
-  metadata.gz: ae8a07691607180df222d14e234f63e20572186c2a55da2475391b434f9e6270d38dfb1a99916976df25ee1eca168ca04608291cded1d9de0a460c7cd8ff5613
-  data.tar.gz: 7ec00e114a617140bb10edc658c7235272675e4c5a731ed1cce538220aa4f60ec857db3fb7d1951a8fcf585ab33adfbc24a74a53bb9092a8389a9619ae62cc26
+  metadata.gz: 1cbe973d795c46c42e196514a9e5a3fd804de62cb043f1eb90cac83047d569ec4f5f7ddacc758b93b232106de9b2694e05975c877bda7c6db98b972352f484f0
+  data.tar.gz: eb9aa6ad3022132e0d38d0240175a5eb2159087e15a0ad122c03922a737d0b572f0a3fc3505d26c6f435fd7ace68fb4e4ed9ceca38fdbc0bdeab13947b0affd1

data/LICENSE.txt

@@ -1,5 +1,4 @@
-Copyright (c) 2020 Timo Tijhof
-Copyright (c) 2018 Trent Willis
+Copyright Timo Tijhof, Trent Willis, https://github.com/qunitjs/jekyll-theme-amethyst
 
 Permission is hereby granted, free of charge, to any person obtaining
 a copy of this software and associated documentation files (the

data/_includes/sidebar.html

@@ -137,5 +137,6 @@ Block data:
 		<div class="toc-wrapper">
 		<h4>Table of contents</h4>{{ jekyll_toc }}</div>
 	{%- endif -%}
+	<script defer type="module" src="{{ '/assets/toc.js' | file_version_query | relative_url }}"></script>
 {%- endif %}
 </aside>

data/_sass/amethyst.scss

@@ -585,6 +585,7 @@ typesense-minibar input[type="search"] {
 .toc-wrapper .toc {
     max-height: calc( 100vh - 2.5rem );
     overflow-y: auto;
+    scroll-behavior: smooth;
 }
 .toc,
 .toc ol {
@@ -596,6 +597,9 @@ typesense-minibar input[type="search"] {
 .toc .sidebar-item a {
     border-left: 0;
 }
+.toc-item-current > a {
+    font-weight: bold;
+}
 
 // .toc,
 // .toc ol {

data/assets/toc.js

@@ -0,0 +1,83 @@
+/*! toc.js - https://github.com/qunitjs/jekyll-theme-amethyst */
+const tocElement = document.querySelector('.toc');
+const tocItems = [].slice.call(tocElement.querySelectorAll('li > a[href^="#"]'));
+const headings = tocItems.map(item => document.getElementById(item.getAttribute('href').slice(1)));
+
+// TOC items of currently-visible headings
+//
+// If we simply highlight the first `entry.isIntersecting`, then when H2#Examples
+// and H3#Foo both become visible, we'd keep highlighting H2#Examples even after it
+// leaves the viewport, because H3#Foo was already observed earlier.
+// Maintain a list of visible headings and highight the top-most, so that after we
+// observe a heading leaving the viewport, we still know what's left.
+const currentItems = [];
+
+// After scrollling to a new heading, we scroll the TOC to the same heading.
+// Only scroll if the item was not already visible, to reduce distraction.
+//
+// DIV.toc-wrapper
+// | kind: offset parent           # because `position: sticky`
+// |
+// |- DIV.toc
+// |  |  var: tocElement
+// |  |  kind: scroll parent       # because `overflow-y: auto;`
+// |  |
+// |  |  tocElement.offsetTop      # height of any content above tocElement
+// |  |  tocElement.scrollTop      # scrollY coord, starts at 0
+// |  |  tocElement.clientHeight   # height of visible scrollable area, e.g. 400px
+// |  |
+// |- |- li > a[href]
+//         var: item
+//
+//         item.offsetTop          # fixed offset from offsetParent
+//
+const observer = new IntersectionObserver(
+  (entries) => {
+    for (const entry of entries) {
+      const item = tocItems[headings.indexOf(entry.target)];
+      if (entry.isIntersecting && !currentItems.includes(item)) {
+        currentItems.push(item);
+      } else if (!entry.isIntersecting && currentItems.includes(item)) {
+        currentItems.splice(currentItems.indexOf(item), 1);
+      }
+    }
+    // Resort to handle scrolling up, ensure new top-most item is on top
+    currentItems.sort((a, b) => a.compareDocumentPosition(b) & 4 ? -1 : 1)
+
+    if (!currentItems[0]) {
+      // No headings in the viewport, keep highlighting the last heading we saw.
+      return;
+    }
+    for (const item of tocItems) {
+      if (item === currentItems[0]) {
+        item.parentNode.classList.add('toc-item-current');
+
+        const itemTop = item.offsetTop - tocElement.offsetTop;
+        if (itemTop < tocElement.scrollTop) {
+          tocElement.scrollTo({
+            top: itemTop - item.clientHeight
+          });
+        } else if (itemTop > (tocElement.scrollTop + tocElement.clientHeight - item.clientHeight)) {
+          tocElement.scrollTo({
+            top: itemTop + tocElement.clientHeight - item.clientHeight
+          });
+        }
+      } else {
+        item.parentNode.classList.remove('toc-item-current');
+      }
+    }
+  },
+  {
+    // Support Firefox 136: Include a tiny top margin,
+    // because of fragment navigation bug, which scrolls headings to -0.1px of the viewport?
+    //
+    // Use bottom -50% to consider only the top half of the viewport.
+    // When reading a long section of which the heading is long past,
+    // we don't highlight the "next" heading until it reaches the top half.
+    rootMargin: '2px 0px -50% 0px',
+    threshold: [0.8]
+  }
+);
+for (const heading of headings) {
+  observer.observe(heading);
+}

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-amethyst
 version: !ruby/object:Gem::Version
-  version: 2.7.2
+  version: 2.8.0
 platform: ruby
 authors:
 - Timo Tijhof
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-01-25 00:00:00.000000000 Z
+date: 2025-04-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -130,6 +130,7 @@ files:
 - _sass/highlight.scss
 - _sass/typesense-minibar.css
 - assets/styles.scss
+- assets/toc.js
 - assets/typesense-minibar.js
 - lib/jekyll-theme-amethyst.rb
 homepage: https://github.com/qunitjs/jekyll-theme-amethyst