heimoshuiyu/yongyuancv.cn
1
0
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

MDXProvider

Browse Source
This commit is contained in:
黑墨水鱼
2022-04-06 11:21:16 +08:00
parent c9b7f9024c
commit ffda9a99c5
4 changed files with 44 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
components/PostLayout.js
View File

@@ -1,24 +1,48 @@
import { Grid, Container, Typography, Paper } from "@mui/material";
import { MDXProvider } from "@mdx-js/react";
import Image from "next/image";
const components = {
h1: (props) => <Typography variant="h1" {...props} />,
h2: (props) => <Typography variant="h2" {...props} />,
h3: (props) => <Typography variant="h3" {...props} />,
h4: (props) => <Typography variant="h4" {...props} />,
h5: (props) => <Typography variant="h5" {...props} />,
h6: (props) => <Typography variant="h6" {...props} />,
img: (props) => <Image alt={props.alt} layout="responsive" {...props} />,
code: (props) => (
<code
style={{
backgroundColor: "lightpink",
borderRadius: "0.4rem",
padding: "0.2rem",
}}
{...props}
/>
),
};
export default function PostLayout({ children, meta }) {
return (
<Container>
<Grid container spacing={3}>
<Grid item xs={12}>
<Paper
style={{
padding: "1rem",
margin: "1rem",
backgroundColor: "#fafafa",
}}
>
<Typography variant="h4">{meta.title}</Typography>
<Typography variant="body1">{meta.description}</Typography>
<hr />
{children}
</Paper>
<MDXProvider components={components}>
<Container>
<Grid container spacing={3}>
<Grid item xs={12}>
<Paper
style={{
padding: "1rem",
margin: "1rem",
backgroundColor: "#fafafa",
}}
>
<Typography variant="h4">{meta.title}</Typography>
<Typography variant="body1">{meta.description}</Typography>
<hr />
{children}
</Paper>
</Grid>
</Grid>
</Grid>
</Container>
</Container>
</MDXProvider>
);
}

1
next.config.js
View File

@@ -3,6 +3,7 @@ const withMDX = require("@next/mdx")({
options: {
remarkPlugins: [],
rehypePlugins: [],
providerImportSource: "@mdx-js/react",
},
});

3
package-lock.json generated
View File

@@ -11,6 +11,7 @@
"@emotion/react": "^11.8.2",
"@emotion/styled": "^11.8.1",
"@mdx-js/loader": "^2.1.1",
"@mdx-js/react": "^2.1.1",
"@mui/icons-material": "^5.5.1",
"@mui/lab": "^5.0.0-alpha.75",
"@mui/material": "^5.5.3",
@@ -791,7 +792,6 @@
"version": "2.1.1",
"resolved": "https://registry.npmmirror.com/@mdx-js/react/-/react-2.1.1.tgz",
"integrity": "sha512-7zlZDf5xmWH8I0kFE4DG91COOkxjaW9DX5f1HWztZpFcVua2gJgMYfIkFaDpO/DH/tWi6Mz+OheW4194r15igg==",
"peer": true,
"dependencies": {
"@types/mdx": "^2.0.0",
"@types/react": ">=16"
@@ -6031,7 +6031,6 @@
"version": "2.1.1",
"resolved": "https://registry.npmmirror.com/@mdx-js/react/-/react-2.1.1.tgz",
"integrity": "sha512-7zlZDf5xmWH8I0kFE4DG91COOkxjaW9DX5f1HWztZpFcVua2gJgMYfIkFaDpO/DH/tWi6Mz+OheW4194r15igg==",
"peer": true,
"requires": {
"@types/mdx": "^2.0.0",
"@types/react": ">=16"

1
package.json
View File

@@ -12,6 +12,7 @@
"@emotion/react": "^11.8.2",
"@emotion/styled": "^11.8.1",
"@mdx-js/loader": "^2.1.1",
"@mdx-js/react": "^2.1.1",
"@mui/icons-material": "^5.5.1",
"@mui/lab": "^5.0.0-alpha.75",
"@mui/material": "^5.5.3",