diff --git a/.changeset/metal-bees-pretend.md b/.changeset/metal-bees-pretend.md new file mode 100644 index 000000000000..cfc54280bbb6 --- /dev/null +++ b/.changeset/metal-bees-pretend.md @@ -0,0 +1,5 @@ +--- +'@astrojs/mdx': patch +--- + +Document MDXLayoutProps utility type diff --git a/packages/integrations/mdx/README.md b/packages/integrations/mdx/README.md index 181e55faad36..c21ffee91f47 100644 --- a/packages/integrations/mdx/README.md +++ b/packages/integrations/mdx/README.md @@ -203,15 +203,16 @@ title: 'My Blog Post' --- ``` -Then, you can retrieve all other frontmatter properties from your layout via the `frontmatter` property, and render your MDX using the default [``](https://docs.astro.build/en/core-concepts/astro-components/#slots): +Then, you can retrieve all other frontmatter properties from your layout via the `frontmatter` property, and render your MDX using the default [``](https://docs.astro.build/en/core-concepts/astro-components/#slots). See [layout props](#layout-props) for a complete list of props available. ```astro --- // src/layouts/BaseLayout.astro -const { frontmatter } = Astro.props; +const { frontmatter, url } = Astro.props; --- + {frontmatter.title} @@ -222,6 +223,48 @@ const { frontmatter } = Astro.props; ``` +You can set a layout’s [`Props` type](/en/guides/typescript/#component-props) with the `MDXLayoutProps` helper. + +:::note +`MDXLayoutProps` is the same as the `MarkdownLayoutProps` utility type with `rawContent()` and `compiledContent()` removed (since these are not available for `.mdx` files). Feel free to **use `MarkdownLayoutProps` instead** when sharing a layout across `.md` and `.mdx` files. +::: + +```astro ins={2,4-9} +--- +// src/layouts/BaseLayout.astro +import type { MDXLayoutProps } from 'astro'; + +type Props = MDXLayoutProps<{ + // Define frontmatter props here + title: string; + author: string; + date: string; +}>; + +// Now, `frontmatter`, `url`, and other MDX layout properties +// are accessible with type safety +const { frontmatter, url } = Astro.props; +--- + + + + {frontmatter.title} + + +

{frontmatter.title}

+ + + +``` + +#### Layout props + +All [exported properties](#exported-properties) are available from `Astro.props` in your layout, **with two key differences:** +- Heading information (i.e. `h1 -> h6` elements) is available via the `headings` array, rather than a `getHeadings()` function. +- `file` and `url` are _also_ available as nested `frontmatter` properties (i.e. `frontmatter.url` and `frontmatter.file`). This is consistent with Astro's Markdown layout properties. + +Astro recommends using the `MDXLayoutProps` type (see previous section) to explore all available properties. + #### Importing layouts manually You may need to pass information to your layouts that does not (or cannot) exist in your frontmatter. In this case, you can import and use a [`` component](https://docs.astro.build/en/core-concepts/layouts/) like any other component: