From e58c217de11680cb09fa29ccd5f1493bcb77a60a Mon Sep 17 00:00:00 2001
From: Aaron Pham <29749331+aarnphm@users.noreply.github.com>
Date: Mon, 05 Feb 2024 06:19:25 +0000
Subject: [PATCH] feat: support checkbox (closes #646) (#799)
---
quartz/components/scripts/checkbox.inline.ts | 23 +++++++++++++++++++++++
quartz/plugins/transformers/ofm.ts | 30 ++++++++++++++++++++++++++++++
2 files changed, 53 insertions(+), 0 deletions(-)
diff --git a/quartz/components/scripts/checkbox.inline.ts b/quartz/components/scripts/checkbox.inline.ts
new file mode 100644
index 0000000..50ab042
--- /dev/null
+++ b/quartz/components/scripts/checkbox.inline.ts
@@ -0,0 +1,23 @@
+import { getFullSlug } from "../../util/path"
+
+const checkboxId = (index: number) => `${getFullSlug(window)}-checkbox-${index}`
+
+document.addEventListener("nav", () => {
+ const checkboxes = document.querySelectorAll(
+ "input.checkbox-toggle",
+ ) as NodeListOf<HTMLInputElement>
+ checkboxes.forEach((el, index) => {
+ const elId = checkboxId(index)
+
+ const switchState = (e: Event) => {
+ const newCheckboxState = (e.target as HTMLInputElement)?.checked ? "true" : "false"
+ localStorage.setItem(elId, newCheckboxState)
+ }
+
+ el.addEventListener("change", switchState)
+ window.addCleanup(() => el.removeEventListener("change", switchState))
+ if (localStorage.getItem(elId) === "true") {
+ el.checked = true
+ }
+ })
+})
diff --git a/quartz/plugins/transformers/ofm.ts b/quartz/plugins/transformers/ofm.ts
index 18ff6b4..908c23d 100644
--- a/quartz/plugins/transformers/ofm.ts
+++ b/quartz/plugins/transformers/ofm.ts
@@ -9,6 +9,8 @@
import { JSResource } from "../../util/resources"
// @ts-ignore
import calloutScript from "../../components/scripts/callout.inline.ts"
+// @ts-ignore
+import checkboxScript from "../../components/scripts/checkbox.inline.ts"
import { FilePath, pathToRoot, slugTag, slugifyFilePath } from "../../util/path"
import { toHast } from "mdast-util-to-hast"
import { toHtml } from "hast-util-to-html"
@@ -28,6 +30,7 @@
enableInHtmlEmbed: boolean
enableYouTubeEmbed: boolean
enableVideoEmbed: boolean
+ enableCheckbox: boolean
}
const defaultOptions: Options = {
@@ -42,6 +45,7 @@
enableInHtmlEmbed: false,
enableYouTubeEmbed: true,
enableVideoEmbed: true,
+ enableCheckbox: false,
}
const calloutMapping = {
@@ -554,11 +558,37 @@
})
}
+ if (opts.enableCheckbox) {
+ plugins.push(() => {
+ return (tree: HtmlRoot, _file) => {
+ visit(tree, "element", (node) => {
+ if (node.tagName === "input" && node.properties.type === "checkbox") {
+ const isChecked = node.properties?.checked ?? false
+ node.properties = {
+ type: "checkbox",
+ disabled: false,
+ checked: isChecked,
+ class: "checkbox-toggle",
+ }
+ }
+ })
+ }
+ })
+ }
+
return plugins
},
externalResources() {
const js: JSResource[] = []
+ if (opts.enableCheckbox) {
+ js.push({
+ script: checkboxScript,
+ loadTime: "afterDOMReady",
+ contentType: "inline",
+ })
+ }
+
if (opts.callouts) {
js.push({
script: calloutScript,
--
Gitblit v1.10.0