@rasenganjs/mdx NPM

Rasengan MDX Plugin

NPM Downloads

MDX plugin for Rasengan.Js

Installation

You can install the @rasenganjs/mdx package using the following command:

npm install @rasenganjs/mdx

yarn add @rasenganjs/mdx

Usage

Here is an example of how you can use the @rasenganjs/mdx package:

Basic Usage

Setup the rasengan.config.js file

Import the mdx plugin into the rasengan.config.js file.

import { defineConfig } from 'rasengan';
import mdx from '@rasenganjs/mdx';

export default defineConfig({
  vite: {
    plugins: [mdx()],
  },
});

Create your markdown file.

Create a markdown file inside the app folder with the pattern [name].page.mdx or [name].page.md

---
path: /blog
metadata:
  title: Blog page
  description: Discover our new blog posts
---

import Button from '@/components/Button';

# Blog page

This is a `blog` page.

<Button>Click Me</Button>

Use your markdown file.

Inside the app.router.ts file, import your Markdown Component and the MDXRenderer component from @rasenganjs/mdx and add it to defineRouter option like this:

import { RouterComponent, defineRouter } from 'rasengan';
import AppLayout from '@app/app.layout';
import Blog from '@app/blog.page.mdx';
import { MDXRenderer } from '@rasenganjs/mdx';

class AppRouter extends RouterComponent {}

export default defineRouter({
  imports: [],
  layout: AppLayout,
  pages: [Blog],
  MDXRenderer,
})(AppRouter);

The MDXRenderer component is used to render the Markdown content.

Load the css file from @rasenganjs/mdx package into your main.ts file.

import "@rasenganjs/mdx/styles/rasengan-mdx.min.css";
import { type AppProps } from "rasengan";
import AppRouter from "@/app/app.router";

export default function App({ children, Component }: AppProps) {
	return <Component router={AppRouter}>{children}</Component>;
}

Now visit http://localhost:5320/blog