feat: add Cloudimage support (#107)

* feat: add Cloudimage support

* add to subdomains

data/subdomains.json

@@ -7,5 +7,6 @@
   "cloudinary.com": "cloudinary",
   "kxcdn.com": "keycdn",
   "imgeng.in": "imageengine",
-  "imagekit.io": "imagekit"
+  "imagekit.io": "imagekit",
+  "cloudimg.io": "cloudimage"
 }

demo/src/examples.json

@@ -71,5 +71,9 @@
   "imagekit": [
     "Imagekit",
     "https://ik.imagekit.io/demo/medium_cafe_B1iTdD0C.jpg"
+  ],
+  "cloudimage": [
+    "Cloudimage",
+    "https://doc.cloudimg.io/sample.li/flat1.jpg?w=450&q=90"
   ]
 }

src/parse.ts

@@ -4,6 +4,7 @@ import { parse as builder } from "./transformers/builder.io.ts";
 import { parse as imgix } from "./transformers/imgix.ts";
 import { parse as shopify } from "./transformers/shopify.ts";
 import { parse as wordpress } from "./transformers/wordpress.ts";
+import { parse as cloudimage } from "./transformers/cloudimage.ts";
 import { parse as cloudinary } from "./transformers/cloudinary.ts";
 import { parse as cloudflare } from "./transformers/cloudflare.ts";
 import { parse as bunny } from "./transformers/bunny.ts";
@@ -29,6 +30,7 @@ export const parsers = {
   "builder.io": builder,
   shopify,
   wordpress,
+  cloudimage,
   cloudinary,
   cloudflare,
   bunny,

src/transform.ts

@@ -4,6 +4,7 @@ import { transform as builderio } from "./transformers/builder.io.ts";
 import { transform as imgix } from "./transformers/imgix.ts";
 import { transform as shopify } from "./transformers/shopify.ts";
 import { transform as wordpress } from "./transformers/wordpress.ts";
+import { transform as cloudimage } from "./transformers/cloudimage.ts";
 import { transform as cloudinary } from "./transformers/cloudinary.ts";
 import { transform as cloudflare } from "./transformers/cloudflare.ts";
 import { transform as bunny } from "./transformers/bunny.ts";
@@ -30,6 +31,7 @@ export const getTransformer = (cdn: ImageCdn) => ({
   "builder.io": builderio,
   shopify,
   wordpress,
+  cloudimage,
   cloudinary,
   bunny,
   storyblok,

src/transformers/cloudimage.test.ts

@@ -0,0 +1,54 @@
+import { assertEquals } from "https://deno.land/[email protected]/testing/asserts.ts";
+import { ParsedUrl } from "../types.ts";
+import { parse, transform, CloudimageParams } from "./cloudimage.ts";
+
+Deno.test("Cloudimage parser", async (t) => {
+  await t.step("parses a URL", () => {
+    const parsed = parse("https://doc.cloudimg.io/sample.li/flat1.jpg?w=450&h=200&q=90");
+    const expected: ParsedUrl<CloudimageParams> = {
+      base: "https://doc.cloudimg.io/sample.li/flat1.jpg",
+      cdn: "cloudimage",
+      width: 450,
+      height: 200,
+      params: {
+        quality: 90
+      },
+    };
+    assertEquals(parsed, expected);
+  });
+
+  await t.step("parses a URL without transforms", () => {
+    const parsed = parse("https://doc.cloudimg.io/sample.li/flat1.jpg");
+    const expected: ParsedUrl<CloudimageParams> = {
+      base: "https://doc.cloudimg.io/sample.li/flat1.jpg",
+      cdn: "cloudimage",
+      width: undefined,
+      height: undefined,
+      params: {
+        quality: undefined
+      },
+    };
+    assertEquals(parsed, expected);
+  });
+});
+
+Deno.test("Cloudimage transformer", async (t) => {
+  await t.step("should format a URL", () => {
+    const result = transform({
+      url: "https://doc.cloudimg.io/sample.li/flat1.jpg?q=90",
+      width: 450,
+      height: 200
+    });
+    assertEquals(
+      result?.toString(),
+      "https://doc.cloudimg.io/sample.li/flat1.jpg?q=90&w=450&h=200",
+    );
+  });
+  await t.step("should not set height if not provided", () => {
+    const result = transform({ url: "https://doc.cloudimg.io/sample.li/flat1.jpg?q=90", width: 450 });
+    assertEquals(
+      result?.toString(),
+      "https://doc.cloudimg.io/sample.li/flat1.jpg?q=90&w=450",
+    );
+  });
+});

src/transformers/cloudimage.ts

@@ -0,0 +1,38 @@
+import { UrlParser, UrlTransformer } from "../types.ts";
+import {
+  getNumericParam,
+  setParamIfDefined,
+  toUrl,
+} from "../utils.ts";
+
+export interface CloudimageParams {
+  quality?: number;
+}
+
+export const parse: UrlParser<CloudimageParams> = (url) => {
+  const parsedUrl = toUrl(url);
+
+  const width = getNumericParam(parsedUrl, "w") || undefined;
+  const height = getNumericParam(parsedUrl, "h") || undefined;
+  const quality = getNumericParam(parsedUrl, "q") || undefined;
+  parsedUrl.search = "";
+  return {
+    width,
+    height,
+    base: parsedUrl.toString(),
+    params: {
+      quality
+    },
+    cdn: "cloudimage",
+  };
+};
+
+export const transform: UrlTransformer = (
+  { url: originalUrl, width, height },
+) => {
+  const url = toUrl(originalUrl);
+  setParamIfDefined(url, "w", width, true, true);
+  setParamIfDefined(url, "h", height, true, true);
+  setParamIfDefined(url, "q", getNumericParam(url, "q"), true);
+  return url;
+};

src/types.ts

@@ -78,6 +78,7 @@ export interface UrlParser<
 export type ImageCdn =
   | "contentful"
   | "builder.io"
+  | "cloudimage"
   | "cloudinary"
   | "cloudflare"
   | "imgix"