Generated code contains also frontmatters
nullndr opened this issue · 1 comments
nullndr commented
mdx-bundler
version: 9.2.1node
version: 18.12.1npm
version: 8.19.2
Relevant code or config
// posts.server.ts
import { remarkCodeHike } from "@code-hike/mdx";
import { readFile } from "fs/promises";
import { bundleMDX } from "mdx-bundler";
import codeHikeTheme from "shiki/themes/one-dark-pro.json";
type FrontMatter = {
title: string;
description: string;
publishedAt: string;
};
export const getMdxFile = async (file: string) => {
return bundleMDX<FrontMatter>({
source: (await readFile(`./posts/${file}.mdx`)).toString(),
mdxOptions() {
return {
remarkPlugins: [
[
remarkCodeHike,
{
theme: codeHikeTheme,
lineNumbers: true,
showCopyButton: true,
autoImport: true,
},
],
],
};
},
});
};
// app/routes/post.$name.tsx
import React from "react";
import { Title } from "~/components/Title";
import { getMdxFile } from "~/utils/posts.server";
export const loader = async ({ params }: LoaderArgs) => {
const name = params.name;
if (name == null) {
throw new Response(null, { status: 400 });
}
return getMdxFile(name);
};
export default function () {
const {
code,
frontmatter: { title },
} = useLoaderData<typeof loader>();
const MdxComponent = React.useMemo(() => getMDXComponent(code), [code]);
return (
<>
<Title>{title}</Title>
<div className="m-3 mt-10 xl:w-1/2 prose dark:prose-invert prose-a:no-underline prose-a:font-bold">
<MdxComponent />
</div>
</>
);
}
// baz.mdx
---
title: baz
publishedAt: 2023-02-13
description: Lorem ipsum dolor sit amet
---
Lorem ipsum dolor sit amet, consectetur ...
What happened:
Problem description:
As you can see the generated html code contains also the data from the frontmatter, but from the README.md file it shouldn't be here.
Am I missing something?
nullndr commented
I forgot to add options.remarkPlugins
on bundleMDX.mdxOptions
, sorry!