Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@astrojs/mdx

Package Overview
Dependencies
Maintainers
4
Versions
169
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@astrojs/mdx - npm Package Compare versions

Comparing version 0.7.0 to 0.8.0

10

CHANGELOG.md
# @astrojs/mdx
## 0.8.0
### Minor Changes
- [#4204](https://github.com/withastro/astro/pull/4204) [`4c2ca5352`](https://github.com/withastro/astro/commit/4c2ca5352d0c4119ed2a9e5e0b78ce71eb1b414a) Thanks [@bholmesdev](https://github.com/bholmesdev)! - Remove `frontmatterOptions` from MDX config
### Patch Changes
- [#4205](https://github.com/withastro/astro/pull/4205) [`6c9736cbc`](https://github.com/withastro/astro/commit/6c9736cbc90162f1de3ebccd7cfe98332749b639) Thanks [@bholmesdev](https://github.com/bholmesdev)! - Add frontmatter injection instructions to README
## 0.7.0

@@ -4,0 +14,0 @@

2

dist/astro-data-utils.d.ts
import type { MarkdownAstroData } from 'astro';
import type { Data, VFile } from 'vfile';
export declare function remarkInitializeAstroData(): (tree: any, vfile: VFile) => void;
export declare function rehypeApplyFrontmatterExport(pageFrontmatter: Record<string, any>, exportName?: string): (tree: any, vfile: VFile) => void;
export declare function rehypeApplyFrontmatterExport(pageFrontmatter: Record<string, any>): (tree: any, vfile: VFile) => void;
/**

@@ -6,0 +6,0 @@ * Copied from markdown utils

29

dist/astro-data-utils.js

@@ -1,2 +0,1 @@

import { name as isValidIdentifierName } from "estree-util-is-identifier-name";
import { jsToTreeNode } from "./utils.js";

@@ -10,28 +9,10 @@ function remarkInitializeAstroData() {

}
function rehypeApplyFrontmatterExport(pageFrontmatter, exportName = "frontmatter") {
const EXPORT_NAME = "frontmatter";
function rehypeApplyFrontmatterExport(pageFrontmatter) {
return function(tree, vfile) {
if (!isValidIdentifierName(exportName)) {
throw new Error(
`[MDX] ${JSON.stringify(
exportName
)} is not a valid frontmatter export name! Make sure "frontmatterOptions.name" could be used as a JS export (i.e. "export const frontmatterName = ...")`
);
}
const { frontmatter: injectedFrontmatter } = safelyGetAstroData(vfile.data);
const frontmatter = { ...injectedFrontmatter, ...pageFrontmatter };
let exportNodes = [];
if (!exportName) {
exportNodes = Object.entries(frontmatter).map(([k, v]) => {
if (!isValidIdentifierName(k)) {
throw new Error(
`[MDX] A remark or rehype plugin tried to inject ${JSON.stringify(
k
)} as a top-level export, which is not a valid export name.`
);
}
return jsToTreeNode(`export const ${k} = ${JSON.stringify(v)};`);
});
} else {
exportNodes = [jsToTreeNode(`export const ${exportName} = ${JSON.stringify(frontmatter)};`)];
}
const exportNodes = [
jsToTreeNode(`export const ${EXPORT_NAME} = ${JSON.stringify(frontmatter)};`)
];
tree.children = exportNodes.concat(tree.children);

@@ -38,0 +19,0 @@ };

7

dist/index.d.ts
import { Options as MdxRollupPluginOptions } from '@mdx-js/rollup';
import type { AstroIntegration } from 'astro';
import type { RemarkMdxFrontmatterOptions } from 'remark-mdx-frontmatter';
declare type WithExtends<T> = T | {

@@ -10,10 +9,4 @@ extends: T;

rehypePlugins?: WithExtends<MdxRollupPluginOptions['rehypePlugins']>;
/**
* Configure the remark-mdx-frontmatter plugin
* @see https://github.com/remcohaszing/remark-mdx-frontmatter#options for a full list of options
* @default {{ name: 'frontmatter' }}
*/
frontmatterOptions?: RemarkMdxFrontmatterOptions;
};
export default function mdx(mdxOptions?: MdxOptions): AstroIntegration;
export {};

8

dist/index.js

@@ -86,9 +86,3 @@ import { compile as mdxCompile, nodeTypes } from "@mdx-js/mdx";

...mdxPluginOpts.rehypePlugins ?? [],
() => {
var _a;
return rehypeApplyFrontmatterExport(
frontmatter,
(_a = mdxOptions.frontmatterOptions) == null ? void 0 : _a.name
);
}
() => rehypeApplyFrontmatterExport(frontmatter)
]

@@ -95,0 +89,0 @@ });

5

