@astrojs/mdx 0.3.0 → 0.3.1

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
-@astrojs/mdx:build: cache hit, replaying output 5ec97556db3f4322
-@astrojs/mdx:build: 
-@astrojs/mdx:build: > @astrojs/mdx@0.3.0 build /home/runner/work/astro/astro/packages/integrations/mdx
-@astrojs/mdx:build: > astro-scripts build "src/**/*.ts" && tsc
-@astrojs/mdx:build: 
+@astrojs/mdx:build: cache hit, replaying output 0a3d73b5c732032a
+@astrojs/mdx:build: 
+@astrojs/mdx:build: > @astrojs/mdx@0.3.1 build /home/runner/work/astro/astro/packages/integrations/mdx
+@astrojs/mdx:build: > astro-scripts build "src/**/*.ts" && tsc
+@astrojs/mdx:build: 

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @astrojs/mdx
 
+## 0.3.1
+
+### Patch Changes
+
+- [#4076](https://github.com/withastro/astro/pull/4076) [`6120a71e5`](https://github.com/withastro/astro/commit/6120a71e5425ad55a17ddac800d64a3f50273bce) Thanks [@matthewp](https://github.com/matthewp)! - Ensure file and url are always present in MDX for Astro.glob
+
 ## 0.3.0
 
 ### Minor Changes

package/README.md

@@ -134,6 +134,47 @@ const posts = await Astro.glob('./*.mdx');
 ))}
 ```
 
+### Layouts
+
+You can use the [MDX layout component](https://mdxjs.com/docs/using-mdx/#layout) to specify a layout component to wrap all page content. This is done with a default export statement at the end of your `.mdx` file:
+
+```mdx
+// src/pages/my-page.mdx
+
+export {default} from '../../layouts/BaseLayout.astro';
+```
+
+You can also import and use a [`<Layout />` component](/en/core-concepts/layouts/) for your MDX page content, and pass all the variables declared in frontmatter as props. 
+
+```mdx
+---
+// src/pages/posts/first-post.mdx
+
+title: 'My first MDX post'
+publishDate: '21 September 2022'
+---
+import BaseLayout from '../layouts/BaseLayout.astro';
+
+<BaseLayout {...frontmatter}>
+  # {frontmatter.title}
+
+  Welcome to my new Astro blog, using MDX!
+</BaseLayout>
+```
+Then, your values are available to you through `Astro.props` in your layout, and your MDX content will be injected into the page where your `<slot />` component is written:
+
+```astro
+---
+// src/layouts/BaseLayout.astro
+const { title, publishDate } = Astro.props;
+---
+<!-- -->
+<h1>{title}</h1>
+<slot />
+<p>Published on {publishDate}</p>
+<!-- -->
+```
+
 ### Syntax highlighting
 
 The MDX integration respects [your project's `markdown.syntaxHighlight` configuration](https://docs.astro.build/en/guides/markdown-content/#syntax-highlighting).

package/dist/index.js

@@ -64,10 +64,14 @@ function mdx(mdxOptions = {}) {
                   const [, moduleExports] = parseESM(code);
                   code += `
 import "${"astro:scripts/page-ssr.js"}";`;
+                  const { fileUrl, fileId } = getFileInfo(id, config);
                   if (!moduleExports.includes("url")) {
-                    const { fileUrl } = getFileInfo(id, config);
                     code += `
 export const url = ${JSON.stringify(fileUrl)};`;
+                  }
+                  if (!moduleExports.includes("file")) {
+                    code += `
+export const file = ${JSON.stringify(fileId)};`;
                   }
                   if (command === "dev") {
                     code += `

package/dist/utils.d.ts

@@ -1,6 +1,8 @@
 import type { AstroConfig } from 'astro';
-/** @see 'vite-plugin-utils' for source */
-export declare function getFileInfo(id: string, config: AstroConfig): {
+interface FileInfo {
     fileId: string;
-    fileUrl: string | undefined;
-};
+    fileUrl: string;
+}
+/** @see 'vite-plugin-utils' for source */
+export declare function getFileInfo(id: string, config: AstroConfig): FileInfo;
+export {};

package/dist/utils.js

