This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

@mdxvac/remark-astro-autocomponents

DEPRECATED: Please consider using the plugin astro-m2dx, which bundles all features from the @mdxvac plugins in one plugin (completely opt-in).

Remark plugin to define common component mappings for all Astro markdown files in a directory.

Dust off your MDX
MDX Vacuum is a set of plugins allowing you to write clean markdown, while still using all the great features of MDX.
Use Astro 🚀 and these plugins to build your publishing pipeline for Markdown/MDX.

Have a look at the other @mdxvac plugins on NPM.

Content

• Content
• What is this?
• When should I use this?
• Install
• Use
  • Options
    • name: string

What is this?

This package is a remark plugin for markdown files in the context of Astro site generation.

When should I use this?

In Astro you can define a mapping from HTML elements to JSX components by exporting const components = { ... } in any MDX file. With this plugin you can define this export per directory.

Install

This package is ESM only. In Node.js (version 12.20+, 14.14+, or 16.0+), install with npm:

npm install -D @mdxvac/remark-astro-autocomponents

Use

In your astro.config.mjs

import { defineConfig } from 'astro/config';

import mdx from '@astrojs/mdx';
import autoComponents from '@mdxvac/remark-astro-autocomponents';
//                       ^^^

// https://astro.build/config
export default defineConfig({
  integrations: [mdx()],
  markdown: {
    remarkPlugins: [autoComponents],
    //              ^^^
    extendDefaultPlugins: true,
  },
});

This uses the default options, where the name of the auto-import file is _components.ts.

Now create an auto-components file exporting const components, mapping HTML tags to JSX components:

import { Title } from '@components/Title';

export const components = {
  h1: Title,
};

Files are evaluated up the directory tree, i.e. files closer to the MDX file take precedence over files further up the tree.

Options

You can specify options for the plugin in astro.config.mjs like so:

remarkPlugins: [[autoComponents, {...your_options}]],

The following options are available:

name: string

Name for auto-component files.

• name, to find files with name up the directory tree
• default: _components.ts

You can use it like so:

remarkPlugins: [[autoComponents, {name: "_my-components.js"}]],