Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 7 commits into from
Mar 12, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
dd2f3fa
feat: next/image added into the mdx components
canerakdas Mar 5, 2024
4ea4f3b
refactor: Image moved into the html components
canerakdas Mar 5, 2024
417716f
refactor: mdx image component added
canerakdas Mar 6, 2024
1541d56
refactor: static img to Image component
canerakdas Mar 6, 2024
d17aa87
chore: Image loading eager to default
canerakdas Mar 6, 2024
60e2c99
chore: revert image bracket
canerakdas Mar 8, 2024
6329a69
chore: resolve conflict
canerakdas Mar 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 25 additions & 0 deletions components/MDX/Image/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
23 changes: 21 additions & 2 deletions next.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@canerakdas @ovflowd Why is dangerouslyAllowSVG enabled?

Was something not working when it was disabled?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@styfle For example, we were getting error when we were not able to load the following image on the https://nodejs.org/en/about/previous-releases page

The image we are trying to load;
https://raw.githubusercontent.com/nodejs/Release/main/schedule.svg?sanitize=true

The requested resource "https://raw.githubusercontent.com/nodejs/Release/main/schedule.svg?sanitize=true" has type "image/svg+xml" but dangerouslyAllowSVG is disabled

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@canerakdas Seem like you could add unoptimized=true prop for that image instead of opening the risk for all images with this config.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As far as I know, since this image is generated from Markdown using MDX, I can't directly add unoptimized. prop Instead, I updated the MDXImage component to serve images with the .svg extension as unoptimized

Here is the PR; #7244

Thank you for the feedback!

// 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: '/**',
},
],
},
canerakdas marked this conversation as resolved.
Show resolved Hide resolved
// 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
Expand Down
3 changes: 3 additions & 0 deletions next.mdx.use.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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,
};
Loading