|
3 | 3 | import { readFileSync } from 'node:fs'; |
4 | 4 | import { join, normalize, sep } from 'node:path'; |
5 | 5 |
|
6 | | -import { serialize } from 'next-mdx-remote/serialize'; |
7 | 6 | import { VFile } from 'vfile'; |
8 | 7 |
|
9 | 8 | import { DEFAULT_LOCALE_CODE, MD_EXTENSION_REGEX } from './next.constants.mjs'; |
10 | 9 | import { getMarkdownFiles } from './next.helpers.mjs'; |
11 | 10 | import { availableLocales } from './next.locales.mjs'; |
12 | | -import { nextRehypePlugins, nextRemarkPlugins } from './next.mdx.mjs'; |
| 11 | +import { compileMDX } from './next.mdx.compiler.mjs'; |
13 | 12 |
|
14 | 13 | // allows us to run a glob to get markdown files based on a language folder |
15 | 14 | const getPathsByLanguage = async (locale = DEFAULT_LOCALE_CODE, ignored = []) => |
@@ -148,31 +147,15 @@ export const generateStaticProps = async (source = '', filename = '') => { |
148 | 147 | // Gets the file extension of the file, to determine which parser and plugins to use |
149 | 148 | const fileExtension = filename.endsWith('.mdx') ? 'mdx' : 'md'; |
150 | 149 |
|
151 | | - // This act as a MDX "compiler" but, lightweight. It parses the Markdown |
152 | | - // string source into a React Component tree, and then it serializes it |
153 | | - // it also supports Remark plugins, and MDX components |
154 | | - // Note.: We use the filename extension to define the mode of execution |
155 | | - const { compiledSource } = await serialize(sourceAsVirtualFile, { |
156 | | - parseFrontmatter: true, |
157 | | - mdxOptions: { |
158 | | - rehypePlugins: nextRehypePlugins(fileExtension), |
159 | | - remarkPlugins: nextRemarkPlugins(fileExtension), |
160 | | - format: fileExtension, |
161 | | - }, |
162 | | - }); |
163 | | - |
164 | | - // After the MDX gets processed with the remarkPlugins, some extra `data` that might come along |
165 | | - // the `frontmatter` comes from `serialize` built-in support to `remark-frontmatter` |
166 | | - const { headings, matter: rawFrontmatter } = sourceAsVirtualFile.data; |
167 | | - |
168 | | - // This serialises the Frontmatter into a JSON object that is compatible with the |
169 | | - // `getStaticProps` supported data type for props. (No prop value can be an object or not a primitive) |
170 | | - const frontmatter = JSON.parse(JSON.stringify(rawFrontmatter)); |
171 | | - |
172 | | - // this defines the basic props that should be passed back to the `DynamicPage` component |
173 | | - // We only want the `compiledSource` as we use `MDXProvider` for custom components along the journey |
174 | | - // And then we want the frontmatter and heading information from the VFile `data` |
175 | | - staticProps.props = { content: compiledSource, headings, frontmatter }; |
| 150 | + // This compiles our MDX source (VFile) into a final MDX-parsed VFile |
| 151 | + // that then is passed as a string to the MDXProvider which will run the MDX Code |
| 152 | + const { content, headings, frontmatter } = await compileMDX( |
| 153 | + sourceAsVirtualFile, |
| 154 | + fileExtension |
| 155 | + ); |
| 156 | + |
| 157 | + // Passes the compiled MDX Source to the MDX Provider and some extra data |
| 158 | + staticProps.props = { content: String(content), headings, frontmatter }; |
176 | 159 | staticProps.notFound = false; |
177 | 160 | } |
178 | 161 |
|
|
0 commit comments