contentlayerdev / contentlayerdev/contentlayer

[suggestion] allow mdx processing without mdx-bundler

Đang mở
#247 1 bình luận 3 reaction 0 người được giao Xem trên GitHub
improvement needs-research topic: markdown/mdx
Ngôn ngữ chính
TypeScript
Star
3.5k
Fork
192
Chỉ số merge pull request
Không có pull request nào được merge trong 30 ngày

Mô tả

`mdx-bundler` is pretty opinionated and i would like to be able to use a simpler setup closer to the official [`MDX on demand`](https://mdxjs.com/guides/mdx-on-demand/) guide.

it would be cool if something like the following could work with `contentlayer`:

```ts
import { compile } from '@mdx-js/mdx'
import withToc from '@stefanprobst/rehype-extract-toc'
import type { RawDocumentData } from 'contentlayer/source-files'
import { defineDocumentType, makeSource } from 'contentlayer/source-files'
import withSlug from 'rehype-slug'
import withFrontmatter from 'remark-frontmatter'
import withGfm from 'remark-gfm'
import { VFile } from 'vfile'
import { matter } from 'vfile-matter'

import { getTranslations } from '@/app/i18n'

const Post = defineDocumentType(() => {
return {
name: 'Post',
description: 'Post',
filePathPattern: `posts/**/*.mdx`,
contentType: 'mdx',
fields: {
title: { description: 'Title', type: 'string', required: true },
locale: { description: 'Locale', type: 'enum', options: ['en', 'de'], required: true },
},
}
})

export default makeSource({
contentDirPath: 'content',
documentTypes: [Post],
async mdx(raw: string, sourceFilePath?: string) {
const input = new VFile({ value: raw, path: sourceFilePath })

matter(input)
const { locale } = input.data['matter']
const t = await getTranslations(locale)

const vfile = await compile(input, {
remarkPlugins: [withFrontmatter, withGfm],
remarkRehypeOptions: {
footnoteBackLabel: t('footnote-back-label'),
footnoteLabel: t('footnote-label'),
},
rehypePlugins: [withSlug, withToc],
})

return { code: String(vfile), data: vfile.data }
},
})
```

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.