@xiee/utils 1.2.7 → 1.2.9

package/README.md

@@ -75,7 +75,8 @@ attributes.
 Find keyboard keys in `<code></code>` and convert the tag to `<kbd></kbd>`,
 e.g., convert `<code>Ctrl + C</code>` to `<kbd>Ctrl</kbd>` + `<kbd>C</kbd>`.
 With `key-buttons.css`, the keys will be styled as boxes with shadows like
-buttons.
+buttons. You can learn more details [in this
+post](https://yihui.org/en/2023/02/key-buttons/).
 
 ## load-highlight.js
 

package/css/key-buttons.css

@@ -6,6 +6,7 @@ kbd {
   border-radius: 0.25em;
   min-width: 1.5em;
   text-align: center;
+  margin-right: .15em;
 }
 kbd:hover {
   position: relative;

package/js/fix-footnote.js

@@ -1,30 +1,8 @@
 (function(d) {
-  function fix_footnote(tagName) {
-    let tags = d.getElementsByTagName(tagName), i, tag, tag2, n = 1, href;
-    for (i = 0; i < tags.length; i++) {
-      tag = tags[i];
-      if (tagName === 'sup') {
-        if (tag.className !== 'footnote-ref' || tag.id !== 'fnref:-') continue;
-        tag.id += n;
-        if (tag.children.length === 1) {
-          tag2 = tag.children[0];
-          href = tag2.getAttribute('href');
-          if (tag2.nodeName === 'A' && href === '#fn:-') {
-            tag2.setAttribute('href', href + n);
-          }
-        }
-      } else if (tagName === 'li') {
-        if (tag.id !== 'fn:-') continue;
-        tag.id += n;
-        tag2 = tag.lastChild; href = tag2.getAttribute('href');
-        if (tag2.nodeName === 'A' && href === '#fnref:-') {
-          tag2.setAttribute('href', href + n);
-        }
-      }
-      n++;
-    }
-  }
-  fix_footnote('sup'); fix_footnote('li');
+  // add [] to footnote numbers
+  d.querySelectorAll('sup[id^="fnref:"] > a.footnote-ref, a.footnote-ref > sup').forEach(el => {
+    if (/^[0-9]+$/.test(el.innerText)) el.innerText = ' [' + el.innerText + ']';
+  });
   // move the return symbol into the previous <p>
   d.querySelectorAll('.footnotes > ol > li > p ~ .footnote-return').forEach(el => {
     el.previousElementSibling.lastChild.after(el);

package/js/key-buttons.js

@@ -1,7 +1,13 @@
 (function(d) {
+  const a1 = ['Enter', 'Up', 'Down', 'Left', 'Right'];
+  const a2 = ['↵', '↑', '↓', '←', '→'];
+  function drawArrows(x) {
+    a1.map((v, i) => x = x.replace(new RegExp('>' + v + '<', 'g'), ' title="' + v + (i ? ' Arrow' : '') + '">' + a2[i] + '<'));
+    return x;
+  }
   // 1. individual keys; 2. modifiers; 3. normal keys
-  const k1 = 'Esc|Tab|Enter|PageUp|PageDown|Up|Down|Left|Right|' +
-              Array(12).fill().map((v, i) => 'F' + (i + 1)).join('|'),
+  const k1 = 'Esc|Tab|PageUp|PageDown|Space|Delete|Home|End|PrtScr?|PrintScreen|' +
+              Array(12).fill().map((v, i) => 'F' + (i + 1)).concat(a1).join('|'),
         k2 = 'Ctrl|Control|Shift|Alt|Cmd|Command|fn',
         k3 = '[a-zA-Z0-9]|Click',
         r1 = new RegExp('^(' + k1 + '|' + k2 + ')$'),
@@ -11,7 +17,7 @@
     if (el.childElementCount > 0) return;
     let t = el.innerText;
     if (r1.test(t)) {
-      el.outerHTML = '<kbd>' + t + '</kbd>';
+      el.outerHTML = drawArrows('<kbd>' + t + '</kbd>');
       return;
     }
     if (!r2.test(t)) return;
@@ -20,6 +26,6 @@
       t2 += t.replace(r3, '<kbd>$1</kbd>$2');
       t = t.replace(r3, '$3');
     }
-    if (t === '') el.outerHTML = t2.replace(/ \+ $/, '');
+    if (t === '') el.outerHTML = drawArrows(t2.replace(/ \+ $/, ''));
   });
 })(document);

package/package.json

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