🌲 digital garden https://rizaldy.club
Go to file
LUCASTUCIOUS 072ee64127
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>
2024-01-30 22:10:13 -08:00
.github feat: enable dependabot 2024-01-27 21:44:38 -08:00
content
docs feat: Feature/custom callout icon (#727) 2024-01-30 22:10:13 -08:00
quartz feat: Feature/custom callout icon (#727) 2024-01-30 22:10:13 -08:00
.gitattributes
.gitignore
.npmrc
.prettierignore
.prettierrc
CODE_OF_CONDUCT.md
Dockerfile
globals.d.ts fix(type): make sure dispatchEvent also accept UIEvent (#760) 2024-01-29 16:26:47 -08:00
index.d.ts feat: Emit custom event when theme changes (#723) 2024-01-23 14:52:41 -08:00
LICENSE.txt
package-lock.json chore(deps): bump lightningcss from 1.22.1 to 1.23.0 (#765) 2024-01-30 22:05:17 -08:00
package.json chore(deps): bump lightningcss from 1.22.1 to 1.23.0 (#765) 2024-01-30 22:05:17 -08:00
quartz.config.ts
quartz.layout.ts
README.md fix: remove quartz 3 references, update font style in popovers 2024-01-21 12:39:20 -08:00
tsconfig.json chore(deps-dev): bump prettier from 3.1.1 to 3.2.4 (#768) 2024-01-30 22:03:33 -08:00

Quartz v4

“[One] who works with the door open gets all kinds of interruptions, but [they] also occasionally gets clues as to what the world is and what might be important.” — Richard Hamming

Quartz is a set of tools that helps you publish your digital garden and notes as a website for free. Quartz v4 features a from-the-ground rewrite focusing on end-user extensibility and ease-of-use.

🔗 Read the documentation and get started: https://quartz.jzhao.xyz/

Join the Discord Community

Sponsors