Fix markdown encoding as utf-8 by default

.changeset/olive-laws-work.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix markdown page encoding to be utf-8 by default (same as Astro 2)

packages/astro/src/runtime/server/render/page.ts

@@ -63,6 +63,11 @@ export async function renderPage(
 		body = encoder.encode(body);
 		headers.set('Content-Length', body.byteLength.toString());
 	}
+	// TODO: Revisit if user should manually set charset by themselves in Astro 4
+	// This code preserves the existing behaviour for markdown pages since Astro 2
+	if (route?.component.endsWith('.md')) {
+		headers.set('Content-Type', 'text/html; charset=utf-8');
+	}
 	const response = new Response(body, { ...init, headers });
 	return response;
 }

packages/astro/test/astro-basic.test.js

@@ -3,7 +3,16 @@ import * as cheerio from 'cheerio';
 import { loadFixture } from './test-utils.js';
 
 describe('Astro basics', () => {
+	/** @type {import('./test-utils').Fixture} */
 	let fixture;
+
+	before(async () => {
+		fixture = await loadFixture({
+			root: './fixtures/astro-basic/',
+		});
+	});
+
+	describe('build', () => {
 		let previewServer;
 
 		before(async () => {
@@ -19,7 +28,6 @@ describe('Astro basics', () => {
 			await previewServer.stop();
 		});
 
-	describe('build', () => {
 		it('Can load page', async () => {
 			const html = await fixture.readFile(`/index.html`);
 			const $ = cheerio.load(html);
@@ -108,6 +116,18 @@ describe('Astro basics', () => {
 			const $ = cheerio.load(html);
 			expect($('#rendered-order').text()).to.eq('Rendered order: A, B');
 		});
+
+		it('renders markdown in utf-8 by default', async () => {
+			const html = await fixture.readFile('/chinese-encoding-md/index.html');
+			const $ = cheerio.load(html);
+			expect($('h1').text()).to.equal('我的第一篇博客文章');
+		});
+
+		it('renders MDX in utf-8 by default', async () => {
+			const html = await fixture.readFile('/chinese-encoding-mdx/index.html');
+			const $ = cheerio.load(html);
+			expect($('h1').text()).to.equal('我的第一篇博客文章');
+		});
 	});
 
 	it('Supports void elements whose name is a string (#2062)', async () => {
@@ -143,4 +163,40 @@ describe('Astro basics', () => {
 			expect(result.status).to.equal(404);
 		});
 	});
+
+	describe('development', () => {
+		/** @type {import('./test-utils').DevServer} */
+		let devServer;
+
+		before(async () => {
+			devServer = await fixture.startDevServer();
+		});
+		after(async () => {
+			await devServer.stop();
+		});
+
+		it('Renders markdown in utf-8 by default', async () => {
+			const res = await fixture.fetch('/chinese-encoding-md');
+			expect(res.status).to.equal(200);
+			const html = await res.text();
+			const $ = cheerio.load(html);
+			expect($('h1').text()).to.equal('我的第一篇博客文章');
+			const isUtf8 =
+				res.headers.get('content-type').includes('charset=utf-8') ||
+				html.includes('<meta charset="utf-8">');
+			expect(isUtf8).to.be.true;
+		});
+
+		it('Renders MDX in utf-8 by default', async () => {
+			const res = await fixture.fetch('/chinese-encoding-mdx');
+			expect(res.status).to.equal(200);
+			const html = await res.text();
+			const $ = cheerio.load(html);
+			expect($('h1').text()).to.equal('我的第一篇博客文章');
+			const isUtf8 =
+				res.headers.get('content-type').includes('charset=utf-8') ||
+				html.includes('<meta charset="utf-8">');
+			expect(isUtf8).to.be.true;
+		});
+	});
 });

packages/astro/test/fixtures/astro-basic/astro.config.mjs

@@ -1,9 +1,10 @@
 import { defineConfig } from 'astro/config';
 import preact from '@astrojs/preact';
+import mdx from '@astrojs/mdx';
 
 // https://astro.build/config
 export default defineConfig({
-	integrations: [preact()],
+	integrations: [preact(), mdx()],
 	// make sure CLI flags have precedence
   server: () => ({ port: 4321 })
 });

packages/astro/test/fixtures/astro-basic/package.json

@@ -3,6 +3,7 @@
   "version": "0.0.0",
   "private": true,
   "dependencies": {
+    "@astrojs/mdx": "workspace:*",
     "@astrojs/preact": "workspace:*",
     "astro": "workspace:*",
     "preact": "^10.17.1"

packages/astro/test/fixtures/astro-basic/src/pages/chinese-encoding-md.md

@@ -0,0 +1,3 @@
+# 我的第一篇博客文章
+
+发表于：2022-07-01

packages/astro/test/fixtures/astro-basic/src/pages/chinese-encoding-mdx.mdx

@@ -0,0 +1,3 @@
+# 我的第一篇博客文章
+
+发表于：2022-07-01

packages/astro/test/units/render/head.test.js

@@ -90,7 +90,7 @@ describe('core/render', () => {
 
 			const PageModule = createAstroModule(Page);
 			const ctx = await createRenderContext({
-				route: { type: 'page', pathname: '/index' },
+				route: { type: 'page', pathname: '/index', component: 'src/pages/index.astro' },
 				request: new Request('http://example.com/'),
 				links: [{ name: 'link', props: { rel: 'stylesheet', href: '/main.css' }, children: '' }],
 				mod: PageModule,
@@ -171,7 +171,7 @@ describe('core/render', () => {
 
 			const PageModule = createAstroModule(Page);
 			const ctx = await createRenderContext({
-				route: { type: 'page', pathname: '/index' },
+				route: { type: 'page', pathname: '/index', component: 'src/pages/index.astro' },
 				request: new Request('http://example.com/'),
 				links: [{ name: 'link', props: { rel: 'stylesheet', href: '/main.css' }, children: '' }],
 				env,
@@ -218,7 +218,7 @@ describe('core/render', () => {
 
 			const PageModule = createAstroModule(Page);
 			const ctx = await createRenderContext({
-				route: { type: 'page', pathname: '/index' },
+				route: { type: 'page', pathname: '/index', component: 'src/pages/index.astro' },
 				request: new Request('http://example.com/'),
 				links: [{ name: 'link', props: { rel: 'stylesheet', href: '/main.css' }, children: '' }],
 				env,

packages/astro/test/units/render/jsx.test.js

@@ -45,7 +45,7 @@ describe('core/render', () => {
 
 			const mod = createAstroModule(Page);
 			const ctx = await createRenderContext({
-				route: { type: 'page', pathname: '/index' },
+				route: { type: 'page', pathname: '/index', component: 'src/pages/index.mdx' },
 				request: new Request('http://example.com/'),
 				env,
 				mod,
@@ -91,7 +91,7 @@ describe('core/render', () => {
 
 			const mod = createAstroModule(Page);
 			const ctx = await createRenderContext({
-				route: { type: 'page', pathname: '/index' },
+				route: { type: 'page', pathname: '/index', component: 'src/pages/index.mdx' },
 				request: new Request('http://example.com/'),
 				env,
 				mod,
@@ -117,7 +117,7 @@ describe('core/render', () => {
 
 			const mod = createAstroModule(Page);
 			const ctx = await createRenderContext({
-				route: { type: 'page', pathname: '/index' },
+				route: { type: 'page', pathname: '/index', component: 'src/pages/index.mdx' },
 				request: new Request('http://example.com/'),
 				env,
 				mod,

pnpm-lock.yaml

@@ -1747,6 +1747,9 @@ importers:
 
   packages/astro/test/fixtures/astro-basic:
     dependencies:
+      '@astrojs/mdx':
+        specifier: workspace:*
+        version: link:../../../../integrations/mdx
       '@astrojs/preact':
         specifier: workspace:*
         version: link:../../../../integrations/preact