Vite plugin for bundling MDX files with custom components
npm install rwsdk-mdxA post-install hook that automatically generates content collections from MDX files with custom components.
``bash`
npm install rwsdk-mdx
1. Create a content-collections.ts file in your project root:
`typescript
import { z } from "zod";
const contentConfig = {
collections: [
{
name: "posts",
directory: "content/posts",
include: "*/.mdx",
schema: z.object({
title: z.string(),
date: z.coerce.date(),
author: z.string().optional(),
protected: z.boolean().optional(),
}),
},
{
name: "docs",
directory: "content/docs",
include: "*/.mdx",
schema: z.object({
title: z.string(),
order: z.number().optional(),
protected: z.boolean().optional(),
}),
},
],
};
export default contentConfig;
`
2. Create your content directories and MDX files:
``
content/
posts/
my-post.mdx
docs/
getting-started.mdx
3. The plugin will automatically run on install and generate:
- .content-collections/generated/index.ts - Type-safe content collections.content-collections/generated/mdx/
- - Compiled React components
After adding or editing MDX files, regenerate the collections:
`bash`
npm run rwdsk-mdx
Import the generated content in your components:
`typescript
import { allPosts, getPostsBySlug, test_post } from '.content-collections/generated'
// Use the data
const posts = allPosts
const post = getPostsBySlug('my-post')
// Use the compiled component
import { test_post } from '.content-collections/generated/mdx/posts'
`
- Automatic MDX compilation to React components
- Type-safe content collections with Zod schemas
- Custom component imports from @/ paths in MDX
- Helper functions for filtering and querying content
- Post-install script that runs automatically
The plugin looks for content-collections.ts in your project root and processes MDX files according to your schema definitions. Each collection can have:
- name: Collection identifierdirectory
- : Path to MDX filesinclude
- : Glob pattern for files to includeschema
- : Zod schema for frontmatter validationtransform`: Optional transform function for data processing
-