Alternate checkboxes using userSetup.js

[rubenrivera]

TL;DR

I added alternate checkboxes to my digital garden by adding code to src/helpers/userSetup.js and some code I found on GitHub. Live demo: https://jardindigital.rubenrivera.mx/taller/alt-checkboxes/alt-checkboxes-overview/

Description

It's possible to use Custom Filters (see #77 and #304 ) to replace alternate checkboxes with custom emojis or other text; however, under certain circumstances, using the repository's user customization features might be more convenient. In my case, I'm learning about Eleventy.

I found a GitHub repository with an extract of Kepano's Minimal Theme. It contains a .css file intended to be added to an Obsidian vault. I wondered how to make it work on my digital garden, so I dug into my digital garden code and found that eleventy.js uses the Eleventy plugin markdown-it-task-checkbox. I adapted the source code of this plugin, added a js file to src/helpers and called it from src/helpers/userSetup.js

Here is an extract (please excuse the excessive comments)

/**
 * Checkbox mark (character inside square brackets)
 * @typedef {string} checkboxMark
 */
/**
 * Checked status of a checkbox, true = checked, false = unchecked.
 * @typedef {boolean} checkboxStatus
 */
/**
 * Checkbox specification
 * @typedef {Array.<checkboxMark,checkboxStatus>} checkboxSpec
 */

/**
 * Alternate checkbox checked values
 * Checkbox marks taken from Kepano's Minimal Theme for Obsidian
 * @type {checkboxSpec[]}
 */
const values = [
  /** The first three values are commented out because they cause double checkboxes*/
  // [' ', false],
  // ['\u00A0', false],// non-breaking space
  // ['x', true],
  ['/', true],
  ['-', true],
  ['>', true],
  ['<', true],
  ['?', true],
  ['!', true],
  ['*', true],
  ['"', true],
  ['i', true],
  ['l', true],
  ['b', true],
  ['S', true],
  ['I', true],
  ['p', true],
  ['c', true],
  ['f', true],
  ['k', true],
  ['w', true],
  ['u', true],
  ['d', true],
];
function userMarkdownSetup(md) {
  // The md parameter stands for the markdown-it instance used throughout the site generator.
  // Feel free to add any plugin you want here instead of /.eleventy.js
  const altCheckbox = require('./alt-markdown-it-task-checkbox.js');
  const options = {
		disabled: true,
		divWrap: true,
		divClass: 'checkbox',
		idPrefix: 'cbx_',
		ulClass: 'task-list',
		liClass: 'task-list-item',
    altCheckboxes: {
      regex: testRegEx(values),
      values: values
    }
	};
  altCheckbox(md, options);
  
}
/**
 * A regular expression for RegEx.prototype.test and String.prototype.match to get a true/false and the checked mark character.
 * @param {checkboxSpec[]} values Pair of checked marks and status (true = checked, false = unchecked)
 */
function testRegEx(values){
  const str = values.map(e =>
    ['/','-','?','*','+','^','.','$','^'] // regex especial characters should be escaped.
    .includes(e[0]) ? '\\' + e[0] : e[0])
    .join('');
  const regex = new RegExp(`^\\\[([${str}])\\\][ \u00A0]`);
  return regex;
}

I might need to clean-up my version of markdown-it-task-checkbox before sharing it.