Add basic implementation for MDXRemote

This commit is contained in:
Marcus Blättermann 2022-11-10 02:40:32 +01:00
parent 32ac63ce4a
commit 08f9d90aa3
No known key found for this signature in database
GPG Key ID: A1E1F04008AC450D
5 changed files with 128 additions and 0 deletions

View File

@ -0,0 +1,9 @@
const Layout = (args) => {
return (
<>
<div>{args.children}</div>
</>
)
}
export default Layout

View File

@ -1,5 +1,8 @@
const withMDX = require('@next/mdx')({
extension: /\.mdx?$/,
options: {
providerImportSource: '@mdx-js/react',
},
})
/** @type {import('next').NextConfig} */

View File

@ -17,6 +17,7 @@
"eslint": "8.27.0",
"eslint-config-next": "13.0.2",
"next": "13.0.2",
"next-mdx-remote": "^4.2.0",
"prettier": "^2.7.1",
"react": "18.2.0",
"react-dom": "18.2.0",
@ -538,6 +539,11 @@
"@types/unist": "*"
}
},
"node_modules/@types/js-yaml": {
"version": "4.0.5",
"resolved": "https://registry.npmjs.org/@types/js-yaml/-/js-yaml-4.0.5.tgz",
"integrity": "sha512-FhpRzf927MNQdRZP0J5DLIdTXhjLYzeUTmLAu69mnVksLH9CJY3IuSeEgbKUki7GQZm0WqDkGzyxju2EZGD2wA=="
},
"node_modules/@types/json-schema": {
"version": "7.0.11",
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
@ -3713,6 +3719,25 @@
}
}
},
"node_modules/next-mdx-remote": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/next-mdx-remote/-/next-mdx-remote-4.2.0.tgz",
"integrity": "sha512-X5RhD7f7b78pH2abbuusObSGgII5l54OdusS/2iXljN7WN1cel6ToLlZeCZcyxx9cR4wmBGQYGongIttDYNmAA==",
"dependencies": {
"@mdx-js/mdx": "^2.0.0",
"@mdx-js/react": "^2.0.0",
"vfile": "^5.3.0",
"vfile-matter": "^3.0.1"
},
"engines": {
"node": ">=14",
"npm": ">=7"
},
"peerDependencies": {
"react": ">=16.x <=18.x",
"react-dom": ">=16.x <=18.x"
}
},
"node_modules/node-releases": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.6.tgz",
@ -4937,6 +4962,20 @@
"url": "https://opencollective.com/unified"
}
},
"node_modules/vfile-matter": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/vfile-matter/-/vfile-matter-3.0.1.tgz",
"integrity": "sha512-CAAIDwnh6ZdtrqAuxdElUqQRQDQgbbIrYtDYI8gCjXS1qQ+1XdLoK8FIZWxJwn0/I+BkSSZpar3SOgjemQz4fg==",
"dependencies": {
"@types/js-yaml": "^4.0.0",
"is-buffer": "^2.0.0",
"js-yaml": "^4.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/unified"
}
},
"node_modules/vfile-message": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-3.1.2.tgz",
@ -5452,6 +5491,11 @@
"@types/unist": "*"
}
},
"@types/js-yaml": {
"version": "4.0.5",
"resolved": "https://registry.npmjs.org/@types/js-yaml/-/js-yaml-4.0.5.tgz",
"integrity": "sha512-FhpRzf927MNQdRZP0J5DLIdTXhjLYzeUTmLAu69mnVksLH9CJY3IuSeEgbKUki7GQZm0WqDkGzyxju2EZGD2wA=="
},
"@types/json-schema": {
"version": "7.0.11",
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
@ -7657,6 +7701,17 @@
"use-sync-external-store": "1.2.0"
}
},
"next-mdx-remote": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/next-mdx-remote/-/next-mdx-remote-4.2.0.tgz",
"integrity": "sha512-X5RhD7f7b78pH2abbuusObSGgII5l54OdusS/2iXljN7WN1cel6ToLlZeCZcyxx9cR4wmBGQYGongIttDYNmAA==",
"requires": {
"@mdx-js/mdx": "^2.0.0",
"@mdx-js/react": "^2.0.0",
"vfile": "^5.3.0",
"vfile-matter": "^3.0.1"
}
},
"node-releases": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.6.tgz",
@ -8459,6 +8514,16 @@
"vfile": "^5.0.0"
}
},
"vfile-matter": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/vfile-matter/-/vfile-matter-3.0.1.tgz",
"integrity": "sha512-CAAIDwnh6ZdtrqAuxdElUqQRQDQgbbIrYtDYI8gCjXS1qQ+1XdLoK8FIZWxJwn0/I+BkSSZpar3SOgjemQz4fg==",
"requires": {
"@types/js-yaml": "^4.0.0",
"is-buffer": "^2.0.0",
"js-yaml": "^4.0.0"
}
},
"vfile-message": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-3.1.2.tgz",

View File

@ -19,6 +19,7 @@
"eslint": "8.27.0",
"eslint-config-next": "13.0.2",
"next": "13.0.2",
"next-mdx-remote": "^4.2.0",
"prettier": "^2.7.1",
"react": "18.2.0",
"react-dom": "18.2.0",

50
website/pages/[slug].tsx Normal file
View File

@ -0,0 +1,50 @@
import type { GetStaticPaths, GetStaticProps } from 'next'
import { serialize } from 'next-mdx-remote/serialize'
import fs from 'fs'
import { MDXRemote, MDXRemoteSerializeResult } from 'next-mdx-remote'
import path from 'path'
import Layout from '../components/layout'
type PropsPage = {
mdx: MDXRemoteSerializeResult
}
const PostPage = ({ mdx: mdx }: PropsPage) => {
return (
<Layout>
<MDXRemote {...mdx} />
</Layout>
)
}
export default PostPage
type ParsedUrlQuery = {
slug: string
}
export const getStaticPaths: GetStaticPaths<ParsedUrlQuery> = async () => {
return {
paths: fs.readdirSync(path.join('docs')).map((filename) => ({
params: {
slug: filename.replace('.mdx', ''),
},
})),
fallback: false,
}
}
export const getStaticProps: GetStaticProps<PropsPage, ParsedUrlQuery> = async (args) => {
if (!args.params) {
return { notFound: true }
}
return {
props: {
slug: args.params.slug,
mdx: await serialize(
fs.readFileSync(path.join('docs', args.params.slug + '.mdx'), 'utf-8'),
{ parseFrontmatter: true }
),
},
}
}