fix: centralized Img comp for both html and mdx

package.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",

src/app/globals.css

@@ -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/components/mdx/Img/Img.tsx

@@ -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/index.ts

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

src/components/mdx/Img/rehypeImg.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/index.tsx

@@ -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/utils/docs.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`