-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(site/blog): use next-mdx-remote create mdx
- Loading branch information
Showing
12 changed files
with
1,007 additions
and
203 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import { MDXRemote, MDXRemoteProps } from "next-mdx-remote/rsc"; | ||
|
|
||
| import remarkToc from "remark-toc"; | ||
| import remarkGfm from "remark-gfm"; | ||
|
|
||
| import rehypeSlug from "rehype-slug"; | ||
| import rehypeAutolinkHeadings from "rehype-autolink-headings"; | ||
| import rehypePrettyCode from "rehype-pretty-code"; | ||
|
|
||
| // mdx components | ||
| import Button from "@/posts-assets/mdx/next-mdx/button"; | ||
|
|
||
| const options: MDXRemoteProps["options"] = { | ||
| mdxOptions: { | ||
| remarkPlugins: [[remarkToc, { maxDepth: 4 }], remarkGfm], | ||
| rehypePlugins: [ | ||
| rehypeSlug, | ||
| rehypeAutolinkHeadings, | ||
|
|
||
| // @ts-ignore | ||
| [rehypePrettyCode, { theme: "nord" }], | ||
| ], | ||
| }, | ||
| }; | ||
|
|
||
| export default function MDXContent(props: Pick<MDXRemoteProps, "source">) { | ||
| return ( | ||
| <article className="fade-in-up-content prose prose-gray"> | ||
| <MDXRemote | ||
| source={props.source} | ||
| components={{ Button }} | ||
| options={options} | ||
| /> | ||
| </article> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,43 +1,57 @@ | ||
| import matter from "gray-matter"; | ||
| import fs from "fs"; | ||
| import { join } from "path"; | ||
|
|
||
| import matter from "gray-matter"; | ||
| import readingTime from "reading-time"; | ||
|
|
||
| import { getGitLastUpdatedTimeStamp } from "./utils"; | ||
|
|
||
| const postsDir = join(process.cwd(), "posts"); | ||
|
|
||
| type Frontmatter = { | ||
| title?: string; | ||
| description?: string; | ||
| tags?: string[]; | ||
| type ReadingTime = { | ||
| text: string; | ||
| minutes: number; | ||
| time: number; | ||
| words: number; | ||
| }; | ||
|
|
||
| type MetaData = { | ||
| title: string; | ||
| date: Date; | ||
| category: string; | ||
| tags?: string[]; | ||
| description?: string; | ||
| lastModified?: Date; | ||
| readingTime?: ReadingTime; | ||
| draft?: boolean; | ||
| }; | ||
|
|
||
| export function getPostBySlug(slug: string) { | ||
| const realSlug = slug.replace(/\.md$/, ""); | ||
|
|
||
| const fullPath = join(postsDir, `${realSlug}.md`); | ||
| const fileContents = fs.readFileSync(fullPath, "utf8"); | ||
|
|
||
| const lastModified = getGitLastUpdatedTimeStamp(fullPath); | ||
| const fileContents = fs.readFileSync(fullPath, "utf8"); | ||
|
|
||
| const { data, content, excerpt } = matter(fileContents, { | ||
| excerpt: true, | ||
| }); | ||
|
|
||
| const frontmatter = { ...data, lastModified } as Frontmatter; | ||
| const lastModified = getGitLastUpdatedTimeStamp(fullPath); | ||
| const readTime = readingTime(content); | ||
|
|
||
| const meta = { ...data, readingTime: readTime, lastModified } as MetaData; | ||
|
|
||
| return { slug: realSlug, frontmatter, content, excerpt }; | ||
| return { slug: realSlug, meta, content, excerpt }; | ||
| } | ||
|
|
||
| export function getAllPosts() { | ||
| const slugs = fs.readdirSync(postsDir); | ||
|
|
||
| const posts = slugs | ||
| .map((slug) => getPostBySlug(slug)) | ||
| // 排除草稿文件 | ||
| .filter((c) => !/\.draft$/.test(c.slug)); | ||
| .filter((c) => !c.meta.draft); | ||
|
|
||
| return posts.sort((a, b) => | ||
| a.frontmatter.date < b.frontmatter.date ? 1 : -1 | ||
| ); | ||
| return posts.sort((a, b) => +b.meta.date - +a.meta.date); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
e1cef6dThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
qhan – ./
qhan.wang
qhan-git-main-qhanw.vercel.app
qhan-qhanw.vercel.app