GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Sign in
  • ActionsCI/CD and automation
  • CodespacesCloud development environments
  • All Features
  • Documentation
  • Training
  • Certifications
  • Build with Copilot
  • Customize Copilot
  • Integrations
  • Trending repos
  • GitHub Sponsors
  • Developer articles
  • Enterprises

This view

  • Original page
  • New address

GeezerVison is showing github.com — [suggestion] allow mdx processing without mdx-bundler · Issue #247 · contentlayerdev/contentlayer

[suggestion] allow mdx processing without mdx-bundler #247

New issue
Copy link
New issue
Copy link
Open
Open
[suggestion] allow mdx processing without mdx-bundler#247
Copy link
Labels
improvementneeds-researchtopic: markdown/mdx
Milestone
Pre-1.0

Description

@stefanprobst
stefanprobst
opened on Jun 9, 2022
Issue body actions

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 }
  },
})
Reacted by Slava Kurilyak, 幽山 and Hai Ha

Activity

  1. stefanprobst commented on Jun 10, 2022

    @stefanprobst
    stefanprobst
    on Jun 10, 2022
    ContributorAuthor
    More actions

    i think this could look something like this: main...stefanprobst:feat/mdx-md-processing

  2. schickling
    added this to the Pre-1.0 milestone on Jul 5, 2022
  3. schickling
    added
    topic: markdown/mdx
    improvement
    needs-research
    on Jul 5, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    improvementneeds-researchtopic: markdown/mdx

    Type

    No type

    Projects

    No projects

      Milestone

      • Pre-1.0No due date

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions

      You are visitor 01402520 — GeezerVison does not store the pages you look up.
      Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.