[ENG-1412] Fix blog/docs image sizes (#1758)

* fix

* Add image placeholder to NextImage component

apps/landing/contentlayer.config.ts

@@ -14,6 +14,10 @@ import rehypeSlug from 'rehype-slug';
 import remarkGfm from 'remark-gfm';
 // support for math
 import remarkMath from 'remark-math';
+import remarkMdxImages from 'remark-mdx-images';
+
+// adds width and height to images
+import rehypeImageSize from './src/plugins/rehype-image-size';
 
 // Blog
 export const Post = defineDocumentType(() => ({
@@ -112,8 +116,13 @@ export default makeSource({
 	contentDirInclude: ['docs', 'apps/landing/posts'],
 	documentTypes: [Post, Document],
 	mdx: {
-		remarkPlugins: [remarkGfm, remarkMath],
+		remarkPlugins: [
+			remarkGfm,
+			remarkMath,
+			remarkMdxImages // does this even do anything??
+		],
 		rehypePlugins: [
+			[rehypeImageSize, { root: `${process.cwd()}/public` }],
 			rehypeSlug,
 			rehypeAutolinkHeadings,
 			rehypeKatex,

apps/landing/package.json

@@ -22,6 +22,7 @@
 		"contentlayer": "^0.3.4",
 		"dayjs": "^1.11.10",
 		"framer-motion": "^10.16.4",
+		"image-size": "^1.0.2",
 		"katex": "^0.16.9",
 		"markdown-to-jsx": "^7.3.2",
 		"next": "13.5.6",
@@ -42,9 +43,11 @@
 		"rehype-slug": "^5.1.0",
 		"remark-gfm": "^3.0.1",
 		"remark-math": "^5.1.1",
+		"remark-mdx-images": "^2.0.0",
 		"tailwind-merge": "^1.14.0",
 		"three": "^0.157.0",
 		"tsparticles": "^2.12.0",
+		"unist-util-visit": "^5.0.0",
 		"zod": "~3.22.4"
 	},
 	"devDependencies": {

apps/landing/src/components/mdx/index.tsx

@@ -1,8 +1,13 @@
+import { MDXComponents } from 'mdx/types';
 import NextImage, { ImageProps } from 'next/image';
 
 import Notice from './Notice';
 
-const Image = (props: ImageProps) => <NextImage {...props} />;
+const Image = (props: ImageProps) => <NextImage placeholder="blur" {...props} />;
 
-export const BlogMDXComponents = { Image };
+export const BlogMDXComponents = {
-export const DocMDXComponents = { Image, Notice };
+	img: Image, // we remap 'img' to 'Image'
+	Image
+} as MDXComponents;
+
+export const DocMDXComponents = { img: Image, Image, Notice } as MDXComponents;

apps/landing/src/plugins/rehype-image-size.js

@@ -0,0 +1,55 @@
+/**
+ * rehype-image-size.js
+ *
+ * Requires:
+ * - image-size
+ * - unist-util-visit
+ */
+import getImageSize from 'image-size';
+import { visit } from 'unist-util-visit';
+
+/**
+ * Analyze local MDX images and add `width` and `height` attributes to the
+ * generated `img` elements.
+ * Supports both markdown-style images and MDX <Image /> components.
+ * @param {string} options.root - The root path when reading the image file.
+ */
+export const rehypeImageSize = (options) => {
+	return (tree) => {
+		// This matches all images that use the markdown standard format ![label](path).
+		visit(tree, { type: 'element', tagName: 'img' }, (node) => {
+			if (node.properties.width || node.properties.height) {
+				return;
+			}
+			const imagePath = `${options?.root ?? ''}${node.properties.src}`;
+			const imageSize = getImageSize(imagePath);
+			node.properties.width = imageSize.width;
+			node.properties.height = imageSize.height;
+		});
+		// This matches all MDX' <Image /> components.
+		visit(tree, { type: 'mdxJsxFlowElement', name: 'Image' }, (node) => {
+			const srcAttr = node.attributes?.find((attr) => attr.name === 'src');
+			const imagePath = `${options?.root ?? ''}${srcAttr.value}`;
+			const imageSize = getImageSize(imagePath);
+			const widthAttr = node.attributes?.find((attr) => attr.name === 'width');
+			const heightAttr = node.attributes?.find((attr) => attr.name === 'height');
+			if (widthAttr || heightAttr) {
+				// If `width` or `height` have already been set explicitly we
+				// don't want to override them.
+				return;
+			}
+			node.attributes.push({
+				type: 'mdxJsxAttribute',
+				name: 'width',
+				value: imageSize.width
+			});
+			node.attributes.push({
+				type: 'mdxJsxAttribute',
+				name: 'height',
+				value: imageSize.height
+			});
+		});
+	};
+};
+
+export default rehypeImageSize;

apps/landing/tsconfig.json

@@ -29,6 +29,7 @@
 		]
 	},
 	"include": [
+		"src/plugins",
 		"next-env.d.ts",
 		"**/*.ts",
 		"**/*.tsx",

pnpm-lock.yaml

@@ -184,6 +184,9 @@ importers:
       framer-motion:
         specifier: ^10.16.4
         version: 10.16.4(react-dom@18.2.0)(react@18.2.0)
+      image-size:
+        specifier: ^1.0.2
+        version: 1.0.2
       katex:
         specifier: ^0.16.9
         version: 0.16.9
@@ -244,6 +247,9 @@ importers:
       remark-math:
         specifier: ^5.1.1
         version: 5.1.1
+      remark-mdx-images:
+        specifier: ^2.0.0
+        version: 2.0.0
       tailwind-merge:
         specifier: ^1.14.0
         version: 1.14.0
@@ -253,6 +259,9 @@ importers:
       tsparticles:
         specifier: ^2.12.0
         version: 2.12.0
+      unist-util-visit:
+        specifier: ^5.0.0
+        version: 5.0.0
       zod:
         specifier: ~3.22.4
         version: 3.22.4
@@ -4284,7 +4293,7 @@ packages:
       magic-string: 0.27.0
       react-docgen-typescript: 2.2.2(typescript@5.2.2)
       typescript: 5.2.2
-      vite: 4.5.0(less@4.2.0)
+      vite: 4.5.0(@types/node@18.17.19)
 
   /@jridgewell/gen-mapping@0.3.3:
     resolution: {integrity: sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==}
@@ -7317,7 +7326,7 @@ packages:
       magic-string: 0.30.5
       rollup: 3.29.4
       typescript: 5.2.2
-      vite: 4.5.0(less@4.2.0)
+      vite: 4.5.0(@types/node@18.17.19)
     transitivePeerDependencies:
       - encoding
       - supports-color
@@ -7670,7 +7679,7 @@ packages:
       react: 18.2.0
       react-docgen: 6.0.4
       react-dom: 18.2.0(react@18.2.0)
-      vite: 4.5.0(less@4.2.0)
+      vite: 4.5.0(@types/node@18.17.19)
     transitivePeerDependencies:
       - '@preact/preset-vite'
       - encoding
@@ -8769,7 +8778,7 @@ packages:
       '@babel/plugin-transform-react-jsx-source': 7.22.5(@babel/core@7.23.2)
       magic-string: 0.27.0
       react-refresh: 0.14.0
-      vite: 4.5.0(less@4.2.0)
+      vite: 4.5.0(@types/node@18.17.19)
     transitivePeerDependencies:
       - supports-color
 
@@ -18207,6 +18216,15 @@ packages:
       toml: 3.0.0
     dev: false
 
+  /remark-mdx-images@2.0.0:
+    resolution: {integrity: sha512-Eh9sutDjzBPRBMnD7C9tn8DdqCaVNFo3rrqEryqPBJzMZ33i/MMO68ucINsOP3lNGSsCA2N2X+Zws1pHphWSpg==}
+    engines: {node: '>=14.0.0'}
+    dependencies:
+      '@types/mdast': 3.0.14
+      unified: 10.1.2
+      unist-util-visit: 4.1.2
+    dev: false
+
   /remark-mdx@2.3.0:
     resolution: {integrity: sha512-g53hMkpM0I98MU266IzDFMrTD980gNF3BJnkyFcmN+dD873mQeD5rdMO3Y2X+x8umQfbSE0PcoEDl7ledSA+2g==}
     dependencies:
@@ -20865,7 +20883,6 @@ packages:
       rollup: 3.29.4
     optionalDependencies:
       fsevents: 2.3.3
-    dev: true
 
   /vite@4.5.0(less@4.2.0):
     resolution: {integrity: sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==}
@@ -20901,6 +20918,7 @@ packages:
       rollup: 3.29.4
     optionalDependencies:
       fsevents: 2.3.3
+    dev: true
 
   /vite@4.5.0(sass@1.69.5):
     resolution: {integrity: sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==}