From d5b40279bd12fd527553f53da98f3fd9d85e88d8 Mon Sep 17 00:00:00 2001
From: LUCASTUCIOUS <peterlucas2804@gmail.com>
Date: Thu, 25 Jan 2024 08:54:24 +0100
Subject: [PATCH] feat: Enable custom callout (#724)

* Enable custom callout

make a callout custom defaulted to a note one.

* Add a comment

* remove comment from quartz/plugins/transformers/ofm.ts

Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>

* Update quartz/plugins/transformers/ofm.ts

Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>

---------

Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>
---
 quartz/plugins/transformers/ofm.ts | 7 ++++---
 quartz/styles/callouts.scss        | 2 +-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/quartz/plugins/transformers/ofm.ts b/quartz/plugins/transformers/ofm.ts
index c06729676..f6345c5b5 100644
--- a/quartz/plugins/transformers/ofm.ts
+++ b/quartz/plugins/transformers/ofm.ts
@@ -108,7 +108,8 @@ const calloutMapping: Record<string, keyof typeof callouts> = {
 
 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 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
                   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 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
                 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 703bd67f6..34d3a4560 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;