diff --git a/examples/with-markdoc/src/content/blog/with-mdx.mdx b/examples/with-markdoc/src/content/blog/with-mdx.mdx new file mode 100644 index 000000000000..d3c9d0169bac --- /dev/null +++ b/examples/with-markdoc/src/content/blog/with-mdx.mdx @@ -0,0 +1,5 @@ +--- +title: 'Example!' +--- + +# With MDX {frontmatter.title} diff --git a/examples/with-markdoc/src/pages/index.astro b/examples/with-markdoc/src/pages/index.astro index 4e7f63365177..5b8b67a9a7f6 100644 --- a/examples/with-markdoc/src/pages/index.astro +++ b/examples/with-markdoc/src/pages/index.astro @@ -5,9 +5,11 @@ import Marquee from '../components/Marquee.astro'; import { getEntryBySlug } from 'astro:content'; import RedP from '../components/RedP.astro'; -const testEntry = await getEntryBySlug('blog', 'test'); -console.log(testEntry); -const { Content } = await testEntry.render(); +const mdocEntry = await getEntryBySlug('blog', 'test'); +const mdxEntry = await getEntryBySlug('blog', 'with-mdx'); +console.log(mdocEntry); +const { Content } = await mdocEntry.render(); +const { Content: MDXContent } = await mdxEntry.render(); --- <html lang="en"> @@ -21,6 +23,7 @@ const { Content } = await testEntry.render(); <body> <h1>Astro</h1> <article> + <MDXContent /> <Content components={{ marquee: Marquee, diff --git a/packages/astro/src/content/consts.ts b/packages/astro/src/content/consts.ts index 472ca0d88795..c034a2fdb65e 100644 --- a/packages/astro/src/content/consts.ts +++ b/packages/astro/src/content/consts.ts @@ -1,4 +1,4 @@ -export const defaultContentEntryExts = ['.md', '.mdx'] as const; +export const defaultContentEntryExts = ['.md'] as const; export const PROPAGATED_ASSET_FLAG = 'astroPropagatedAssets'; export const CONTENT_FLAG = 'astroContent'; export const VIRTUAL_MODULE_ID = 'astro:content'; diff --git a/packages/integrations/mdx/src/index.ts b/packages/integrations/mdx/src/index.ts index 7012849a4921..42e6459672a2 100644 --- a/packages/integrations/mdx/src/index.ts +++ b/packages/integrations/mdx/src/index.ts @@ -6,6 +6,7 @@ import mdxPlugin, { Options as MdxRollupPluginOptions } from '@mdx-js/rollup'; import type { AstroIntegration } from 'astro'; import { parse as parseESM } from 'es-module-lexer'; import fs from 'node:fs/promises'; +import { fileURLToPath } from 'node:url'; import type { Options as RemarkRehypeOptions } from 'remark-rehype'; import { VFile } from 'vfile'; import type { Plugin as VitePlugin } from 'vite'; @@ -22,12 +23,33 @@ export type MdxOptions = Omit<typeof markdownConfigDefaults, 'remarkPlugins' | ' remarkRehype: RemarkRehypeOptions; }; +const contentEntryType = { + extensions: ['.mdx'], + async getEntryInfo({ fileUrl }: { fileUrl: URL }) { + const rawContents = await fs.readFile(fileUrl, 'utf-8'); + const parsed = parseFrontmatter(rawContents, fileURLToPath(fileUrl)); + return { + data: parsed.data, + body: parsed.content, + slug: parsed.data.slug, + rawData: parsed.matter, + }; + }, +}; + export default function mdx(partialMdxOptions: Partial<MdxOptions> = {}): AstroIntegration { return { name: '@astrojs/mdx', hooks: { - 'astro:config:setup': async ({ updateConfig, config, addPageExtension, command }: any) => { + 'astro:config:setup': async ({ + updateConfig, + config, + addPageExtension, + addContentEntryType, + command, + }: any) => { addPageExtension('.mdx'); + addContentEntryType(contentEntryType); const extendMarkdownConfig = partialMdxOptions.extendMarkdownConfig ?? defaultOptions.extendMarkdownConfig;