diff --git a/.changeset/chilly-stingrays-play.md b/.changeset/chilly-stingrays-play.md new file mode 100644 index 000000000..623425157 --- /dev/null +++ b/.changeset/chilly-stingrays-play.md @@ -0,0 +1,6 @@ +--- +'astro': minor +'@astrojs/mdx': patch +--- + +Update Markdown type signature to match new markdown plugin,and update top-level layout props for better alignment diff --git a/packages/astro/src/@types/astro.ts b/packages/astro/src/@types/astro.ts index 458fa0fe0..64b246238 100644 --- a/packages/astro/src/@types/astro.ts +++ b/packages/astro/src/@types/astro.ts @@ -884,32 +884,29 @@ export interface AstroInstance { export interface MarkdownInstance> { frontmatter: T; + /** Absolute file path (e.g. `/home/user/projects/.../file.md`) */ file: string; + /** Browser URL for files under `/src/pages` (e.g. `/en/guides/markdown-content`) */ url: string | undefined; + /** Component to render content in `.astro` files. Usage: `` */ Content: AstroComponentFactory; - /** raw Markdown file content, excluding frontmatter */ + /** raw Markdown file content, excluding layout HTML and YAML frontmatter */ rawContent(): string; - /** Markdown file compiled to valid Astro syntax. Queryable with most HTML parsing libraries */ - compiledContent(): Promise; - getHeadings(): Promise; + /** Markdown file compiled to HTML, excluding layout HTML */ + compiledContent(): string; + /** List of headings (h1 -> h6) with associated metadata */ + getHeadings(): MarkdownHeading[]; /** @deprecated Renamed to `getHeadings()` */ getHeaders(): void; - default: () => Promise<{ - metadata: MarkdownMetadata; - frontmatter: MarkdownContent; - $$metadata: Metadata; - default: AstroComponentFactory; - }>; + default: AstroComponentFactory; } export interface MDXInstance - extends Omit, 'rawContent' | 'compiledContent' | 'Content' | 'default'> { + extends Omit, 'rawContent' | 'compiledContent'> { /** MDX does not support rawContent! If you need to read the Markdown contents to calculate values (ex. reading time), we suggest injecting frontmatter via remark plugins. Learn more on our docs: https://docs.astro.build/en/guides/integrations-guide/mdx/#inject-frontmatter-via-remark-or-rehype-plugins */ rawContent: never; /** MDX does not support compiledContent! If you need to read the HTML contents to calculate values (ex. reading time), we suggest injecting frontmatter via rehype plugins. Learn more on our docs: https://docs.astro.build/en/guides/integrations-guide/mdx/#inject-frontmatter-via-remark-or-rehype-plugins */ compiledContent: never; - default: AstroComponentFactory; - Content: AstroComponentFactory; } export interface MarkdownLayoutProps> { @@ -917,6 +914,8 @@ export interface MarkdownLayoutProps> { file: MarkdownInstance['file']; url: MarkdownInstance['url']; } & T; + file: MarkdownInstance['file']; + url: MarkdownInstance['url']; headings: MarkdownHeading[]; rawContent: MarkdownInstance['rawContent']; compiledContent: MarkdownInstance['compiledContent']; diff --git a/packages/astro/src/vite-plugin-markdown/index.ts b/packages/astro/src/vite-plugin-markdown/index.ts index acaefed24..6d6c1dd4b 100644 --- a/packages/astro/src/vite-plugin-markdown/index.ts +++ b/packages/astro/src/vite-plugin-markdown/index.ts @@ -106,6 +106,8 @@ export default function markdown({ config, logging }: AstroPluginOptions): Plugi return ${ layout ? `h(Layout, { + file, + url, content, frontmatter: content, headings: getHeadings(), diff --git a/packages/astro/test/astro-markdown.test.js b/packages/astro/test/astro-markdown.test.js index 0f0833365..59eb07822 100644 --- a/packages/astro/test/astro-markdown.test.js +++ b/packages/astro/test/astro-markdown.test.js @@ -118,6 +118,24 @@ describe('Astro Markdown', () => { expect(headingSlugs).to.contain('section-2'); }); + it('passes "file" and "url" to layout', async () => { + const html = await fixture.readFile('/with-layout/index.html'); + const $ = cheerio.load(html); + + const frontmatterFile = $('[data-frontmatter-file]')?.text(); + const frontmatterUrl = $('[data-frontmatter-url]')?.text(); + const file = $('[data-file]')?.text(); + const url = $('[data-url]')?.text(); + + expect(frontmatterFile?.endsWith('with-layout.md')).to.equal( + true, + '"file" prop does not end with correct path or is undefined' + ); + expect(frontmatterUrl).to.equal('/with-layout'); + expect(file).to.equal(frontmatterFile); + expect(url).to.equal(frontmatterUrl); + }); + describe('Vite env vars (#3412)', () => { it('Allows referencing import.meta.env in content', async () => { const html = await fixture.readFile('/vite-env-vars/index.html'); diff --git a/packages/astro/test/fixtures/astro-markdown/src/layouts/Base.astro b/packages/astro/test/fixtures/astro-markdown/src/layouts/Base.astro index 64817bad9..70de435d2 100644 --- a/packages/astro/test/fixtures/astro-markdown/src/layouts/Base.astro +++ b/packages/astro/test/fixtures/astro-markdown/src/layouts/Base.astro @@ -1,7 +1,13 @@ --- const { content = { title: "content didn't work" }, - frontmatter = { title: "frontmatter didn't work" }, + file = "file didn't work", + url = "url didn't work", + frontmatter = { + title: "frontmatter didn't work", + file: "file didn't work", + url: "url didn't work", + }, headings = [], compiledContent = () => '', rawContent = () => '', @@ -21,6 +27,10 @@ const {

{content.title}

{frontmatter.title}

{compiledContent()}

+

{frontmatter.file}

+

{frontmatter.url}

+

{frontmatter.file}

+

{frontmatter.url}

{rawContent()}

Layout rendered!

    diff --git a/packages/integrations/mdx/src/astro-data-utils.ts b/packages/integrations/mdx/src/astro-data-utils.ts index 6bd2186e2..9be96022e 100644 --- a/packages/integrations/mdx/src/astro-data-utils.ts +++ b/packages/integrations/mdx/src/astro-data-utils.ts @@ -51,6 +51,8 @@ export function rehypeApplyFrontmatterExport(pageFrontmatter: Record{frontmatter.title}

    {frontmatter.file}

    {frontmatter.url}

    +

    {frontmatter.file}

    +

    {frontmatter.url}

    Layout rendered!

      {headings.map(heading =>
    • {heading.slug}
      • )} diff --git a/packages/integrations/mdx/test/mdx-frontmatter.test.js b/packages/integrations/mdx/test/mdx-frontmatter.test.js index 039a12ddc..539fdbf99 100644 --- a/packages/integrations/mdx/test/mdx-frontmatter.test.js +++ b/packages/integrations/mdx/test/mdx-frontmatter.test.js @@ -57,17 +57,21 @@ describe('MDX frontmatter', () => { expect(headingSlugs).to.contain('section-2'); }); - it('passes "file" and "url" to layout via frontmatter', async () => { + it('passes "file" and "url" to layout', async () => { const html = await fixture.readFile('/with-headings/index.html'); const { document } = parseHTML(html); const frontmatterFile = document.querySelector('[data-frontmatter-file]')?.textContent; const frontmatterUrl = document.querySelector('[data-frontmatter-url]')?.textContent; + const file = document.querySelector('[data-file]')?.textContent; + const url = document.querySelector('[data-url]')?.textContent; expect(frontmatterFile?.endsWith('with-headings.mdx')).to.equal( true, '"file" prop does not end with correct path or is undefined' ); expect(frontmatterUrl).to.equal('/with-headings'); + expect(file).to.equal(frontmatterFile); + expect(url).to.equal(frontmatterUrl); }); });