From dcfa414108501daf91e4bc701ba444ed56c86da9 Mon Sep 17 00:00:00 2001 From: bholmesdev Date: Fri, 9 Sep 2022 15:42:59 -0400 Subject: [PATCH 1/5] docs: add MDXLayoutProps to README --- packages/integrations/mdx/README.md | 45 +++++++++++++++++++++++++++-- 1 file changed, 43 insertions(+), 2 deletions(-) diff --git a/packages/integrations/mdx/README.md b/packages/integrations/mdx/README.md index 181e55faad36..0ab635637127 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,46 @@ const { frontmatter } = Astro.props; ``` +You can also add type safety using [the `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). If you understand this difference, 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 a couple 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: From 84d78e0ad281d261837988496fcf3867fee7c3b8 Mon Sep 17 00:00:00 2001 From: bholmesdev Date: Fri, 9 Sep 2022 15:45:42 -0400 Subject: [PATCH 2/5] chore: changeset --- .changeset/metal-bees-pretend.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/metal-bees-pretend.md 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 From fa797571f3044722321423cf9f179a5dffe7fa94 Mon Sep 17 00:00:00 2001 From: bholmesdev Date: Mon, 12 Sep 2022 10:51:45 -0400 Subject: [PATCH 3/5] nit: remove "if you understand this diff" --- packages/integrations/mdx/README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/integrations/mdx/README.md b/packages/integrations/mdx/README.md index 0ab635637127..d20bb84ea9bd 100644 --- a/packages/integrations/mdx/README.md +++ b/packages/integrations/mdx/README.md @@ -225,7 +225,9 @@ const { frontmatter, url } = Astro.props; You can also add type safety using [the `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). If you understand this difference, feel free to use `MarkdownLayoutProps` instead when sharing a layout across `.md` and `.mdx` files._ +:::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} --- From 98bd52145437505ba9dc5645d9bff4273edd6add Mon Sep 17 00:00:00 2001 From: Ben Holmes Date: Mon, 12 Sep 2022 11:27:12 -0400 Subject: [PATCH 4/5] nit: AdD tYpE sAfEtY Co-authored-by: Chris Swithinbank --- packages/integrations/mdx/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/integrations/mdx/README.md b/packages/integrations/mdx/README.md index d20bb84ea9bd..3735e6f8e5ec 100644 --- a/packages/integrations/mdx/README.md +++ b/packages/integrations/mdx/README.md @@ -223,7 +223,7 @@ const { frontmatter, url } = Astro.props; ``` -You can also add type safety using [the `Props` type](/en/guides/typescript/#component-props) with the `MDXLayoutProps` helper. +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. From d1ad7395e582338687f1955e06cc047d2eb3f2a5 Mon Sep 17 00:00:00 2001 From: Matthew Phillips Date: Thu, 22 Sep 2022 14:32:34 -0400 Subject: [PATCH 5/5] Update packages/integrations/mdx/README.md Co-authored-by: Sarah Rainsberger --- packages/integrations/mdx/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/integrations/mdx/README.md b/packages/integrations/mdx/README.md index 3735e6f8e5ec..c21ffee91f47 100644 --- a/packages/integrations/mdx/README.md +++ b/packages/integrations/mdx/README.md @@ -259,7 +259,7 @@ const { frontmatter, url } = Astro.props; #### Layout props -All [exported properties](#exported-properties) are available from `Astro.props` in your layout, **with a couple key differences:** +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.