chore: clean up Markdoc starter to essentials

examples/with-markdoc/src/components/Aside.astro

@@ -4,10 +4,14 @@ export interface Props {
 	title?: string;
 }
 
-const t = {
-	'aside.tip': 'Tip',
+const labelByType = {
+	note: 'Note',
+	tip: 'Tip',
+	caution: 'Caution',
+	danger: 'Danger',
 };
-const { type = 'note', title = t[`aside.${type}`] } = Astro.props as Props;
+const { type = 'note' } = Astro.props as Props;
+const title = Astro.props.title ?? labelByType[type] ?? '';
 
 // SVG icon paths based on GitHub Octicons
 const icons: Record<NonNullable<Props['type']>, { viewBox: string; d: string }> = {
@@ -49,6 +53,9 @@ const { viewBox, d } = icons[type];
 	aside {
 		--color-base-purple: 269, 79%;
 		--color-base-teal: 180, 80%;
+		--color-base-red: 351, 100%;
+		--color-base-yellow: 41, 100%;
+
 		--aside-color-base: var(--color-base-purple);
 		--aside-color-lightness: 54%;
 		--aside-accent-color: hsl(var(--aside-color-base), var(--aside-color-lightness));
@@ -57,19 +64,11 @@ const { viewBox, d } = icons[type];
 
 		border-inline-start: 4px solid var(--aside-accent-color);
 		padding: 1rem;
-		background-color: hsla(
-			var(--aside-color-base),
-			var(--aside-color-lightness),
-			var(--theme-accent-opacity)
-		);
+		background-color: hsla(var(--aside-color-base), var(--aside-color-lightness), 0.1);
 		/* Indicates the aside boundaries for forced colors users, transparent is changed to a solid color */
 		outline: 1px solid transparent;
 	}
 
-	:global(.theme-dark) aside {
-		--aside-text-lightness: 85%;
-	}
-
 	.title {
 		line-height: 1;
 		margin-bottom: 0.5rem;
@@ -92,15 +91,6 @@ const { viewBox, d } = icons[type];
 		color: var(--aside-text-accent-color);
 	}
 
-	aside :global(p),
-	aside.content :global(ul) {
-		color: var(--theme-text);
-	}
-
-	:global(.theme-dark) aside :global(code:not([class*='language'])) {
-		color: var(--theme-code-text);
-	}
-
 	aside :global(pre) {
 		margin-left: 0;
 		margin-right: 0;

examples/with-markdoc/src/components/DocsContent.astro

@@ -0,0 +1,43 @@
+---
+import Aside from './Aside.astro';
+import type { CollectionEntry } from 'astro:content';
+
+type Props = {
+	entry: CollectionEntry<'docs'>;
+};
+
+const { entry } = Astro.props;
+const { Content } = await entry.render();
+---
+
+<Content
+	config={{
+		// Accepts all Markdoc configuration options
+		// See https://markdoc.dev/docs/config#full-example
+		tags: {
+			aside: {
+				render: 'Aside',
+				attributes: {
+					type: { type: String },
+					title: { type: String },
+				},
+			},
+		},
+	}}
+	components={{
+		// Pass a mapping from the component name
+		// To an Astro or UI component import
+		Aside,
+	}}
+/>
+
+<style is:global>
+	table {
+		margin-block: 2rem;
+		margin-inline: auto;
+	}
+	table td {
+		padding-block: 0.3rem;
+		padding-inline: 0.5rem;
+	}
+</style>

examples/with-markdoc/src/content/config.ts

@@ -1,17 +1,9 @@
 import { defineCollection, z } from 'astro:content';
 
-const blog = defineCollection({
-	schema: z.object({
-		title: z.string(),
-	}),
-});
-
 const docs = defineCollection({
 	schema: z.object({
 		title: z.string(),
-		description: z.string(),
-		i18nReady: z.boolean(),
 	}),
 });
 
-export const collections = { blog, docs };
+export const collections = { docs };

examples/with-markdoc/src/content/docs/intro.mdoc

@@ -0,0 +1,39 @@
+---
+title: Welcome to Markdoc 👋
+---
+
+This simple starter showcases Markdoc with Content Collections. All Markdoc features are supported, including this nifty built-in `{% table %}` tag:
+
+{% table %}
+* Feature
+* Supported
+---
+* `.mdoc` in Content Collections
+* ✅
+---
+* Markdoc transform configuration
+* ✅
+---
+* Astro components
+* ✅
+{% /table %}
+
+{% aside title="Code Challenge" type="tip" %}
+
+Reveal the secret message below by adding `revealSecret: true` to your list of Markdoc variables.
+
+_Hint: Try [adding a `variables` object](https://markdoc.dev/docs/variables#global-variables) to the `config` property under `src/components/DocsContent.astro`._
+
+{% if $revealSecret %}
+
+Maybe the real secret was the Rick Rolls we shared along the way.
+
+![Rick Astley dancing](https://media.tenor.com/x8v1oNUOmg4AAAAM/rickroll-roll.gif)
+
+{% /if %}
+
+{% /aside %}
+
+Check out [the `@astrojs/markdoc` integration][astro-markdoc] for complete documentation and usage examples.
+
+[astro-markdoc]: https://docs.astro.build/en/guides/integrations-guide/markdoc/

examples/with-markdoc/src/layouts/Layout.astro

@@ -0,0 +1,35 @@
+---
+export interface Props {
+	title: string;
+}
+
+const { title } = Astro.props;
+---
+
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<meta name="generator" content={Astro.generator} />
+		<title>{title}</title>
+	</head>
+	<body>
+		<slot />
+	</body>
+</html>
+<style is:global>
+	html {
+		font-family: system-ui, sans-serif;
+		background-color: #f6f6f6;
+	}
+	code {
+		font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
+			Bitstream Vera Sans Mono, Courier New, monospace;
+	}
+	main {
+		margin: auto;
+		max-width: 60ch;
+	}
+</style>