@fullstackdatasolutions/articles 0.6.0 → 0.7.0

package/src/renderMdx.tsx

@@ -0,0 +1,47 @@
+// MDX files must use JSX prop syntax:
+//   Correct:   <span style={{ color: '#3b82f6' }}>Text</span>
+//   Incorrect: <span style="color: #3b82f6">Text</span>
+//   Correct:   className="..."
+//   Incorrect: class="..."
+import React from 'react'
+import type { ComponentType, ImgHTMLAttributes } from 'react'
+import * as devRuntime from 'react/jsx-dev-runtime'
+import * as runtime from 'react/jsx-runtime'
+import { evaluate } from '@mdx-js/mdx'
+import rehypePrism from 'rehype-prism-plus'
+import rehypeSlug from 'rehype-slug'
+import remarkGfm from 'remark-gfm'
+import remarkGithubBlockquoteAlert from 'remark-github-blockquote-alert'
+import { customRenderer } from './markdown'
+
+type MdxContent = ComponentType<{
+  components?: Record<string, ComponentType<unknown>>
+}>
+
+function makeImgComponent(basePath: string) {
+  return function MdxImage({ src, alt, ...props }: ImgHTMLAttributes<HTMLImageElement>) {
+    const resolvedSrc =
+      src && !src.startsWith('http') && !src.startsWith('/') ? `${basePath}/${src}` : src
+    return React.createElement('img', { src: resolvedSrc, alt, ...props })
+  }
+}
+
+export async function renderMdxSource(source: string, basePath?: string) {
+  const isDevelopment = process.env.NODE_ENV === 'development'
+
+  const mdxModule = await evaluate(source, {
+    ...(isDevelopment ? devRuntime : runtime),
+    development: isDevelopment,
+    remarkPlugins: [remarkGfm, remarkGithubBlockquoteAlert],
+    rehypePlugins: [
+      customRenderer,
+      rehypeSlug,
+      // @ts-ignore
+      rehypePrism,
+    ],
+  })
+
+  const Content = mdxModule.default as MdxContent
+  const components = basePath ? { img: makeImgComponent(basePath) } : undefined
+  return <Content components={components as Record<string, ComponentType<unknown>>} />
+}