imgix-url-builder 0.0.2 → 0.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -70,42 +70,497 @@ const buildWidthSrcSet = (url, { widths, ...params }) => {
70
70
  };
71
71
 
72
72
  class SecureClient {
73
+ /**
74
+ * Creates a new `SecureClient` instance for an Imgix domain.
75
+ *
76
+ * @param options - Options to instantiate a new client.
77
+ *
78
+ * @returns A `SecureClient` instance for the given Imgix domain.
79
+ */
73
80
  constructor(options) {
74
81
  this.baseURL = options.baseURL;
75
82
  this.secureURLToken = options.secureURLToken;
76
83
  }
84
+ /**
85
+ * Builds a Web Proxy URL that proxies a non-Imgix URL to Imgix. The client's
86
+ * Imgix domain must be configured as a Web Proxy source. All Web Proxy URLs
87
+ * will be signed automatically.
88
+ *
89
+ * **Important**: The given URL must not be URI encoded. If it is, decode it
90
+ * before passing it to `buildWebProxyURL()`.
91
+ *
92
+ * @example
93
+ *
94
+ * ```ts
95
+ * const client = new SecureClient({
96
+ * baseURL: "https://example.imgix.net",
97
+ * secureURLToken: "example-token",
98
+ * });
99
+ * const url = client.buildWebProxyURL("https://www.this.com/pic.jpg", {
100
+ * width: 400,
101
+ * });
102
+ * // => https://example.imgix.net/https%3A%2F%2Fwww.this.com%2Fpic.jpg?width=400&s=def3e221c3f4c4debda091b8e49420ea
103
+ * ```
104
+ *
105
+ * @param url - Full absolute URL to the source image to proxy.
106
+ * @param params - An object of Imgix URL API parameters.
107
+ *
108
+ * @returns An Imgix url proxying `url` to the client's Imgix domain.
109
+ */
77
110
  buildWebProxyURL(url, params = {}) {
78
111
  return this.buildSignedURLForPath(encodeURIComponent(url), params);
79
112
  }
113
+ /**
114
+ * Builds a URL to an Imgix image with Imgix URL API parameters for the
115
+ * client's base URL.
116
+ *
117
+ * @example
118
+ *
119
+ * ```ts
120
+ * const client = new SecureClient({
121
+ * baseURL: "https://example.imgix.net",
122
+ * secureURLToken: "example-token",
123
+ * });
124
+ * const url = client.buildURLForPath("/image.png", { width: 400 });
125
+ * // => https://example.imgix.net/image.png?width=400&s=def3e221c3f4c4debda091b8e49420ea
126
+ * ```
127
+ *
128
+ * @example
129
+ *
130
+ * ```ts
131
+ * const client = new SecureClient({
132
+ * baseURL: "https://example.imgix.net/folder",
133
+ * secureURLToken: "example-token",
134
+ * });
135
+ * const url = client.buildURLForPath("./image.png", { width: 400 });
136
+ * // => https://example.imgix.net/folder/image.png?width=400&s=f12c7c39333410c10c2930b57116a943
137
+ * ```
138
+ *
139
+ * @param path - Path to the image relative to the client's base URL.
140
+ * @param params - An object of Imgix URL API parameters.
141
+ *
142
+ * @returns The full absolute URL to the image with the given Imgix URL API
143
+ * parameters applied.
144
+ */
80
145
  buildSignedURLForPath(path, params = {}) {
81
146
  return this.signURL(this.buildURLForPath(path, params));
82
147
  }
148
+ /**
149
+ * Builds a URL to an Imgix image with Imgix URL API parameters for the
150
+ * client's base URL.
151
+ *
152
+ * Note: The returned URL is not signed. See `buildSignedURL` if a signature
153
+ * is required.
154
+ *
155
+ * @example
156
+ *
157
+ * ```ts
158
+ * const client = new SecureClient({
159
+ * baseURL: "https://example.imgix.net",
160
+ * secureURLToken: "example-token",
161
+ * });
162
+ * const url = client.buildURLForPath("/image.png", { width: 400 });
163
+ * // => https://example.imgix.net/image.png?width=400
164
+ * ```
165
+ *
166
+ * @example
167
+ *
168
+ * ```ts
169
+ * const client = new SecureClient({
170
+ * baseURL: "https://example.imgix.net/folder",
171
+ * secureURLToken: "example-token",
172
+ * });
173
+ * const url = client.buildURLForPath("./image.png", { width: 400 });
174
+ * // => https://example.imgix.net/folder/image.png?width=400
175
+ * ```
176
+ *
177
+ * @param path - Path to the image relative to the client's base URL.
178
+ * @param params - An object of Imgix URL API parameters.
179
+ *
180
+ * @returns The full absolute URL to the image with the given Imgix URL API
181
+ * parameters applied.
182
+ */
83
183
  buildURLForPath(path, params = {}) {
84
184
  return buildURL(`${new URL(path, this.baseURL)}`, params);
85
185
  }
186
+ /**
187
+ * Builds a URL to an Imgix image with Imgix URL API parameters. The URL is
188
+ * signed by appending a signature to the URL parameters. This locks the URL
189
+ * and its parameters to the signature to prevent URL tampering.
190
+ *
191
+ * The given URL must be a full absolute URL containing the protocol and
192
+ * domain.
193
+ *
194
+ * URL parameters already applied to the image will be retained. To remove
195
+ * existing parameters, set the parameter to `undefined` in the `params`
196
+ * argument.
197
+ *
198
+ * @example
199
+ *
200
+ * ```ts
201
+ * const url = client.buildSignedURL(
202
+ * "https://example.imgix.net/image.png",
203
+ * { width: 400 },
204
+ * );
205
+ * // => https://example.imgix.net/image.png?width=400&s=def3e221c3f4c4debda091b8e49420ea
206
+ * ```
207
+ *
208
+ * @example
209
+ *
210
+ * ```ts
211
+ * const url = client.buildSignedURL(
212
+ * "https://example.imgix.net/image.png?width=400",
213
+ * { height: 300 },
214
+ * );
215
+ * // => https://example.imgix.net/image.png?width=400&height=300&s=f12c7c39333410c10c2930b57116a943
216
+ * ```
217
+ *
218
+ * @param url - Full absolute URL to the Imgix image.
219
+ * @param params - An object of Imgix URL API parameters.
220
+ *
221
+ * @returns `url` with the given Imgix URL API parameters applied.
222
+ *
223
+ * @see Imgix URL API reference: https://docs.imgix.com/apis/rendering
224
+ * @see Details on securing Imgix images: https://docs.imgix.com/setup/securing-images
225
+ */
86
226
  buildSignedURL(url, params = {}) {
87
227
  return buildSignedURL(url, this.secureURLToken, params);
88
228
  }
229
+ /**
230
+ * Signs an Imgix image URL by appending a signature to the URL parameters.
231
+ * This locks the URL and its parameters to the signature to prevent URL
232
+ * tampering.
233
+ *
234
+ * @example
235
+ *
236
+ * ```ts
237
+ * const url = client.signURL(
238
+ * "https://example.imgix.net/image.png?width=400",
239
+ * );
240
+ * // => https://example.imgix.net/image.png?width=400&s=def3e221c3f4c4debda091b8e49420ea
241
+ * ```
242
+ *
243
+ * @param url - Full absolute URL to the Imgix image to sign.
244
+ *
245
+ * @returns `url` with a signature appended via an `s` URL parameter.
246
+ *
247
+ * @see Details on securing Imgix images: https://docs.imgix.com/setup/securing-images
248
+ */
89
249
  signURL(url) {
90
250
  return signURL(url, this.secureURLToken);
91
251
  }
252
+ /**
253
+ * Builds an `<img>` `srcset` attribute value for a given set of widths. It
254
+ * can also optinally apply Imgix URL API parameters to the URLs. The URLs are
255
+ * signed by appending a signature to their URL parameters. This locks the
256
+ * URLs and their parameters to the signature to prevent URL tampering.
257
+ *
258
+ * The `width` URL parameter will be applied for each `srcset` entry. If a
259
+ * `width` or `w` parameter is provided to the `params` parameter, it will be
260
+ * ignored.
261
+ *
262
+ * @example
263
+ *
264
+ * ```ts
265
+ * const srcset = client.buildSignedWidthSrcSet(
266
+ * "https://example.imgix.net/image.png",
267
+ * { widths: [400, 800, 1600] },
268
+ * );
269
+ * // => https://example.imgix.net/image.png?width=400&s=def3e221c3f4c4debda091b8e49420ea 400w,
270
+ * // https://example.imgix.net/image.png?width=800&s=f12c7c39333410c10c2930b57116a943 800w,
271
+ * // https://example.imgix.net/image.png?width=1600&s=3a975b5087ab7ad2ab91fe66072fd628 1600w
272
+ * ```
273
+ *
274
+ * @example
275
+ *
276
+ * ```ts
277
+ * const srcset = client.buildSignedWidthSrcSet(
278
+ * "https://example.imgix.net/image.png",
279
+ * {
280
+ * widths: [400, 800, 1600],
281
+ * sat: -100,
282
+ * },
283
+ * );
284
+ * // => https://example.imgix.net/image.png?width=400&sat=-100&s=def3e221c3f4c4debda091b8e49420ea 400w,
285
+ * // https://example.imgix.net/image.png?width=800&sat=-100&s=f12c7c39333410c10c2930b57116a943 800w,
286
+ * // https://example.imgix.net/image.png?width=1600&sat=-100&s=3a975b5087ab7ad2ab91fe66072fd628 1600w
287
+ * ```
288
+ *
289
+ * @param url - Full absolute URL to the Imgix image.
290
+ * @param params - An object of Imgix URL API parameters. The `widths`
291
+ * parameter defines the resulting `srcset` widths.
292
+ *
293
+ * @returns A `srcset` attribute value for `url` with the given Imgix URL API
294
+ * parameters applied.
295
+ */
92
296
  buildSignedWidthSrcSet(url, params) {
93
297
  return buildSignedWidthSrcSet(url, this.secureURLToken, params);
94
298
  }
299
+ /**
300
+ * Builds an `<img>` `srcset` attribute value for a given set of widths for
301
+ * the client's base URL. It can also optinally apply Imgix URL API parameters
302
+ * to the URLs.
303
+ *
304
+ * The `width` URL parameter will be applied for each `srcset` entry. If a
305
+ * `width` or `w` parameter is provided to the `params` parameter, it will be
306
+ * ignored.
307
+ *
308
+ * Note: The returned URLs are not signed. See `buildSignedWidthSrcSet` if
309
+ * signatures are required.
310
+ *
311
+ * @example
312
+ *
313
+ * ```ts
314
+ * const client = new SecureClient({
315
+ * baseURL: "https://example.imgix.net",
316
+ * secureURLToken: "example-token",
317
+ * });
318
+ * const srcset = client.buildWidthSrcSetForPath("/image.png", {
319
+ * widths: [400, 800, 1600],
320
+ * });
321
+ * // => https://example.imgix.net/image.png?width=400 400w,
322
+ * // https://example.imgix.net/image.png?width=800 800w,
323
+ * // https://example.imgix.net/image.png?width=1600 1600w
324
+ * ```
325
+ *
326
+ * @example
327
+ *
328
+ * ```ts
329
+ * const client = new SecureClient({
330
+ * baseURL: "https://example.imgix.net",
331
+ * secureURLToken: "example-token",
332
+ * });
333
+ * const srcset = client.buildWidthSrcSetForPath("/image.png", {
334
+ * widths: [400, 800, 1600],
335
+ * sat: -100,
336
+ * });
337
+ * // => https://example.imgix.net/image.png?width=400&sat=-100 400w,
338
+ * // https://example.imgix.net/image.png?width=800&sat=-100 800w,
339
+ * // https://example.imgix.net/image.png?width=1600&sat=-100 1600w
340
+ * ```
341
+ *
342
+ * @param path - Path to the image relative to the client's base URL.
343
+ * @param params - An object of Imgix URL API parameters. The `widths`
344
+ * parameter defines the resulting `srcset` widths.
345
+ *
346
+ * @returns A `srcset` attribute value for `url` with the given Imgix URL API
347
+ * parameters applied.
348
+ */
95
349
  buildWidthSrcSetForPath(path, params) {
96
350
  return buildWidthSrcSet(`${new URL(path, this.baseURL)}`, params);
97
351
  }
352
+ /**
353
+ * Builds an `<img>` `srcset` attribute value for a given set of widths for
354
+ * the client's base URL. It can also optinally apply Imgix URL API parameters
355
+ * to the URLs. The URLs are signed by appending a signature to their URL
356
+ * parameters. This locks the URLs and their parameters to the signature to
357
+ * prevent URL tampering.
358
+ *
359
+ * The `width` URL parameter will be applied for each `srcset` entry. If a
360
+ * `width` or `w` parameter is provided to the `params` parameter, it will be
361
+ * ignored.
362
+ *
363
+ * @example
364
+ *
365
+ * ```ts
366
+ * const client = new SecureClient({
367
+ * baseURL: "https://example.imgix.net",
368
+ * secureURLToken: "example-token",
369
+ * });
370
+ * const srcset = client.buildSignedWidthSrcSetForPath("/image.png", {
371
+ * widths: [400, 800, 1600],
372
+ * });
373
+ * // => https://example.imgix.net/image.png?width=400&s=def3e221c3f4c4debda091b8e49420ea 400w,
374
+ * // https://example.imgix.net/image.png?width=800&s=f12c7c39333410c10c2930b57116a943 800w,
375
+ * // https://example.imgix.net/image.png?width=1600&s=3a975b5087ab7ad2ab91fe66072fd628 1600w
376
+ * ```
377
+ *
378
+ * @example
379
+ *
380
+ * ```ts
381
+ * const client = new SecureClient({
382
+ * baseURL: "https://example.imgix.net",
383
+ * secureURLToken: "example-token",
384
+ * });
385
+ * const srcset = client.buildSignedWidthSrcSetForPath("/image.png", {
386
+ * widths: [400, 800, 1600],
387
+ * sat: -100,
388
+ * });
389
+ * // => https://example.imgix.net/image.png?width=400&sat=-100&s=def3e221c3f4c4debda091b8e49420ea 400w,
390
+ * // https://example.imgix.net/image.png?width=800&sat=-100&s=f12c7c39333410c10c2930b57116a943 800w,
391
+ * // https://example.imgix.net/image.png?width=1600&sat=-100&s=3a975b5087ab7ad2ab91fe66072fd628 1600w
392
+ * ```
393
+ *
394
+ * @param path - Path to the image relative to the client's base URL.
395
+ * @param params - An object of Imgix URL API parameters. The `widths`
396
+ * parameter defines the resulting `srcset` widths.
397
+ *
398
+ * @returns A `srcset` attribute value for `url` with the given Imgix URL API
399
+ * parameters applied.
400
+ */
98
401
  buildSignedWidthSrcSetForPath(path, params) {
99
- return this.buildSignedWidthSrcSet(`${new URL(path, this.baseURL)}`, params);
402
+ return this.buildSignedWidthSrcSet(
403
+ `${new URL(path, this.baseURL)}`,
404
+ params
405
+ );
100
406
  }
407
+ /**
408
+ * Builds an `<img>` `srcset` attribute value for a given set of pixel
409
+ * densities. It can also optinally apply Imgix URL API parameters to the
410
+ * URLs. The URLs are signed by appending a signature to their URL parameters.
411
+ * This locks the URLs and their parameters to the signature to prevent URL
412
+ * tampering.
413
+ *
414
+ * The `dpr` URL parameter will be applied for each `srcset` entry. If a `dpr`
415
+ * parameter is provided to the `params` parameter, it will be ignored.
416
+ *
417
+ * @example
418
+ *
419
+ * ```ts
420
+ * const srcset = client.buildSignedPixelDensitySrcSet(
421
+ * "https://example.imgix.net/image.png",
422
+ * { pixelDensities: [1, 2, 3] },
423
+ * );
424
+ * // => https://example.imgix.net/image.png?dpr=1&s=def3e221c3f4c4debda091b8e49420ea 1x,
425
+ * // https://example.imgix.net/image.png?dpr=2&s=f12c7c39333410c10c2930b57116a943 2x,
426
+ * // https://example.imgix.net/image.png?dpr=3&s=3a975b5087ab7ad2ab91fe66072fd628 3x
427
+ * ```
428
+ *
429
+ * @example
430
+ *
431
+ * ```ts
432
+ * const srcset = client.buildSignedPixelDensitySrcSet(
433
+ * "https://example.imgix.net/image.png",
434
+ * {
435
+ * pixelDensities: [1, 2, 3],
436
+ * sat: -100,
437
+ * },
438
+ * );
439
+ * // => https://example.imgix.net/image.png?dpr=1&sat=-100&s=def3e221c3f4c4debda091b8e49420ea 1x,
440
+ * // https://example.imgix.net/image.png?dpr=2&sat=-100&s=f12c7c39333410c10c2930b57116a943 2x,
441
+ * // https://example.imgix.net/image.png?dpr=3&sat=-100&s=3a975b5087ab7ad2ab91fe66072fd628 3x
442
+ * ```
443
+ *
444
+ * @param url - Full absolute URL to the Imgix image.
445
+ * @param params - An object of Imgix URL API parameters. The `pixelDensities`
446
+ * parameter defines the resulting `srcset` widths.
447
+ *
448
+ * @returns A `srcset` attribute value for `url` with the given Imgix URL API
449
+ * parameters applied.
450
+ */
101
451
  buildSignedPixelDensitySrcSet(url, params) {
102
452
  return buildSignedPixelDensitySrcSet(url, this.secureURLToken, params);
103
453
  }
454
+ /**
455
+ * Builds an `<img>` `srcset` attribute value for a given set of pixel
456
+ * densities for the client's base URL. It can also optinally apply Imgix URL
457
+ * API parameters to the URLs.
458
+ *
459
+ * The `dpr` URL parameter will be applied for each `srcset` entry. If a `dpr`
460
+ * parameter is provided to the `params` parameter, it will be ignored.
461
+ *
462
+ * Note: The returned URLs are not signed. See `buildSignedPixelDensitySrcSet`
463
+ * if signatures are required.
464
+ *
465
+ * @example
466
+ *
467
+ * ```ts
468
+ * const client = new SecureClient({
469
+ * baseURL: "https://example.imgix.net",
470
+ * secureURLToken: "example-token",
471
+ * });
472
+ * const srcset = client.buildPixelDensitySrcSetForPath("/image.png", {
473
+ * pixelDensities: [1, 2, 3],
474
+ * });
475
+ * // => https://example.imgix.net/image.png?dpr=1 1x,
476
+ * // https://example.imgix.net/image.png?dpr=2 2x,
477
+ * // https://example.imgix.net/image.png?dpr=3 3x
478
+ * ```
479
+ *
480
+ * @example
481
+ *
482
+ * ```ts
483
+ * const client = new SecureClient({
484
+ * baseURL: "https://example.imgix.net",
485
+ * secureURLToken: "example-token",
486
+ * });
487
+ * const srcset = client.buildPixelDensitySrcSetForPath("/image.png", {
488
+ * pixelDensities: [1, 2, 3],
489
+ * sat: -100,
490
+ * });
491
+ * // => https://example.imgix.net/image.png?dpr=1&sat=-100 1x,
492
+ * // https://example.imgix.net/image.png?dpr=2&sat=-100 2x,
493
+ * // https://example.imgix.net/image.png?dpr=3&sat=-100 3x
494
+ * ```
495
+ *
496
+ * @param path - Path to the image relative to the client's base URL.
497
+ * @param params - An object of Imgix URL API parameters. The `pixelDensities`
498
+ * parameter defines the resulting `srcset` widths.
499
+ *
500
+ * @returns A `srcset` attribute value for `url` with the given Imgix URL API
501
+ * parameters applied.
502
+ */
104
503
  buildPixelDensitySrcSetForPath(path, params) {
105
504
  return buildPixelDensitySrcSet(`${new URL(path, this.baseURL)}`, params);
106
505
  }
506
+ /**
507
+ * Builds an `<img>` `srcset` attribute value for a given set of pixel
508
+ * densities for the client's base URL. It can also optinally apply Imgix URL
509
+ * API parameters to the URLs. The URLs are signed by appending a signature to
510
+ * their URL parameters. This locks the URLs and their parameters to the
511
+ * signature to prevent URL tampering.
512
+ *
513
+ * The `dpr` URL parameter will be applied for each `srcset` entry. If a `dpr`
514
+ * parameter is provided to the `params` parameter, it will be ignored.
515
+ *
516
+ * @example
517
+ *
518
+ * ```ts
519
+ * const client = new SecureClient({
520
+ * baseURL: "https://example.imgix.net",
521
+ * secureURLToken: "example-token",
522
+ * });
523
+ * const srcset = client.buildSignedPixelDensitySrcSetForPath(
524
+ * "/image.png",
525
+ * { pixelDensities: [1, 2, 3] },
526
+ * );
527
+ * // => https://example.imgix.net/image.png?dpr=1&s=def3e221c3f4c4debda091b8e49420ea 1x,
528
+ * // https://example.imgix.net/image.png?dpr=2&s=f12c7c39333410c10c2930b57116a943 2x,
529
+ * // https://example.imgix.net/image.png?dpr=3&s=3a975b5087ab7ad2ab91fe66072fd628 3x
530
+ * ```
531
+ *
532
+ * @example
533
+ *
534
+ * ```ts
535
+ * const client = new SecureClient({
536
+ * baseURL: "https://example.imgix.net",
537
+ * secureURLToken: "example-token",
538
+ * });
539
+ * const srcset = client.buildSignedPixelDensitySrcSetForPath(
540
+ * "/image.png",
541
+ * {
542
+ * pixelDensities: [1, 2, 3],
543
+ * sat: -100,
544
+ * },
545
+ * );
546
+ * // => https://example.imgix.net/image.png?dpr=1&sat=-100&s=def3e221c3f4c4debda091b8e49420ea 1x,
547
+ * // https://example.imgix.net/image.png?dpr=2&sat=-100&s=f12c7c39333410c10c2930b57116a943 2x,
548
+ * // https://example.imgix.net/image.png?dpr=3&sat=-100&s=3a975b5087ab7ad2ab91fe66072fd628 3x
549
+ * ```
550
+ *
551
+ * @param path - Path to the image relative to the client's base URL.
552
+ * @param params - An object of Imgix URL API parameters. The `pixelDensities`
553
+ * parameter defines the resulting `srcset` widths.
554
+ *
555
+ * @returns A `srcset` attribute value for `url` with the given Imgix URL API
556
+ * parameters applied.
557
+ */
107
558
  buildSignedPixelDensitySrcSetForPath(path, params) {
108
- return buildSignedPixelDensitySrcSet(`${new URL(path, this.baseURL)}`, this.secureURLToken, params);
559
+ return buildSignedPixelDensitySrcSet(
560
+ `${new URL(path, this.baseURL)}`,
561
+ this.secureURLToken,
562
+ params
563
+ );
109
564
  }
110
565
  }
111
566