michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

wip: move mdx to collection type API

Browse source
This commit is contained in:
bholmesdev 2023-02-08 15:51:44 -05:00
parent 2816b4f887
commit 3ba5253ff7
4 changed files with 35 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
examples/with-markdoc/src/content/blog/with-mdx.mdx Normal file
View file

@ -0,0 +1,5 @@
---
title: 'Example!'
---
# With MDX {frontmatter.title}

9
examples/with-markdoc/src/pages/index.astro
View file

@ -5,9 +5,11 @@ import Marquee from '../components/Marquee.astro';
import { getEntryBySlug } from 'astro:content'; import { getEntryBySlug } from 'astro:content';
import RedP from '../components/RedP.astro'; import RedP from '../components/RedP.astro';
const testEntry = await getEntryBySlug('blog', 'test'); const mdocEntry = await getEntryBySlug('blog', 'test');
console.log(testEntry); const mdxEntry = await getEntryBySlug('blog', 'with-mdx');
const { Content } = await testEntry.render(); console.log(mdocEntry);
const { Content } = await mdocEntry.render();
const { Content: MDXContent } = await mdxEntry.render();
--- ---
<html lang="en"> <html lang="en">
@ -21,6 +23,7 @@ const { Content } = await testEntry.render();
<body> <body>
<h1>Astro</h1> <h1>Astro</h1>
<article> <article>
<MDXContent />
<Content <Content
components={{ components={{
marquee: Marquee, marquee: Marquee,

2
packages/astro/src/content/consts.ts
View file

@ -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 PROPAGATED_ASSET_FLAG = 'astroPropagatedAssets';
export const CONTENT_FLAG = 'astroContent'; export const CONTENT_FLAG = 'astroContent';
export const VIRTUAL_MODULE_ID = 'astro:content'; export const VIRTUAL_MODULE_ID = 'astro:content';

24
packages/integrations/mdx/src/index.ts
View file

@ -6,6 +6,7 @@ import mdxPlugin, { Options as MdxRollupPluginOptions } from '@mdx-js/rollup';
import type { AstroIntegration } from 'astro'; import type { AstroIntegration } from 'astro';
import { parse as parseESM } from 'es-module-lexer'; import { parse as parseESM } from 'es-module-lexer';
import fs from 'node:fs/promises'; import fs from 'node:fs/promises';
import { fileURLToPath } from 'node:url';
import type { Options as RemarkRehypeOptions } from 'remark-rehype'; import type { Options as RemarkRehypeOptions } from 'remark-rehype';
import { VFile } from 'vfile'; import { VFile } from 'vfile';
import type { Plugin as VitePlugin } from 'vite'; import type { Plugin as VitePlugin } from 'vite';
@ -22,12 +23,33 @@ export type MdxOptions = Omit<typeof markdownConfigDefaults, 'remarkPlugins' | '
remarkRehype: RemarkRehypeOptions; 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 { export default function mdx(partialMdxOptions: Partial<MdxOptions> = {}): AstroIntegration {
return { return {
name: '@astrojs/mdx', name: '@astrojs/mdx',
hooks: { hooks: {
'astro:config:setup': async ({ updateConfig, config, addPageExtension, command }: any) => { 'astro:config:setup': async ({
updateConfig,
config,
addPageExtension,
addContentEntryType,
command,
}: any) => {
addPageExtension('.mdx'); addPageExtension('.mdx');
addContentEntryType(contentEntryType);
const extendMarkdownConfig = const extendMarkdownConfig =
partialMdxOptions.extendMarkdownConfig ?? defaultOptions.extendMarkdownConfig; partialMdxOptions.extendMarkdownConfig ?? defaultOptions.extendMarkdownConfig;