wip migration to url builder package

Author: BitPatty

example/package-lock.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@bitpatty/imgproxy-url-builder": "^0.1.0",
     "next": "11.1.2",
     "react": "^17.0.2",
     "react-dom": "17.0.2"

example/package.json

@@ -1,12 +1,8 @@
+import pb, { GravityType, ResizeType } from '@bitpatty/imgproxy-url-builder';
 import type { NextPage } from 'next';
 import Head from 'next/head';
 
-import ProxyImage, {
-  ImgProxyParamBuilder,
-  buildProxyImagePath,
-  ResizeType,
-  GravityType,
-} from '../../dist';
+import ProxyImage, { buildProxyImagePath } from '../../dist';
 
 const demoContent: {
   label: string;
@@ -28,13 +24,13 @@ const demoContent: {
     label: 'Blurring',
     file: 'test-bucket/test-image.png',
 
-    proxyParams: new ImgProxyParamBuilder().blur(10).build(),
+    proxyParams: pb().blur(10).build(),
   },
   {
     label: 'Cropping',
     file: 'test-bucket/test-image.png',
 
-    proxyParams: new ImgProxyParamBuilder()
+    proxyParams: pb()
       .crop({
         width: 30,
         height: 30,
@@ -45,13 +41,13 @@ const demoContent: {
     label: 'Cropping 2',
     file: 'test-bucket/test-image.png',
 
-    proxyParams: new ImgProxyParamBuilder()
+    proxyParams: pb()
       .crop({
         width: 30,
         height: 30,
         gravity: {
           type: GravityType.NORTHEAST,
-          center: {
+          offset: {
             x: 10,
             y: 10,
           },
@@ -63,7 +59,7 @@ const demoContent: {
     label: 'Trimming',
     file: 'test-bucket/test-image.png',
 
-    proxyParams: new ImgProxyParamBuilder()
+    proxyParams: pb()
       .trim({
         threshold: 0,
         color: '000000',
@@ -74,52 +70,42 @@ const demoContent: {
     label: 'Trimming',
     file: 'test-bucket/test-image.png',
 
-    proxyParams: new ImgProxyParamBuilder().pad(50).build(),
+    proxyParams: pb().pad({ top: 50 }).build(),
   },
   {
     label: 'Padding with background',
     file: 'test-bucket/test-image.png',
 
-    proxyParams: new ImgProxyParamBuilder()
-      .pad(50)
-      .setBackground('ff0000')
-      .build(),
+    proxyParams: pb().pad({ top: 50 }).background('ff0000').build(),
   },
   {
     label: 'Resizing',
     file: 'test-bucket/test-image.png',
     width: 100,
     height: 100,
-    proxyParams: new ImgProxyParamBuilder()
+    proxyParams: pb()
       .resize({
         type: ResizeType.FILL,
         width: 100,
         height: 100,
         enlarge: true,
-        gravity: {
-          type: GravityType.NORTH,
-          center: {
-            x: 10,
-            y: 10,
-          },
-        },
       })
       .build(),
   },
   {
     label: 'Sharpen',
     file: 'test-bucket/test-image.png',
-    proxyParams: new ImgProxyParamBuilder().sharpen({ sigma: 1.5 }).build(),
+    proxyParams: pb().sharpen(1.5).build(),
   },
   {
     label: 'PNG to JPG',
     file: 'test-bucket/test-image.png',
-    proxyParams: new ImgProxyParamBuilder().format('png').build(),
+    proxyParams: pb().format('png').build(),
   },
   {
     label: 'SVG to PNG',
     file: 'test-bucket/test-image.svg',
-    proxyParams: new ImgProxyParamBuilder().format('png').build(),
+    proxyParams: pb().format('png').build(),
   },
 ];
 
@@ -151,7 +137,7 @@ const Home: NextPage = () => {
                 backgroundImage: `url(${buildProxyImagePath(
                   'test-bucket/test-image.png',
                   {
-                    proxyParams: new ImgProxyParamBuilder().blur(10).build(),
+                    proxyParams: pb().blur(10).build(),
                   },
                 )})`,
                 backgroundSize: 'cover',

example/pages/index.tsx

@@ -37,5 +37,8 @@
   },
   "peerDependencies": {
     "next": "^11.0.0"
+  },
+  "dependencies": {
+    "@bitpatty/imgproxy-url-builder": "^0.1.0"
   }
 }

package-lock.json

@@ -22,5 +22,6 @@ export default {
     'http',
     'https',
     'node:querystring',
+    '@bitpatty/imgproxy-url-builder',
   ],
 };

package.json

@@ -1,17 +1,16 @@
 import * as React from 'react';
 import Image, { ImageLoaderProps, ImageProps } from 'next/image';
 
-import { createHmac } from 'crypto';
 import { ParsedUrlQuery } from 'node:querystring';
 import { request as httpsRequest } from 'https';
 import { ServerResponse, request as httpRequest } from 'http';
 
-import ImgProxyParamBuilder from './param-builder';
-import GravityType from './enums/gravity-type.enum';
-import ResizeType from './enums/resize-type.enum';
+import pb from '@bitpatty/imgproxy-url-builder';
 
 const IMGPROXY_ENDPOINT = '/_next/imgproxy';
+
 const SRC_REGEX = /^[^/.]+\/.+[^/]$/;
+
 const FORWARDED_HEADERS = [
   'date',
   'expires',
@@ -21,20 +20,6 @@ const FORWARDED_HEADERS = [
   'content-disposition',
 ];
 
-/**
- * Generates the signature for the specified uery
- * @param key The signature key
- * @param salt The signature salt$
- * @param buff The full request path
- * @returns The imgproxy signature
- */
-const generateSignature = (key: string, salt: string, buff: string): string => {
-  const hmac = createHmac('sha256', Buffer.from(key, 'hex'));
-  hmac.update(Buffer.from(salt, 'hex'));
-  hmac.update(buff);
-  return hmac.digest().toString('base64url');
-};
-
 /**
  * Builds the final reuest path to retrieve
  * an image from the imgproxy instance
@@ -54,14 +39,13 @@ const buildRequestPath = (
 ): string => {
   const { imgproxyParams, signature } = options ?? {};
 
-  const paramString = imgproxyParams ? `${imgproxyParams}/` : '';
-  const requestPath = `/${paramString}plain/s3://${src}`;
+  const paramBuilder = pb();
+  if (imgproxyParams) paramBuilder.modifiers.push(imgproxyParams);
 
-  const urlSignature = signature
-    ? generateSignature(signature.key, signature.salt, requestPath)
-    : '';
-
-  return `/${urlSignature}${requestPath}`;
+  return paramBuilder.build({
+    path: `s3://${src}`,
+    signature,
+  });
 };
 
 type ImageOptimizerOptions = {
@@ -159,7 +143,6 @@ const buildProxyImagePath = (
   options?: Omit<ProxyImageProps, 'file'>,
 ): string => {
   const { proxyParams, endpoint } = options ?? {};
-
   const urlParams = new URLSearchParams();
 
   urlParams.append('src', file);
@@ -199,12 +182,4 @@ const ProxyImage = ({
 };
 
 export default ProxyImage;
-export {
-  IMGPROXY_ENDPOINT,
-  buildProxyImagePath,
-  handle,
-  generateSignature,
-  ImgProxyParamBuilder,
-  GravityType,
-  ResizeType,
-};
+export { IMGPROXY_ENDPOINT, buildProxyImagePath, handle };