remark-headerify v0.1.0

remark headerify

Install with Nextjs

pnpm i remark-headerify -D

Usage

• only use for nextjs with mdx

• parse frontmatter config for Header component and Main component

info.md

---
    title: Info
---

# Info

parse

---
    title: Info
---
<Header title="Info">
</Header>
<Main>
# Info
</Main>

mdx-components.tsx

import type { MDXComponents } from "mdx/types";
import Header from "./components/Header";

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    Header: (props: { title: string }) => {
      const { title = "" } = props;

      return <Header title={title} />;
    },
    Main: ({ children }: { children: React.ReactNode }) => {
      return <main className="markdown-body">{children}</main>;
    },

    ...components,
  };
}