feat: add kitchen sink for callouts

.pre-commit-config.yaml

@@ -19,6 +19,6 @@ repos:
       - id: editorconfig-checker
         alias: ec
   - repo: https://github.com/pre-commit/mirrors-prettier
-    rev: v3.0.0-alpha.9-for-vscode
+    rev: v3.0.0
     hooks:
       - id: prettier

astro.config.mjs

@@ -35,6 +35,7 @@ export default defineConfig({
         tabsAutoImport,
         tabNameAutoImport,
         tabContentAutoImport,
+        "@components/Aside.astro",
       ],
     }),
     // Enable Preact to support Preact JSX components.

src/content/docs/en/kitchen-sink/index.mdx

@@ -0,0 +1,91 @@
+---
+title: "Kitchen sink"
+description: "A test page for custom components"
+slug: "en/kitchen-sink/index"
+category-title: "Kitchen sink"
+---
+
+This page includes documentation for this site's custom authoring components and examples of their use.
+
+## Callouts
+
+Callouts are `<aside>` components which display additional information in visually distinct ways.
+
+### Props
+
+| Prop    | Data type | Values                                                                                                                                             | Required               |
+| ------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- |
+| `type`  | String    | <ul><li><code>note</code></li><li><code>tip</code></li><li><code>caution</code></li><li><code>danger</code></li><li><code>seealso</code></li></ul> | No. Defaults to `note` |
+| `title` | String    | The title of the callout                                                                                                                           | No. Defaults to `type` |
+
+### Examples
+
+#### Note callout
+
+```mdx
+<Aside type="note" title="A note callout">
+   This is a *note* callout. It **renders**
+   [Markdown](https://www.markdownguide.org/).
+</Aside>
+```
+
+<Aside type="note" title="A note callout">
+   This is a *note* callout. It **renders**
+   [Markdown](https://www.markdownguide.org/).
+</Aside>
+
+#### Tip callout
+
+```mdx
+<Aside type="tip" title="A tip callout">
+   This is a *tip* callout. It **renders**
+   [Markdown](https://www.markdownguide.org/).
+</Aside>
+```
+
+<Aside type="tip" title="A tip callout">
+   This is a *tip* callout. It **renders**
+   [Markdown](https://www.markdownguide.org/).
+</Aside>
+
+#### Caution callout
+
+```mdx
+<Aside type="caution" title="A caution callout">
+   This is a *caution* callout. It **renders**
+   [Markdown](https://www.markdownguide.org/).
+</Aside>
+```
+
+<Aside type="caution" title="A caution callout">
+   This is a *caution* callout. It **renders**
+   [Markdown](https://www.markdownguide.org/).
+</Aside>
+
+#### Danger callout
+
+```mdx
+<Aside type="danger" title="A danger callout">
+   This is a *danger* callout. It **renders**
+   [Markdown](https://www.markdownguide.org/).
+</Aside>
+```
+
+<Aside type="danger" title="A danger callout">
+   This is a *danger* callout. It **renders**
+   [Markdown](https://www.markdownguide.org/).
+</Aside>
+
+#### Seealso callout
+
+```mdx
+<Aside type="seealso" title="A seealso callout">
+   This is a *seealso* callout. It **renders**
+   [Markdown](https://www.markdownguide.org/).
+</Aside>
+```
+
+<Aside type="seealso" title="A seealso callout">
+   This is a *seealso* callout. It **renders**
+   [Markdown](https://www.markdownguide.org/).
+</Aside>