feat: auto replace element with geist component

Author: unix

lib/components/mdx/hybrid-code.tsx

@@ -0,0 +1,67 @@
+import React, { ReactNode, useMemo } from 'react'
+import { Code, CodeProps } from '@geist-ui/core'
+
+export type HybridCodeProps = CodeProps
+export const FILE_NAME_PREFIX = '// NAME:'
+type HybridCodeChildrenAndName = {
+  children: ReactNode | undefined
+  name?: string | undefined
+}
+
+const extractFileName = (
+  children: ReactNode | undefined,
+  stopDeep: boolean = false,
+): HybridCodeChildrenAndName => {
+  if (!children) return { children }
+  let name: string | undefined = undefined
+  const next = React.Children.map(children, child => {
+    if (name) return child
+    if (!React.isValidElement(child)) return null
+    const grandson = child.props?.children
+    if (typeof grandson === 'string' && grandson?.startsWith(FILE_NAME_PREFIX)) {
+      name = grandson
+      return null
+    }
+    if (!Array.isArray(grandson) || stopDeep) return child
+
+    const { children: puredGrandson, name: puredName } = extractFileName(
+      child.props?.children,
+      true,
+    )
+    if (!puredName) return child
+
+    name = puredName
+    const withoutSpaceAndNull = React.Children.toArray(puredGrandson).filter(
+      (r, index) => {
+        if (index === 0 && r === '\n') return false
+        return !!r
+      },
+    )
+    return React.cloneElement(child, {
+      children: withoutSpaceAndNull,
+    })
+  })
+  return {
+    children: next,
+    name,
+  }
+}
+
+const HybridCode: React.FC<HybridCodeProps> = ({ children }) => {
+  const { children: withoutNameChildren, name } = useMemo<HybridCodeChildrenAndName>(
+    () => extractFileName(children),
+    [children],
+  )
+  const withoutPrefixName = useMemo(() => {
+    if (!name) return name
+    return name.replace(FILE_NAME_PREFIX, '')
+  }, [name])
+
+  return (
+    <Code block name={withoutPrefixName}>
+      {withoutNameChildren}
+    </Code>
+  )
+}
+
+export default HybridCode

lib/components/mdx/hybrid-link.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import NextLink from 'next/link'
+import { Link, LinkProps } from '@geist-ui/core'
+
+export type HybridLinkProps = LinkProps
+
+const HybridLink: React.FC<HybridLinkProps> = ({ href = '#', children, ...props }) => {
+  const isRelativeUrl = !/^([a-z0-9]*:|.{0})\/\/.*$/gim.test(href)
+
+  if (isRelativeUrl) {
+    return (
+      <NextLink href={href} passHref>
+        <Link color block {...props}>
+          {children}
+        </Link>
+      </NextLink>
+    )
+  }
+
+  return (
+    <Link href={href} target="_blank" color rel="noreferrer nofollow" {...props}>
+      {children}
+    </Link>
+  )
+}
+
+export default HybridLink

lib/components/mdx/index.ts

@@ -0,0 +1,2 @@
+export { default as HybridLink } from './hybrid-link'
+export { default as HybridCode } from './hybrid-code'

package.json

@@ -15,6 +15,7 @@
     "@geist-ui/core": "^2.3.4",
     "@geist-ui/icons": "^1.0.1",
     "@geist-ui/prism": "^1.1.1",
+    "@mdx-js/react": "^2.0.0",
     "@unix/views": "^0.2.0",
     "ms": "^2.1.3",
     "next": "^12.1.0",

pages/_app.tsx

@@ -3,11 +3,13 @@ import { NextPage } from 'next'
 import { AppProps } from 'next/app'
 import BLOG from '../blog.config'
 import useDomClean from 'lib/use-dom-clean'
+import { MDXProvider } from '@mdx-js/react'
 import { PrismBaseline } from '@geist-ui/prism'
-import { GeistProvider, CssBaseline } from '@geist-ui/core'
+import { GeistProvider, CssBaseline, Image } from '@geist-ui/core'
 import { useCallback, useState, useEffect, useMemo } from 'react'
 import { getDNSPrefetchValue } from 'lib/data-transform'
 import { BlogConfigsProvider } from 'lib/components'
+import { HybridLink, HybridCode } from 'lib/components/mdx'
 
 const Application: NextPage<AppProps<{}>> = ({ Component, pageProps }) => {
   const [themeType, setThemeType] = useState('light')
@@ -58,7 +60,14 @@ const Application: NextPage<AppProps<{}>> = ({ Component, pageProps }) => {
         <CssBaseline />
         <PrismBaseline />
         <BlogConfigsProvider onChange={changeHandle}>
-          <Component {...pageProps} />
+          <MDXProvider
+            components={{
+              a: HybridLink,
+              img: Image,
+              pre: HybridCode,
+            }}>
+            <Component {...pageProps} />
+          </MDXProvider>
         </BlogConfigsProvider>
         <style global jsx>{`
           @media only screen and (max-width: 767px) {

typings/mdx.d.ts

@@ -3,3 +3,12 @@ declare module '*.mdx' {
   export default MDXComponent
 }
 
+declare module "@mdx-js/react" {
+  import { ComponentType, StyleHTMLAttributes } from "react"
+  
+  type MDXProps = {
+    children: React.ReactNode
+    components: { [key:? string]: React.ReactNode,  }
+  }
+  export class MDXProvider extends React.Component<MDXProps> {}
+}

yarn.lock

@@ -308,6 +308,14 @@
     unist-util-visit "^4.0.0"
     vfile "^5.0.0"
 
+"@mdx-js/react@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@mdx-js/react/-/react-2.0.0.tgz#00a9f5467d2761fe3818222740f50403f83aee2c"
+  integrity sha512-icpMd43xqORnHSVRwALZv3ELN3IS7VS3BL+FyH2FFergQPSQ21FX0lN+OMIs0X+3dGY1L0DLhBCkMfPO+yDG7Q==
+  dependencies:
+    "@types/mdx" "^2.0.0"
+    "@types/react" ">=16"
+
 "@next/[email protected]":
   version "12.1.0"
   resolved "https://registry.yarnpkg.com/@next/env/-/env-12.1.0.tgz#73713399399b34aa5a01771fb73272b55b22c314"
@@ -468,7 +476,7 @@
     "@types/prop-types" "*"
     csstype "^3.0.2"
 
-"@types/react@^17.0.39":
+"@types/react@>=16", "@types/react@^17.0.39":
   version "17.0.39"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.39.tgz#d0f4cde092502a6db00a1cded6e6bf2abb7633ce"
   integrity sha512-UVavlfAxDd/AgAacMa60Azl7ygyQNRwC/DsHZmKgNvPmRR5p70AJ5Q9EAmL2NWOJmeV+vVUI4IAP7GZrN8h8Ug==