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 nextConfig = {
reactStrictMode: true,
}
const withMDX = require("@next/mdx")({
extension: /\.mdx?$/,
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": {
"@emotion/react": "^11.8.2",
"@emotion/styled": "^11.8.1",
"@mdx-js/loader": "^2.1.1",
"@mui/icons-material": "^5.5.1",
"@mui/lab": "^5.0.0-alpha.75",
"@mui/material": "^5.5.3",
"@next/mdx": "^12.1.4",
"next": "12.1.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": {
"eslint": "8.12.0",

91
pages/_app.js
View File

@@ -1,29 +1,86 @@
import Link from "next/link";
import Head from "next/head";
import "../styles/globals.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 }) {
return (
<>
<Head>
<title>前端技术分享</title>
<meta name="description" content="乐" />
<link rel="icon" href="/favicon.ico" />
</Head>
<ThemeProvider theme={theme}>
<Container
sx={{
p: 3,
}}
>
<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}>
<Link
href="https://beian.miit.gov.cn/"
target="_blank"
rel="noopener noreferrer"
<main
style={{
minHeight: "100vh",
paddingTop: "2rem",
}}
>
粤ICP备2022033906号-1
</Link>
</footer>
</>
<Component {...pageProps} />
</main>
<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 styles from "../styles/Home.module.css";
import imageNewFolder from "../public/images/new_folder.webp";
import imageGuGuGu from "../public/images/gugugu.webp";
import { Grid, Container, Typography, Paper } from "@mui/material";
import Link from "next/link";
import { remark } from "remark";
import mdx from "remark-mdx";
import fs from "fs";
export default function Home() {
export default function Home({ posts }) {
return (
<div className={styles.container}>
<main className={styles.main}>
<h1 className={styles.title}>前端技术分享</h1>
<p className={styles.description}>即将上线...</p>
<div className={styles.grid}>
<div className={styles.card}>
<h2>在做了在做了</h2>
<Image src={imageNewFolder} alt="新建文件夹" />
</div>
<div className={styles.card}>
<h2>别催了别催了</h2>
<Image src={imageGuGuGu} alt="咕咕咕" />
</div>
</div>
</main>
</div>
<Container>
<Grid container spacing={2}>
<Grid item xs={12}>
<Paper
style={{
padding: "1rem",
margin: "1rem",
backgroundColor: "#fafafa",
}}
>
<Typography variant="h3">窝</Typography>
<hr />
<Typography variant="body1">用对的工具，做对的事。</Typography>
</Paper>
</Grid>
{posts.map((post) => (
<Grid item sm={6} md={4} key={post.id}>
<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>