@xiee/utils 1.1.3 → 1.1.6

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/hash-notes.js

@@ -0,0 +1,23 @@
+// 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');
+    s.innerHTML = s.innerHTML
+      .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank">$1</a>')
+      .replace(/(?<!")(https?:\/\/)([-a-zA-Z0-9%._#=/\+]+)/g, '<a href="$1$2" target="_blank">$2</a>');
+    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.3",
+  "version": "1.1.6",
   "description": "Miscellaneous tools and utilities to manipulate HTML pages",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"