Initial commit

docs/features/callouts.md

@@ -0,0 +1,96 @@
+---
+title: Callouts
+tags:
+  - feature/transformer
+---
+
+Quartz supports the same Admonition-callout syntax as Obsidian.
+
+This includes
+
+- 12 Distinct callout types (each with several aliases)
+- Collapsable callouts
+
+```
+> [!info] Title
+> This is a callout!
+```
+
+See [documentation on supported types and syntax here](https://help.obsidian.md/Editing+and+formatting/Callouts).
+
+> [!warning]
+> Wondering why callouts may not be showing up even if you have them enabled? You may need to reorder your plugins so that [[ObsidianFlavoredMarkdown]] is _after_ [[SyntaxHighlighting]].
+
+## Customization
+
+The callouts are a functionality of the [[ObsidianFlavoredMarkdown]] plugin. See the plugin page for how to enable or disable them.
+
+You can edit the icons by customizing `quartz/styles/callouts.scss`.
+
+### Add custom callouts
+
+By default, custom callouts are handled by applying the `note` style. To make fancy ones, you have to add these lines to `custom.scss`.
+
+```scss title="quartz/styles/custom.scss"
+.callout {
+  &[data-callout="custom"] {
+    --color: #customcolor;
+    --border: #custombordercolor;
+    --bg: #custombg;
+    --callout-icon: url("data:image/svg+xml; utf8, <custom formatted svg>"); //SVG icon code
+  }
+}
+```
+
+> [!warning]
+> 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.
+
+## Showcase
+
+> [!info]
+> Default title
+
+> [!question]+ Can callouts be _nested_?
+>
+> > [!todo]- Yes!, they can. And collapsed!
+> >
+> > > [!example] You can even use multiple layers of nesting.
+
+> [!note]
+> Aliases: "note"
+
+> [!abstract]
+> Aliases: "abstract", "summary", "tldr"
+
+> [!info]
+> Aliases: "info"
+
+> [!todo]
+> Aliases: "todo"
+
+> [!tip]
+> Aliases: "tip", "hint", "important"
+
+> [!success]
+> Aliases: "success", "check", "done"
+
+> [!question]
+> Aliases: "question", "help", "faq"
+
+> [!warning]
+> Aliases: "warning", "attention", "caution"
+
+> [!failure]
+> Aliases: "failure", "missing", "fail"
+
+> [!danger]
+> Aliases: "danger", "error"
+
+> [!bug]
+> Aliases: "bug"
+
+> [!example]
+> Aliases: "example"
+
+> [!quote]
+> Aliases: "quote", "cite"