Use CldImage

packages/sushichan.live/package.json

@@ -31,6 +31,7 @@
     "@astrojs/rss": "4.0.10",
     "@astrojs/sitemap": "3.2.1",
     "@astrojs/tailwind": "5.1.4",
+    "@cloudinary-util/util": "4.1.0",
     "@expressive-code/plugin-collapsible-sections": "0.38.3",
     "@formkit/tempo": "0.1.2",
     "@iconify/iconify": "3.1.1",
@@ -52,6 +53,7 @@
     "mdast-util-to-string": "4.0.0",
     "nprogress": "0.2.0",
     "open-graph-scraper-lite": "2.1.0",
+    "pkg-dir": "8.0.0",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "react-player": "2.16.0",

packages/sushichan.live/src/components/ui/CloudinaryImage.astro

@@ -1,13 +1,11 @@
 ---
-import type { HTMLAttributes } from "astro/types";
+import type { CldImageProps } from "astro-cloudinary";
 
-import { cloudinaryLoader, getCloudinaryImageSize } from "../../lib/cloudinary";
-import Image from "../element/Image.astro";
+import { getPublicId } from "@cloudinary-util/util";
+import { CldImage } from "astro-cloudinary";
+import { getEntry } from "astro:content";
 
-type ImgProps = Omit<
-  HTMLAttributes<"img">,
-  "alt" | "height" | "priority" | "quality" | "src" | "width"
->;
+type ImgProps = CldImageProps;
 
 export interface Props extends ImgProps {
   alt?: string;
@@ -18,31 +16,22 @@ export interface Props extends ImgProps {
 
 const { alt, quality = 75, src, ...props } = Astro.props;
 
-const rawSize = await getCloudinaryImageSize(src);
-const altIsEmpty = alt === "" || alt === undefined;
+const pubId = getPublicId(src) ?? "";
+
+const asset = await getEntry("cldImages", pubId);
 
-const size = (() => {
-  const MAX_WIDTH = 840;
-  let w = rawSize.width;
-  let h = rawSize.height;
-  if (w > MAX_WIDTH) {
-    h *= MAX_WIDTH / w;
-    w = MAX_WIDTH;
-  }
-  return { height: h, width: w };
-})();
-
-const optimizedSrc = cloudinaryLoader({
-  quality: quality,
-  src,
-  width: size.width,
-});
+const altIsEmpty = alt === "" || alt === undefined;
 ---
 
-<Image
-  alt={altIsEmpty ? "" : alt}
-  height={size.height}
-  src={optimizedSrc}
-  width={size.width}
-  {...props}
-/>
+{
+  asset && (
+    <CldImage
+      alt={altIsEmpty ? "" : alt}
+      height={asset.data.height}
+      quality={quality}
+      src={asset.data.public_id}
+      width={asset.data.width}
+      {...props}
+    />
+  )
+}

packages/sushichan.live/src/content/config.ts

@@ -25,7 +25,7 @@ const posts = defineCollection({
 });
 
 const cldImages = defineCollection({
-  loader: cldAssetsLoader(),
+  loader: cldAssetsLoader({ limit: 2000 }),
 });
 
 export const collections = { cldImages: cldImages, posts: posts };