From fc22f64d9955e67a58b0b59850b412764c44f00e Mon Sep 17 00:00:00 2001 From: Antoine BERNIER Date: Wed, 28 Aug 2024 01:25:48 +0200 Subject: [PATCH] fix: centralized Img comp for both html and mdx --- package-lock.json | 162 ++++++---------------------- package.json | 1 + src/app/globals.css | 7 -- src/components/mdx/Img/Img.tsx | 16 +++ src/components/mdx/Img/index.ts | 1 + src/components/mdx/Img/rehypeImg.ts | 12 +++ src/components/mdx/index.tsx | 7 +- src/utils/docs.tsx | 2 + 8 files changed, 67 insertions(+), 141 deletions(-) create mode 100644 src/components/mdx/Img/Img.tsx create mode 100644 src/components/mdx/Img/index.ts create mode 100644 src/components/mdx/Img/rehypeImg.ts 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 + {alt} + ) +} 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 - {alt} -) +export const img = Img export const code = (props: ComponentProps<'code'>) => (