From d4f43c367363c6c4bfd79800e92a56c141009e83 Mon Sep 17 00:00:00 2001 From: Caner Akdas Date: Tue, 19 Nov 2024 22:39:49 +0300 Subject: [PATCH 1/6] fix: unoptimized SVG image --- apps/site/components/MDX/Image/index.tsx | 17 +++++++- apps/site/next.config.mjs | 2 - apps/site/util/__tests__/imageUtils.test.mjs | 43 ++++++++++++++++++++ apps/site/util/imageUtils.ts | 13 ++++++ 4 files changed, 71 insertions(+), 4 deletions(-) create mode 100644 apps/site/util/__tests__/imageUtils.test.mjs create mode 100644 apps/site/util/imageUtils.ts diff --git a/apps/site/components/MDX/Image/index.tsx b/apps/site/components/MDX/Image/index.tsx index 42634bb9ad24b..7998d0998e2f9 100644 --- a/apps/site/components/MDX/Image/index.tsx +++ b/apps/site/components/MDX/Image/index.tsx @@ -2,7 +2,9 @@ import type { ImageProps } from 'next/image'; import Image from 'next/image'; import type { FC } from 'react'; -const MDXImage: FC = ({ width, height, alt, ...props }) => { +import { isSvgImage } from '@/util/imageUtils'; + +const MDXImage: FC = ({ width, height, alt, src, ...props }) => { if (!width || !height) { // Since `width` and `height` are not provided in the Markdown image format, // we provide the height and width automatically. @@ -10,6 +12,8 @@ const MDXImage: FC = ({ width, height, alt, ...props }) => { return ( {alt} = ({ width, height, alt, ...props }) => { ); } - return {alt}; + return ( + {alt} + ); }; export default MDXImage; diff --git a/apps/site/next.config.mjs b/apps/site/next.config.mjs index 245c905ab71a5..167b52803379e 100644 --- a/apps/site/next.config.mjs +++ b/apps/site/next.config.mjs @@ -23,8 +23,6 @@ const nextConfig = { images: { // We disable image optimisation during static export builds unoptimized: ENABLE_STATIC_EXPORT, - // We allow SVGs to be used as images - dangerouslyAllowSVG: true, // We add it to the remote pattern for the static images we use from GitHub remotePatterns: [ { diff --git a/apps/site/util/__tests__/imageUtils.test.mjs b/apps/site/util/__tests__/imageUtils.test.mjs new file mode 100644 index 0000000000000..3e2ec00245ca1 --- /dev/null +++ b/apps/site/util/__tests__/imageUtils.test.mjs @@ -0,0 +1,43 @@ +import { isSvgImage } from '@/util/imageUtils'; + +describe('isSvgImage', () => { + const testCases = [ + { + description: 'should return true for a valid .svg URL', + input: 'https://nodejs.org/image.svg', + expected: true, + }, + { + description: 'should return true for a URL with query params', + input: 'https://nodejs.org/image.svg?query=param', + expected: true, + }, + { + description: 'should return false for a URL without a .svg extension', + input: 'https://nodejs.org/image', + expected: false, + }, + { + description: + 'should return false for a URL containing ".svg" but not ending with it', + input: 'https://nodejs.org/image.svg.png', + expected: false, + }, + { + description: 'should return false for an empty string', + input: '', + expected: false, + }, + { + description: 'should return false for a non-URL string', + input: 'not-a-url', + expected: false, + }, + ]; + + testCases.forEach(({ description, input, expected }) => { + it(description, () => { + expect(isSvgImage(input)).toBe(expected); + }); + }); +}); diff --git a/apps/site/util/imageUtils.ts b/apps/site/util/imageUtils.ts new file mode 100644 index 0000000000000..b0ccd18c89344 --- /dev/null +++ b/apps/site/util/imageUtils.ts @@ -0,0 +1,13 @@ +export const isSvgImage = (src: string) => { + let isSvg = false; + + if (src.includes('.svg')) { + const image = new URL(src); + + if (image.pathname.endsWith('.svg')) { + isSvg = true; + } + } + + return isSvg; +}; From 4d16aa856bcc89690faf4e3ac1acbc2bf7300084 Mon Sep 17 00:00:00 2001 From: Caner Akdas Date: Tue, 19 Nov 2024 23:18:09 +0300 Subject: [PATCH 2/6] chore: review updates --- apps/site/util/imageUtils.ts | 25 ++++++++++++++++--------- 1 file changed, 16 insertions(+), 9 deletions(-) diff --git a/apps/site/util/imageUtils.ts b/apps/site/util/imageUtils.ts index b0ccd18c89344..0d6ab393cceb8 100644 --- a/apps/site/util/imageUtils.ts +++ b/apps/site/util/imageUtils.ts @@ -1,13 +1,20 @@ -export const isSvgImage = (src: string) => { - let isSvg = false; +/** + * Checks if the given source string points to an SVG image. + * + * This function examines the base part of the provided string (ignoring query parameters) + * to determine if it ends with the `.svg` extension. + * + * @param src - The URL or string representing the source of the image. + * @returns `true` if the source points to an SVG image, otherwise `false`. + */ +export const isSvgImage = (src: string): boolean => { + // Split the source string at the '?' character to separate the main path from query parameters + const [image] = src.split('?'); - if (src.includes('.svg')) { - const image = new URL(src); - - if (image.pathname.endsWith('.svg')) { - isSvg = true; - } + // Check if the base path (before any query parameters) ends with '.svg' + if (image.endsWith('.svg')) { + return true; } - return isSvg; + return false; }; From 1c66ced2164cc001920f876a66d3328099c6e7a5 Mon Sep 17 00:00:00 2001 From: Caner Akdas Date: Tue, 19 Nov 2024 23:27:30 +0300 Subject: [PATCH 3/6] Update apps/site/util/imageUtils.ts Co-authored-by: Steven Signed-off-by: Caner Akdas --- apps/site/util/imageUtils.ts | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/apps/site/util/imageUtils.ts b/apps/site/util/imageUtils.ts index 0d6ab393cceb8..d8d1860d5ae53 100644 --- a/apps/site/util/imageUtils.ts +++ b/apps/site/util/imageUtils.ts @@ -12,9 +12,5 @@ export const isSvgImage = (src: string): boolean => { const [image] = src.split('?'); // Check if the base path (before any query parameters) ends with '.svg' - if (image.endsWith('.svg')) { - return true; - } - - return false; + return image.endsWith('.svg') }; From 2c7280e7542e0de31dbff52715a58a8c3f8b2d91 Mon Sep 17 00:00:00 2001 From: Caner Akdas Date: Tue, 19 Nov 2024 23:46:38 +0300 Subject: [PATCH 4/6] chore: format files --- apps/site/util/imageUtils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/site/util/imageUtils.ts b/apps/site/util/imageUtils.ts index d8d1860d5ae53..6017ea7ef80ab 100644 --- a/apps/site/util/imageUtils.ts +++ b/apps/site/util/imageUtils.ts @@ -12,5 +12,5 @@ export const isSvgImage = (src: string): boolean => { const [image] = src.split('?'); // Check if the base path (before any query parameters) ends with '.svg' - return image.endsWith('.svg') + return image.endsWith('.svg'); }; From 88d3b0a9f9aa6524d39036f6438ce29f279c610a Mon Sep 17 00:00:00 2001 From: Caner Akdas Date: Wed, 20 Nov 2024 02:33:10 +0300 Subject: [PATCH 5/6] chore: review update --- apps/site/components/MDX/Image/index.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/apps/site/components/MDX/Image/index.tsx b/apps/site/components/MDX/Image/index.tsx index 7998d0998e2f9..871651ddd2882 100644 --- a/apps/site/components/MDX/Image/index.tsx +++ b/apps/site/components/MDX/Image/index.tsx @@ -5,6 +5,8 @@ import type { FC } from 'react'; import { isSvgImage } from '@/util/imageUtils'; const MDXImage: FC = ({ width, height, alt, src, ...props }) => { + const isUnoptimizedImage = isSvgImage(src.toString()); + if (!width || !height) { // Since `width` and `height` are not provided in the Markdown image format, // we provide the height and width automatically. @@ -13,7 +15,7 @@ const MDXImage: FC = ({ width, height, alt, src, ...props }) => { {alt} = ({ width, height, alt, src, ...props }) => { width={width} height={height} src={src} - unoptimized={isSvgImage(src.toString())} + unoptimized={isUnoptimizedImage} /> ); }; From 5c79e59569001623ea8be97847519783c98a72ee Mon Sep 17 00:00:00 2001 From: Claudio W Date: Wed, 20 Nov 2024 20:16:17 +0100 Subject: [PATCH 6/6] Update apps/site/util/imageUtils.ts Co-authored-by: Steven Signed-off-by: Claudio W --- apps/site/util/imageUtils.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/apps/site/util/imageUtils.ts b/apps/site/util/imageUtils.ts index 6017ea7ef80ab..d75193e8c561b 100644 --- a/apps/site/util/imageUtils.ts +++ b/apps/site/util/imageUtils.ts @@ -1,4 +1,7 @@ /** + * This is a temporary workaround that can be removed once Next.js is upgraded. + * See https://github.com/vercel/next.js/pull/72970 + * * Checks if the given source string points to an SVG image. * * This function examines the base part of the provided string (ignoring query parameters)