Set dimensions on <img> tags automatically

The large images on projects page cause a layout shift when they load,
this will fix that.

package.json

@@ -29,6 +29,7 @@
     "@resvg/resvg-js": "^2.6.0",
     "hast-util-to-jsx-runtime": "^2.3.0",
     "html-entities": "^2.4.0",
+    "image-size": "^1.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-markdown": "^9.0.1",

src/components/Img.tsx

@@ -0,0 +1,28 @@
+import { imageSize } from "image-size";
+import path from "path";
+import { STATIC_DIR } from "../consts.js";
+import React from "react";
+
+export function Img({
+  src,
+  ...rest
+}: {
+  src?: string | undefined;
+  className?: string | undefined;
+  alt?: string | undefined;
+  width?: string | number | undefined;
+  height?: string | number | undefined;
+}) {
+  if (src === undefined) {
+    throw new Error("Image without src not supported");
+  }
+  // For local files, read the file and determine the dimensions automatically.
+  // Also acts as a check that the file exists. Since we convert to absolute
+  // URLs for atom feeds, this will not trigger for those.
+  if (!/http(s)?:\/\//.test(src)) {
+    const { width, height } = imageSize(path.join(STATIC_DIR, src));
+    rest = { width, height, ...rest };
+  }
+
+  return <img src={src} loading="lazy" {...rest} />;
+}

src/components/markdown/BlogPostContent.tsx

@@ -6,6 +6,7 @@ import remarkMath from "remark-math";
 import { AutolinkedHeading } from "./AutolinkedHeading.js";
 import { SyntaxHighlightedCode } from "./SyntaxHighlightedCode.js";
 import { Link } from "../Link.js";
+import { Img } from "../Img.js";
 
 export function BlogPostContent({
   content,
@@ -40,6 +41,7 @@ export function BlogPostContent({
       components={{
         code: SyntaxHighlightedCode,
         a: Link,
+        img: Img,
         ...(autolinkHeadings
           ? { h2: AutolinkedHeading, h3: AutolinkedHeading }
           : {}),

src/pages/HomePage.tsx

@@ -4,13 +4,14 @@ import { SocialIcons } from "../components/SocialIcons.js";
 import { BuildContext } from "../components/BuildContext.js";
 import { BLOG_PATH, PROJECTS_PATH, RESUME_PATH } from "../consts.js";
 import { Link } from "../components/Link.js";
+import { Img } from "../components/Img.js";
 
 function Home() {
   const separator = <> · </>;
   return (
     <div className="flex-col m2">
       <div className="flex-col">
-        <img className="m1 circle photo" src="assets/me.jpg" alt="me" />
+        <Img className="m1 circle photo" src="/assets/me.jpg" alt="me" />
       </div>
       <div className="flex-col">
         <div className="m1">

src/pages/ProjectsPage.tsx

@@ -5,6 +5,7 @@ import { PROJECTS_PATH, RESUME_PATH } from "../consts.js";
 import { Header } from "../components/Header.js";
 import { Footer } from "../components/Footer.js";
 import { Link } from "../components/Link.js";
+import { Img } from "../components/Img.js";
 
 function ProjectTitle({
   name,
@@ -80,7 +81,7 @@ function Project({
 function Screenshot({ src }: { src: string }) {
   return (
     <Link className="flex-row pt1 pb1" href={src}>
-      <img src={src} />
+      <Img src={src} />
     </Link>
   );
 }

src/pages/ResumePage.tsx

@@ -5,6 +5,7 @@ import { PROJECTS_PATH, RESUME_PATH } from "../consts.js";
 import { Header } from "../components/Header.js";
 import { Link } from "../components/Link.js";
 import { Footer } from "../components/Footer.js";
+import { Img } from "../components/Img.js";
 
 function Heading() {
   return (
@@ -13,7 +14,7 @@ function Heading() {
         <div className="bold">Shrey Banga</div>
         <div className="font-medium dim">banga.shrey@gmail.com</div>
       </div>
-      <img className="circle photo-small" src="../assets/me.jpg" alt="me" />
+      <Img className="m1 circle photo-small" src="/assets/me.jpg" alt="me" />
     </div>
   );
 }

static/style.css

@@ -280,6 +280,7 @@ pre > pre {
 
 img {
   max-width: 100%;
+  height: auto;
 }
 
 .photo {