@@ -5,8 +5,21 @@ function getFileInfo(id, config) {
   const sitePathname = appendForwardSlash(
     config.site ? new URL(config.base, config.site).pathname : config.base
   );
+  let url = void 0;
+  try {
+    url = new URL(`file://${id}`);
+  } catch {
+  }
   const fileId = id.split("?")[0];
-  let fileUrl = fileId.includes("/pages/") ? fileId.replace(/^.*?\/pages\//, sitePathname).replace(/(\/index)?\.mdx$/, "") : void 0;
+  let fileUrl;
+  const isPage = fileId.includes("/pages/");
+  if (isPage) {
+    fileUrl = fileId.replace(/^.*?\/pages\//, sitePathname).replace(/(\/index)?\.mdx$/, "");
+  } else if (url && url.pathname.startsWith(config.root.pathname)) {
+    fileUrl = url.pathname.slice(config.root.pathname.length);
+  } else {
+    fileUrl = fileId;
+  }
   if (fileUrl && config.trailingSlash === "always") {
     fileUrl = appendForwardSlash(fileUrl);
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astrojs/mdx",
   "description": "Use MDX within Astro",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "type": "module",
   "types": "./dist/index.d.ts",
   "author": "withastro",
@@ -42,7 +42,7 @@
     "@types/chai": "^4.3.1",
     "@types/mocha": "^9.1.1",
     "@types/yargs-parser": "^21.0.0",
-    "astro": "1.0.0-rc.1",
+    "astro": "1.0.0-rc.2",
     "astro-scripts": "0.0.6",
     "chai": "^4.3.6",
     "linkedom": "^0.14.12",

package/src/index.ts

@@ -96,10 +96,14 @@ export default function mdx(mdxOptions: MdxOptions = {}): AstroIntegration {
 									// or otherwise refactored to not require copy-paste handling logic.
 									code += `\nimport "${'astro:scripts/page-ssr.js'}";`;
 
+									const { fileUrl, fileId } = getFileInfo(id, config);
 									if (!moduleExports.includes('url')) {
-										const { fileUrl } = getFileInfo(id, config);
 										code += `\nexport const url = ${JSON.stringify(fileUrl)};`;
 									}
+									if (!moduleExports.includes('file')) {
+										code += `\nexport const file = ${JSON.stringify(fileId)};`;
+									}
+
 									if (command === 'dev') {
 										// TODO: decline HMR updates until we have a stable approach
 										code += `\nif (import.meta.hot) {

package/src/utils.ts

@@ -4,16 +4,34 @@ function appendForwardSlash(path: string) {
 	return path.endsWith('/') ? path : path + '/';
 }
 
+interface FileInfo {
+	fileId: string;
+	fileUrl: string;
+}
+
 /** @see 'vite-plugin-utils' for source */
-export function getFileInfo(id: string, config: AstroConfig) {
+export function getFileInfo(id: string, config: AstroConfig): FileInfo {
 	const sitePathname = appendForwardSlash(
 		config.site ? new URL(config.base, config.site).pathname : config.base
 	);
 
+	// Try to grab the file's actual URL
+	let url: URL | undefined = undefined;
+	try {
+		url = new URL(`file://${id}`);
+	} catch {}
+
 	const fileId = id.split('?')[0];
-	let fileUrl = fileId.includes('/pages/')
-		? fileId.replace(/^.*?\/pages\//, sitePathname).replace(/(\/index)?\.mdx$/, '')
-		: undefined;
+	let fileUrl: string;
+	const isPage = fileId.includes('/pages/');
+	if (isPage) {
+		fileUrl = fileId.replace(/^.*?\/pages\//, sitePathname).replace(/(\/index)?\.mdx$/, '');
+	} else if (url && url.pathname.startsWith(config.root.pathname)) {
+		fileUrl = url.pathname.slice(config.root.pathname.length);
+	} else {
+		fileUrl = fileId;
+	}
+
 	if (fileUrl && config.trailingSlash === 'always') {
 		fileUrl = appendForwardSlash(fileUrl);
 	}

package/test/fixtures/mdx-get-static-paths/src/content/1.mdx

@@ -0,0 +1,5 @@
+---
+one: hello
+slug: one
+---
+First mdx file

package/test/fixtures/mdx-get-static-paths/src/pages/[slug].astro

@@ -0,0 +1,34 @@
+---
+export const getStaticPaths = async () => {
+	const content = await Astro.glob('../content/*.mdx');
+
+	return content
+    .filter((page) => !page.frontmatter.draft) // skip drafts
+    .map(({ default: MdxContent, frontmatter, url, file }) => {
+        return {
+          params: { slug: frontmatter.slug || "index" },
+          props: {
+            MdxContent,
+						file,
+            frontmatter,
+						url
+          }
+        }
+     })
+}
+
+const { MdxContent, frontmatter, url, file } = Astro.props;
+---
+
+<html>
+	<head>
+		<title>Page</title>
+	</head>
+	<body>
+		<MdxContent />
+
+		<div id="one">{frontmatter.one}</div>
+		<div id="url">{url}</div>
+		<div id="file">{file}</div>
+	</body>
+</html>

package/test/mdx-get-static-paths.test.js

@@ -0,0 +1,32 @@
+import mdx from '@astrojs/mdx';
+
+import { expect } from 'chai';
+import { loadFixture } from '../../../astro/test/test-utils.js';
+import * as cheerio from 'cheerio';
+
+const FIXTURE_ROOT = new URL('./fixtures/mdx-get-static-paths', import.meta.url);
+
+describe('getStaticPaths', () => {
+	/** @type {import('astro/test/test-utils').Fixture} */
+	let fixture;
+	before(async () => {
+		fixture = await loadFixture({
+			root: FIXTURE_ROOT,
+			integrations: [mdx()],
+		});
+		await fixture.build();
+	});
+
+	it('Provides file and url', async () => {
+		const html = await fixture.readFile('/one/index.html');
+
+		const $ = cheerio.load(html);
+		expect($('p').text()).to.equal('First mdx file');
+		expect($('#one').text()).to.equal('hello', 'Frontmatter included');
+		expect($('#url').text()).to.equal('/src/content/1.mdx', 'url is included');
+		expect($('#file').text()).to.contain(
+			'fixtures/mdx-get-static-paths/src/content/1.mdx',
+			'file is included'
+		);
+	});
+});