From 562ba00912a609916bce4bd132c9860ed3b099f5 Mon Sep 17 00:00:00 2001
From: DefectingCat <i@defect.ink>
Date: Thu, 18 Aug 2022 15:19:25 +0800
Subject: [PATCH] Add next-mdx-remote

---
 assets/sandpack/hello-world/main.js           |   5 ++
 components/mdx/components.ts                  |   9 +++
 data/mdxData.ts                               |   9 +++
 .../posts}/create-a-mini-router-for-react.mdx |   0
 ...mponent-encapsulate-reusable-component.mdx |   0
 data/posts/hello-world.mdx                    |  22 ++++++
 .../how-to-load-a-background-with-threejs.mdx |   0
 .../posts}/my-develop-environmental.mdx       |   0
 .../setting-up-docsearch-for-nextjs.mdx       |   0
 lib/posts.ts                                  |  35 +++++++--
 package.json                                  |   1 +
 pages/_app.tsx                                |   6 +-
 pages/p/[slug].tsx                            |  74 ++++++++++++++++++
 pages/p/hello-world.mdx                       |  43 ----------
 {assets => public}/images/favicon.ico         | Bin
 {assets => public}/images/favicon.webp        | Bin
 {assets => public}/images/img/64.ai           |   0
 {assets => public}/images/img/64.png          | Bin
 {assets => public}/images/img/64.svg          |   0
 .../images/img/Sensei_dark.webp               | Bin
 .../images/img/Sensei_sakura.webp             | Bin
 {assets => public}/images/img/about.webp      | Bin
 .../images/img/apple-touch-icon.webp          | Bin
 {assets => public}/images/img/avatar.ai       |   0
 {assets => public}/images/img/avatar.svg      |   0
 {assets => public}/images/img/avatar_b.webp   | Bin
 {assets => public}/images/img/avatar_b2.webp  | Bin
 {assets => public}/images/img/backup.webp     | Bin
 {assets => public}/images/img/category.webp   | Bin
 .../images/img/comment-line-dark.svg          |   0
 .../images/img/comment-line.svg               |   0
 {assets => public}/images/img/default.webp    | Bin
 {assets => public}/images/img/favicon.webp    | Bin
 {assets => public}/images/img/friend.webp     | Bin
 {assets => public}/images/img/index.webp      | Bin
 {assets => public}/images/img/loading.gif     | Bin
 .../images/img/mona-loading-default.gif       | Bin
 .../images/img/mona-loading-dimmed.gif        | Bin
 {assets => public}/images/img/mona.webp       | Bin
 .../images/img/placeholder-1200x1000.webp     | Bin
 .../images/img/placeholder-600x500.webp       | Bin
 .../images/img/police_beian.webp              | Bin
 {assets => public}/images/img/post.webp       | Bin
 {assets => public}/images/img/qrcode.webp     | Bin
 .../images/img/sparkling-heart.ai             |   0
 .../images/img/sparkling-heart.png            | Bin
 .../images/img/sparkling-heart.svg            |   0
 {assets => public}/images/img/tags.webp       | Bin
 yarn.lock                                     |  44 ++++++++++-
 49 files changed, 193 insertions(+), 55 deletions(-)
 create mode 100644 assets/sandpack/hello-world/main.js
 create mode 100644 components/mdx/components.ts
 create mode 100644 data/mdxData.ts
 rename {pages/p => data/posts}/create-a-mini-router-for-react.mdx (100%)
 rename {pages/p => data/posts}/generic-component-encapsulate-reusable-component.mdx (100%)
 create mode 100644 data/posts/hello-world.mdx
 rename {pages/p => data/posts}/how-to-load-a-background-with-threejs.mdx (100%)
 rename {pages/p => data/posts}/my-develop-environmental.mdx (100%)
 rename {pages/p => data/posts}/setting-up-docsearch-for-nextjs.mdx (100%)
 create mode 100644 pages/p/[slug].tsx
 delete mode 100644 pages/p/hello-world.mdx
 rename {assets => public}/images/favicon.ico (100%)
 rename {assets => public}/images/favicon.webp (100%)
 rename {assets => public}/images/img/64.ai (100%)
 rename {assets => public}/images/img/64.png (100%)
 rename {assets => public}/images/img/64.svg (100%)
 rename {assets => public}/images/img/Sensei_dark.webp (100%)
 rename {assets => public}/images/img/Sensei_sakura.webp (100%)
 rename {assets => public}/images/img/about.webp (100%)
 rename {assets => public}/images/img/apple-touch-icon.webp (100%)
 rename {assets => public}/images/img/avatar.ai (100%)
 rename {assets => public}/images/img/avatar.svg (100%)
 rename {assets => public}/images/img/avatar_b.webp (100%)
 rename {assets => public}/images/img/avatar_b2.webp (100%)
 rename {assets => public}/images/img/backup.webp (100%)
 rename {assets => public}/images/img/category.webp (100%)
 rename {assets => public}/images/img/comment-line-dark.svg (100%)
 rename {assets => public}/images/img/comment-line.svg (100%)
 rename {assets => public}/images/img/default.webp (100%)
 rename {assets => public}/images/img/favicon.webp (100%)
 rename {assets => public}/images/img/friend.webp (100%)
 rename {assets => public}/images/img/index.webp (100%)
 rename {assets => public}/images/img/loading.gif (100%)
 rename {assets => public}/images/img/mona-loading-default.gif (100%)
 rename {assets => public}/images/img/mona-loading-dimmed.gif (100%)
 rename {assets => public}/images/img/mona.webp (100%)
 rename {assets => public}/images/img/placeholder-1200x1000.webp (100%)
 rename {assets => public}/images/img/placeholder-600x500.webp (100%)
 rename {assets => public}/images/img/police_beian.webp (100%)
 rename {assets => public}/images/img/post.webp (100%)
 rename {assets => public}/images/img/qrcode.webp (100%)
 rename {assets => public}/images/img/sparkling-heart.ai (100%)
 rename {assets => public}/images/img/sparkling-heart.png (100%)
 rename {assets => public}/images/img/sparkling-heart.svg (100%)
 rename {assets => public}/images/img/tags.webp (100%)

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 <h1>Hello world</h1>
+}`;
+
+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
+
+<RUASandpack
+  template="react"
+  files={{
+    '/App.js': sandpack['hello-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<Post[]> => {
-  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"
       >
-        <MDXProvider components={components}>
-          {getLayout(<Component {...pageProps} />)}
-        </MDXProvider>
+        {/* <MDXProvider components={components}> */}
+        {getLayout(<Component {...pageProps} />)}
+        {/* </MDXProvider> */}
       </ThemeProvider>
 
       {loading && <VercelLoading />}
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<typeof getStaticProps>) => {
+  return (
+    <>
+      <HeadBar />
+
+      <main id="article" className="relative max-w-4xl px-4 mx-auto my-10">
+        <h1>{mdxSource.frontmatter?.title}</h1>
+        <time>{mdxSource.frontmatter?.date}</time>
+
+        <article id="post-content">
+          <MDXRemote {...mdxSource} components={components} />
+          <PostComment />
+        </article>
+      </main>
+
+      <Footer />
+    </>
+  );
+};
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  return {
+    paths: await allPostsPath(),
+    fallback: false,
+  };
+};
+
+export const getStaticProps: GetStaticProps<{
+  mdxSource: MDXRemoteSerializeResult;
+}> = async ({ params }) => {
+  const slug = params?.slug?.toString();
+  if (!slug)
+    return {
+      notFound: true,
+    };
+
+  const post = await readSinglePost(slug);
+  const mdxSource = await serialize(post, {
+    mdxOptions: {
+      remarkPlugins: [remarkGfm],
+      rehypePlugins: [
+        [rehypePrism, { alias: { vue: 'xml' }, ignoreMissing: true }],
+        rehypeSlug,
+      ],
+    },
+    parseFrontmatter: true,
+    scope: data,
+  });
+  return {
+    props: {
+      mdxSource,
+    },
+  };
+};
+
+export default Slug;
diff --git a/pages/p/hello-world.mdx b/pages/p/hello-world.mdx
deleted file mode 100644
index dceb9e1..0000000
--- a/pages/p/hello-world.mdx
+++ /dev/null
@@ -1,43 +0,0 @@
----
-title: Hello world
-date: '2022-04-06'
-tags: ['Hello world']
----
-
-import Layout from 'layouts/MDXLayout';
-import dynamic from 'next/dynamic';
-
-export const RUASandpack = dynamic(() => import('components/RUA/RUASandpack'));
-
-export const meta = {
-  title: 'Hello world',
-  date: '2022-04-06',
-  tags: ['Hello world'],
-};
-
-export default ({ children }) => (
-  <Layout {...meta} showTOC={false}>
-    {children}
-  </Layout>
-);
-
-## Hello
-
-This is my first post!
-
-```ts
-console.log('Hello world');
-```
-
-## Say hello to world
-
-export const main = `export default function App() {
-  return <h1>Hello world</h1>
-}`;
-
-<RUASandpack
-  template="react"
-  files={{
-    '/App.js': main,
-  }}
-/>
diff --git a/assets/images/favicon.ico b/public/images/favicon.ico
similarity index 100%
rename from assets/images/favicon.ico
rename to public/images/favicon.ico
diff --git a/assets/images/favicon.webp b/public/images/favicon.webp
similarity index 100%
rename from assets/images/favicon.webp
rename to public/images/favicon.webp
diff --git a/assets/images/img/64.ai b/public/images/img/64.ai
similarity index 100%
rename from assets/images/img/64.ai
rename to public/images/img/64.ai
diff --git a/assets/images/img/64.png b/public/images/img/64.png
similarity index 100%
rename from assets/images/img/64.png
rename to public/images/img/64.png
diff --git a/assets/images/img/64.svg b/public/images/img/64.svg
similarity index 100%
rename from assets/images/img/64.svg
rename to public/images/img/64.svg
diff --git a/assets/images/img/Sensei_dark.webp b/public/images/img/Sensei_dark.webp
similarity index 100%
rename from assets/images/img/Sensei_dark.webp
rename to public/images/img/Sensei_dark.webp
diff --git a/assets/images/img/Sensei_sakura.webp b/public/images/img/Sensei_sakura.webp
similarity index 100%
rename from assets/images/img/Sensei_sakura.webp
rename to public/images/img/Sensei_sakura.webp
diff --git a/assets/images/img/about.webp b/public/images/img/about.webp
similarity index 100%
rename from assets/images/img/about.webp
rename to public/images/img/about.webp
diff --git a/assets/images/img/apple-touch-icon.webp b/public/images/img/apple-touch-icon.webp
similarity index 100%
rename from assets/images/img/apple-touch-icon.webp
rename to public/images/img/apple-touch-icon.webp
diff --git a/assets/images/img/avatar.ai b/public/images/img/avatar.ai
similarity index 100%
rename from assets/images/img/avatar.ai
rename to public/images/img/avatar.ai
diff --git a/assets/images/img/avatar.svg b/public/images/img/avatar.svg
similarity index 100%
rename from assets/images/img/avatar.svg
rename to public/images/img/avatar.svg
diff --git a/assets/images/img/avatar_b.webp b/public/images/img/avatar_b.webp
similarity index 100%
rename from assets/images/img/avatar_b.webp
rename to public/images/img/avatar_b.webp
diff --git a/assets/images/img/avatar_b2.webp b/public/images/img/avatar_b2.webp
similarity index 100%
rename from assets/images/img/avatar_b2.webp
rename to public/images/img/avatar_b2.webp
diff --git a/assets/images/img/backup.webp b/public/images/img/backup.webp
similarity index 100%
rename from assets/images/img/backup.webp
rename to public/images/img/backup.webp
diff --git a/assets/images/img/category.webp b/public/images/img/category.webp
similarity index 100%
rename from assets/images/img/category.webp
rename to public/images/img/category.webp
diff --git a/assets/images/img/comment-line-dark.svg b/public/images/img/comment-line-dark.svg
similarity index 100%
rename from assets/images/img/comment-line-dark.svg
rename to public/images/img/comment-line-dark.svg
diff --git a/assets/images/img/comment-line.svg b/public/images/img/comment-line.svg
similarity index 100%
rename from assets/images/img/comment-line.svg
rename to public/images/img/comment-line.svg
diff --git a/assets/images/img/default.webp b/public/images/img/default.webp
similarity index 100%
rename from assets/images/img/default.webp
rename to public/images/img/default.webp
diff --git a/assets/images/img/favicon.webp b/public/images/img/favicon.webp
similarity index 100%
rename from assets/images/img/favicon.webp
rename to public/images/img/favicon.webp
diff --git a/assets/images/img/friend.webp b/public/images/img/friend.webp
similarity index 100%
rename from assets/images/img/friend.webp
rename to public/images/img/friend.webp
diff --git a/assets/images/img/index.webp b/public/images/img/index.webp
similarity index 100%
rename from assets/images/img/index.webp
rename to public/images/img/index.webp
diff --git a/assets/images/img/loading.gif b/public/images/img/loading.gif
similarity index 100%
rename from assets/images/img/loading.gif
rename to public/images/img/loading.gif
diff --git a/assets/images/img/mona-loading-default.gif b/public/images/img/mona-loading-default.gif
similarity index 100%
rename from assets/images/img/mona-loading-default.gif
rename to public/images/img/mona-loading-default.gif
diff --git a/assets/images/img/mona-loading-dimmed.gif b/public/images/img/mona-loading-dimmed.gif
similarity index 100%
rename from assets/images/img/mona-loading-dimmed.gif
rename to public/images/img/mona-loading-dimmed.gif
diff --git a/assets/images/img/mona.webp b/public/images/img/mona.webp
similarity index 100%
rename from assets/images/img/mona.webp
rename to public/images/img/mona.webp
diff --git a/assets/images/img/placeholder-1200x1000.webp b/public/images/img/placeholder-1200x1000.webp
similarity index 100%
rename from assets/images/img/placeholder-1200x1000.webp
rename to public/images/img/placeholder-1200x1000.webp
diff --git a/assets/images/img/placeholder-600x500.webp b/public/images/img/placeholder-600x500.webp
similarity index 100%
rename from assets/images/img/placeholder-600x500.webp
rename to public/images/img/placeholder-600x500.webp
diff --git a/assets/images/img/police_beian.webp b/public/images/img/police_beian.webp
similarity index 100%
rename from assets/images/img/police_beian.webp
rename to public/images/img/police_beian.webp
diff --git a/assets/images/img/post.webp b/public/images/img/post.webp
similarity index 100%
rename from assets/images/img/post.webp
rename to public/images/img/post.webp
diff --git a/assets/images/img/qrcode.webp b/public/images/img/qrcode.webp
similarity index 100%
rename from assets/images/img/qrcode.webp
rename to public/images/img/qrcode.webp
diff --git a/assets/images/img/sparkling-heart.ai b/public/images/img/sparkling-heart.ai
similarity index 100%
rename from assets/images/img/sparkling-heart.ai
rename to public/images/img/sparkling-heart.ai
diff --git a/assets/images/img/sparkling-heart.png b/public/images/img/sparkling-heart.png
similarity index 100%
rename from assets/images/img/sparkling-heart.png
rename to public/images/img/sparkling-heart.png
diff --git a/assets/images/img/sparkling-heart.svg b/public/images/img/sparkling-heart.svg
similarity index 100%
rename from assets/images/img/sparkling-heart.svg
rename to public/images/img/sparkling-heart.svg
diff --git a/assets/images/img/tags.webp b/public/images/img/tags.webp
similarity index 100%
rename from assets/images/img/tags.webp
rename to public/images/img/tags.webp
diff --git a/yarn.lock b/yarn.lock
index 7721bfc..8fedd00 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1281,6 +1281,14 @@
     unist-util-visit "^4.0.0"
     vfile "^5.0.0"
 
+"@mdx-js/react@^2.0.0":
+  version "2.1.3"
+  resolved "https://registry.npmmirror.com/@mdx-js/react/-/react-2.1.3.tgz#4b28a774295ed1398cf6be1b8ddef69d6a30e78d"
+  integrity sha512-11n4lTvvRyxq3OYbWJwEYM+7q6PE0GxKbk0AwYIIQmrRkxDeljIsjDQkKOgdr/orgRRbYy5zi+iERdnwe01CHQ==
+  dependencies:
+    "@types/mdx" "^2.0.0"
+    "@types/react" ">=16"
+
 "@mdx-js/react@^2.1.2":
   version "2.1.2"
   resolved "https://registry.npmmirror.com/@mdx-js/react/-/react-2.1.2.tgz#02972f170cd3ad9113ce448245c5f636bb3e750d"
@@ -1903,6 +1911,11 @@
     jest-matcher-utils "^28.0.0"
     pretty-format "^28.0.0"
 
+"@types/js-yaml@^4.0.0":
+  version "4.0.5"
+  resolved "https://registry.npmmirror.com/@types/js-yaml/-/js-yaml-4.0.5.tgz#738dd390a6ecc5442f35e7f03fa1431353f7e138"
+  integrity sha512-FhpRzf927MNQdRZP0J5DLIdTXhjLYzeUTmLAu69mnVksLH9CJY3IuSeEgbKUki7GQZm0WqDkGzyxju2EZGD2wA==
+
 "@types/jsdom@^16.2.4":
   version "16.2.14"
   resolved "https://registry.npmmirror.com/@types/jsdom/-/jsdom-16.2.14.tgz#26fe9da6a8870715b154bb84cd3b2e53433d8720"
@@ -5372,7 +5385,7 @@ js-yaml@^3.13.1, js-yaml@^3.14.1:
     argparse "^1.0.7"
     esprima "^4.0.0"
 
-js-yaml@^4.1.0:
+js-yaml@^4.0.0, js-yaml@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-4.1.0.tgz#c1fb65f8f5017901cdd2c951864ba18458a10602"
   integrity sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==
@@ -6514,6 +6527,16 @@ next-compose-plugins@^2.2.1:
   resolved "https://registry.npmmirror.com/next-compose-plugins/-/next-compose-plugins-2.2.1.tgz#020fc53f275a7e719d62521bef4300fbb6fde5ab"
   integrity sha512-OjJ+fV15FXO2uQXQagLD4C0abYErBjyjE0I0FHpOEIB8upw0hg1ldFP6cqHTJBH1cZqy96OeR3u1dJ+Ez2D4Bg==
 
+next-mdx-remote@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.npmmirror.com/next-mdx-remote/-/next-mdx-remote-4.1.0.tgz#5e063542437a8cfa3faa9623870b076c01429c2a"
+  integrity sha512-ZdL5AFJcEqvInGkYYRKda930D6AJt1GOLX/OXFE/vTwaqV/Mw+l3/njZ4kWqvYSAkl89Z6W7WZrTtN0fd0XwPg==
+  dependencies:
+    "@mdx-js/mdx" "^2.0.0"
+    "@mdx-js/react" "^2.0.0"
+    vfile "^5.3.0"
+    vfile-matter "^3.0.1"
+
 next-themes@^0.2.0:
   version "0.2.0"
   resolved "https://registry.npmmirror.com/next-themes/-/next-themes-0.2.0.tgz#fdc507f61e95b3ae513dee8d4783bcec8c02e3a3"
@@ -8596,6 +8619,15 @@ validate-npm-package-name@^3.0.0:
   dependencies:
     builtins "^1.0.3"
 
+vfile-matter@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.npmmirror.com/vfile-matter/-/vfile-matter-3.0.1.tgz#85e26088e43aa85c04d42ffa3693635fa2bc5624"
+  integrity sha512-CAAIDwnh6ZdtrqAuxdElUqQRQDQgbbIrYtDYI8gCjXS1qQ+1XdLoK8FIZWxJwn0/I+BkSSZpar3SOgjemQz4fg==
+  dependencies:
+    "@types/js-yaml" "^4.0.0"
+    is-buffer "^2.0.0"
+    js-yaml "^4.0.0"
+
 vfile-message@^3.0.0:
   version "3.1.2"
   resolved "https://registry.npmmirror.com/vfile-message/-/vfile-message-3.1.2.tgz#a2908f64d9e557315ec9d7ea3a910f658ac05f7d"
@@ -8614,6 +8646,16 @@ vfile@^5.0.0:
     unist-util-stringify-position "^3.0.0"
     vfile-message "^3.0.0"
 
+vfile@^5.3.0:
+  version "5.3.4"
+  resolved "https://registry.npmmirror.com/vfile/-/vfile-5.3.4.tgz#bbb8c96b956693bbf70b2c67fdb5781dff769b93"
+  integrity sha512-KI+7cnst03KbEyN1+JE504zF5bJBZa+J+CrevLeyIMq0aPU681I2rQ5p4PlnQ6exFtWiUrg26QUdFMnAKR6PIw==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    is-buffer "^2.0.0"
+    unist-util-stringify-position "^3.0.0"
+    vfile-message "^3.0.0"
+
 w3c-hr-time@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmmirror.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz#0a89cdf5cc15822df9c360543676963e0cc308cd"