feat: Using Next.js Image component in markdown files

[canerakdas]

Description

With this PR, we are starting to use the next/image Image component instead of the HTML img tag in markdown files.

Validation

The img tags added from markdown pages should work correctly.

You can check whether the image uses next/image or not via the extra attributes it adds(decoding,data-nimg,style)

Ex: /en/about

Check List

• I have read the Contributing Guidelines and made commit messages that follow the guideline.
• I have run npx turbo format to ensure the code follows the style guide.
• I have run npx turbo test to check if all tests are passing.
• I have run npx turbo build to check if the website builds without errors.
• I've covered new added functionality with unit tests if necessary.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
nodejs-org	✅ Ready (Inspect)	Visit Preview	Mar 12, 2024 8:04am

[github-actions]

Lighthouse Results

URL	Performance	Accessibility	Best Practices	SEO	Report
/en	🟢 96	🟢 90	🟢 100	🟢 91	🔗
/en/about	🟢 100	🟢 91	🟢 96	🟢 91	🔗
/en/about/previous-releases	🟢 99	🟢 90	🟢 100	🟢 92	🔗
/en/download	🟢 100	🟠 89	🟢 100	🟢 91	🔗
/en/blog	🟢 100	🟢 90	🟢 96	🟢 92	🔗

[github-actions]

Unit Test Coverage Report

Lines	Statements	Branches	Functions
	80.03% (449/561)	79.55% (144/181)	71.17% (79/111)

Unit Test Report

Tests	Skipped	Failures	Errors	Time
90	0 💤	0 ❌	0 🔥	4.414s ⏱️

[canerakdas]

It breaks markdown formatted images, I will add a wrapper component that will support the markup formatted images as well;

Example usage on here;
https://nodejs-fciqu3xpl-openjs.vercel.app/en/about/previous-releases

[ovflowd]

It breaks markdown formatted images, I will add a wrapper component that will support the markup formatted images as well;

Example usage on here; nodejs-fciqu3xpl-openjs.vercel.app/en/about/previous-releases

Like we have with our Link component? You can do it like, use Next Image component if width/height provided otherwise use HTML img component. Or IDK

[canerakdas]

Like we have with our Link component?

Yes, I have updated the PR 🎉

Can I get a re-review for this PR? cc @nodejs/nodejs-website

[styfle]

@canerakdas @ovflowd Why is dangerouslyAllowSVG enabled?

Was something not working when it was disabled?

[canerakdas]

@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

[styfle]

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

[canerakdas]

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!