docs: add markdoc examples

HiDeoo · Sep 6, 2024 · 1b3e216 · 1b3e216
1 parent c75bc4d
commit 1b3e216
Show file tree

Hide file tree

Showing 13 changed files with 416 additions and 5 deletions.
diff --git a/docs/src/components/component-preview.astro b/docs/src/components/component-preview.astro
@@ -1,5 +1,24 @@
+---
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+
+const showContentTypeTabs = Astro.slots.has('markdoc');
+---
+
 <figure>
-	<slot />
+	{
+		showContentTypeTabs ? (
+			<Tabs syncKey="content-type">
+				<TabItem label="MDX">
+					<slot />
+				</TabItem>
+				<TabItem label="Markdoc">
+					<slot name="markdoc" />
+				</TabItem>
+			</Tabs>
+		) : (
+			<slot />
+		)
+	}
 	<div class="preview">
 		<figcaption>Preview</figcaption>
 		<div class="preview-content"><slot name="preview" /></div>

diff --git a/docs/src/content/docs/components/asides.mdx b/docs/src/content/docs/components/asides.mdx
@@ -53,6 +53,34 @@ Other content is also supported in asides.
 <Aside type="danger">Do not give your password to anyone.</Aside>
 ````
 
+<Fragment slot="markdoc">
+
+````markdoc
+# src/content/docs/example.mdoc
+
+{% aside %}
+Some content in an aside.
+{% /aside %}
+
+{% aside type="caution" %}
+Some cautionary content.
+{% /aside %}
+
+{% aside type="tip" %}
+Other content is also supported in asides.
+
+```js
+// A code snippet, for example.
+```
+{% /aside %}
+
+{% aside type="danger" %}
+Do not give your password to anyone.
+{% /aside %}
+````
+
+</Fragment>
+
 <Fragment slot="preview">
 
     <Aside>Some content in an aside.</Aside>
@@ -94,6 +122,18 @@ import { Aside } from '@astrojs/starlight/components';
 </Aside>
 ```
 
+<Fragment slot="markdoc">
+
+```markdoc 'title="Watch out!"'
+# src/content/docs/example.mdoc
+
+{% aside type="caution" title="Watch out!" %}
+A warning aside *with* a custom title.
+{% /aside %}
+```
+
+</Fragment>
+
 <Aside slot="preview" type="caution" title="Watch out!">
 	A warning aside *with* a custom title.
 </Aside>

diff --git a/docs/src/content/docs/components/badges.mdx b/docs/src/content/docs/components/badges.mdx
@@ -40,6 +40,18 @@ import { Badge } from '@astrojs/starlight/components';
 <Badge text="Starlight" variant="note" />
 ```
 
+<Fragment slot="markdoc">
+
+```markdoc
+# src/content/docs/example.mdoc
+
+{% badge text="New" variant="tip" /%}
+{% badge text="Deprecated" variant="caution" /%}
+{% badge text="Starlight" variant="note" /%}
+```
+
+</Fragment>
+
 <Fragment slot="preview">
 	<Badge text="New" variant="tip" />
 	<Badge text="Deprecated" variant="caution" />
@@ -64,6 +76,18 @@ import { Badge } from '@astrojs/starlight/components';
 <Badge text="New, improved, and bigger" size="large" />
 ```
 
+<Fragment slot="markdoc">
+
+```markdoc /size="\w+"/
+# src/content/docs/example.mdoc
+
+{% badge text="New" size="small" /%}
+{% badge text="New and improved" size="medium" /%}
+{% badge text="New, improved, and bigger" size="large" /%}
+```
+
+</Fragment>
+
 <Fragment slot="preview">
 	<Badge text="New" size="small" />
 	<Badge text="New and improved" size="medium" />
@@ -86,6 +110,16 @@ import { Badge } from '@astrojs/starlight/components';
 <Badge text="Custom" variant="success" style={{ fontStyle: 'italic' }} />
 ```
 
+<Fragment slot="markdoc">
+
+```markdoc 'style="font-style: italic;"'
+# src/content/docs/example.mdoc
+
+{% badge text="Custom" variant="success" style="font-style: italic;" /%}
+```
+
+</Fragment>
+
 <Badge
 	slot="preview"
 	text="Custom"

diff --git a/docs/src/content/docs/components/card-grids.mdx b/docs/src/content/docs/components/card-grids.mdx
@@ -51,6 +51,24 @@ import { Card, CardGrid } from '@astrojs/starlight/components';
 </CardGrid>
 ```
 
+<Fragment slot="markdoc">
+
+```markdoc {3,11}
+# src/content/docs/example.mdoc
+
+{% cardgrid %}
+{% card title="Check this out" icon="open-book" %}
+Interesting content you want to highlight.
+{% /card %}
+
+{% card title="Other feature" icon="information" %}
+More information you want to share.
+{% /card %}
+{% /cardgrid %}
+```
+
+</Fragment>
+
 <CardGrid slot="preview">
 	<Card title="Check this out" icon="open-book">
 		Interesting content you want to highlight.
@@ -79,6 +97,20 @@ import { Card, CardGrid } from '@astrojs/starlight/components';
 </CardGrid>
 ```
 
+<Fragment slot="markdoc">
+
+```markdoc {3,7}
+# src/content/docs/example.mdoc
+
+{% cardgrid %}
+{% linkcard title="Authoring Markdown" href="/guides/authoring-content/" /%}
+
+{% linkcard title="Components" href="/guides/components/" /%}
+{% /cardgrid %}
+```
+
+</Fragment>
+
 <CardGrid slot="preview">
 	<LinkCard title="Authoring Markdown" href="/guides/authoring-content/" />
 	<LinkCard title="Components" href="/guides/components/" />
