https://github.com/debbl/remark-headerify

https://github.com/debbl/remark-headerify

Last synced: 3 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/debbl/remark-headerify
• Owner: Debbl
• Created: 2023-10-07T01:30:12.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-01-20T02:04:37.000Z (over 2 years ago)
• Last Synced: 2025-01-24T22:41:22.216Z (over 1 year ago)
• Language: TypeScript
• Size: 428 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# remark headerify

## Install with Nextjs

```bash

pnpm i remark-headerify -D

```

## Usage

- only use for nextjs with mdx

- parse frontmatter config for Header component and Main component

> info.md

```md

---

    title: Info

---

# Info

```

## parse

```md

---

    title: Info

---

# Info

```

> mdx-components.tsx

```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 ;

    },

    Main: ({ children }: { children: React.ReactNode }) => {

      return {children};

    },

    ...components,

  };

}

```