added load-remote-url component

Author: cgoinglove

src/components/markdown/index.tsx

@@ -1,10 +1,8 @@
 import { MDXRemote } from 'next-mdx-remote/rsc';
-import rehypePrettyCode from 'rehype-pretty-code';
-import rehypeSlug from 'rehype-slug';
-import remarkBreaks from 'remark-breaks';
-import remarkGfm from 'remark-gfm';
+
 import style from './style.module.scss';
 import { MDXInjectComponents } from './inject-components';
+import { MDXOption } from './mdx-option';
 type Props = {
   content: string;
 };
@@ -14,13 +12,7 @@ export default function MDXRenderer(props: Props) {
     <article className={`${style['cgoing-markdown']} mb-40`}>
       <MDXRemote
         source={props.content}
-        options={{
-          parseFrontmatter: true,
-          mdxOptions: {
-            remarkPlugins: [remarkGfm, remarkBreaks],
-            rehypePlugins: [rehypePrettyCode, rehypeSlug],
-          },
-        }}
+        options={MDXOption}
         components={MDXInjectComponents}
       />
     </article>

src/components/markdown/inject-components/index.tsx

@@ -1,5 +1,7 @@
 import Icon from '@components/icon';
+import LoadRemoteUrl from './load-remote-url';
 
 export const MDXInjectComponents = {
   Icon,
+  LoadRemoteUrl,
 };

src/components/markdown/inject-components/load-remote-url.tsx

@@ -0,0 +1,11 @@
+import { compileMDX } from 'next-mdx-remote/rsc';
+import { MDXOption } from '../mdx-option';
+export default async function LoadRemoteUrl({ url }: { url: string }) {
+  const source = await fetch(url).then((res) => res.text());
+
+  const { content } = await compileMDX<{ title: string }>({
+    source,
+    options: MDXOption,
+  });
+  return content;
+}

src/components/markdown/mdx-option.ts

@@ -0,0 +1,11 @@
+import rehypePrettyCode from 'rehype-pretty-code';
+import rehypeSlug from 'rehype-slug';
+import remarkBreaks from 'remark-breaks';
+import remarkGfm from 'remark-gfm';
+export const MDXOption = {
+  parseFrontmatter: true,
+  mdxOptions: {
+    remarkPlugins: [remarkGfm, remarkBreaks],
+    rehypePlugins: [rehypePrettyCode, rehypeSlug],
+  },
+};