Init mdx
This commit is contained in:
24
components/PostLayout.js
Normal file
24
components/PostLayout.js
Normal 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>
|
||||
);
|
||||
}
|
||||
@@ -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
3144
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -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",
|
||||
|
||||
@@ -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 (
|
||||
<>
|
||||
<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}>
|
||||
<main
|
||||
style={{
|
||||
minHeight: "100vh",
|
||||
paddingTop: "2rem",
|
||||
}}
|
||||
>
|
||||
<Component {...pageProps} />
|
||||
</main>
|
||||
|
||||
<hr />
|
||||
<footer
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "space-evenly",
|
||||
}}
|
||||
>
|
||||
<Link
|
||||
href="https://beian.miit.gov.cn/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
passHref
|
||||
>
|
||||
粤ICP备2022033906号-1
|
||||
<Typography variant="body1">粤ICP备2022033906号-1</Typography>
|
||||
</Link>
|
||||
<Typography variant="body1">使用 Next.js 构建</Typography>
|
||||
</footer>
|
||||
</>
|
||||
</Container>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -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
20
pages/posts/mdx.mdx
Normal 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>
|
||||
Reference in New Issue
Block a user