Markdown content prop -> frontmatter prop (#1232)

* edit: Markdown `content` -> `frontmatter` prop * fix: update layout props model * fix: remove top-level file and url
withastro · Aug 12, 2022 · 5129426 · 5129426
1 parent 7b7ed08
commit 5129426
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 23 deletions.
diff --git a/src/pages/en/core-concepts/layouts.md b/src/pages/en/core-concepts/layouts.md
@@ -68,19 +68,19 @@ description: My first blog post!
 This is a post written in Markdown.
 ```
 
-When a Markdown file includes a layout, it passes a `content` property to the `.astro` component which includes the frontmatter properties and the final HTML output of the page.
+When a Markdown file includes a layout, it passes a `frontmatter` property to the `.astro` component which includes the frontmatter properties and the final HTML output of the page.
 
 
 **`src/layouts/BlogPostLayout.astro`**
 
-```astro /content(?:.\w+)?/
+```astro /frontmatter(?:.\w+)?/
 ---
-const {content} = Astro.props;
+const {frontmatter} = Astro.props;
 ---
 <html>
    <!-- ... -->
-  <h1>{content.title}</h1>
-  <h2>Post author: {content.author}</h2>
+  <h1>{frontmatter.title}</h1>
+  <h2>Post author: {frontmatter.author}</h2>
   <slot />
    <!-- ... -->
 </html>
@@ -99,11 +99,11 @@ For example, a common layout for blog posts may display a title, date and author
 ```astro {2} /</?BaseLayout>/
 ---
 import BaseLayout from '../layouts/BaseLayout.astro'
-const {content} = Astro.props;
+const {frontmatter} = Astro.props;
 ---
 <BaseLayout>
-  <h1>{content.title}</h1>
-  <h2>Post author: {content.author}</h2>
+  <h1>{frontmatter.title}</h1>
+  <h2>Post author: {frontmatter.author}</h2>
   <slot />
 </BaseLayout>
 ```
diff --git a/src/pages/en/guides/markdown-content.md b/src/pages/en/guides/markdown-content.md
@@ -46,26 +46,26 @@ layout: ../layouts/BaseLayout.astro
 
 A typical layout for Markdown pages includes:
 
-1. The `content` prop to access the Markdown or MDX page's frontmatter and other data. See [Markdown Layout Props](#markdown-layout-props) for a complete list of props available.
+1. The `frontmatter` prop to access the Markdown or MDX page's frontmatter and other data. See [Markdown Layout Props](#markdown-layout-props) for a complete list of props available.
 2. A default [`<slot />`](/en/core-concepts/astro-components/#slots) to indicate where the page's Markdown content should be rendered.
 
-```astro /(?<!//.*){?content(?:\\.\w+)?}?/ "<slot />"
+```astro /(?<!//.*){?frontmatter(?:\\.\w+)?}?/ "<slot />"
 ---
 // src/layouts/BaseLayout.astro
-// 1. The content prop gives access to frontmatter and other data
-const { content } = Astro.props;
+// 1. The frontmatter prop gives access to frontmatter and other data
+const { frontmatter } = Astro.props;
 ---
 <html>
   <head>
     <!-- Add other Head elements here, like styles and meta tags. -->
-    <title>{content.title}</title>
+    <title>{frontmatter.title}</title>
   </head>
   <body>
     <!-- Add other UI components here, like common headers and footers. -->
-    <h1>{content.title} by {content.author}</h1>
+    <h1>{frontmatter.title} by {frontmatter.author}</h1>
     <!-- 2. Rendered HTML will be passed into the default slot. -->
     <slot />
-    <p>Written on: {content.date}</p>
+    <p>Written on: {frontmatter.date}</p>
   </body>
 </html>
 ```
@@ -78,9 +78,9 @@ Markdown and MDX files do not return identical `Astro.props` objects. See the MD
 
 A Markdown layout will have access to the following information via `Astro.props`:
 
-- **`content`** - all frontmatter from the Markdown or MDX document.
-  - **`content.file`** - The absolute path of this file (e.g. `/home/user/projects/.../file.md`).
-  - **`content.url`** - If it's a page, the URL of the page (e.g. `/en/guides/markdown-content`).
+- **`frontmatter`** - all frontmatter from the Markdown or MDX document.
+  - **`frontmatter.file`** - The absolute path of this file (e.g. `/home/user/projects/.../file.md`).
+  - **`frontmatter.url`** - If it's a page, the URL of the page (e.g. `/en/guides/markdown-content`).
 - **`headings`** - A list of headings (`h1 -> h6`) in the Markdown document with associated metadata. This list follows the type: `{ depth: number; slug: string; text: string }[]`.
 - **`rawContent()`** - A function that returns the raw Markdown document as a string.
 - **`compiledContent()`** - A function that returns the Markdown document compiled to an HTML string.
@@ -89,7 +89,7 @@ An example blog post may pass the following `Astro.props` object to its layout:
 
 ```js
 Astro.props = {
-  content: {
+  frontmatter: {
     /** Frontmatter from a blog post */
     title: "Astro 0.18 Release",
     date: "Tuesday, July 27 2021",
@@ -119,14 +119,14 @@ Astro.props = {
 
 #### Example: Using one Layout that works for `.md`, `.mdx`, and `.astro` files
 
-A single Astro layout can be written to receive the content object from `.md` and `.mdx` files, as well as any named props passed from `.astro` files.
+A single Astro layout can be written to receive the `frontmatter` object from `.md` and `.mdx` files, as well as any named props passed from `.astro` files.
 
 In the example below, the layout will display the page title either from an Astro component passing a `title` attribute or from a frontmatter YAML `title` property:
 
 ```astro /{?title}?/ /Astro.props[.a-z]*/
 ---
 // src/components/MyLayout.astro
-const { title } = Astro.props.content || Astro.props;
+const { title } = Astro.props.frontmatter || Astro.props;
 ---
 <html>
   <head></head>
@@ -467,9 +467,9 @@ export default {
 
 ...all Markdown documents will have a calculated `minutesRead`. You can use this to include an "X min read" banner in a [markdown layout](#markdown-and-mdx-pages), for instance:
 
-```astro title="src/layouts/BlogLayout.astro" "const { minutesRead } = Astro.props.content;" "<p>{minutesRead}</p>"
+```astro title="src/layouts/BlogLayout.astro" "const { minutesRead } = Astro.props.frontmatter;" "<p>{minutesRead}</p>"
 ---
-const { minutesRead } = Astro.props.content;
+const { minutesRead } = Astro.props.frontmatter;
 ---
 
 <html>