package.json
{
"name": "@astrojs/mdx",
"description": "Use MDX within Astro",
"version": "0.7.0",
"version": "0.8.0",
"type": "module",

@@ -36,3 +36,2 @@ "types": "./dist/index.d.ts",

"remark-gfm": "^3.0.1",
"remark-mdx-frontmatter": "^2.0.2",
"remark-shiki-twoslash": "^3.1.0",

@@ -48,3 +47,3 @@ "remark-smartypants": "^2.0.0",

"@types/yargs-parser": "^21.0.0",
"astro": "1.0.0-rc.7",
"astro": "1.0.0-rc.8",
"astro-scripts": "0.0.6",

@@ -51,0 +50,0 @@ "chai": "^4.3.6",

114

README.md

@@ -23,15 +23,14 @@ # @astrojs/mdx 📝

<details>
<summary>Quick Install</summary>
### Quick Install
The `astro add` command-line tool automates the installation for you. Run one of the following commands in a new terminal window. (If you aren't sure which package manager you're using, run the first command.) Then, follow the prompts, and type "y" in the terminal (meaning "yes") for each one.
```sh
# Using NPM
npx astro add mdx
# Using Yarn
yarn astro add mdx
# Using PNPM
pnpx astro add mdx
```
```sh
# Using NPM
npx astro add mdx
# Using Yarn
yarn astro add mdx
# Using PNPM
pnpx astro add mdx
```

@@ -41,12 +40,10 @@ Then, restart the dev server by typing `CTRL-C` and then `npm run astro dev` in the terminal window that was running Astro.

Because this command is new, it might not properly set things up. If that happens, [feel free to log an issue on our GitHub](https://github.com/withastro/astro/issues) and try the manual installation steps below.
</details>
<details>
<summary>Manual Install</summary>
### Manual Install
First, install the `@astrojs/mdx` package using your package manager. If you're using npm or aren't sure, run this in the terminal:
```sh
npm install @astrojs/mdx
```
```sh
npm install @astrojs/mdx
```

@@ -68,7 +65,10 @@ Then, apply this integration to your `astro.config.*` file using the `integrations` property:

Finally, restart the dev server.
</details>
## Usage
To write your first MDX page in Astro, head to our [UI framework documentation][astro-ui-frameworks]. You'll explore:
You can [add MDX pages to your project](https://docs.astro.build/en/guides/markdown-content/#markdown-and-mdx-pages) by adding `.mdx` files within your `src/pages/` directory.
### Components
To use components in your MDX pages in Astro, head to our [UI framework documentation][astro-ui-frameworks]. You'll explore:
- 📦 how framework components are loaded,

@@ -82,4 +82,2 @@ - 💧 client-side hydration options, and

Also check our [Astro Integration Documentation][astro-integration] for more on integrations.
### Variables

@@ -130,3 +128,3 @@

Astro also supports YAML-based frontmatter out-of-the-box using the [remark-mdx-frontmatter](https://github.com/remcohaszing/remark-mdx-frontmatter) plugin. By default, all variables declared in a frontmatter fence (`---`) will be accessible via the `frontmatter` export. See the `frontmatterOptions` configuration to customize this behavior.
Astro also supports YAML-based frontmatter out-of-the-box. By default, all variables declared in a frontmatter fence (`---`) will be accessible via the `frontmatter` export.

@@ -160,2 +158,36 @@ For example, we can add a `title` and `publishDate` to an MDX page or component like so:

### Inject frontmatter via remark or rehype plugins
You may want to inject frontmatter properties across all of your MDX files. By using a [remark](#remarkPlugins) or [rehype](#remarkplugins) plugin, you can generate these properties based on a file’s contents.
You can append to the `data.astro.frontmatter` property from your plugin’s `file` argument like so:
```js
// example-remark-plugin.mjs
export function exampleRemarkPlugin() {
// All remark and rehype plugins return a separate function
return function (tree, file) {
file.data.astro.frontmatter.customProperty = 'Generated property';
}
}
```
After applying this plugin to your MDX integration config:
```js
// astro.config.mjs
import mdx from '@astrojs/mdx';
import { exampleRemarkPlugin } from './example-remark-plugin.mjs';
export default {
integrations: [
mdx({
remarkPlugins: [exampleRemarkPlugin],
}),
],
};
```
…every MDX file will have `customProperty` in its frontmatter! See [our Markdown documentation](https://docs.astro.build/en/guides/markdown-content/#injecting-frontmatter) for more usage instructions and a [reading time plugin example](https://docs.astro.build/en/guides/markdown-content/#example-calculate-reading-time).
### Layouts

@@ -264,4 +296,3 @@

<details>
<summary><strong>remarkPlugins</strong></summary>
### remarkPlugins

@@ -302,7 +333,4 @@ **Default plugins:** [remark-gfm](https://github.com/remarkjs/remark-gfm), [remark-smartypants](https://github.com/silvenon/remark-smartypants)

</details>
### rehypePlugins</strong>
<details>
<summary><strong>rehypePlugins</strong></summary>
[Rehype plugins](https://github.com/rehypejs/rehype/blob/main/doc/plugins.md) allow you to transform the HTML that your Markdown generates. We recommend checking the [Remark plugin](https://github.com/remarkjs/remark/blob/main/doc/plugins.md) catalog first _before_ considering rehype plugins, since most users want to transform their Markdown syntax instead. If HTML transforms are what you need, we encourage you to browse [awesome-rehype](https://github.com/rehypejs/awesome-rehype) for a full curated list of plugins!

@@ -324,35 +352,3 @@

```
</details>
<details>
<summary><strong>frontmatterOptions</strong></summary>
**Default:** `{ name: 'frontmatter' }`
We use [remark-mdx-frontmatter](https://github.com/remcohaszing/remark-mdx-frontmatter) to parse YAML-based frontmatter in your MDX files. If you want to override our default configuration or extend remark-mdx-frontmatter (ex. to [apply a custom frontmatter parser](https://github.com/remcohaszing/remark-mdx-frontmatter#parsers)), you can supply a `frontmatterOptions` configuration.
For example, say you want to access frontmatter as root-level variables without a nested `frontmatter` object. You can override the [`name` configuration option](https://github.com/remcohaszing/remark-mdx-frontmatter#name) like so:
```js
// astro.config.mjs
export default {
integrations: [mdx({
frontmatterOptions: {
name: '',
}
})],
}
```
```mdx
---
title: I'm just a variable now!
---
# {title}
```
See the [remark-mdx-frontmatter README](https://github.com/remcohaszing/remark-mdx-frontmatter#options) for a complete list of options.
</details>
## Examples

@@ -359,0 +355,0 @@

34

src/astro-data-utils.ts
import type { MarkdownAstroData } from 'astro';
import { name as isValidIdentifierName } from 'estree-util-is-identifier-name';
import type { MdxjsEsm } from 'mdast-util-mdx';
import type { Data, VFile } from 'vfile';

@@ -15,31 +13,11 @@ import { jsToTreeNode } from './utils.js';

export function rehypeApplyFrontmatterExport(
pageFrontmatter: Record<string, any>,
exportName = 'frontmatter'
) {
const EXPORT_NAME = 'frontmatter';
export function rehypeApplyFrontmatterExport(pageFrontmatter: Record<string, any>) {
return function (tree: any, vfile: VFile) {
if (!isValidIdentifierName(exportName)) {
throw new Error(
`[MDX] ${JSON.stringify(
exportName
)} is not a valid frontmatter export name! Make sure "frontmatterOptions.name" could be used as a JS export (i.e. "export const frontmatterName = ...")`
);
}
const { frontmatter: injectedFrontmatter } = safelyGetAstroData(vfile.data);
const frontmatter = { ...injectedFrontmatter, ...pageFrontmatter };
let exportNodes: MdxjsEsm[] = [];
if (!exportName) {
exportNodes = Object.entries(frontmatter).map(([k, v]) => {
if (!isValidIdentifierName(k)) {
throw new Error(
`[MDX] A remark or rehype plugin tried to inject ${JSON.stringify(
k
)} as a top-level export, which is not a valid export name.`
);
}
return jsToTreeNode(`export const ${k} = ${JSON.stringify(v)};`);
});
} else {
exportNodes = [jsToTreeNode(`export const ${exportName} = ${JSON.stringify(frontmatter)};`)];
}
const exportNodes = [
jsToTreeNode(`export const ${EXPORT_NAME} = ${JSON.stringify(frontmatter)};`),
];
tree.children = exportNodes.concat(tree.children);

@@ -46,0 +24,0 @@ };

13

src/index.ts

@@ -7,3 +7,2 @@ import { compile as mdxCompile, nodeTypes } from '@mdx-js/mdx';

import remarkGfm from 'remark-gfm';
import type { RemarkMdxFrontmatterOptions } from 'remark-mdx-frontmatter';
import remarkShikiTwoslash from 'remark-shiki-twoslash';

@@ -23,8 +22,2 @@ import remarkSmartypants from 'remark-smartypants';

rehypePlugins?: WithExtends<MdxRollupPluginOptions['rehypePlugins']>;
/**
* Configure the remark-mdx-frontmatter plugin
* @see https://github.com/remcohaszing/remark-mdx-frontmatter#options for a full list of options
* @default {{ name: 'frontmatter' }}
*/
frontmatterOptions?: RemarkMdxFrontmatterOptions;
};

@@ -124,7 +117,3 @@

...(mdxPluginOpts.rehypePlugins ?? []),
() =>
rehypeApplyFrontmatterExport(
frontmatter,
mdxOptions.frontmatterOptions?.name
),
() => rehypeApplyFrontmatterExport(frontmatter),
],

@@ -131,0 +120,0 @@ });

17

test/mdx-frontmatter.test.js

@@ -59,19 +59,2 @@ import mdx from '@astrojs/mdx';

});
it('extracts frontmatter to "customFrontmatter" export when configured', async () => {
const customFixture = await loadFixture({
root: new URL('./fixtures/mdx-custom-frontmatter-name/', import.meta.url),
integrations: [
mdx({
frontmatterOptions: {
name: 'customFrontmatter',
},
}),
],
});
await customFixture.build();
const { titles } = JSON.parse(await customFixture.readFile('/glob.json'));
expect(titles).to.include('Using YAML frontmatter');
});
});
test/fixtures/mdx-custom-frontmatter-name/src/pages/glob.json.js
test/fixtures/mdx-custom-frontmatter-name/src/pages/index.mdx
.turbo/turbo-build.log

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc