@xiee/utils 1.1.2 → 1.1.5

package/README.md

@@ -58,6 +58,13 @@ to render unique `id`s for the footnote items (the `id` is `fn:-`).
 
 Fix the table of contents generated by lower versions of Hugo.
 
+## hash-notes.js
+
+Convert HTML comments of the form `<!--# comments -->` to
+`<span class="hash-note">comments</span>`. If such comments are found, the
+document body will gain classes `has-notes` and `hide-notes`. You can use CSS to
+style the notes or hide/show them as you wish.
+
 ## header-link.js
 
 Add anchor links to all section headers (e.g., `<h2>`) that have nonempty `id`

package/css/circled-numbers.css

@@ -0,0 +1,25 @@
+/* Add circled numbers to h2 and TOC items generated by Hugo  */
+#TableOfContents, #TableOfContents ~ p:first-of-type { counter-reset: circled-numbers; }
+h2::before, #TableOfContents > ul > li > ul > li::before {
+  counter-increment: circled-numbers;
+  content: counter(circled-numbers);
+  border-radius: 50%;
+  border: 1px dashed #999;
+  color: #333;
+  background: white;
+  display: inline-block;
+  min-width: 1.75em;
+  line-height: 1.75em;
+  margin-right: .5em;
+  text-align: center;
+  font-size: .8em;
+}
+h2::before {
+  vertical-align: bottom;
+  color: white;
+  border: none;
+  background: #999;
+}
+#TableOfContents > ul > li > ul > li {
+  display: inline-block;
+}

package/js/fix-toc.js

@@ -1,7 +1,24 @@
+// fix some issues in TOC generated by Hugo (Blackfriday or Goldmark)
 (function() {
-  var toc = document.getElementById('TableOfContents');
+  const toc = document.getElementById('TableOfContents');
   if (!toc) return;
-  var li, ul = toc.querySelector('ul');
+  // fix header ids and a hrefs if a header contains a link
+  toc.querySelectorAll('a[href^="#"]').forEach((a) => {
+    let id = a.getAttribute('href').replace(/^#/, '');
+    const h = document.getElementById(id);
+    // remove the URL from the id
+    id = id.replace(/-https?-.+$/, '');
+    if (h) h.id = id; a.href = '#' + id;
+    // if the TOC item has two <a>'s, remove the second if the first is empty
+    if (a.innerHTML !== '') return;
+    const a2 = a.nextElementSibling;
+    if (!a2 || a2.tagName !== 'A') return;
+    a.innerHTML = a2.innerHTML;
+    a2.remove();
+  });
+  // Blackfriday may generate a TOC that has an empty bullet when all headings
+  // are h2 and there is no h1: https://github.com/gohugoio/hugo/issues/1778#issuecomment-420036687
+  let li, ul = toc.querySelector('ul');
   if (ul.childElementCount !== 1) return;
   li = ul.firstElementChild;
   if (li.tagName !== 'LI') return;

package/js/hash-notes.js

@@ -0,0 +1,20 @@
+// convert <!--# comments --> to <span class="hash-notes">comments</span>
+(function(d) {
+  function toSpan(el) {
+    const t = el.textContent, r = /^#[\s\n]+([\s\S]+)[\s\n]+$/;
+    if (!r.test(t)) return;
+    d.body.classList.add('has-notes', 'hide-notes');
+    // use <p> if the comment's parent is not <p>; otherwise use inline <span>
+    const s = d.createElement(el.parentNode.nodeName === 'P' ? 'span' : 'p');
+    s.className = 'hash-note';
+    s.innerText = t.replace(r, '$1');
+    el.before(s);
+    el.remove();
+  };
+  function findComments(el) {
+    el.childNodes.forEach(node => {
+      node.nodeType === Node.COMMENT_NODE ? toSpan(node) : findComments(node);
+    });
+  };
+  findComments(d.body);
+})(document);

package/package.json

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