Github chore: 使用 markdown to html (#47) · juzhiyuan/blog@f6ca23d · GitHub

@@ -1,4 +1,10 @@


---

title: 深圳一月有余

date: "2019-08-27"

slug: shenzhen-on-january

---


在深圳生活与工作已一月有余，在此期间学到了四件事：

@@ -27,7 +33,7 @@

在工作中偶尔遇到过解决某些问题时状态不佳却又很想搞定的情况，尽管知道可能休息下再去解决，或许答案就在眼前，但自己偏偏执意要搞定它，结果用了很多时间却依旧无果。



在 xx 审查代码时，会给出一些思路或纠正某些问题，其中有些技巧或思路一看就知道是怎么回事，但在自己开发过程中却没想到。**无他，唯手熟尔**。

@@ -0,0 +1,6 @@

type Post = {

title: string;

content: string;

slug: string;

filePath: string;

};

@@ -0,0 +1,36 @@

import path from "path";

import fs from "fs";

import matter from "gray-matter";

import remark from "remark";

import html from "remark-html";

export const markdownToHTML = async (markdown: string) => {

const result = await remark().use(html).process(markdown);

return result.toString();

};

export const getAllPosts = () => {

const postsDirectory = path.join(process.cwd(), "data", "articles");

const filenames = fs.readdirSync(postsDirectory);

const posts = filenames.map((filename) => {

const filePath = path.join(postsDirectory, filename, "README.md");

if (!fs.existsSync(filePath)) {

return undefined;

}

const fileContents = fs.readFileSync(filePath, "utf8");

const { data } = matter(fileContents);

if (!data.slug) {

return undefined;

}

return {

slug: data.slug,

filePath,

title: data.title,

};

});

return posts.filter(Boolean) as Pick<Post, "slug" | "filePath">[];

};

@@ -12,9 +12,12 @@

"@emotion/react": "^11",

"@emotion/styled": "^11",

"framer-motion": "^4",

"gray-matter": "^4.0.3",

"next": "10.2.3",

"react": "17.0.2",

"react-dom": "17.0.2"

"react-dom": "17.0.2",

"remark": "^13.0.0",

"remark-html": "^13.0.1"

},

"devDependencies": {

"@types/react": "17.0.11",

@@ -0,0 +1,45 @@

import { GetStaticPaths, GetStaticProps } from "next";

import fs from "fs";

import matter from "gray-matter";

import { Container, Heading } from "@chakra-ui/react";

import { getAllPosts, markdownToHTML } from "../../helper";

export const getStaticProps: GetStaticProps = async (context) => {

const { slug } = context.params as { slug: string };

const { filePath } = getAllPosts().find((item) => item.slug === slug)!;

const fileContents = fs.readFileSync(filePath, "utf8");

const { data, content } = matter(fileContents);

const finalContent = await markdownToHTML(content);

return {

props: {

...data,

content: finalContent,

},

};

};

export const getStaticPaths: GetStaticPaths = async () => {

const paths = getAllPosts().map((item) => ({

params: {

slug: item?.slug,

},

}));

return {

paths: paths,

fallback: false,

};

};

const BlogPost = ({ title, content }: Post) => {

return (

<Container>

<Heading>{title}</Heading>

<div dangerouslySetInnerHTML={{ __html: content }} />

</Container>

);

};

export default BlogPost;

@@ -0,0 +1,33 @@

import { GetStaticPaths, GetStaticProps } from "next";

import { Container, Heading, Text, Link } from "@chakra-ui/react";

import { getAllPosts, markdownToHTML } from "../../helper";

type BlogPostType = {

title: string;

date: Date;

content: string;

};

export const getStaticProps: GetStaticProps = async (context) => {

const posts = getAllPosts();

return {

props: {

posts,

},

};

};

const BlogList = ({ posts }: { posts: Post[] }) => {

return (

<Container>

{posts.map((post) => (

<Link href={`/blog/${post.slug}`} key={post.slug}>

<Heading fontSize="2xl">{post.title}</Heading>

</Link>

))}

</Container>

);

};

export default BlogList;