@@ -109,6 +141,24 @@ import { Card, CardGrid } from '@astrojs/starlight/components';
 </CardGrid>
 ```
 
+<Fragment slot="markdoc">
+
+```markdoc "stagger=true"
+# src/content/docs/example.mdoc
+
+{% cardgrid stagger=true %}
+{% card title="Check this out" icon="open-book" %}
+Interesting content you want to highlight.
+{% /card %}
+
+{% card title="Other feature" icon="information" %}
+More information you want to share.
+{% /card %}
+{% /cardgrid %}
+```
+
+</Fragment>
+
 <CardGrid slot="preview" stagger>
 	<Card title="Check this out" icon="open-book">
 		Interesting content you want to highlight.

diff --git a/docs/src/content/docs/components/cards.mdx b/docs/src/content/docs/components/cards.mdx
@@ -39,6 +39,18 @@ import { Card } from '@astrojs/starlight/components';
 <Card title="Check this out">Interesting content you want to highlight.</Card>
 ```
 
+<Fragment slot="markdoc">
+
+```markdoc
+# src/content/docs/example.mdoc
+
+{% card title="Check this out" %}
+Interesting content you want to highlight.
+{% /card %}
+```
+
+</Fragment>
+
 <Card slot="preview" title="Check this out">
 	Interesting content you want to highlight.
 </Card>
@@ -61,6 +73,18 @@ import { Card } from '@astrojs/starlight/components';
 </Card>
 ```
 
+<Fragment slot="markdoc">
+
+```markdoc 'icon="star"'
+# src/content/docs/example.mdoc
+
+{% card title="Stars" icon="star" %}
+Sirius, Vega, Betelgeuse
+{% /card %}
+```
+
+</Fragment>
+
 <Card slot="preview" title="Stars" icon="star">
 	Sirius, Vega, Betelgeuse
 </Card>

diff --git a/docs/src/content/docs/components/code.mdx b/docs/src/content/docs/components/code.mdx
@@ -49,6 +49,20 @@ export const highlights = ['file', 'CMS'];
 <Code code={exampleCode} lang="js" title={fileName} mark={highlights} />
 ```
 
+<Fragment slot="markdoc">
+
+```markdoc
+# src/content/docs/example.mdoc
+
+{% code
+   code="console.log('This could come from a file or CMS!');"
+   lang="js"
+   title="example.js"
+   meta="'file' 'CMS'" /%}
+```
+
+</Fragment>
+
 export const exampleCode = `console.log('This could come from a file or CMS!');`;
 export const fileName = 'example.js';
 export const highlights = ['file', 'CMS'];

diff --git a/docs/src/content/docs/components/file-tree.mdx b/docs/src/content/docs/components/file-tree.mdx
@@ -58,6 +58,23 @@ import { FileTree } from '@astrojs/starlight/components';
 </FileTree>
 ```
 
+<Fragment slot="markdoc">
+
+```markdoc
+# src/content/docs/example.mdoc
+
+{% filetree %}
+- astro.config.mjs
+- package.json
+- src
+  - components
+    - Header.astro
+    - Title.astro
+{% /filetree %}
+```
+
+</Fragment>
+
 <FileTree slot="preview">
 
 - astro.config.mjs
@@ -92,6 +109,21 @@ import { FileTree } from '@astrojs/starlight/components';
 </FileTree>
 ```
 
+<Fragment slot="markdoc">
+
+```markdoc {6}
+# src/content/docs/example.mdoc
+
+{% filetree %}
+- src
+  - components
+    - **Header.astro**
+    - Title.astro
+{% /filetree %}
+```
+
+</Fragment>
+
 <FileTree slot="preview">
 
 - src
@@ -125,6 +157,21 @@ import { FileTree } from '@astrojs/starlight/components';
 </FileTree>
 ```
 
+<Fragment slot="markdoc">
+
+```markdoc {6}
+# src/content/docs/example.mdoc
+
+{% filetree %}
+- src
+  - components
+    - Header.astro an **important** file
+    - Title.astro
+{% /filetree %}
+```
+
+</Fragment>
+
 <FileTree slot="preview">
 
 - src
@@ -157,6 +204,21 @@ import { FileTree } from '@astrojs/starlight/components';
 </FileTree>
 ```
 
+<Fragment slot="markdoc">
+
+```markdoc {7}
+# src/content/docs/example.mdoc
+
+{% filetree %}
+- src
+  - components
+    - Header.astro
+    - …
+{% /filetree %}
+```
+
+</Fragment>
+
 <FileTree slot="preview">
 
 - src

diff --git a/docs/src/content/docs/components/icons.mdx b/docs/src/content/docs/components/icons.mdx
@@ -42,6 +42,17 @@ import { Icon } from '@astrojs/starlight/components';
 <Icon name="starlight" label="The Starlight logo" />
 ```
 
+<Fragment slot="markdoc">
+
+```markdoc
+# src/content/docs/example.mdoc
+
+{% icon name="star" /%}
+{% icon name="starlight" label="The Starlight logo" /%}
+```
+
+</Fragment>
+
 <Fragment slot="preview">
 	<Icon name="star" />
 	<Icon name="starlight" label="The Starlight logo" />
@@ -65,6 +76,17 @@ import { Card } from '@astrojs/starlight/components';
 <Icon name="rocket" color="var(--sl-color-text-accent)" />
 ```
 
+<Fragment slot="markdoc">
+
+```markdoc
+# src/content/docs/example.mdoc
+
+{% icon name="star" color="goldenrod" size="2rem" /%}
+{% icon name="rocket" color="var(--sl-color-text-accent)" /%}
+```
+
+</Fragment>
+
 <Fragment slot="preview">
 	<Icon name="star" color="goldenrod" size="2rem" />
 	<Icon name="rocket" color="var(--sl-color-text-accent)" />