rwsdk-mdx

A post-install hook that automatically generates content collections from MDX files with custom components.

Installation

npm install rwsdk-mdx

Setup

1. Create a content-collections.ts file in your project root:

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

Usage

Regenerating Content Collections

After adding or editing MDX files, regenerate the collections:

npm run rwdsk-mdx

Importing Generated Content

Import the generated content in your components:

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'

Features

• 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

Configuration

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 identifier
• directory: Path to MDX files
• include: Glob pattern for files to include
• schema: Zod schema for frontmatter validation
• transform: Optional transform function for data processing