Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

[suggestion] allow mdx processing without mdx-bundler

Ouverte
  • Quelque chose ne va pas ?
#247 1 commentaire 3 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Évaluation

Difficulté
5/5
Temps estimé
Plus d'une semaine
Accessibilité débutants
30/100
Type d'issue
Fonctionnalité
Clarté
Plutôt claire
Activité
À l'abandon
Stack technique
markdown, typescript
Domaine
tooling

Piste de recherche

Commencez par la configuration de makeSource et son callback mdx, puis comparez l’intégration actuelle de mdx-bundler avec le guide officiel MDX on demand lié dans l’issue. C’est terminé lorsque contentlayer peut accepter la configuration basée sur compile présentée, y compris les plugins remark et rehype, tout en renvoyant le code compilé et les données du fichier.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

improvement needs-research topic: markdown/mdx

mdx-bundler is pretty opinionated and i would like to be able to use a simpler setup closer to the official MDX on demand guide.

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

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 }
  },
})
Langage dominant
TypeScript
Étoiles
3.5k
Forks
192
Aucune PR mergée en 30 j

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de contentlayerdev/contentlayer

Toutes les issues de contentlayerdev/contentlayer

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.