contentlayerdev / contentlayerdev/contentlayer

[suggestion] allow mdx processing without mdx-bundler

Aperta
#247 1 commento 3 reazioni 0 assegnatari Vedi su GitHub
improvement needs-research topic: markdown/mdx
Lingua principale
TypeScript
Stelle
3.5k
Fork
192
Metriche di merge delle PR
Nessuna PR unita negli ultimi 30g

Descrizione

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

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia dalla configurazione di makeSource e dal relativo callback mdx, quindi confronta l'integrazione attuale di mdx-bundler con la guida ufficiale di MDX on demand collegata nell'issue. Il lavoro è completato quando contentlayer può accettare la configurazione basata su compile mostrata, inclusi i plugin remark e rehype, restituendo il codice compilato e i dati del file.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
markdown, typescript
Ambito
tooling
Tipo di issue
Funzionalità
Difficoltà
5/5
Tempo stimato
Più di una settimana
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
30/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.