contentlayerdev / contentlayerdev/contentlayer

[suggestion] allow mdx processing without mdx-bundler

Abierto
#247 1 comentario 3 reacciones 0 asignados Ver en GitHub
improvement needs-research topic: markdown/mdx
Lenguaje dominante
TypeScript
Estrellas
3.5k
Forks
192
Métricas de merge de PR
Sin PR fusionados en 30 d

Descripción

`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 }
},
})
```

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.