The Trans Directory
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat: Feature/custom callout icon (#727)

* Add icons as masks

To handle a simple way to add custom icons, i made it pure css. Icon are now a mask for the callout-icon div, so they always follow the --color form the current callout.

Now to add a custom icon, you simply add

```css
.callout {
&[data-callout="custom"] {
--color: #customcolor;
--border: #custombordercolor;
--bg: #custombg;
--callout-icon: url('data:image/svg+xml; utf8, <custom formatted svg>');

}
```

to custom.scss

* remove now unused code

* Make callouts an enum

* docs: update instructions for custom callouts

* Prettier & run format

* dynamic matching

For maintainability, make dynamic mathching. If we or Obsidian want to support more callouts, we simply add it to the enum

* callout mapping const

Getting ride of the enum entierly as it's not worth here?

* fix callout icon styling

* Add forgotten icons

* Rebase

* harmonize callout icon and fold icon

* fix docs + prettier

* Update docs/features/callouts.md

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

* Update quartz/plugins/transformers/ofm.ts

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

* Suggestions fix

* remove unecessary rules

* comment is always nice

* Update docs/features/callouts.md

---------

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

authored by

LUCASTUCIOUS
Jacky Zhao
and committed by
GitHub
072ee641 90043cd5

+89 -58
+18 -1
docs/features/callouts.md
··· 24 24 ## Customization 25 25 26 26 - Disable callouts: simply pass `callouts: false` to the plugin: `Plugin.ObsidianFlavoredMarkdown({ callouts: false })` 27 - - Editing icons: `quartz/plugins/transformers/ofm.ts` 27 + - Editing icons: `quartz/styles/callouts.scss` 28 + 29 + ### Add custom callouts 30 + 31 + By default, custom callouts are handled by applying the `note` style. To make fancy ones, you have to add these lines to `custom.scss`. 32 + 33 + ```scss title="quartz/styles/custom.scss" 34 + .callout { 35 + &[data-callout="custom"] { 36 + --color: #customcolor; 37 + --border: #custombordercolor; 38 + --bg: #custombg; 39 + --callout-icon: url('data:image/svg+xml; utf8, <custom formatted svg>'); //SVG icon code 40 + } 41 + ``` 42 + 43 + > [!warning] 44 + > Don't forget to ensure that the SVG is URL encoded before putting it in the CSS. You can use tools like [this one](https://yoksel.github.io/url-encoder/) to help you do that. 28 45 29 46 ## Showcase 30 47
+8 -44
quartz/plugins/transformers/ofm.ts
··· 44 44 enableVideoEmbed: true, 45 45 } 46 46 47 - const icons = { 48 - infoIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>`, 49 - pencilIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="2" x2="22" y2="6"></line><path d="M7.5 20.5 19 9l-4-4L3.5 16.5 2 22z"></path></svg>`, 50 - clipboardListIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><path d="M12 11h4"></path><path d="M12 16h4"></path><path d="M8 11h.01"></path><path d="M8 16h.01"></path></svg>`, 51 - checkCircleIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path><path d="m9 12 2 2 4-4"></path></svg>`, 52 - flameIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"></path></svg>`, 53 - checkIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>`, 54 - helpCircleIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>`, 55 - alertTriangleIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>`, 56 - xIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>`, 57 - zapIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>`, 58 - bugIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="8" height="14" x="8" y="6" rx="4"></rect><path d="m19 7-3 2"></path><path d="m5 7 3 2"></path><path d="m19 19-3-2"></path><path d="m5 19 3-2"></path><path d="M20 13h-4"></path><path d="M4 13h4"></path><path d="m10 4 1 2"></path><path d="m14 4-1 2"></path></svg>`, 59 - listIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg>`, 60 - quoteIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z"></path><path d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z"></path></svg>`, 61 - } 62 - 63 - const callouts = { 64 - note: icons.pencilIcon, 65 - abstract: icons.clipboardListIcon, 66 - info: icons.infoIcon, 67 - todo: icons.checkCircleIcon, 68 - tip: icons.flameIcon, 69 - success: icons.checkIcon, 70 - question: icons.helpCircleIcon, 71 - warning: icons.alertTriangleIcon, 72 - failure: icons.xIcon, 73 - danger: icons.zapIcon, 74 - bug: icons.bugIcon, 75 - example: icons.listIcon, 76 - quote: icons.quoteIcon, 77 - } 78 - 79 - const calloutMapping: Record<string, keyof typeof callouts> = { 47 + const calloutMapping = { 80 48 note: "note", 81 49 abstract: "abstract", 82 50 summary: "abstract", ··· 104 72 example: "example", 105 73 quote: "quote", 106 74 cite: "quote", 107 - } 75 + } as const 108 76 109 - function canonicalizeCallout(calloutName: string): keyof typeof callouts { 110 - let callout = calloutName.toLowerCase() as keyof typeof calloutMapping 77 + function canonicalizeCallout(calloutName: string): keyof typeof calloutMapping { 78 + const normalizedCallout = calloutName.toLowerCase() as keyof typeof calloutMapping 111 79 // if callout is not recognized, make it a custom one 112 - return calloutMapping[callout] ?? calloutName 80 + return calloutMapping[normalizedCallout] ?? calloutName 113 81 } 114 82 115 83 export const externalLinkRegex = /^https?:\/\//i ··· 411 379 const match = firstLine.match(calloutRegex) 412 380 if (match && match.input) { 413 381 const [calloutDirective, typeString, collapseChar] = match 414 - const calloutType = canonicalizeCallout( 415 - typeString.toLowerCase() as keyof typeof calloutMapping, 416 - ) 382 + const calloutType = canonicalizeCallout(typeString.toLowerCase()) 417 383 const collapse = collapseChar === "+" || collapseChar === "-" 418 384 const defaultState = collapseChar === "-" ? "collapsed" : "expanded" 419 385 const titleContent = ··· 427 393 } 428 394 const title = mdastToHtml(titleNode) 429 395 430 - const toggleIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="fold"> 431 - <polyline points="6 9 12 15 18 9"></polyline> 432 - </svg>` 396 + const toggleIcon = `<div class="fold-callout-icon"></div>` 433 397 434 398 const titleHtml: Html = { 435 399 type: "html", 436 400 value: `<div 437 401 class="callout-title" 438 402 > 439 - <div class="callout-icon">${callouts[calloutType] ?? callouts.note}</div> 403 + <div class="callout-icon"></div> 440 404 <div class="callout-title-inner">${title}</div> 441 405 ${collapse ? toggleIcon : ""} 442 406 </div>`,
+63 -13
quartz/styles/callouts.scss
··· 13 13 margin-top: 0; 14 14 } 15 15 16 + --callout-icon-note: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="2" x2="22" y2="6"></line><path d="M7.5 20.5 19 9l-4-4L3.5 16.5 2 22z"></path></svg>'); 17 + --callout-icon-abstract: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><path d="M12 11h4"></path><path d="M12 16h4"></path><path d="M8 11h.01"></path><path d="M8 16h.01"></path></svg>'); 18 + --callout-icon-info: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>'); 19 + --callout-icon-todo: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path><path d="m9 12 2 2 4-4"></path></svg>'); 20 + --callout-icon-tip: url('data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"></path></svg> '); 21 + --callout-icon-success: url('data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg> '); 22 + --callout-icon-question: url('data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg> '); 23 + --callout-icon-warning: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>'); 24 + --callout-icon-failure: url('data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg> '); 25 + --callout-icon-danger: url('data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg> '); 26 + --callout-icon-bug: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="8" height="14" x="8" y="6" rx="4"></rect><path d="m19 7-3 2"></path><path d="m5 7 3 2"></path><path d="m19 19-3-2"></path><path d="m5 19 3-2"></path><path d="M20 13h-4"></path><path d="M4 13h4"></path><path d="m10 4 1 2"></path><path d="m14 4-1 2"></path></svg>'); 27 + --callout-icon-example: url('data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg> '); 28 + --callout-icon-quote: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z"></path><path d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z"></path></svg>'); 29 + --callout-icon-fold: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpolyline points="6 9 12 15 18 9"%3E%3C/polyline%3E%3C/svg%3E'); 30 + 16 31 &[data-callout] { 17 32 --color: #448aff; 18 33 --border: #448aff44; 19 34 --bg: #448aff10; 35 + --callout-icon: var(--callout-icon-note); 20 36 } 21 37 22 38 &[data-callout="abstract"] { 23 39 --color: #00b0ff; 24 40 --border: #00b0ff44; 25 41 --bg: #00b0ff10; 42 + --callout-icon: var(--callout-icon-abstract); 26 43 } 27 44 28 45 &[data-callout="info"], ··· 30 47 --color: #00b8d4; 31 48 --border: #00b8d444; 32 49 --bg: #00b8d410; 50 + --callout-icon: var(--callout-icon-info); 51 + } 52 + 53 + &[data-callout="todo"] { 54 + --callout-icon: var(--callout-icon-todo); 33 55 } 34 56 35 57 &[data-callout="tip"] { 36 58 --color: #00bfa5; 37 59 --border: #00bfa544; 38 60 --bg: #00bfa510; 61 + --callout-icon: var(--callout-icon-tip); 39 62 } 40 63 41 64 &[data-callout="success"] { 42 65 --color: #09ad7a; 43 66 --border: #09ad7144; 44 67 --bg: #09ad7110; 68 + --callout-icon: var(--callout-icon-success); 45 69 } 46 70 47 71 &[data-callout="question"] { 48 72 --color: #dba642; 49 73 --border: #dba64244; 50 74 --bg: #dba64210; 75 + --callout-icon: var(--callout-icon-question); 51 76 } 52 77 53 78 &[data-callout="warning"] { 54 79 --color: #db8942; 55 80 --border: #db894244; 56 81 --bg: #db894210; 82 + --callout-icon: var(--callout-icon-warning); 57 83 } 58 84 59 85 &[data-callout="failure"], ··· 62 88 --color: #db4242; 63 89 --border: #db424244; 64 90 --bg: #db424210; 91 + --callout-icon: var(--callout-icon-failure); 92 + } 93 + 94 + &[data-callout="bug"] { 95 + --callout-icon: var(--callout-icon-bug); 96 + } 97 + 98 + &[data-callout="danger"] { 99 + --callout-icon: var(--callout-icon-danger); 65 100 } 66 101 67 102 &[data-callout="example"] { 68 103 --color: #7a43b5; 69 104 --border: #7a43b544; 70 105 --bg: #7a43b510; 106 + --callout-icon: var(--callout-icon-example); 71 107 } 72 108 73 109 &[data-callout="quote"] { 74 110 --color: var(--secondary); 75 111 --border: var(--lightgray); 112 + --callout-icon: var(--callout-icon-quote); 76 113 } 77 114 78 - &.is-collapsed > .callout-title > .fold { 115 + &.is-collapsed > .callout-title > .fold-callout-icon { 79 116 transform: rotateZ(-90deg); 80 117 } 81 118 } 82 119 83 120 .callout-title { 84 121 display: flex; 122 + align-items: center; 85 123 gap: 5px; 86 124 padding: 1rem 0; 87 125 color: var(--color); 88 126 89 - & .fold { 90 - margin-left: 0.5rem; 91 - transition: transform 0.3s ease; 127 + --icon-size: 18px; 128 + 129 + & .fold-callout-icon { 130 + transition: transform 0.15s ease; 92 131 opacity: 0.8; 93 132 cursor: pointer; 133 + width: var(--icon-size); 134 + height: var(--icon-size); 135 + --callout-icon: var(--callout-icon-fold); 94 136 } 95 137 96 138 & > .callout-title-inner > p { 97 139 color: var(--color); 98 140 margin: 0; 99 141 } 100 - } 101 142 102 - .callout-icon { 103 - width: 18px; 104 - height: 18px; 105 - flex: 0 0 18px; 106 - padding-top: 4px; 107 - } 143 + .callout-icon, 144 + & .fold-callout-icon { 145 + width: var(--icon-size); 146 + height: var(--icon-size); 108 147 109 - .callout-title-inner { 110 - font-weight: 700; 148 + // icon support 149 + background-size: var(--icon-size) var(--icon-size); 150 + background-position: center; 151 + background-color: var(--color); 152 + mask-image: var(--callout-icon); 153 + mask-size: var(--icon-size) var(--icon-size); 154 + mask-position: center; 155 + mask-repeat: no-repeat; 156 + } 157 + 158 + .callout-title-inner { 159 + font-weight: 700; 160 + } 111 161 }