Using MDX

MDX is markdown with support for components. It looks and feels like regular markdown, but you can import and use interactive or styled components directly inside your content. In Sidey, MDX is enabled out of the box for all pages and writings.

Figure

The Figure component lets you display images with an optional caption. All images in Sidey, including Figure, open in a full-screen lightbox when clicked.

Pass the caption as a slot so it can render markdown, links, and other inline content:

import Figure from "@components/mdx/Figure.astro"

{/* Without caption */}
<Figure src="/images/my-image.jpg" alt="A description of the image" />

{/* With caption */}
<Figure src="/images/my-image.jpg" alt="A description of the image">
  A caption with a [link](https://example.com) if you need one.
</Figure>

Plain markdown images work too and also open in the lightbox:

![A description of the image](/images/my-image.jpg)

Use Figure when you need a caption. Use plain markdown images when you don’t.

Callout

Callouts are useful for highlighting important information, tips, or warnings. Sidey comes with a built-in Callout component with five variants: tip, note, warning, caution, and important.

import Callout from "@components/mdx/Callout.astro"

<Callout type="tip">This is a tip.</Callout>
<Callout type="note">This is a note.</Callout>
<Callout type="warning">This is a warning.</Callout>
<Callout type="caution">This is a caution.</Callout>
<Callout type="important">This is important.</Callout>

You can also pass a custom title:

<Callout type="warning" title="Before you continue">
  Make sure you have Node.js v22.12.0 or higher installed.
</Callout>

Callout Examples