refactor: move to fn

src/ui/components/cover-img.astro

@@ -1,9 +1,7 @@
 ---
 import { Image } from "@unpic/astro";
-import { getPixels } from "@unpic/pixels";
-import { blurhashToDataUri } from "@unpic/placeholder";
-import { encode } from "blurhash";
 import { cn } from "~/utils/cn";
+import { getImagePlaceholder } from "~/utils/get-image-placeholder";
 
 interface Props {
   src: string;
@@ -15,15 +13,7 @@ interface Props {
 }
 
 const { class: className, src, description, ...otherProps } = Astro.props;
-
-let supportedSrc = src.replace(".webp", ".jpg");
-supportedSrc = supportedSrc.replace("upload/", "upload/w_20,h_15/");
-
-const jpgData = await getPixels(supportedSrc);
-const data = Uint8ClampedArray.from(jpgData.data);
-const blurhash = encode(data, jpgData.width, jpgData.height, 4, 4);
-
-const placeholder = blurhashToDataUri(blurhash);
+const placeholder = await getImagePlaceholder(src);
 ---
 
 <div class={cn(className, "flex flex-col items-center")}>

src/utils/get-image-placeholder.ts

@@ -0,0 +1,18 @@
+import { getPixels } from "@unpic/pixels";
+import { blurhashToDataUri } from "@unpic/placeholder";
+import { encode } from "blurhash";
+
+/**
+ * @param src {string} - Cloudinary Image URL
+ * @returns {Promise<string>} - Blurhash Data URI
+ */
+export async function getImagePlaceholder(src: string): Promise<string> {
+  let supportedSrc = src.replace(".webp", ".jpg");
+  supportedSrc = supportedSrc.replace("upload/", "upload/w_20,h_15/");
+
+  const jpgData = await getPixels(supportedSrc);
+  const data = Uint8ClampedArray.from(jpgData.data);
+  const blurhash = encode(data, jpgData.width, jpgData.height, 4, 4);
+
+  return blurhashToDataUri(blurhash);
+}