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

Add charset note md/mdx pages #9757

Merged
merged 5 commits into from
Oct 31, 2024
Merged
Show file tree
Hide file tree
Changes from 1 commit
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
6 changes: 6 additions & 0 deletions src/content/docs/en/basics/layouts.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -234,6 +234,12 @@ const { title, fancyJsHelper } = Astro.props;

<ReadMore>Learn more about Astro’s Markdown and MDX support in our [Markdown guide](/en/guides/markdown-content/).</ReadMore>

:::note
bluwy marked this conversation as resolved.
Show resolved Hide resolved

When a layout is not used, Astro will automatically add a `<meta charset="utf-8">` tag to your page to allow easier authoring of non-ASCII content. If you are using a layout for non-ASCII content, you should include the `<meta charset="utf-8">` tag in your layout as Astro will no longer add it automatically.

:::

## Nesting Layouts

Layout components do not need to contain an entire page worth of HTML. You can break your layouts into smaller components, and combine layout components to create even more flexible, page templates. This pattern is useful when you want to share some code across multiple layouts.
Expand Down
16 changes: 16 additions & 0 deletions src/content/docs/en/guides/upgrade-to/v5.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -752,6 +752,22 @@ Code blocks in `.mdoc` files and Astro's built-in `<Code />` component do not us

<ReadMore>Read more about [syntax highlighting in Astro](/en/guides/markdown-content/#syntax-highlighting).</ReadMore>

### Changed: Automatic `charset=utf-8` behavior for Markdown and MDX pages
bluwy marked this conversation as resolved.
Show resolved Hide resolved

<SourcePR number="12231" title="Unset charset=utf-8 content-type for md/mdx pages"/>

In Astro 4.0, Markdown and MDX pages (located in `src/pages/`) automatically responded with `charset=utf-8` in the `Content-Type` header, which allowed rendering non-ASCII characters in your pages.

Astro 5.0 updates the behaviour to add the `<meta charset="utf-8">` tag instead, and only for pages that do not use Astro's special `layout` frontmatter property. Similarly for MDX pages, Astro will only add the tag if the MDX content does not import a wrapping `Layout` component.

If your Markdown or MDX pages use the `layout` frontmatter property, or if the MDX page content imports a wrapping `Layout` component, then the HTML encoding will be handled by the designated layout component instead, and the `<meta charset="utf-8">` tag will not be added to your page by default.

#### What should I do?

If you require `charset=utf-8` to render your page correctly, make sure that your layout components contain the `<meta charset="utf-8">` tag. You may need to add this if you have not already done so.

<ReadMore>Read more about [Markdown layouts](/en/basics/layouts/#markdown-layouts).</ReadMore>

### Changed: Astro-specific metadata attached in remark and rehype plugins

<SourcePR number="11861" title="Clean up Astro metadata in vfile.data"/>
Expand Down
Loading