diff --git a/assets/sandpack/hello-world/main.js b/assets/sandpack/hello-world/main.js new file mode 100644 index 0000000..d9922da --- /dev/null +++ b/assets/sandpack/hello-world/main.js @@ -0,0 +1,5 @@ +const main = `export default function App() { + return

Hello world

+}`; + +export default main; diff --git a/components/mdx/components.ts b/components/mdx/components.ts new file mode 100644 index 0000000..85a4f00 --- /dev/null +++ b/components/mdx/components.ts @@ -0,0 +1,9 @@ +import RUASandpack from 'components/RUA/RUASandpack'; +import Anchor from 'components/mdx/Anchor'; + +const components = { + RUASandpack, + a: Anchor, +}; + +export default components; diff --git a/data/mdxData.ts b/data/mdxData.ts new file mode 100644 index 0000000..872314e --- /dev/null +++ b/data/mdxData.ts @@ -0,0 +1,9 @@ +import main from 'assets/sandpack/hello-world/main'; + +const data = { + sandpack: { + 'hello-world': main, + }, +}; + +export default data; diff --git a/pages/p/create-a-mini-router-for-react.mdx b/data/posts/create-a-mini-router-for-react.mdx similarity index 100% rename from pages/p/create-a-mini-router-for-react.mdx rename to data/posts/create-a-mini-router-for-react.mdx diff --git a/pages/p/generic-component-encapsulate-reusable-component.mdx b/data/posts/generic-component-encapsulate-reusable-component.mdx similarity index 100% rename from pages/p/generic-component-encapsulate-reusable-component.mdx rename to data/posts/generic-component-encapsulate-reusable-component.mdx diff --git a/data/posts/hello-world.mdx b/data/posts/hello-world.mdx new file mode 100644 index 0000000..4e3596b --- /dev/null +++ b/data/posts/hello-world.mdx @@ -0,0 +1,22 @@ +--- +title: Hello world +date: '2022-04-06' +tags: ['Hello world'] +--- + +## Hello + +This is my first post! + +```ts +console.log('Hello world'); +``` + +## Say hello to world + + diff --git a/pages/p/how-to-load-a-background-with-threejs.mdx b/data/posts/how-to-load-a-background-with-threejs.mdx similarity index 100% rename from pages/p/how-to-load-a-background-with-threejs.mdx rename to data/posts/how-to-load-a-background-with-threejs.mdx diff --git a/pages/p/my-develop-environmental.mdx b/data/posts/my-develop-environmental.mdx similarity index 100% rename from pages/p/my-develop-environmental.mdx rename to data/posts/my-develop-environmental.mdx diff --git a/pages/p/setting-up-docsearch-for-nextjs.mdx b/data/posts/setting-up-docsearch-for-nextjs.mdx similarity index 100% rename from pages/p/setting-up-docsearch-for-nextjs.mdx rename to data/posts/setting-up-docsearch-for-nextjs.mdx diff --git a/lib/posts.ts b/lib/posts.ts index 5387ee6..3d4061e 100644 --- a/lib/posts.ts +++ b/lib/posts.ts @@ -1,17 +1,19 @@ -import fs from 'fs'; +import fs from 'fs/promises'; import path from 'path'; import matter from 'gray-matter'; import { MyMatters, Post } from 'types'; import { sortByDate } from 'lib/utils'; +const dataPath = 'data/posts'; + /** * Read post meta info with gray-matter. * @param filename * @returns */ -const readFileMeta = (filename: string) => { - const markdownWithMeta = fs.readFileSync( - path.join('pages/p', filename), +const readFileMeta = async (filename: string) => { + const markdownWithMeta = await fs.readFile( + path.join(dataPath, filename), 'utf-8' ); const slug = filename.replace(/\.mdx$/, ''); @@ -27,8 +29,25 @@ const readFileMeta = (filename: string) => { * @returns */ export const postLists = async (): Promise => { - const files = fs.readdirSync(path.join('pages/p')); - const posts = files.map(readFileMeta).sort(sortByDate); - - return posts; + const files = await fs.readdir(path.join(dataPath)); + return (await Promise.all(files.map(readFileMeta))).sort(sortByDate); +}; + +const readFilePath = async (filename: string) => { + const slug = filename.replace(/\.mdx$/, ''); + return { + params: { + slug, + }, + }; +}; + +export const allPostsPath = async () => { + const files = await fs.readdir(path.join(dataPath)); + return await Promise.all(files.map(readFilePath)); +}; + +export const readSinglePost = async (slug: string) => { + const filename = path.join(`${dataPath}/${slug}.mdx`); + return await fs.readFile(filename, { encoding: 'utf-8' }); }; diff --git a/package.json b/package.json index a26fc1f..de59f69 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "dayjs": "^1.11.4", "next": "12.2.4", "next-compose-plugins": "^2.2.1", + "next-mdx-remote": "^4.1.0", "next-themes": "^0.2.0", "octokit": "^2.0.4", "react": "^18.2.0", diff --git a/pages/_app.tsx b/pages/_app.tsx index a94855e..aa6bce6 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -40,9 +40,9 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) { enableSystem defaultTheme="system" > - - {getLayout()} - + {/* */} + {getLayout()} + {/* */} {loading && } diff --git a/pages/p/[slug].tsx b/pages/p/[slug].tsx new file mode 100644 index 0000000..32c0593 --- /dev/null +++ b/pages/p/[slug].tsx @@ -0,0 +1,74 @@ +import { allPostsPath, readSinglePost } from 'lib/posts'; +import { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from 'next'; +import { serialize } from 'next-mdx-remote/serialize'; +import { MDXRemote, MDXRemoteSerializeResult } from 'next-mdx-remote'; +import components from 'components/mdx/components'; +import data from 'data/mdxData'; +import rehypePrism from '@mapbox/rehype-prism'; +import remarkGfm from 'remark-gfm'; +import rehypeSlug from 'rehype-slug'; +import dynamic from 'next/dynamic'; +import { MyMatters } from 'types'; + +const Footer = dynamic(() => import('components/Footer')); +const HeadBar = dynamic(() => import('components/NavBar')); +const PostComment = dynamic(() => import('components/post/PostComment')); + +const Slug = ({ + mdxSource, +}: InferGetStaticPropsType) => { + return ( + <> + + +
+

{mdxSource.frontmatter?.title}

+ + +
+ + +
+
+ +