Merge pull request #1215 from Shelf-nu/1214-feat-implement-url-shortner

feat: url shortener

.env.example

@@ -13,6 +13,13 @@ SUPABASE_ANON_PUBLIC="{ANON_PUBLIC}"
 SUPABASE_SERVICE_ROLE="{SERVICE_ROLE}"
 SUPABASE_URL="https://{YOUR_INSTANCE_NAME}.supabase.co"
 SERVER_URL="http://localhost:3000"
+
+# Used for shortening URLs of QR codes. Optional
+# If present, the QR code will be generated with a shortened URL
+# Should not include the protocol (http/https) or a trailing slash
+# URL_SHORTENER="eam.sh"
+
+
 APP_NAME="Shelf"
 
 # Used for generating cuid with lowered chance of collision. Optional

app/modules/asset/service.server.ts

@@ -50,7 +50,7 @@ import {
   maybeUniqueConstraintViolation,
 } from "~/utils/error";
 import { getCurrentSearchParams } from "~/utils/http.server";
-import { id } from "~/utils/id.server";
+import { id } from "~/utils/id/id.server";
 import { ALL_SELECTED_KEY, getParamsValues } from "~/utils/list";
 import { Logger } from "~/utils/logger";
 import { oneDayFromNow } from "~/utils/one-week-from-now";

app/modules/kit/service.server.ts

@@ -24,7 +24,7 @@ import type { ErrorLabel } from "~/utils/error";
 import { maybeUniqueConstraintViolation, ShelfError } from "~/utils/error";
 import { extractImageNameFromSupabaseUrl } from "~/utils/extract-image-name-from-supabase-url";
 import { getCurrentSearchParams } from "~/utils/http.server";
-import { id } from "~/utils/id.server";
+import { id } from "~/utils/id/id.server";
 import { ALL_SELECTED_KEY, getParamsValues } from "~/utils/list";
 import { Logger } from "~/utils/logger";
 import { oneDayFromNow } from "~/utils/one-week-from-now";

app/modules/qr/service.server.ts

@@ -8,16 +8,15 @@ import {
   type Kit,
 } from "@prisma/client";
 import type { LoaderFunctionArgs } from "@remix-run/node";
-import QRCode from "qrcode-generator";
 import { db } from "~/database/db.server";
 import { updateCookieWithPerPage } from "~/utils/cookies.server";
 import type { ErrorLabel } from "~/utils/error";
 import { isLikeShelfError, ShelfError } from "~/utils/error";
-import { gifToPng } from "~/utils/gif-to-png";
 import { getCurrentSearchParams } from "~/utils/http.server";
-import { id } from "~/utils/id.server";
+import { id } from "~/utils/id/id.server";
 import { getParamsValues } from "~/utils/list";
 // eslint-disable-next-line import/no-cycle
+import { generateCode } from "./utils.server";
 import { generateRandomCode } from "../invite/helpers";
 
 const label: ErrorLabel = "QR";
@@ -117,50 +116,6 @@ export async function createQr({
   });
 }
 
-export async function generateCode({
-  version,
-  errorCorrection,
-  qr,
-  size,
-}: {
-  version: TypeNumber;
-  errorCorrection: ErrorCorrectionLevel;
-  qr: Qr;
-  size: "cable" | "small" | "medium" | "large";
-}) {
-  try {
-    const code = QRCode(version, errorCorrection);
-    code.addData(`${process.env.SERVER_URL}/qr/${qr.id}`);
-    code.make();
-
-    /** We use a margin of 0 because we handle this using canvas in the client */
-    const sizes = {
-      cable: [1, 0], // 29px => 0.8cm(0.77)
-      small: [2, 0], // 58px => 1.5cm(1.53)
-      medium: [4, 0], // 116px => 3.1cm(3.07)
-      large: [6, 0], // 174px => 4.7cm(4.6)
-    };
-    const src = await gifToPng(code.createDataURL(...sizes[size]));
-
-    return {
-      sizes,
-      code: {
-        size: size,
-        src,
-        id: qr.id,
-      },
-    };
-  } catch (cause) {
-    throw new ShelfError({
-      cause,
-      message:
-        "Something went wrong while generating the QR code. Please try again or contact support.",
-      additionalData: { version, errorCorrection, qr, size },
-      label,
-    });
-  }
-}
-
 /** Generates codes that are not attached to assets but attached to a certain org and user */
 export async function generateOrphanedCodes({
   userId,

app/modules/qr/utils.server.ts

@@ -1,12 +1,63 @@
 import type { Organization, Qr, User } from "@prisma/client";
+import QRCode from "qrcode-generator";
+import { SERVER_URL, URL_SHORTENER } from "~/utils/env";
+import type { ErrorLabel } from "~/utils/error";
 import { isLikeShelfError, ShelfError } from "~/utils/error";
+import { gifToPng } from "~/utils/gif-to-png";
 // eslint-disable-next-line import/no-cycle
-import {
-  createQr,
-  generateCode,
-  getQrByAssetId,
-  getQrByKitId,
-} from "./service.server";
+import { createQr, getQrByAssetId, getQrByKitId } from "./service.server";
+
+const label: ErrorLabel = "QR";
+
+export function getQrBaseUrl() {
+  return URL_SHORTENER ? `${URL_SHORTENER}/qr` : `${SERVER_URL}/qr`;
+}
+
+export async function generateCode({
+  version,
+  errorCorrection,
+  qr,
+  size,
+}: {
+  version: TypeNumber;
+  errorCorrection: ErrorCorrectionLevel;
+  qr: Qr;
+  size: "cable" | "small" | "medium" | "large";
+}) {
+  const baseUrl = getQrBaseUrl();
+
+  try {
+    const code = QRCode(version, errorCorrection);
+    code.addData(`${baseUrl}/${qr.id}`);
+    code.make();
+
+    /** We use a margin of 0 because we handle this using canvas in the client */
+    const sizes = {
+      cable: [1, 0], // 29px => 0.8cm(0.77)
+      small: [2, 0], // 58px => 1.5cm(1.53)
+      medium: [4, 0], // 116px => 3.1cm(3.07)
+      large: [6, 0], // 174px => 4.7cm(4.6)
+    };
+    const src = await gifToPng(code.createDataURL(...sizes[size]));
+
+    return {
+      sizes,
+      code: {
+        size: size,
+        src,
+        id: qr.id,
+      },
+    };
+  } catch (cause) {
+    throw new ShelfError({
+      cause,
+      message:
+        "Something went wrong while generating the QR code. Please try again or contact support.",
+      additionalData: { version, errorCorrection, qr, size },
+      label,
+    });
+  }
+}
 
 export async function generateQrObj({
   kitId,