@ipikuka/mdx

This package is an opinionated wrapper of next-mdx-remote-client.

When should I use this?

The @ipikuka/mdx is battery-included. You don't need to add any remark, rehype, remark plugins because I included them already according to my expertise. If you need to add a plugin let me know opening an issue.

The plugins used in the @ipikuka/mdx comes from @ipikuka/plugins.

@ipikuka/plugins provides remarkPlugins, rehypePlugins, recmaPlugins, and remarkRehypeOptions.

Thanks to @ipikuka/plugins, the markdown content or MDX content will support:

• bold texts, italic texts,
• lists, blockquotes, headings,
• table of contents (TOC),
• containers, admonitions, callouts,
• marked texts, inserted texts,
• centered paragraphs, aligned paragraphs,
• guillements,
• gfm syntax (tables, strikethrough, task lists, autolinks etc.),
• highlighted and numbered code fences,
• code titles,
• autolink for headers,
• definition lists etc. and many more.

Installation

This package is suitable for ESM module only. In Node.js (16.0+), install with npm:

1npm install @ipikuka/mdx

or

1yarn add @ipikuka/mdx

Usage

This package is peer dependant with react, react-dom; so it is assumed that you have already installed.

Example with Next.js pages router

The @ipikuka/mdx provides a serialize function. The serialize function is an opinionated wrapper of the serialize function of the next-mdx-remote-client which is a set of light utilities allowing MDX to be loaded within getStaticProps or gerServerSideProps and hydrated correctly on the client. The @ipikuka/mdx provides also hydrate function and MDXClient component for "pages" router. See for more details about next-mdx-remote-client at here.

1import { serialize } from "@ipikuka/mdx/serialize";
2import { MDXClient } from "@ipikuka/mdx";
3
4import ErrorComponent from "../components/ErrorComponent";
5import { TableOfComponent, Test } from "../mdxComponents";
6
7const components = {
8  Test,
9  wrapper: ({ children }) => <div className="mdx-wrapper">{children}</div>,
10};
11
12export default function Page({ mdxSource }) {
13  if ("error" in mdxSource) {
14    return <ErrorComponent error={mdxSource.error} />;
15  }
16
17  return <MDXClient {...mdxSource} components={components} />;
18}
19
20export async function getStaticProps() {
21  const source = `---
22title: My Article
23---
24<TableOfComponent toc={toc} />
25
26Some **bold** and ==marked== text in MDX.
27
28\`\`\`js:Title.js showLineNumbers
29console.log("next-mdx-remote-client");
30\`\`\`
31
32~|> Centered paragraph (thanks to remark-flexible-paragraphs)
33
34With a component <Test />
35
36::: tip The Title of The Container
37The content of the tip (thanks to remark-flexible-containers)
38:::
39`;
40
41  const mdxSource = await serialize({
42    source,
43    options: { parseFrontmatter: true },
44  });
45
46  return { props: { mdxSource } };
47}

Example with Next.js app router

The @ipikuka/mdx provides evaluate function and MDXRemote component for "app" router. See for more details about next-mdx-remote-client at here.

1import { Suspense } from "react";
2import { MDXRemote } from "@ipikuka/mdx/rsc";
3
4import { ErrorComponent, LoadingComponent } from "../components";
5import { TableOfComponent, Test } from "../mdxComponents";
6
7const components = {
8  Test,
9  wrapper: ({ children }) => <div className="mdx-wrapper">{children}</div>,
10};
11
12export default async function Page() {
13  const source = `---
14title: My Article
15---
16<TableOfComponent toc={toc} />
17
18Some **bold** and ==marked== text in MDX.
19
20\`\`\`js:Title.js showLineNumbers
21console.log("next-mdx-remote-client");
22\`\`\`
23
24~|> Centered paragraph (thanks to remark-flexible-paragraphs)
25
26With a component <Test />
27
28::: tip The Title of The Container
29The content of the tip (thanks to remark-flexible-containers)
30:::
31`;
32
33  return (
34    <Suspense fallback={<LoadingComponent />}>
35      <MDXRemote
36        source={source}
37        options={{ parseFrontmatter: true }}
38        components={components}
39        onError={ErrorComponent}
40      />
41    </Suspense>
42  );
43}

Options

@ipikuka/mdx has the same options with next-mdx-remote-client as a wrapper. See next-mdx-remote-client.

Types

This package is fully typed with TypeScript and exposes the same types as next-mdx-remote-client does.

Compatibility

It is a Nextjs compatible package.

Security

This package has the same security concerns with next-mdx-remote-client.

License

MIT License © ipikuka

Keywords

🟩 unified 🟩 @mdx-js/mdx 🟩 next-mdx-remote-client 🟩 @ipikuka/plugins 🟩 markdown 🟩 mdx