michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

docs: add MDXLayoutProps to README (#4700)

Browse source 
* docs: add MDXLayoutProps to README

* chore: changeset

* nit: remove "if you understand this diff"

* nit: AdD tYpE sAfEtY

Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>

* Update packages/integrations/mdx/README.md

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>
Co-authored-by: Matthew Phillips <matthew@skypack.dev>
Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
This commit is contained in:
Ben Holmes 2022-09-22 14:35:37 -04:00 committed by GitHub
parent 17dbc67018
commit e5f71142eb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 50 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/metal-bees-pretend.md Normal file
View file

@ -0,0 +1,5 @@
---
'@astrojs/mdx': patch
---
Document MDXLayoutProps utility type

47
packages/integrations/mdx/README.md
View file

@ -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 [`<slot />`](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 [`<slot />`](https://docs.astro.build/en/core-concepts/astro-components/#slots). See [layout props](#layout-props) for a complete list of props available.
```astro ```astro
--- ---
// src/layouts/BaseLayout.astro // src/layouts/BaseLayout.astro
const { frontmatter } = Astro.props; const { frontmatter, url } = Astro.props;
--- ---
<html> <html>
<head> <head>
<meta rel="canonical" href={new URL(url, Astro.site).pathname}>
<title>{frontmatter.title}</title> <title>{frontmatter.title}</title>
</head> </head>
<body> <body>
@ -222,6 +223,48 @@ const { frontmatter } = Astro.props;
</html> </html>
``` ```
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;
---
<html>
<head>
<meta rel="canonical" href={new URL(url, Astro.site).pathname}>
<title>{frontmatter.title}</title>
</head>
<body>
<h1>{frontmatter.title}</h1>
<slot />
</body>
</html>
```
#### 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 #### 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 [`<Layout />` component](https://docs.astro.build/en/core-concepts/layouts/) like any other component: 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 [`<Layout />` component](https://docs.astro.build/en/core-concepts/layouts/) like any other component: