feat(mdx-loader): read image dimensions when processing Markdown

[Josh-Cena]

Motivation

Fix #3081. If we read the image's dimensions and ensure that the generated DOM has the aspect ratio, the browser can leave enough whitespace.

Have you read the Contributing Guidelines on pull requests?

Yes

Test Plan

Get an incognito to bypass cache. Visit these two URLs:

• https://deploy-preview-6339--docusaurus-2.netlify.app/blog/2021/05/12/announcing-docusaurus-two-beta/#whats-next
• https://docusaurus.io/blog/2021/05/12/announcing-docusaurus-two-beta#whats-next

[netlify]

✔️ [V2]

🔨 Explore the source changes: 884a466

🔍 Inspect the deploy log: https://app.netlify.com/sites/docusaurus-2/deploys/61e261d4a651c300088e07b1

😎 Browse the preview: https://deploy-preview-6339--docusaurus-2.netlify.app

[github-actions]

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🟠 Performance	87
🟢 Accessibility	98
🟢 Best practices	93
🟢 SEO	100
🟢 PWA	92

Lighthouse ran on https://deploy-preview-6339--docusaurus-2.netlify.app/

[github-actions]

Size Change: -25 B (0%)

Total Size: 677 kB

ℹ️ View Unchanged

Filename	Size	Change
website/.docusaurus/globalData.json	41.6 kB	0 B
website/build/assets/css/styles.********.css	103 kB	-25 B (0%)
website/build/assets/js/main.********.js	503 kB	0 B
website/build/index.html	29.6 kB	0 B

_{compressed-size-action}

[Josh-Cena]

This test is removed. We can't guarantee what this rule will be merged into because other bundled CSS may change. We can only guarantee site CSS is inserted after client module CSS.

[slorber]

Thanks 👍

I couldn't repro the issue on the prod blog post 🤷‍♂️ but still LGTM 👍

[Josh-Cena]

You probably have to both clear the cache and turn on Network throttling... Took me a while to reproduce.

[slorber]

already tried that, didn't work, same effect on both links

[Mauriceac]

Hi!

I've been following this issue for some time. I'm very grateful for the "Read image dimensions when processing Markdown" fix. But it doesn't seem to work completely for me. After updating to the latest version (2.0.0-beta.15), I still have some problems landing on the appropriate header on a page with various images.

For example, if I put the URL directly in the web browser, the page opens up in the exact place.
But, if I use a link inside the documentation to go to the page, the page opens up about a quarter to half a page above (refreshing brings me to the right place).

Here is an example:

URL (works perfectly):
https://doc.cotalker.com/docs/documentation/admin/workflows/settings_panels/workflowgroup-create-edit#settings

Below is a blog page within my documentation with the above link in the form of a button. Pressing it will leave me above the indicated header (cache must be cleared or working in incognito mode):
https://doc.cotalker.com/blog/2021/10/03/taskview

Just in case, here is the repository the documentation is hosted in:
https://github.com/Cotalker/documentation

THANK YOU!

[slorber]

@Mauriceac this is because you are not using markdown images:

https://github.com/Cotalker/documentation/blob/main/docs/documentation/admin/workflows/settings_panels/workflowgroup-create-edit.md

<img
  alt="edit workflow group"
  className="img_sizing item shadow--tl"
  src={useBaseUrl("img/admin_workflowgroup_edit_00a.png")}
/>

We can't easily automatically apply width/height to those images declared through JSX., particularly when the string can be provided in fancy JS ways such as:

<img
  alt="edit workflow group"
  className="img_sizing item shadow--tl"
  src={useBaseUrl("my-image-folder/" + imageIndex(3))}
/>

We'll try to provide an official Image component later:

<Img
  alt="edit workflow group"
  className="img_sizing item shadow--tl"
  src="img/admin_workflowgroup_edit_00a.png"
/>

Until then, if you want width/height to be applied, there's no other choice than using md images unfortunately.

You can try to write your own webpack loader that gives you the size of the image so that you can write something like

import myImage from "@site/static/img/admin_workflowgroup_edit_00a.png";

<img
  alt="edit workflow group"
  className="img_sizing item shadow--tl"
  src={myImage.url}
  width={myImage.width}
  height={myImage.height}
/>;

[Mauriceac]

@slorber Thank you very much for such a quick response and solution!
And thank you for making Docusaurus the best static-site generator!