yuriy/quartz-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Enable custom callout (#724)

Browse Source 
* 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>
This commit is contained in:
LUCASTUCIOUS
2024-01-25 08:54:24 +01:00
committed by GitHub
parent b22bcd17b4
commit d5b40279bd
2 changed files with 5 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
quartz/plugins/transformers/ofm.ts
View File

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

2
quartz/styles/callouts.scss
View File

@@ -13,7 +13,7 @@
margin-top: 0;
}
&[data-callout="note"] {
&[data-callout] {
--color: #448aff;
--border: #448aff44;
--bg: #448aff10;