keii.dev
+25
components/MDX/Image/index.tsx
+25
components/MDX/Image/index.tsx
···
1
+
import type { ImageProps } from 'next/image';
2
+
import Image from 'next/image';
3
+
import type { FC } from 'react';
4
+
5
+
const MDXImage: FC<ImageProps> = ({ width, height, alt, ...props }) => {
6
+
if (!width || !height) {
7
+
// Since `width` and `height` are not provided in the Markdown image format,
8
+
// we provide the height and width automatically.
9
+
// @see https://nextjs.org/docs/pages/building-your-application/optimizing/images
10
+
return (
11
+
<Image
12
+
{...props}
13
+
alt={alt}
14
+
width={0}
15
+
height={0}
16
+
sizes="(min-width: 768px) 200vw, 500vw"
17
+
className="h-auto w-auto"
18
+
/>
19
+
);
20
+
}
21
+
22
+
return <Image {...props} alt={alt} width={width} height={height} />;
23
+
};
24
+
25
+
export default MDXImage;
+21
-2
next.config.mjs
+21
-2
next.config.mjs
···
27
27
// We allow the BASE_PATH to be overridden in case that the Website
28
28
// is being built on a subdirectory (e.g. /nodejs-website)
29
29
basePath: BASE_PATH,
30
-
// We disable image optimisation during static export builds
31
-
images: { unoptimized: ENABLE_STATIC_EXPORT },
30
+
images: {
31
+
// We disable image optimisation during static export builds
32
+
unoptimized: ENABLE_STATIC_EXPORT,
33
+
// We allow SVGs to be used as images
34
+
dangerouslyAllowSVG: true,
35
+
// We add it to the remote pattern for the static images we use from GitHub
36
+
remotePatterns: [
37
+
{
38
+
protocol: 'https',
39
+
hostname: 'raw.githubusercontent.com',
40
+
port: '',
41
+
pathname: '/nodejs/**',
42
+
},
43
+
{
44
+
protocol: 'https',
45
+
hostname: 'user-images.githubusercontent.com',
46
+
port: '',
47
+
pathname: '/**',
48
+
},
49
+
],
50
+
},
32
51
// On static export builds we want the output directory to be "build"
33
52
distDir: ENABLE_STATIC_EXPORT ? 'build' : '.next',
34
53
// On static export builds we want to enable the export feature
+3
next.mdx.use.mjs
+3
next.mdx.use.mjs
···
22
22
import UpcomingMeetings from './components/MDX/Calendar/UpcomingMeetings';
23
23
import MDXCodeBox from './components/MDX/CodeBox';
24
24
import MDXCodeTabs from './components/MDX/CodeTabs';
25
+
import MDXImage from './components/MDX/Image';
25
26
import SearchPage from './components/MDX/SearchPage';
26
27
import WithBadge from './components/withBadge';
27
28
import WithBanner from './components/withBanner';
···
96
97
blockquote: Blockquote,
97
98
// Renders a CodeBox Component for `pre` tags
98
99
pre: MDXCodeBox,
100
+
// Renders an Image Component for `img` tags
101
+
img: MDXImage,
99
102
};