add cloudinary

app/components/image.tsx

@@ -0,0 +1,59 @@
+import { getImageUrlBuilder } from "#app/utils/image";
+
+interface CloudinaryImageProps
+  extends Omit<
+    React.DetailedHTMLProps<
+      React.ImgHTMLAttributes<HTMLImageElement>,
+      HTMLImageElement
+    >,
+    "src" | "srcSet" | "sizes"
+  > {
+  id: string;
+  widths: number[];
+  sizes: string[];
+}
+export function CloudinaryImage({
+  id,
+  widths,
+  sizes,
+  alt,
+  ...imgProps
+}: CloudinaryImageProps) {
+  const buildImageUrl = getImageUrlBuilder(id);
+  const averageWidth = Math.ceil(
+    widths.reduce((a, s) => a + s) / widths.length,
+  );
+
+  const src = buildImageUrl({
+    transformations: {
+      resize: {
+        width: averageWidth,
+      },
+    },
+  });
+
+  const srcSet = widths
+    .map((width) =>
+      [
+        buildImageUrl({
+          transformations: {
+            resize: {
+              width: width,
+            },
+          },
+        }),
+        `${width}w`,
+      ].join(" "),
+    )
+    .join(", ");
+
+  return (
+    <img
+      {...imgProps}
+      alt={alt}
+      src={src}
+      srcSet={srcSet}
+      sizes={sizes.join(", ")}
+    />
+  );
+}

app/utils/image.ts

@@ -0,0 +1,13 @@
+import {
+  buildImageUrl as _buildImageUrl,
+  setConfig,
+} from "cloudinary-build-url";
+import type { CldOptions } from "@cld-apis/types";
+
+setConfig({
+  cloudName: "nichtsam",
+});
+
+export function getImageUrlBuilder(id: string) {
+  return (cldOptions: CldOptions = {}) => _buildImageUrl(id, cldOptions);
+}

package.json

@@ -39,6 +39,7 @@
     "cachified": "3.5.4",
     "chalk": "5.3.0",
     "class-variance-authority": "0.7.0",
+    "cloudinary-build-url": "0.2.4",
     "clsx": "2.1.0",
     "compression": "1.7.4",
     "cookie": "0.6.0",
@@ -75,6 +76,7 @@
     "zod": "3.22.4"
   },
   "devDependencies": {
+    "@cld-apis/types": "0.1.6",
     "@faker-js/faker": "8.4.1",
     "@remix-run/dev": "2.8.0",
     "@remix-run/eslint-config": "2.8.0",