From d5b40279bd12fd527553f53da98f3fd9d85e88d8 Mon Sep 17 00:00:00 2001
From: LUCASTUCIOUS <peterlucas2804@gmail.com>
Date: Thu, 25 Jan 2024 07:54:24 +0000
Subject: [PATCH] feat: Enable custom callout (#724)
---
quartz/styles/callouts.scss | 2 +-
quartz/plugins/transformers/ofm.ts | 7 ++++---
2 files changed, 5 insertions(+), 4 deletions(-)
diff --git a/quartz/plugins/transformers/ofm.ts b/quartz/plugins/transformers/ofm.ts
index c067296..f6345c5 100644
--- a/quartz/plugins/transformers/ofm.ts
+++ b/quartz/plugins/transformers/ofm.ts
@@ -108,7 +108,8 @@
function canonicalizeCallout(calloutName: string): keyof typeof callouts {
let callout = calloutName.toLowerCase() as keyof typeof calloutMapping
- return calloutMapping[callout] ?? "note"
+ // if callout is not recognized, make it a custom one
+ return calloutMapping[callout] ?? calloutName
}
export const externalLinkRegex = /^https?:\/\//i
@@ -431,7 +432,7 @@
value: `<div
class="callout-title"
>
- <div class="callout-icon">${callouts[calloutType]}</div>
+ <div class="callout-icon">${callouts[calloutType] ?? callouts.note}</div>
<div class="callout-title-inner">${title}</div>
${collapse ? toggleIcon : ""}
</div>`,
@@ -457,7 +458,7 @@
node.data = {
hProperties: {
...(node.data?.hProperties ?? {}),
- className: `callout ${collapse ? "is-collapsible" : ""} ${
+ className: `callout ${calloutType} ${collapse ? "is-collapsible" : ""} ${
defaultState === "collapsed" ? "is-collapsed" : ""
}`,
"data-callout": calloutType,
diff --git a/quartz/styles/callouts.scss b/quartz/styles/callouts.scss
index 703bd67..34d3a45 100644
--- a/quartz/styles/callouts.scss
+++ b/quartz/styles/callouts.scss
@@ -13,7 +13,7 @@
margin-top: 0;
}
- &[data-callout="note"] {
+ &[data-callout] {
--color: #448aff;
--border: #448aff44;
--bg: #448aff10;
--
Gitblit v1.10.0