feat: Using Next.js Image component in markdown files (#6454)

* feat: next/image added into the mdx components

* refactor: Image moved into the html components

* refactor: mdx image component added

* refactor: static img to Image component

* chore: Image loading eager to default

* chore: revert image bracket

components/MDX/Image/index.tsx

@@ -0,0 +1,25 @@
+import type { ImageProps } from 'next/image';
+import Image from 'next/image';
+import type { FC } from 'react';
+
+const MDXImage: FC<ImageProps> = ({ 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.
+    // @see https://nextjs.org/docs/pages/building-your-application/optimizing/images
+    return (
+      <Image
+        {...props}
+        alt={alt}
+        width={0}
+        height={0}
+        sizes="(min-width: 768px) 200vw, 500vw"
+        className="h-auto w-auto"
+      />
+    );
+  }
+
+  return <Image {...props} alt={alt} width={width} height={height} />;
+};
+
+export default MDXImage;

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

next.mdx.use.mjs

@@ -22,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';
@@ -96,4 +97,6 @@ export const htmlComponents = {
   blockquote: Blockquote,
   // Renders a CodeBox Component for `pre` tags
   pre: MDXCodeBox,
+  // Renders an Image Component for `img` tags
+  img: MDXImage,
 };