Hacktoberfest 2026:维护者为十月标记出来的 issue,仍然开放、适合新手。 浏览 Hacktoberfest issue

[suggestion] allow mdx processing without mdx-bundler

未关闭
#247 1 条评论 3 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

评估

难度
5/5
预计耗时
一周以上
新手友好度
30/100
Issue 类型
功能
描述清晰度
基本清楚
活跃度
停滞
技术栈
markdown, typescript
领域
tooling

调研方向

从 makeSource 配置及其 mdx callback 开始,然后将当前的 mdx-bundler 集成与 issue 中链接的官方 MDX on demand 指南进行比较。完成标准是 contentlayer 能够接受所示的基于 compile 的设置,包括 remark 和 rehype 插件,同时返回编译后的代码和文件数据。

由索引模型根据 Issue 内容生成。

描述

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 }
  },
})
主要语言
TypeScript
星标
3.5k
派生
192
PR 合并指标
30 天内没有已合并 PR

贡献指南

打开贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

contentlayerdev/contentlayer 的其他 Issue

查看 contentlayerdev/contentlayer 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。