refactor: enable mdxRs (#2518)

inabagumi · Mar 1, 2023 · 8d4841e · 8d4841e
1 parent 17aad18
commit 8d4841e
Show file tree

Hide file tree

Showing 10 changed files with 24 additions and 53 deletions.
diff --git a/app/(content)/(document)/Link.tsx b/app/(content)/(document)/Link.tsx
diff --git a/app/(content)/(document)/MarkdownWrapper.tsx b/app/(content)/(document)/MarkdownWrapper.tsx
diff --git a/app/(content)/(document)/about/AboutWrapper.tsx b/app/(content)/(document)/about/AboutWrapper.tsx
diff --git a/app/(content)/(document)/about/page.tsx b/app/(content)/(document)/about/page.tsx
@@ -1,7 +1,7 @@
 import { type Metadata } from 'next'
 import { title as siteName, twitterAccount } from '@/lib/constants'
 import SimpleTitle from '@/ui/SimpleTitle'
-import AboutWrapper from './AboutWrapper'
+import About from './About.mdx'
 
 const title = '因幡神社とは'
 
@@ -26,7 +26,7 @@ export default function Page() {
   return (
     <>
       <SimpleTitle>{title}</SimpleTitle>
-      <AboutWrapper />
+      <About />
     </>
   )
 }
diff --git a/app/(content)/(document)/layout.tsx b/app/(content)/(document)/layout.tsx
@@ -1,15 +1,10 @@
 import { type ReactNode } from 'react'
-import MarkdownWrapper from './MarkdownWrapper'
 import styles from './layout.module.css'
 
 type Props = {
   children: ReactNode
 }
 
 export default function DocumentLayout({ children }: Props) {
-  return (
-    <MarkdownWrapper>
-      <div className={styles.markdown}>{children}</div>
-    </MarkdownWrapper>
-  )
+  return <div className={styles.markdown}>{children}</div>
 }
diff --git a/app/(content)/(document)/privacy/PrivacyWrapper.tsx b/app/(content)/(document)/privacy/PrivacyWrapper.tsx
diff --git a/app/(content)/(document)/privacy/page.tsx b/app/(content)/(document)/privacy/page.tsx
@@ -1,7 +1,7 @@
 import { type Metadata } from 'next'
 import { title as siteName, twitterAccount } from '@/lib/constants'
 import SimpleTitle from '@/ui/SimpleTitle'
-import PrivacyWrapper from './PrivacyWrapper'
+import Privacy from './Privacy.mdx'
 
 const title = 'プライバシーポリシー'
 
@@ -26,7 +26,7 @@ export default function Page() {
   return (
     <>
       <SimpleTitle>{title}</SimpleTitle>
-      <PrivacyWrapper />
+      <Privacy />
     </>
   )
 }
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,6 +1,7 @@
 import '@reach/skip-nav/styles.css'
 import '@/styles/globals.css'
 import { SkipNavLink } from '@reach/skip-nav'
+import { Analytics } from '@vercel/analytics/react'
 import { type Metadata } from 'next'
 import Link from 'next/link'
 import { type ReactNode } from 'react'
@@ -14,7 +15,6 @@ import {
   themeColor,
   twitterAccount
 } from '@/lib/constants'
-import AnalyticsWrapper from './AnalyticsWrapper'
 import Background from './Background'
 import Menu from './Menu'
 import styles from './layout.module.css'
@@ -116,7 +116,7 @@ export default function RootLayout({ children }: Props) {
 
         <Background />
 
-        <AnalyticsWrapper />
+        <Analytics />
       </body>
     </html>
   )

diff --git a/mdx-components.tsx b/mdx-components.tsx
@@ -0,0 +1,15 @@
+import { type MDXComponents } from 'mdx/types'
+import Link from 'next/link'
+
+export function useMDXComponents(components: MDXComponents): MDXComponents {
+  return {
+    a: ({ href, ref: _ref, ...props }) => {
+      if (!href || /https?:\/\//.test(href)) {
+        return <a href={href} {...props} />
+      }
+
+      return <Link href={href} {...props} />
+    },
+    ...components
+  }
+}
diff --git a/next.config.js b/next.config.js
@@ -5,7 +5,6 @@ import remarkGfm from 'remark-gfm'
 
 const withMDX = nextMDX({
   options: {
-    jsx: true,
     rehypePlugins: [
       [
         rehypeExternalLinks,
@@ -33,7 +32,8 @@ const nextConfig = {
     dirs: ['__mocks__', 'app', 'lib', 'ui']
   },
   experimental: {
-    appDir: true
+    appDir: true,
+    mdxRs: true
   },
   async headers() {
     return [