Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

new markdown content page #9344

Merged
merged 7 commits into from
Sep 9, 2024
Merged
Show file tree
Hide file tree
Changes from 5 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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
509 changes: 159 additions & 350 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
Loading