fix: centralized Img comp for both html and mdx

Author: abernier

package-lock.json

@@ -7,6 +7,7 @@
     "build": "bin/build.mjs"
   },
   "devDependencies": {
+    "@types/hast": "^3.0.4",
     "@types/minimist": "^1.2.5",
     "@types/node": "^18.19.44",
     "@types/react": "^18.3.3",

package.json

@@ -21,13 +21,6 @@ body {
 @tailwind utilities;
 /* Stop purging. */
 
-@layer utilities {
-  img,
-  .img {
-    @apply bg-surface-container inline-block rounded-lg;
-  }
-}
-
 /* Your own custom utilities */
 @supports (position: sticky) {
   @media (min-width: theme('screens.lg')) {

src/app/globals.css

@@ -0,0 +1,16 @@
+import cn from '@/lib/cn'
+import { ComponentProps } from 'react'
+
+export function Img({ src, alt = '', className, ...props }: ComponentProps<'img'>) {
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img
+      src={src}
+      decoding="async"
+      loading="lazy"
+      alt={alt}
+      className={cn('bg-surface-container inline-block rounded-lg', className)}
+      {...props}
+    />
+  )
+}

src/components/mdx/Img/Img.tsx

@@ -0,0 +1 @@
+export * from './Img'

src/components/mdx/Img/index.ts

@@ -0,0 +1,12 @@
+import type { Root } from 'hast'
+import { visit } from 'unist-util-visit'
+
+// https://unifiedjs.com/learn/guide/create-a-rehype-plugin/
+export function rehypeImg() {
+  return (tree: Root) => {
+    visit(tree, null, function (node) {
+      // console.log(node)
+      if (node.type === 'mdxJsxFlowElement' && node.name === 'img') node.name = 'Img' // map HTML <img> to <Img> React component
+    })
+  }
+}

src/components/mdx/Img/rehypeImg.ts

@@ -2,12 +2,14 @@ export * from './Codesandbox'
 export * from './Gha'
 export * from './Grid'
 export * from './Hint'
+export * from './Img'
 export * from './Toc'
 
 import cn from '@/lib/cn'
 import { MARKDOWN_REGEX } from '@/utils/docs'
 import { Sandpack as SP } from '@codesandbox/sandpack-react'
 import { ComponentProps } from 'react'
+import { Img } from './Img'
 
 type Hn = 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
 function Heading({ id, Tag, ...props }: { id?: string; Tag: Hn } & ComponentProps<Hn>) {
@@ -84,10 +86,7 @@ export const a = ({ href, target, rel, ...props }: ComponentProps<'a'>) => {
   return <a {...props} href={href} target={target} rel={rel} className="text-primary" />
 }
 
-export const img = ({ src, alt = '', ...props }: ComponentProps<'img'>) => (
-  // eslint-disable-next-line @next/next/no-img-element
-  <img src={src} decoding="async" loading="lazy" alt={alt} {...props} />
-)
+export const img = Img
 
 export const code = (props: ComponentProps<'code'>) => (
   <code

src/components/mdx/index.tsx

@@ -4,6 +4,7 @@ import { Codesandbox } from '@/components/mdx/Codesandbox'
 import { fetchCSB } from '@/components/mdx/Codesandbox/fetchCSB'
 import { rehypeCodesandbox } from '@/components/mdx/Codesandbox/rehypeCodesandbox'
 import { rehypeGha } from '@/components/mdx/Gha/rehypeGha'
+import { rehypeImg } from '@/components/mdx/Img/rehypeImg'
 import { rehypeToc } from '@/components/mdx/Toc/rehypeToc'
 import resolveMdxUrl from '@/utils/resolveMdxUrl'
 import matter from 'gray-matter'
@@ -156,6 +157,7 @@ async function _getDocs(
           mdxOptions: {
             remarkPlugins: [remarkGFM],
             rehypePlugins: [
+              rehypeImg,
               rehypeGha,
               rehypePrismPlus,
               rehypeCodesandbox(boxes), // 1. put all Codesandbox[id] into `doc.boxes`