import { MDXOptions } from '@contentlayer/core' ; import rehypeToc from '@jsdevtools/rehype-toc' ; import rehypeAutolinkHeadings from 'rehype-autolink-headings' ; import rehypeCodeTitles from 'rehype-code-titles' ; import rehypePrism from 'rehype-prism-plus' ; import rehypeSlug from 'rehype-slug' ; import remarkGfm from 'remark-gfm' ; import { RehypeElement } from './../src/types' ; import imageMetadata from './image-metadata' ; const customizeTOC = ( toc ) : RehypeElement | null => { try { const { children } = toc ; const childrenOfChildren = children ?. [ 0 ] ?. children ; if ( ! children ?. length || ! childrenOfChildren ?. length ) return null ; } catch ( e ) { } return { type : 'element' , tagName : 'div' , properties : { className : 'toc' } , children : [ { type : 'element' , tagName : 'p' , properties : { className : 'title' } , children : [ { type : 'text' , value : 'Table of Contents' , } , ] , } , ... ( toc . children || [ ] ) , ] , } ; } ; const mdx = { remarkPlugins : [ remarkGfm ] , rehypePlugins : [ imageMetadata , rehypeSlug , rehypeCodeTitles , rehypePrism , [ rehypeAutolinkHeadings , { properties : { className : [ 'anchor' ] , } , } , ] , [ rehypeToc , { customizeTOC , } , ] , ] , } ; export default mdx ;