@astrojs/mdx 0.10.1 → 0.10.3

package/.turbo/turbo-build.log

@@ -0,0 +1,5 @@
+@astrojs/mdx:build: cache hit, replaying output ce9fa72396235d9a
+@astrojs/mdx:build: 
+@astrojs/mdx:build: > @astrojs/mdx@0.10.3 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,25 @@
 # @astrojs/mdx
 
+## 0.10.3
+
+### Patch Changes
+
+- [#4519](https://github.com/withastro/astro/pull/4519) [`a2e8e76c3`](https://github.com/withastro/astro/commit/a2e8e76c303e8d6f39c24c122905a10f06907997) Thanks [@JuanM04](https://github.com/JuanM04)! - Upgraded Shiki to v0.11.1
+
+- [#4530](https://github.com/withastro/astro/pull/4530) [`8504cd79b`](https://github.com/withastro/astro/commit/8504cd79b708e0d3bf1a2bb4ff9b86936bdd692b) Thanks [@kylebutts](https://github.com/kylebutts)! - Add custom components to README
+
+## 0.10.2
+
+### Patch Changes
+
+- [#4423](https://github.com/withastro/astro/pull/4423) [`d4cd7a59f`](https://github.com/withastro/astro/commit/d4cd7a59fd38d411c442a818cfaab40f74106628) Thanks [@bholmesdev](https://github.com/bholmesdev)! - Update Markdown type signature to match new markdown plugin,and update top-level layout props for better alignment
+
+## 0.10.2-next.0
+
+### Patch Changes
+
+- [#4423](https://github.com/withastro/astro/pull/4423) [`d4cd7a59f`](https://github.com/withastro/astro/commit/d4cd7a59fd38d411c442a818cfaab40f74106628) Thanks [@bholmesdev](https://github.com/bholmesdev)! - Update Markdown type signature to match new markdown plugin,and update top-level layout props for better alignment
+
 ## 0.10.1
 
 ### Patch Changes

package/README.md

@@ -249,6 +249,54 @@ const { title, fancyJsHelper } = Astro.props;
 <!-- -->
 ```
 
+### Custom components
+
+Under the hood, MDX will convert Markdown into HTML components. For example, this blockquote:
+
+```md
+> A blockquote with *some* emphasis.
+```
+
+will be converted into this HTML:
+
+```html
+<blockquote>
+  <p>A blockquote with <em>some</em> emphasis.</p>
+</blockquote>
+```
+
+But what if you want to specify your own markup for these blockquotes? In the above example, you could create a custom `<Blockquote />` component (in any language) that either has a `<slot />` component or accepts a `children` prop.
+
+```astro title="src/components/Blockquote.astro"
+<blockquote class="bg-blue-50 p-4">
+  <span class="text-4xl text-blue-600 mb-2">“</span>
+  <slot />
+</blockquote>
+```
+
+Then in the MDX file you import the component and export it to the `components` export. 
+
+```mdx title="src/pages/posts/post-1.mdx" {2}
+import Blockquote from '../components/Blockquote.astro';
+export const components = { blockquote: Blockquote };
+```
+
+Now, writing the standard Markdown blockquote syntax (`>`) will use your custom `<Blockquote />` component instead. No need to use a component in Markdown, or write a remark/rehype plugin! Visit the [MDX website](https://mdxjs.com/table-of-components/) for a full list of HTML elements that can be overwritten as custom components.
+
+
+#### Custom components with imported `mdx`
+
+When rendering imported MDX content, custom components can also be passed via the `components` prop:
+
+```astro title="src/pages/page.astro" "components={{ h1: Heading }}"
+---
+import Content from '../content.mdx';
+import Heading from '../Heading.astro';
+---
+
+<Content components={{ h1: Heading }} />
+```
+
 ### Syntax highlighting
 
 The MDX integration respects [your project's `markdown.syntaxHighlight` configuration](https://docs.astro.build/en/guides/markdown-content/#syntax-highlighting).

package/dist/astro-data-utils.js

@@ -41,6 +41,8 @@ function rehypeApplyFrontmatterExport(pageFrontmatter) {
 						}
 					});
 					return layoutJsx(Layout, {
+						file,
+						url,
 						content,
 						frontmatter: content,
 						headings: getHeadings(),

package/dist/remark-shiki.js

@@ -5,7 +5,22 @@ const remarkShiki = async ({ langs = [], theme = "github-dark", wrap = false })
   const cacheID = typeof theme === "string" ? theme : theme.name;
   let highlighterAsync = highlighterCacheAsync.get(cacheID);
   if (!highlighterAsync) {
-    highlighterAsync = getHighlighter({ theme });
+    highlighterAsync = getHighlighter({ theme }).then((hl) => {
+      hl.setColorReplacements({
+        "#000001": "var(--astro-code-color-text)",
+        "#000002": "var(--astro-code-color-background)",
+        "#000004": "var(--astro-code-token-constant)",
+        "#000005": "var(--astro-code-token-string)",
+        "#000006": "var(--astro-code-token-comment)",
+        "#000007": "var(--astro-code-token-keyword)",
+        "#000008": "var(--astro-code-token-parameter)",
+        "#000009": "var(--astro-code-token-function)",
+        "#000010": "var(--astro-code-token-string-expression)",
+        "#000011": "var(--astro-code-token-punctuation)",
+        "#000012": "var(--astro-code-token-link)"
+      });
+      return hl;
+    });
     highlighterCacheAsync.set(cacheID, highlighterAsync);
   }
   const highlighter = await highlighterAsync;
@@ -28,10 +43,6 @@ const remarkShiki = async ({ langs = [], theme = "github-dark", wrap = false })
       }
       let html = highlighter.codeToHtml(node.value, { lang });
       html = html.replace('<pre class="shiki"', `<pre class="astro-code"`);
-      html = html.replace(
-        /style="(background-)?color: var\(--shiki-/g,
-        'style="$1color: var(--astro-code-'
-      );
       if (node.lang === "diff") {
         html = html.replace(
           /<span class="line"><span style="(.*?)">([\+|\-])/g,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astrojs/mdx",
   "description": "Use MDX within Astro",
-  "version": "0.10.1",
+  "version": "0.10.3",
   "type": "module",
   "types": "./dist/index.d.ts",
   "author": "withastro",
@@ -34,7 +34,7 @@
     "remark-frontmatter": "^4.0.1",
     "remark-gfm": "^3.0.1",
     "remark-smartypants": "^2.0.0",
-    "shiki": "^0.10.1",
+    "shiki": "^0.11.1",
     "unist-util-visit": "^4.1.0",
     "vfile": "^5.3.2"
   },
@@ -42,7 +42,7 @@
     "@types/chai": "^4.3.1",
     "@types/mocha": "^9.1.1",
     "@types/yargs-parser": "^21.0.0",
-    "astro": "1.0.8",
+    "astro": "1.1.2",
     "astro-scripts": "0.0.7",
     "chai": "^4.3.6",
     "linkedom": "^0.14.12",

package/src/astro-data-utils.ts

@@ -51,6 +51,8 @@ export function rehypeApplyFrontmatterExport(pageFrontmatter: Record<string, any
 						}
 					});
 					return layoutJsx(Layout, {
+						file,
+						url,
 						content,
 						frontmatter: content,
 						headings: getHeadings(),

package/src/remark-shiki.ts

@@ -14,7 +14,22 @@ const remarkShiki = async ({ langs = [], theme = 'github-dark', wrap = false }:
 	const cacheID: string = typeof theme === 'string' ? theme : theme.name;
 	let highlighterAsync = highlighterCacheAsync.get(cacheID);
 	if (!highlighterAsync) {
-		highlighterAsync = getHighlighter({ theme });
+		highlighterAsync = getHighlighter({ theme }).then((hl) => {
+			hl.setColorReplacements({
+				'#000001': 'var(--astro-code-color-text)',
+				'#000002': 'var(--astro-code-color-background)',
+				'#000004': 'var(--astro-code-token-constant)',
+				'#000005': 'var(--astro-code-token-string)',
+				'#000006': 'var(--astro-code-token-comment)',
+				'#000007': 'var(--astro-code-token-keyword)',
+				'#000008': 'var(--astro-code-token-parameter)',
+				'#000009': 'var(--astro-code-token-function)',
+				'#000010': 'var(--astro-code-token-string-expression)',
+				'#000011': 'var(--astro-code-token-punctuation)',
+				'#000012': 'var(--astro-code-token-link)',
+			});
+			return hl;
+		});
 		highlighterCacheAsync.set(cacheID, highlighterAsync);
 	}
 	const highlighter = await highlighterAsync;
@@ -52,11 +67,6 @@ const remarkShiki = async ({ langs = [], theme = 'github-dark', wrap = false }:
 
 			// Replace "shiki" class naming with "astro".
 			html = html.replace('<pre class="shiki"', `<pre class="astro-code"`);
-			// Replace "shiki" css variable naming with "astro".
-			html = html.replace(
-				/style="(background-)?color: var\(--shiki-/g,
-				'style="$1color: var(--astro-code-'
-			);
 			// Add "user-select: none;" for "+"/"-" diff symbols
 			if (node.lang === 'diff') {
 				html = html.replace(

package/test/fixtures/mdx-frontmatter/src/layouts/Base.astro

@@ -1,6 +1,8 @@
 ---
 const {
 	content = { title: "content didn't work" },
+	file = "file didn't work",
+	url = "url didn't work",
 	frontmatter = {
 		title: "frontmatter didn't work",
 		file: "file didn't work",
@@ -24,6 +26,8 @@ const {
 	<p data-frontmatter-title>{frontmatter.title}</p>
 	<p data-frontmatter-file>{frontmatter.file}</p>
 	<p data-frontmatter-url>{frontmatter.url}</p>
+	<p data-file>{frontmatter.file}</p>
+	<p data-url>{frontmatter.url}</p>
 	<p data-layout-rendered>Layout rendered!</p>
 	<ul data-headings>
 		{headings.map(heading => <li>{heading.slug}</li>)}

package/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);
 	});
 });