Init mdx

pages/index.js

@@ -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,
+    },
+  };
+}