How to use components
Within any .mdx, import the component and pass in the required parameters. For example, here’s how to add a <Callout> component.
import Callout from '@/components/Callout.astro'
<Callout title="About callouts" variant="important" defaultOpen={false}> Callouts signify different types of content to the reader</Callout>Here’s how it looks rendered. Notice defaultOpen={false} makes the callout closed by default, ideal for e.g. solutions to puzzles.
About callouts
Callouts signify different types of content to the reader
I can then call out the component as a hyperlink. Here’s how this line looks in code:
I can then call out the component as a [hyperlink](#about-callouts).By default, the callout’s id is just its slugified title, but a custom id can be passed in too.
Callouts
Callout color and icons are data driven, so it’s easy to add a bunch of varieties:
| Variant | Usage |
|---|---|
| Note | For general information or comments |
| Tip | For helpful advice or shortcuts |
| Warning | For potential pitfalls or misconceptions |
| Danger | For destructive or harmful actions |
| Important | For critical information |
| Definition | For defining terms or concepts |
| Theorem | For proven mathematical statements |
| Lemma | For helper theorems |
| Proof | For logical arguments |
| Corollary | For results following from theorems |
| Proposition | For important but minor statements |
| Axiom | For fundamental assumptions |
| Conjecture | For unproven statements believed true |
| Notation | For explaining notation |
| Remark | For additional comments |
| Intuition | For intuitive reasoning |
| Recall | For reminding previous material |
| Explanation | For deeper insights |
| Example | For concrete examples |
| Exercise | For practice problems |
| Problem | For problems to solve |
| Answer | For short answers |
| Solution | For detailed solutions |
| Summary | For summarizing key points |
| Puzzle | For puzzles and brain teasers |
Post-specific components
Almost every post has a custom callout made just for it. For example, here’s a music sheet component using abcjs with tablature support:
Sidenote: abcjs can actually compile sheets to audio, have the user edit and play sheets, and much more. I’ve disabled most of these to keep things simple.
Here’s a logic grid component for my post Logic Grids as Data Structures:
It’s fully functional and inputs persist even over page reloads.
I want each post to have at least one unique component. I think it adds a lot of interaction and individuality.