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

Init mdx

Browse Source
This commit is contained in:
黑墨水鱼
2022-04-06 03:16:25 +08:00
parent de33d12ab0
commit c3067180c2
7 changed files with 3305 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
components/PostLayout.js Normal file
View File

@@ -0,0 +1,24 @@
import { Grid, Container, Typography, Paper } from "@mui/material";
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>
</Grid>
</Grid>
</Container>
);
}

17
next.config.js
View File

@@ -1,6 +1,13 @@
/** @type {import('next').NextConfig} */ const withMDX = require("@next/mdx")({
const nextConfig = { extension: /\.mdx?$/,
reactStrictMode: true, options: {
} remarkPlugins: [],
rehypePlugins: [],
},
});
module.exports = nextConfig /** @type {import('next').NextConfig} */
module.exports = withMDX({
reactStrictMode: true,
pageExtensions: ["ts", "tsx", "js", "jsx", "md", "mdx"],
});

3144
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
package.json
View File

@@ -11,12 +11,16 @@
"dependencies": { "dependencies": {
"@emotion/react": "^11.8.2", "@emotion/react": "^11.8.2",
"@emotion/styled": "^11.8.1", "@emotion/styled": "^11.8.1",
"@mdx-js/loader": "^2.1.1",
"@mui/icons-material": "^5.5.1", "@mui/icons-material": "^5.5.1",
"@mui/lab": "^5.0.0-alpha.75", "@mui/lab": "^5.0.0-alpha.75",
"@mui/material": "^5.5.3", "@mui/material": "^5.5.3",
"@next/mdx": "^12.1.4",
"next": "12.1.2", "next": "12.1.2",
"react": "17.0.2", "react": "17.0.2",
"react-dom": "17.0.2" "react-dom": "17.0.2",
"remark": "^14.0.2",
"remark-mdx": "^2.1.1"
}, },
"devDependencies": { "devDependencies": {
"eslint": "8.12.0", "eslint": "8.12.0",

91
pages/_app.js
View File

@@ -1,29 +1,86 @@
import Link from "next/link"; import Link from "next/link";
import Head from "next/head"; import Head from "next/head";
import "../styles/globals.css";
import styles from "../styles/Home.module.css"; import styles from "../styles/Home.module.css";
import {
Box,
Container,
Typography,
AppBar,
Toolbar,
ThemeProvider,
createTheme,
CssBaseline,
} from "@mui/material";
const theme = createTheme({
palette: {
primary: {
main: "#39ceff",
},
secondary: {
main: "#f50057",
},
},
});
function MyApp({ Component, pageProps }) { function MyApp({ Component, pageProps }) {
return ( return (
<> <ThemeProvider theme={theme}>
<Head> <Container
<title>前端技术分享</title> sx={{
<meta name="description" content="乐" /> p: 3,
<link rel="icon" href="/favicon.ico" /> }}
</Head> >
<Head>
<title>前端技术分享</title>
<meta name="description" content="乐" />
<link rel="icon" href="/favicon.ico" />
<CssBaseline />
</Head>
<Component {...pageProps} /> <AppBar position="relative">
<Toolbar>
<Link
passHref
href="/"
style={{
textDecoration: "none",
}}
>
<Typography variant="h6">前端技术分享</Typography>
</Link>
</Toolbar>
</AppBar>
<footer className={styles.footer}> <main
<Link style={{
href="https://beian.miit.gov.cn/" minHeight: "100vh",
target="_blank" paddingTop: "2rem",
rel="noopener noreferrer" }}
> >
粤ICP备2022033906号-1 <Component {...pageProps} />
</Link> </main>
</footer>
</> <hr />
<footer
style={{
display: "flex",
justifyContent: "space-evenly",
}}
>
<Link
href="https://beian.miit.gov.cn/"
target="_blank"
rel="noopener noreferrer"
passHref
>
<Typography variant="body1">粤ICP备2022033906号-1</Typography>
</Link>
<Typography variant="body1">使用 Next.js 构建</Typography>
</footer>
</Container>
</ThemeProvider>
); );
} }

82
pages/index.js
View File

@@ -1,27 +1,63 @@
import Image from "next/image"; import { Grid, Container, Typography, Paper } from "@mui/material";
import styles from "../styles/Home.module.css"; import Link from "next/link";
import imageNewFolder from "../public/images/new_folder.webp"; import { remark } from "remark";
import imageGuGuGu from "../public/images/gugugu.webp"; import mdx from "remark-mdx";
import fs from "fs";
export default function Home() { export default function Home({ posts }) {
return ( return (
<div className={styles.container}> <Container>
<main className={styles.main}> <Grid container spacing={2}>
<h1 className={styles.title}>前端技术分享</h1> <Grid item xs={12}>
<Paper
<p className={styles.description}>即将上线...</p> style={{
padding: "1rem",
<div className={styles.grid}> margin: "1rem",
<div className={styles.card}> backgroundColor: "#fafafa",
<h2>在做了在做了</h2> }}
<Image src={imageNewFolder} alt="新建文件夹" /> >
</div> <Typography variant="h3">窝</Typography>
<div className={styles.card}> <hr />
<h2>别催了别催了</h2> <Typography variant="body1">用对的工具，做对的事。</Typography>
<Image src={imageGuGuGu} alt="咕咕咕" /> </Paper>
</div> </Grid>
</div> {posts.map((post) => (
</main> <Grid item sm={6} md={4} key={post.id}>
</div> <Link href={`/posts/${post.id}`} passHref>
<Paper
style={{
padding: "1rem",
margin: "1rem",
backgroundColor: "#fafafa",
}}
>
<Typography variant="h5">{post.meta.title}</Typography>
<Typography variant="body1">{post.meta.description}</Typography>
</Paper>
</Link>
</Grid>
))}
</Grid>
</Container>
); );
} }
export async function getStaticProps(context) {
const posts = fs.readdirSync("./pages/posts").map((file) => {
const content = fs.readFileSync(`./pages/posts/${file}`, "utf8");
const remarkAST = remark().use(mdx).parse(content);
var { value, body } = remarkAST.children[0];
value = value.replaceAll("\n", "");
const toParse = value.slice(value.indexOf("{"), value.lastIndexOf("}") + 1);
const meta = JSON.parse(toParse);
return {
id: file.replace(".mdx", ""),
meta,
};
});
return {
props: {
posts,
},
};
}

20
pages/posts/mdx.mdx Normal file
View File

@@ -0,0 +1,20 @@
export const meta = {
"title": "MDX 格式介绍",
"date": "2022-03-04",
"description": "MDX 允许您在 Markdown 文件中使用 JavaScript。与现代 JavaScript 框架结合让编写内容更优雅。"
};
import PostLayout from '../../components/PostLayout.js';
import { Button } from '@mui/material';
这是普通 Markdown 的语法
- One
- Two
- Three
这是在 Markdown 中使用 JavaScript 引用的组件
<Button variant="contained">按钮</Button>
export default ({children}) => <PostLayout meta={meta}>{children}</PostLayout>