MDX 2 plugin for Aleph.js
// aleph.config.ts
import mdx from "https://deno.land/x/aleph_plugin_mdx@$VERSION/mod.ts";
import type { Config } from "https://deno.land/x/[email protected]/types.d.ts";
export default <Config> {
plugins: [mdx()],
};then, modify import_map.json.
{
"imports": {
...,
"react/jsx-runtime": "https://esm.sh/[email protected]/jsx-runtime"
}
}By default, .mdx files are JSX transformed into the @jsx-runtime format.
It includes the following imports.
import {
Fragment as _Fragment,
jsx as _jsx,
jsxs as _jsxs,
} from "react/jsx-runtime";As you know, Deno imports remote modules with URL schema. This means that you
need to change react/jsx-runtime to the correct URL.
Fortunately, Aleph.js has import map resolution enabled by default, so we will use that.
🚧 This process may be automated in the future.
This package exports default as plugin. It uses the same style as the official plugin.
Rewrite the page path
declare function rewritePagePath: (path: string) => string | undefined;example:
pages
├── get_started.mdx
└── index.tsx// aleph.config.ts
import mdx from "https://deno.land/x/aleph_plugin_mdx@$VERSION/mod.ts";
import type { Config } from "https://deno.land/x/[email protected]/types.d.ts";
export default <Config> {
plugins: [mdx({
rewritePagePath(path) {
return path.replaceAll("_", "-");
},
})],
};output:
▲ SSG
/
/get-startedDefine props to page components.
declare const pageProps = Record<string | number, unknown>;example:
// aleph.config.ts
import mdx from "https://deno.land/x/aleph_plugin_mdx@$VERSION/mod.ts";
import type { Config } from "https://deno.land/x/[email protected]/types.d.ts";
export default <Config> {
plugins: [
mdx({
pageProps: { nav: [{ path: "/" }, { path: "/docs" }] },
}),
],
};pages
├── docs
│ └── installation.mdx
└── docs.tsx// docs.tsx
import type { MDXContent } from "https://esm.sh/@types/mdx/types.d.ts";
export type DocsProps = {
Page?: MDXContent & { nav: { path: string }[] };
};
export default function Docs({ Page }: DocsProps) {
if (!Page) return <></>;
// Page.nav
return <Page />;
}others:
Passes the @mdx-js/mdx#compile options as is. For details, see
compile options.
This plugin depends on @mdx-js/[email protected].
Copyright © 2021-present TomokiMiyauci.
Released under the MIT license
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent