Skip to content

Commit

Permalink
new markdown content page (#9344)
Browse files Browse the repository at this point in the history
Co-authored-by: Armand Philippot <[email protected]>
  • Loading branch information
sarah11918 and ArmandPhilippot authored Sep 9, 2024
1 parent 702ca3e commit d358e78
Show file tree
Hide file tree
Showing 13 changed files with 176 additions and 367 deletions.
2 changes: 1 addition & 1 deletion src/content/docs/en/basics/layouts.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -186,7 +186,7 @@ A Markdown layout will have access to the following information via `Astro.props
- **`compiledContent()`** - A function that returns the Markdown document compiled to an HTML string.

:::note
A Markdown layout will have access to all the Markdown file's [available properties](/en/guides/markdown-content/#exported-properties) from `Astro.props` **with two key differences:**
A Markdown layout will have access to all the Markdown file's [available properties](/en/guides/markdown-content/#available-properties) from `Astro.props` **with two key differences:**

* Heading information (i.e. `h1 -> h6` elements) is available via the `headings` array, rather than a `getHeadings()` function.

Expand Down
4 changes: 2 additions & 2 deletions src/content/docs/en/guides/integrations-guide/mdx.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -339,7 +339,7 @@ export default defineConfig({
<p><Since pkg="@astrojs/mdx" v="3.0.0" /></p>
Previously known as `customComponentNames`.

An optional property of `optimize` to prevent the MDX optimizer from handling certain element names, like [custom components passed to imported MDX content via the components prop](/en/guides/markdown-content/#custom-components-with-imported-mdx).
An optional property of `optimize` to prevent the MDX optimizer from handling certain element names, like [custom components passed to imported MDX content via the components prop](/en/guides/integrations-guide/mdx/#custom-components-with-imported-mdx).

You will need to exclude these components from optimization as the optimizer eagerly converts content into a static string, which will break custom components that needs to be dynamically rendered.

Expand Down Expand Up @@ -373,7 +373,7 @@ export default defineConfig({
});
```

Note that if your MDX file [configures custom components using `export const components = { ... }`](/en/guides/markdown-content/#assigning-custom-components-to-html-elements), then you do not need to manually configure this option. The optimizer will automatically detect them.
Note that if your MDX file [configures custom components using `export const components = { ... }`](/en/guides/integrations-guide/mdx/#assigning-custom-components-to-html-elements), then you do not need to manually configure this option. The optimizer will automatically detect them.

## Examples

Expand Down
511 changes: 160 additions & 351 deletions src/content/docs/en/guides/markdown-content.mdx

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/content/docs/en/guides/migrate-to-astro.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ Depending on your existing project, you may be able to use your existing:

- [CSS stylesheets or libraries](/en/guides/styling/) including Tailwind.

- [Markdown/MDX files](/en/guides/markdown-content/), configured using your existing [remark and rehype plugins](/en/guides/markdown-content/#configuring-markdown-and-mdx).
- [Markdown/MDX files](/en/guides/markdown-content/), configured using your existing [remark and rehype plugins](/en/guides/markdown-content/#markdown-plugins).

- [Content from a CMS](/en/guides/cms/) through an integration or API.

Expand Down
2 changes: 1 addition & 1 deletion src/content/docs/en/guides/troubleshooting.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ This means that your site’s [Content Security Policy](https://developer.mozill

### My component is not rendering

First, check to see that you have **imported the component** in your [`.astro` component script](/en/basics/astro-components/#the-component-script) or [`.mdx` file](/en/guides/markdown-content/#using-components-in-mdx).
First, check to see that you have **imported the component** in your [`.astro` component script](/en/basics/astro-components/#the-component-script) or [`.mdx` file](/en/guides/integrations-guide/mdx/#using-components-in-mdx).

Then check your import statement:

Expand Down
2 changes: 1 addition & 1 deletion src/content/docs/en/recipes/modified-time.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ Learn how to build a [remark plugin](https://github.com/remarkjs/remark) that ad
</html>
```

If you're using a [Markdown layout](/en/guides/markdown-content/#markdown-and-mdx-pages), use the `lastModified` frontmatter property from `Astro.props` in your layout template.
If you're using a [Markdown layout](/en/basics/layouts/#markdown-layouts), use the `lastModified` frontmatter property from `Astro.props` in your layout template.

```astro title="src/layouts/BlogLayout.astro" {2-3,5,7-9,15}
---
Expand Down
2 changes: 1 addition & 1 deletion src/content/docs/en/recipes/reading-time.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ Create a [remark plugin](https://github.com/remarkjs/remark) which adds a readin
</html>
```

If you're using a [Markdown layout](/en/guides/markdown-content/#markdown-and-mdx-pages), use the `minutesRead` frontmatter property from `Astro.props` in your layout template.
If you're using a [Markdown layout](/en/basics/layouts/#markdown-layouts), use the `minutesRead` frontmatter property from `Astro.props` in your layout template.

```astro title="src/layouts/BlogLayout.astro" "const { minutesRead } = Astro.props.frontmatter;" "<p>{minutesRead}</p>"
---
Expand Down
4 changes: 2 additions & 2 deletions src/content/docs/en/reference/api-reference.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,7 @@ import Heading from '../components/Heading.astro';
<Heading title="My First Post" date="09 Aug 2022" />
```

<ReadMore>Learn more about how [Markdown and MDX Layouts](/en/guides/markdown-content/#frontmatter-layout) handle props.</ReadMore>
<ReadMore>Learn more about how [Markdown and MDX Layouts](/en/guides/markdown-content/#frontmatter-layout-property) handle props.</ReadMore>

<ReadMore>Learn how to add [TypeScript type definitions for your props](/en/guides/typescript/#component-props).</ReadMore>

Expand Down Expand Up @@ -1678,7 +1678,7 @@ A string containing the raw, uncompiled body of the Markdown or MDX document.
A function to compile a given Markdown or MDX document for rendering. This returns the following properties:

- `<Content />` - A component used to render the document's contents in an Astro file.
- `headings` - A generated list of headings, [mirroring Astro's `getHeadings()` utility](/en/guides/markdown-content/#exported-properties) on Markdown and MDX imports.
- `headings` - A generated list of headings, [mirroring Astro's `getHeadings()` utility](/en/guides/markdown-content/#available-properties) on Markdown and MDX imports.
- `remarkPluginFrontmatter ` - The modified frontmatter object after any [remark or rehype plugins have been applied](/en/guides/markdown-content/#modifying-frontmatter-programmatically). Set to type `any`.

```astro
Expand Down
2 changes: 1 addition & 1 deletion src/content/docs/en/reference/directives-reference.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ These directives control how [UI Framework components](/en/guides/framework-comp

By default, a UI Framework component is not hydrated in the client. If no `client:*` directive is provided, its HTML is rendered onto the page without JavaScript.

A client directive can only be used on a UI framework component that is directly imported into a `.astro` component. Hydration directives are not supported when using [dynamic tags](/en/basics/astro-syntax/#dynamic-tags) and [custom components passed via the `components` prop](/en/guides/markdown-content/#custom-components-with-imported-mdx).
A client directive can only be used on a UI framework component that is directly imported into a `.astro` component. Hydration directives are not supported when using [dynamic tags](/en/basics/astro-syntax/#dynamic-tags) and [custom components passed via the `components` prop](/en/guides/integrations-guide/mdx/#custom-components-with-imported-mdx).

### `client:load`

Expand Down
2 changes: 1 addition & 1 deletion src/content/docs/en/tutorial/4-layouts/2.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -176,7 +176,7 @@ Can you figure out what should go in the blanks so that the following two compon

### Resources

- [Markdown Layouts in Astro](/en/guides/markdown-content/#frontmatter-layout)
- [Markdown Layouts in Astro](/en/guides/markdown-content/#frontmatter-layout-property)

- [Markdown Layout Props](/en/basics/layouts/#markdown-layout-props)

Expand Down
4 changes: 2 additions & 2 deletions src/content/docs/it/basics/layouts.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ import MySiteLayout from '../layouts/MySiteLayout.astro';

## Layout Markdown/MDX

I layout di pagina sono particolarmente utili per le [pagine Markdown e MDX](/it/guides/markdown-content/#markdown-and-mdx-pages) che altrimenti non avrebbero alcuna formattazione della pagina.
I layout di pagina sono particolarmente utili per le [pagine Markdown e MDX](/it/guides/markdown-content/#individual-markdown-pages) che altrimenti non avrebbero alcuna formattazione della pagina.

Astro fornisce una speciale proprietà frontmatter `layout` per specificare quale componente `.astro` utilizzare come layout di pagina.

Expand Down Expand Up @@ -185,7 +185,7 @@ Astro.props = {
```

:::note
Un layout Markdown/MDX avrà accesso a tutte le [proprietà esportate](/it/guides/markdown-content/#exported-properties) di tutti i suoi file da `Astro.props` **con alcune differenze fondamentali:**
Un layout Markdown/MDX avrà accesso a tutte le [proprietà esportate](/it/guides/markdown-content/#available-properties) di tutti i suoi file da `Astro.props` **con alcune differenze fondamentali:**

* Le informazioni sull'intestazione (ad esempio gli elementi `h1 -> h6`) sono disponibili tramite l'array `headings`, anziché tramite la funzione `getHeadings()`.

Expand Down
4 changes: 2 additions & 2 deletions src/content/docs/zh-tw/basics/layouts.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ import MySiteLayout from '../layouts/MySiteLayout.astro';

## Markdown/MDX 版面

版面對無法自訂頁面格式的 [Markdown 和 MDX 頁面](/zh-tw/guides/markdown-content/#markdown-and-mdx-pages)來說很實用。
版面對無法自訂頁面格式的 [Markdown 和 MDX 頁面](/zh-tw/guides/markdown-content/#individual-markdown-pages)來說很實用。

Astro 特殊的 `layout` frontmatter 屬性可以指定要把哪一個 `.astro` 元件當作頁面版面。

Expand Down Expand Up @@ -185,7 +185,7 @@ Astro.props = {
```

:::note
Markdown/MDX 版面也能透過 `Astro.props` 存取檔案的[匯出屬性](/zh-tw/guides/markdown-content/#exported-properties),不過其中**有些差異**
Markdown/MDX 版面也能透過 `Astro.props` 存取檔案的[匯出屬性](/zh-tw/guides/markdown-content/#available-properties),不過其中**有些差異**

* 標題資訊(即 `h1 -> h6` 元素)透過 `headings` 陣列存取,而非 `getHeadings()` 函式。

Expand Down
2 changes: 1 addition & 1 deletion src/content/docs/zh-tw/guides/migrate-to-astro.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ Astro 提供了許多好處:性能、簡單性,以及許多您想要的功

- 使用您現有的 [CSS 樣式或函式庫](/zh-tw/guides/styling/) 包括 Tailwind。

- 使用您現有的 [Markdown/MDX 檔案](/zh-tw/guides/markdown-content/),以及 [remark 和 rehype 套件](/zh-tw/guides/markdown-content/#configuring-markdown-and-mdx) 進行設定。
- 使用您現有的 [Markdown/MDX 檔案](/zh-tw/guides/markdown-content/),以及 [remark 和 rehype 套件](/zh-tw/guides/markdown-content/#markdown-plugins) 進行設定。

- 透過整合或 API 取得 [來自 CMS 的內容](/zh-tw/guides/cms/)

Expand Down

0 comments on commit d358e78

Please sign in to comment.