Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

[suggestion] allow mdx processing without mdx-bundler

Aberta
#247 1 comentário 3 reações 0 responsáveis Ver no GitHub

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
5/5
Tempo estimado
Mais de uma semana
Facilidade para iniciantes
30/100
Tipo de issue
Funcionalidade
Clareza
Razoavelmente clara
Status de atividade
Estagnada
Stack de tecnologia
markdown, typescript
Domínio
tooling

Direção de pesquisa

Comece pela configuração de makeSource e seu callback mdx; em seguida, compare a integração atual do mdx-bundler com o guia oficial de MDX on demand vinculado na issue. Está concluído quando contentlayer puder aceitar a configuração baseada em compile mostrada, incluindo os plugins remark e rehype, enquanto retorna o código compilado e os dados do arquivo.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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 }
  },
})
Linguagem predominante
TypeScript
Estrelas
3.5k
Forks
192
Nenhum PR com merge em 30d

Guia de contribuição

Abrir o guia de contribuição

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de contentlayerdev/contentlayer

Todas as issues de contentlayerdev/contentlayer

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.