MDX Vacuum for Astro

The web site

Besides the plugins, the sources of the ‘MDX Vacuum’ web site are published as a showcase of how to apply the plugins to a file/git-based publication workflow. The source for the MDX Vacuum web site can be found in apps/web.

The plugins

The plugins can be found in packages/plugins/* and will be published to NPM

The following plugins are available:

Discuss upcoming plugins

The following plugins are planned:

• remark-astro-relativeimport - dynamically imports files relative to the referencing file.
• remark-astro-styledirective - lets users apply CSS classes to the HTML elements resulting from the markdown.

If you want to start a discussion open an issue on github…

Source code for this page

This is the complete MDX source for this page (embedded from the injected raw content, see plugin remark-astro-rawmdx for details):

Have a look how clean the markdown is
✔️ No frontmatter
✔️ No imports required
✔️ Only very few components
✔️ Mostly pure markdown

# MDX Vacuum for Astro

> **DEPRECATED:** I am focusing on the plugin [astro-m2dx](https://www.npmjs.com/package/astro-m2dx), which bundles all features from the `@mdxvac` plugins in one plugin, where all features are opt-in. However, you only have to install one plugin and I can focus more: Please consider using [astro-m2dx](https://www.npmjs.com/package/astro-m2dx) instead.

If you have used [MDX](https://mdxjs.com) before, you might have noticed that MDX files tend to become quite technical.

For us tech nerds, that is mostly fine, and being able to write the content into our technical documents in Markdown is already a big gain. But for non-tech content-editors, writing this style of markdown is quite a burden, and actually I realized, that it is quite a burden for my mind, too.

> I like my content to be clean, so I decided to _dust off my MDX_.

With the arrival of [Astro v1.0](https://astro.build)🚀 and it's [MDX Integration](https://docs.astro.build/en/guides/integrations-guide/mdx/), there was the chance to implement a publication pipeline that provides content-editors with the ability to write almost clean markdown, with only a few sprinkles of JSX and without overloading the frontmatter: **MDX Vacuum for Astro** was born\*

\*previously called [`astro-m2dx`](https://astro-m2dx.netlify.app) - "Magic MDX"

MDX Vacuum is a [set of Vite, Remark and Rehype plugins](#the-plugins), that you can use in your Astro site generator, to keep your MDX as clean as you like.

<Claim>Dear Astronauts, take your vacuum cleaner and dust off your MDX!</Claim>

## The web site

Besides the plugins, the sources of the 'MDX Vacuum' web site are published as a showcase of how to apply the plugins to a file/git-based publication workflow. The source for the MDX Vacuum web site can be found in [`apps/web`](https://github.com/mdxvac/mdxvac/tree/main/apps/web).

## The plugins

The plugins can be found in [`packages/plugins/*`](https://github.com/mdxvac/mdxvac/tree/main/packages/plugins) and will be published to [NPM](https://www.npmjs.com/org/mdxvac)

The following plugins are available:

<Wrap>
  <Card href="/plugins/remark-astro-autoimports">
    `remark-astro-autoimports` lets users define a set of components that can be used in MDX-files
    without explicitly being imported.
  </Card>
  <Card href="/plugins/remark-astro-frontmatter">
    `remark-astro-frontmatter` lets users define and inject default frontmatter for all MDX-pages in
    a directory and its subdirectories, e.g. the `layout` property.
  </Card>
  <Card href="/plugins/remark-sectionize-headings">
    `remark-sectionize-headings` wrap headings and the following paragraphs into sections, e.g. to
    style them.
  </Card>
  <Card href="/plugins/remark-astro-autocomponents">
    `remark-astro-autocomponents` lets users define a mapping from standard html elements to JSX
    components on a per-directory basis.
  </Card>
</Wrap>

## Discuss upcoming plugins

The following plugins are planned:

- **remark-astro-relativeimport** - dynamically imports files relative to the referencing file.
- **remark-astro-styledirective** - lets users apply CSS classes to the HTML elements resulting from the markdown.

If you want to start a discussion [open an issue on github](https://github.com/mdxvac/mdxvac/issues/new/choose)...

## Source code for this page

This is the complete MDX source for this page (embedded from the injected raw content, see plugin `remark-astro-rawmdx` for details):

> Have a look how clean the markdown is  
> ✔️ No frontmatter  
> ✔️ No imports required  
> ✔️ Only very few components  
> ✔️ Mostly pure markdown

<Code code={frontmatter?.rawmdx ?? 'No MDX found'} lang="mdx" />