perf: use next/image in changelog

Still have to do it in blog

Author: gregberge

changelogs/new-changes-trigger/index.mdx

@@ -5,11 +5,7 @@ slug: new-changes-trigger
 date: 2024-02-25
 ---
 
-<img
-  className="rounded-lg"
-  src="/assets/changelogs/new-changes-trigger/added-removed.png"
-  alt="Added and removed screenshot from Argos in GitHub commit status"
-/>
+![Added and removed screenshot from Argos in GitHub commit status](/assets/changelogs/new-changes-trigger/added-removed.png)
 
 We've listened to your input on how changes to screenshots within Argos should impact your workflow. With our latest update, Argos now treats the addition and removal of screenshots as diffs. This change ensures that any modifications to your visual assets are highlighted and require user approval, enhancing your control over visual consistency across your projects.
 

lib/changelog-api.tsx

@@ -1,9 +1,11 @@
 import fg from "fast-glob";
 import * as matter from "gray-matter";
 import { compileMDX } from "next-mdx-remote/rsc";
+import Image from "next/image";
 import { readFile } from "node:fs/promises";
 import * as React from "react";
 import rehypeHighlight from "rehype-highlight";
+import rehypeImgSize from "rehype-img-size";
 import remarkFrontmatter from "remark-frontmatter";
 import remarkGfm from "remark-gfm";
 import { z } from "zod";
@@ -40,9 +42,23 @@ export async function getDocMdxSource(filepath: string) {
   const source = await readFile(filepath, "utf-8");
   const result = await compileMDX({
     source,
+    components: {
+      img: ({ src, height, width, alt, ...rest }) => {
+        return (
+          <Image
+            className="rounded-lg"
+            src={src as string}
+            height={height as number}
+            width={width as number}
+            alt={alt as string}
+          />
+        );
+      },
+    },
     options: {
       mdxOptions: {
-        rehypePlugins: [rehypeHighlight],
+        // @ts-ignore
+        rehypePlugins: [rehypeHighlight, [rehypeImgSize, { dir: "public" }]],
         remarkPlugins: [remarkGfm, remarkFrontmatter],
       },
     },

package.json

@@ -37,6 +37,7 @@
     "react-twc": "^1.4.1",
     "react-tweet": "^3.2.0",
     "rehype-highlight": "^6.0.0",
+    "rehype-img-size": "^1.0.1",
     "remark-frontmatter": "^4.0.1",
     "remark-gfm": "^3.0.1",
     "shiki": "^0.14.7",