@xiee/utils 1.3.11 → 1.3.12

package/README.md

@@ -56,6 +56,12 @@ Add `[ ]` to footnote numbers and move the return symbols in footnotes.
 
 Fix the table of contents generated by lower versions of Hugo.
 
+## fullwidth.js
+
+Find `<pre>` and `<table>` elements and add the `fullwidth` class to them if
+they are too wide, so they can be styled differently (e.g., [full
+bleed](https://css-tricks.com/full-bleed/)).
+
 ## hash-notes.js
 
 Convert HTML comments of the form `<!--# comments -->` to
@@ -93,6 +99,10 @@ expressions (by default, MathJax ignores math in `<code>`).
 Add the `nohighlight` class to `<code>` in `<pre>` when it does not have a
 class, so that highlight.js will not try to syntax highlight the code in it.
 
+## number-sections.js
+
+Find all section headings (`h1` - `h6`) and number them.
+
 ## render-katex.js
 
 Simply run `renderMathInElement(document.body)` to render math expression using
@@ -102,3 +112,12 @@ KaTeX's auto-render extension.
 
 Right-align a `<blockquote>` footer if the footer is a `<p>` that starts with
 the em-dash.
+
+## toc.js
+
+Automatically build a table of contents (TOC) from all section headings.
+
+## toc-highlight.js
+
+Add a class `active` to the TOC item (`<a>`) corresponding to the section
+heading that is currently being scrolled into view.

package/js/toc-highlight.js

@@ -0,0 +1,21 @@
+// highlight a TOC item when scrolling to a corresponding section heading
+(function(d) {
+  // assume TOC has these possible IDs (we can also consider other selectors)
+  const toc = d.querySelector('#TableOfContents, #TOC');
+  if (!toc) return;
+  const links = toc.querySelectorAll('a');
+  if (!links.length) return;
+
+  // create a new Intersection Observer instance
+  const observer = new IntersectionObserver(els => els.forEach(el => {
+    const id = el.target.id;
+    id && el.isIntersecting && links.forEach(a => {
+      a.classList[(a.getAttribute('href') === '#' + id) ? 'add' : 'remove']('active');
+    });
+  }));
+
+  // observe all section headings
+  d.querySelectorAll('h1,h2,h3,h4,h5,h6').forEach(h => {
+    h.nodeType === 1 && observer.observe(h);
+  });
+})(document);

package/js/toc-highlight.min.js

@@ -0,0 +1 @@
+!function(e){const t=e.querySelector("#TableOfContents, #TOC");if(!t)return;const r=t.querySelectorAll("a");if(!r.length)return;const n=new IntersectionObserver((e=>e.forEach((e=>{const t=e.target.id;t&&e.isIntersecting&&r.forEach((e=>{e.classList[e.getAttribute("href")==="#"+t?"add":"remove"]("active")}))}))));e.querySelectorAll("h1,h2,h3,h4,h5,h6").forEach((e=>{1===e.nodeType&&n.observe(e)}))}(document);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xiee/utils",
-  "version": "1.3.11",
+  "version": "1.3.12",
   "description": "Miscellaneous tools and utilities to manipulate HTML pages",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"