feat: Enable custom callout (#724)

LUCASTUCIOUS

2024-01-25 d5b40279bd12fd527553f53da98f3fd9d85e88d8

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

@@ -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,

 quartz/styles/callouts.scss

@@ -13,7 +13,7 @@
    margin-top: 0;
  }

  &[data-callout="note"] {
  &[data-callout] {
    --color: #448aff;
    --border: #448aff44;
    --bg: #448aff10;