diff --git a/package-lock.json b/package-lock.json
index af20f113..9d7ff54b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -30,6 +30,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",
@@ -664,15 +665,6 @@
"url": "https://opencollective.com/unified"
}
},
- "node_modules/@mdx-js/mdx/node_modules/@types/hast": {
- "version": "3.0.4",
- "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
- "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
- "license": "MIT",
- "dependencies": {
- "@types/unist": "*"
- }
- },
"node_modules/@mdx-js/react": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-3.0.1.tgz",
@@ -1425,12 +1417,12 @@
}
},
"node_modules/@types/hast": {
- "version": "2.3.10",
- "resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.10.tgz",
- "integrity": "sha512-McWspRw8xx8J9HurkVBfYj0xKoE25tOFlHGdx4MJ5xORQrMGZNqJhVQWaIbm6Oyla5kYOXtDiopzKRJzEOkwJw==",
+ "version": "3.0.4",
+ "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
+ "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
"license": "MIT",
"dependencies": {
- "@types/unist": "^2"
+ "@types/unist": "*"
}
},
"node_modules/@types/json5": {
@@ -5185,15 +5177,6 @@
"url": "https://opencollective.com/unified"
}
},
- "node_modules/hast-util-from-html/node_modules/@types/hast": {
- "version": "3.0.4",
- "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
- "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
- "license": "MIT",
- "dependencies": {
- "@types/unist": "*"
- }
- },
"node_modules/hast-util-from-html/node_modules/parse5": {
"version": "7.1.2",
"resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
@@ -5226,15 +5209,6 @@
"url": "https://opencollective.com/unified"
}
},
- "node_modules/hast-util-from-parse5/node_modules/@types/hast": {
- "version": "3.0.4",
- "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
- "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
- "license": "MIT",
- "dependencies": {
- "@types/unist": "*"
- }
- },
"node_modules/hast-util-from-parse5/node_modules/@types/unist": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
@@ -5284,15 +5258,6 @@
"url": "https://opencollective.com/unified"
}
},
- "node_modules/hast-util-is-element/node_modules/@types/hast": {
- "version": "3.0.4",
- "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
- "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
- "license": "MIT",
- "dependencies": {
- "@types/unist": "*"
- }
- },
"node_modules/hast-util-parse-selector": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-3.1.1.tgz",
@@ -5306,6 +5271,15 @@
"url": "https://opencollective.com/unified"
}
},
+ "node_modules/hast-util-parse-selector/node_modules/@types/hast": {
+ "version": "2.3.10",
+ "resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.10.tgz",
+ "integrity": "sha512-McWspRw8xx8J9HurkVBfYj0xKoE25tOFlHGdx4MJ5xORQrMGZNqJhVQWaIbm6Oyla5kYOXtDiopzKRJzEOkwJw==",
+ "license": "MIT",
+ "dependencies": {
+ "@types/unist": "^2"
+ }
+ },
"node_modules/hast-util-to-estree": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/hast-util-to-estree/-/hast-util-to-estree-3.1.0.tgz",
@@ -5334,15 +5308,6 @@
"url": "https://opencollective.com/unified"
}
},
- "node_modules/hast-util-to-estree/node_modules/@types/hast": {
- "version": "3.0.4",
- "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
- "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
- "license": "MIT",
- "dependencies": {
- "@types/unist": "*"
- }
- },
"node_modules/hast-util-to-jsx-runtime": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.3.0.tgz",
@@ -5370,15 +5335,6 @@
"url": "https://opencollective.com/unified"
}
},
- "node_modules/hast-util-to-jsx-runtime/node_modules/@types/hast": {
- "version": "3.0.4",
- "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
- "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
- "license": "MIT",
- "dependencies": {
- "@types/unist": "*"
- }
- },
"node_modules/hast-util-to-jsx-runtime/node_modules/@types/unist": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
@@ -5413,15 +5369,6 @@
"url": "https://opencollective.com/unified"
}
},
- "node_modules/hast-util-to-string/node_modules/@types/hast": {
- "version": "3.0.4",
- "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
- "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
- "license": "MIT",
- "dependencies": {
- "@types/unist": "*"
- }
- },
"node_modules/hast-util-whitespace": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
@@ -5435,15 +5382,6 @@
"url": "https://opencollective.com/unified"
}
},
- "node_modules/hast-util-whitespace/node_modules/@types/hast": {
- "version": "3.0.4",
- "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
- "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
- "license": "MIT",
- "dependencies": {
- "@types/unist": "*"
- }
- },
"node_modules/hastscript": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/hastscript/-/hastscript-7.2.0.tgz",
@@ -5461,6 +5399,15 @@
"url": "https://opencollective.com/unified"
}
},
+ "node_modules/hastscript/node_modules/@types/hast": {
+ "version": "2.3.10",
+ "resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.10.tgz",
+ "integrity": "sha512-McWspRw8xx8J9HurkVBfYj0xKoE25tOFlHGdx4MJ5xORQrMGZNqJhVQWaIbm6Oyla5kYOXtDiopzKRJzEOkwJw==",
+ "license": "MIT",
+ "dependencies": {
+ "@types/unist": "^2"
+ }
+ },
"node_modules/highlight.js": {
"version": "10.7.3",
"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
@@ -7325,15 +7272,6 @@
"url": "https://opencollective.com/unified"
}
},
- "node_modules/mdast-util-mdx-expression/node_modules/@types/hast": {
- "version": "3.0.4",
- "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
- "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
- "license": "MIT",
- "dependencies": {
- "@types/unist": "*"
- }
- },
"node_modules/mdast-util-mdx-jsx": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/mdast-util-mdx-jsx/-/mdast-util-mdx-jsx-3.1.2.tgz",
@@ -7359,15 +7297,6 @@
"url": "https://opencollective.com/unified"
}
},
- "node_modules/mdast-util-mdx-jsx/node_modules/@types/hast": {
- "version": "3.0.4",
- "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
- "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
- "license": "MIT",
- "dependencies": {
- "@types/unist": "*"
- }
- },
"node_modules/mdast-util-mdx-jsx/node_modules/@types/unist": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
@@ -7392,15 +7321,6 @@
"url": "https://opencollective.com/unified"
}
},
- "node_modules/mdast-util-mdxjs-esm/node_modules/@types/hast": {
- "version": "3.0.4",
- "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
- "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
- "license": "MIT",
- "dependencies": {
- "@types/unist": "*"
- }
- },
"node_modules/mdast-util-phrasing": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/mdast-util-phrasing/-/mdast-util-phrasing-4.1.0.tgz",
@@ -7436,15 +7356,6 @@
"url": "https://opencollective.com/unified"
}
},
- "node_modules/mdast-util-to-hast/node_modules/@types/hast": {
- "version": "3.0.4",
- "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
- "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
- "license": "MIT",
- "dependencies": {
- "@types/unist": "*"
- }
- },
"node_modules/mdast-util-to-markdown": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/mdast-util-to-markdown/-/mdast-util-to-markdown-2.1.0.tgz",
@@ -12381,6 +12292,15 @@
"url": "https://github.com/sponsors/wooorm"
}
},
+ "node_modules/refractor/node_modules/@types/hast": {
+ "version": "2.3.10",
+ "resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.10.tgz",
+ "integrity": "sha512-McWspRw8xx8J9HurkVBfYj0xKoE25tOFlHGdx4MJ5xORQrMGZNqJhVQWaIbm6Oyla5kYOXtDiopzKRJzEOkwJw==",
+ "license": "MIT",
+ "dependencies": {
+ "@types/unist": "^2"
+ }
+ },
"node_modules/regenerator-runtime": {
"version": "0.14.1",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
@@ -12445,15 +12365,6 @@
"url": "https://opencollective.com/unified"
}
},
- "node_modules/rehype-parse/node_modules/@types/hast": {
- "version": "3.0.4",
- "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
- "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
- "license": "MIT",
- "dependencies": {
- "@types/unist": "*"
- }
- },
"node_modules/rehype-prism-plus": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/rehype-prism-plus/-/rehype-prism-plus-2.0.0.tgz",
@@ -12533,15 +12444,6 @@
"url": "https://opencollective.com/unified"
}
},
- "node_modules/remark-rehype/node_modules/@types/hast": {
- "version": "3.0.4",
- "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
- "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
- "license": "MIT",
- "dependencies": {
- "@types/unist": "*"
- }
- },
"node_modules/remark-stringify": {
"version": "11.0.0",
"resolved": "https://registry.npmjs.org/remark-stringify/-/remark-stringify-11.0.0.tgz",
diff --git a/package.json b/package.json
index 66589be7..9b019c91 100644
--- a/package.json
+++ b/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",
diff --git a/src/app/globals.css b/src/app/globals.css
index 0376317c..05b5f585 100644
--- a/src/app/globals.css
+++ b/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')) {
diff --git a/src/components/mdx/Img/Img.tsx b/src/components/mdx/Img/Img.tsx
new file mode 100644
index 00000000..c7ee20f3
--- /dev/null
+++ b/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
+
+ )
+}
diff --git a/src/components/mdx/Img/index.ts b/src/components/mdx/Img/index.ts
new file mode 100644
index 00000000..aa63dd4f
--- /dev/null
+++ b/src/components/mdx/Img/index.ts
@@ -0,0 +1 @@
+export * from './Img'
diff --git a/src/components/mdx/Img/rehypeImg.ts b/src/components/mdx/Img/rehypeImg.ts
new file mode 100644
index 00000000..ebfb5a5e
--- /dev/null
+++ b/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 to React component
+ })
+ }
+}
diff --git a/src/components/mdx/index.tsx b/src/components/mdx/index.tsx
index 4312e95a..186ba50c 100644
--- a/src/components/mdx/index.tsx
+++ b/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) {
@@ -84,10 +86,7 @@ export const a = ({ href, target, rel, ...props }: ComponentProps<'a'>) => {
return
}
-export const img = ({ src, alt = '', ...props }: ComponentProps<'img'>) => (
- // eslint-disable-next-line @next/next/no-img-element
-
-)
+export const img = Img
export const code = (props: ComponentProps<'code'>) => (