From 2e2c9cc8d42822d3f2cdf45dd8899e1bc06e8624 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ciar=C3=A1n=20Ainsworth?= <ciaranainsworth@gmail.com>
Date: Wed, 2 Aug 2023 13:22:37 +0200
Subject: [PATCH] feat: add kitchen sink for callouts

---
 .pre-commit-config.yaml                    |  2 +-
 astro.config.mjs                           |  1 +
 src/content/docs/en/kitchen-sink/index.mdx | 91 ++++++++++++++++++++++
 3 files changed, 93 insertions(+), 1 deletion(-)
 create mode 100644 src/content/docs/en/kitchen-sink/index.mdx

diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 7327a054d..77c11d9bc 100644
--- a/.pre-commit-config.yaml
+++ b/.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
diff --git a/astro.config.mjs b/astro.config.mjs
index be80e7cbd..ad6900c49 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -35,6 +35,7 @@ export default defineConfig({
         tabsAutoImport,
         tabNameAutoImport,
         tabContentAutoImport,
+        "@components/Aside.astro",
       ],
     }),
     // Enable Preact to support Preact JSX components.
diff --git a/src/content/docs/en/kitchen-sink/index.mdx b/src/content/docs/en/kitchen-sink/index.mdx
new file mode 100644
index 000000000..6ac9abf84
--- /dev/null
+++ b/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>