From dd2f3fafc0b47e4a1d49b56b46387591a27e5556 Mon Sep 17 00:00:00 2001 From: Caner Akdas Date: Wed, 6 Mar 2024 00:40:53 +0300 Subject: [PATCH 1/6] feat: next/image added into the mdx components --- next.mdx.use.mjs | 4 ++++ pages/en/about/index.mdx | 5 +++-- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/next.mdx.use.mjs b/next.mdx.use.mjs index a28a3d1d88d5b..9bf8351321d7a 100644 --- a/next.mdx.use.mjs +++ b/next.mdx.use.mjs @@ -1,5 +1,7 @@ 'use strict'; +import Image from 'next/image'; + import Blockquote from './components/Common/Blockquote'; import Button from './components/Common/Button'; import DownloadButton from './components/Downloads/DownloadButton'; @@ -82,6 +84,8 @@ export const mdxComponents = { // Renders a Release CodeBox ReleaseCodeBox: ReleaseCodeBox, }, + // Renders a Next.js Image Component for rendering images + Image: Image, }; /** diff --git a/pages/en/about/index.mdx b/pages/en/about/index.mdx index 0c0760bfa4337..6817213df253f 100644 --- a/pages/en/about/index.mdx +++ b/pages/en/about/index.mdx @@ -4,10 +4,11 @@ layout: about ---
- Node.js mascot
From 4ea4f3bcafde7cf65cc93921fe06d4cabc2fef6d Mon Sep 17 00:00:00 2001 From: Caner Akdas Date: Wed, 6 Mar 2024 01:21:36 +0300 Subject: [PATCH 2/6] refactor: Image moved into the html components --- next.mdx.use.mjs | 4 ++-- pages/en/about/index.mdx | 14 ++++++++------ 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/next.mdx.use.mjs b/next.mdx.use.mjs index 9bf8351321d7a..6d0fa3f8e34e4 100644 --- a/next.mdx.use.mjs +++ b/next.mdx.use.mjs @@ -84,8 +84,6 @@ export const mdxComponents = { // Renders a Release CodeBox ReleaseCodeBox: ReleaseCodeBox, }, - // Renders a Next.js Image Component for rendering images - Image: Image, }; /** @@ -100,4 +98,6 @@ export const htmlComponents = { blockquote: Blockquote, // Renders a CodeBox Component for `pre` tags pre: MDXCodeBox, + // Renders a Next.js Image Component for `img` tags + img: Image, }; diff --git a/pages/en/about/index.mdx b/pages/en/about/index.mdx index 6817213df253f..3b37e415eb833 100644 --- a/pages/en/about/index.mdx +++ b/pages/en/about/index.mdx @@ -4,12 +4,14 @@ layout: about ---
- Node.js mascot + { + Node.js mascot + }
--- From 417716fb67f7e1ca0187f51e7f7e6bf280f891ce Mon Sep 17 00:00:00 2001 From: Caner Akdas Date: Wed, 6 Mar 2024 16:19:36 +0300 Subject: [PATCH 3/6] refactor: mdx image component added --- components/MDX/Image/index.tsx | 22 ++++++++++++++++++++++ next.mdx.use.mjs | 9 +++++---- 2 files changed, 27 insertions(+), 4 deletions(-) create mode 100644 components/MDX/Image/index.tsx diff --git a/components/MDX/Image/index.tsx b/components/MDX/Image/index.tsx new file mode 100644 index 0000000000000..5d68ee2ef958e --- /dev/null +++ b/components/MDX/Image/index.tsx @@ -0,0 +1,22 @@ +import type { ImageProps } from 'next/image'; +import Image from 'next/image'; +import type { DetailedHTMLProps, FC, ImgHTMLAttributes } from 'react'; + +type HTMLImageProps = DetailedHTMLProps< + ImgHTMLAttributes, + HTMLImageElement +>; + +const MDXImage: FC = ({ width, height, alt, ...props }) => { + if (!width || !height) { + // When `width` and `height` are not provided in markdown image format, we + // have to use the default HTML `img` tag. + // @example ![alt](url title) + // eslint-disable-next-line @next/next/no-img-element + return {alt}; + } + + return {alt}; +}; + +export default MDXImage; diff --git a/next.mdx.use.mjs b/next.mdx.use.mjs index 6d0fa3f8e34e4..35ca4ec3f1f09 100644 --- a/next.mdx.use.mjs +++ b/next.mdx.use.mjs @@ -1,7 +1,5 @@ 'use strict'; -import Image from 'next/image'; - import Blockquote from './components/Common/Blockquote'; import Button from './components/Common/Button'; import DownloadButton from './components/Downloads/DownloadButton'; @@ -24,6 +22,7 @@ import Link from './components/Link'; import UpcomingMeetings from './components/MDX/Calendar/UpcomingMeetings'; import MDXCodeBox from './components/MDX/CodeBox'; import MDXCodeTabs from './components/MDX/CodeTabs'; +import MDXImage from './components/MDX/Image'; import SearchPage from './components/MDX/SearchPage'; import WithBadge from './components/withBadge'; import WithBanner from './components/withBanner'; @@ -98,6 +97,8 @@ export const htmlComponents = { blockquote: Blockquote, // Renders a CodeBox Component for `pre` tags pre: MDXCodeBox, - // Renders a Next.js Image Component for `img` tags - img: Image, + // When `width` and `height` attributes are provided uses Next.js `Image` component, + // otherwise uses the HTML `img` tag + // @see https://nextjs.org/docs/pages/api-reference/components/image + img: MDXImage, }; From 1541d56b9a186226fc8ec49ca798075c924020ff Mon Sep 17 00:00:00 2001 From: Caner Akdas Date: Thu, 7 Mar 2024 02:12:40 +0300 Subject: [PATCH 4/6] refactor: static img to Image component --- components/MDX/Image/index.tsx | 28 +++++++++++++++++----------- next.config.mjs | 23 +++++++++++++++++++++-- next.mdx.use.mjs | 4 +--- 3 files changed, 39 insertions(+), 16 deletions(-) diff --git a/components/MDX/Image/index.tsx b/components/MDX/Image/index.tsx index 5d68ee2ef958e..f2be687d2d513 100644 --- a/components/MDX/Image/index.tsx +++ b/components/MDX/Image/index.tsx @@ -1,19 +1,25 @@ import type { ImageProps } from 'next/image'; import Image from 'next/image'; -import type { DetailedHTMLProps, FC, ImgHTMLAttributes } from 'react'; - -type HTMLImageProps = DetailedHTMLProps< - ImgHTMLAttributes, - HTMLImageElement ->; +import type { FC } from 'react'; const MDXImage: FC = ({ width, height, alt, ...props }) => { if (!width || !height) { - // When `width` and `height` are not provided in markdown image format, we - // have to use the default HTML `img` tag. - // @example ![alt](url title) - // eslint-disable-next-line @next/next/no-img-element - return {alt}; + // Since `width` and `height` are not provided in the Markdown image format, + // we provide the height and width automatically. Additionally, we set + // loading to `eager` to avoid causing CLS. + // @see https://web.dev/articles/cls + // @see https://nextjs.org/docs/pages/building-your-application/optimizing/images + return ( + {alt} + ); } return {alt}; diff --git a/next.config.mjs b/next.config.mjs index be1f1400025fd..08a807e3a3e8c 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -27,8 +27,27 @@ const nextConfig = { // We allow the BASE_PATH to be overridden in case that the Website // is being built on a subdirectory (e.g. /nodejs-website) basePath: BASE_PATH, - // We disable image optimisation during static export builds - images: { unoptimized: ENABLE_STATIC_EXPORT }, + 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: [ + { + protocol: 'https', + hostname: 'raw.githubusercontent.com', + port: '', + pathname: '/nodejs/**', + }, + { + protocol: 'https', + hostname: 'user-images.githubusercontent.com', + port: '', + pathname: '/**', + }, + ], + }, // On static export builds we want the output directory to be "build" distDir: ENABLE_STATIC_EXPORT ? 'build' : '.next', // On static export builds we want to enable the export feature diff --git a/next.mdx.use.mjs b/next.mdx.use.mjs index 35ca4ec3f1f09..44581728dd13c 100644 --- a/next.mdx.use.mjs +++ b/next.mdx.use.mjs @@ -97,8 +97,6 @@ export const htmlComponents = { blockquote: Blockquote, // Renders a CodeBox Component for `pre` tags pre: MDXCodeBox, - // When `width` and `height` attributes are provided uses Next.js `Image` component, - // otherwise uses the HTML `img` tag - // @see https://nextjs.org/docs/pages/api-reference/components/image + // Renders an Image Component for `img` tags img: MDXImage, }; From d17aa87a543fb11f90e33627ee4ae64acf63e47d Mon Sep 17 00:00:00 2001 From: Caner Akdas Date: Thu, 7 Mar 2024 02:23:18 +0300 Subject: [PATCH 5/6] chore: Image loading eager to default --- components/MDX/Image/index.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/components/MDX/Image/index.tsx b/components/MDX/Image/index.tsx index f2be687d2d513..42634bb9ad24b 100644 --- a/components/MDX/Image/index.tsx +++ b/components/MDX/Image/index.tsx @@ -5,9 +5,7 @@ import type { FC } from 'react'; const MDXImage: FC = ({ width, height, alt, ...props }) => { if (!width || !height) { // Since `width` and `height` are not provided in the Markdown image format, - // we provide the height and width automatically. Additionally, we set - // loading to `eager` to avoid causing CLS. - // @see https://web.dev/articles/cls + // we provide the height and width automatically. // @see https://nextjs.org/docs/pages/building-your-application/optimizing/images return ( = ({ width, height, alt, ...props }) => { width={0} height={0} sizes="(min-width: 768px) 200vw, 500vw" - loading="eager" className="h-auto w-auto" /> ); From 60e2c9996f37ab76c241fbfa9b169f57fa95aeb3 Mon Sep 17 00:00:00 2001 From: Caner Akdas Date: Fri, 8 Mar 2024 18:39:38 +0300 Subject: [PATCH 6/6] chore: revert image bracket --- pages/en/about/index.mdx | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/pages/en/about/index.mdx b/pages/en/about/index.mdx index 3b37e415eb833..c828578538edd 100644 --- a/pages/en/about/index.mdx +++ b/pages/en/about/index.mdx @@ -4,14 +4,12 @@ layout: about ---
- { - Node.js mascot - } + Node.js mascot
---