LUCASTUCIOUS
2024-01-31 072ee6412780acf001d040dad652f911e2f676c9
refs
author LUCASTUCIOUS <peterlucas2804@gmail.com>
Wednesday, January 31, 2024 06:10 +0000
committer GitHub <noreply@github.com>
Wednesday, January 31, 2024 06:10 +0000
commit072ee6412780acf001d040dad652f911e2f676c9
tree 29a21ae8717a2538c262d36c3a89d6bf3c693258 tree | zip | gz
parent 90043cd58272f454b2513c338804ba0be5a36b10 view | diff
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>
3 files modified
147 ■■■■■ changed files
docs/features/callouts.md 19 ●●●●● diff | view | raw | blame | history
quartz/plugins/transformers/ofm.ts 52 ●●●● diff | view | raw | blame | history
quartz/styles/callouts.scss 76 ●●●● diff | view | raw | blame | history