feat: use images in cloudinary

benefit: in the meantime, easier to process and optimise on the flight
Beraliv · Oct 22, 2024 · c165e24 · c165e24
1 parent 3d82b48
commit c165e24
Show file tree

Hide file tree

Showing 10 changed files with 4,584 additions and 3,592 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -35,5 +35,8 @@ jobs:
           aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
           aws-region: eu-central-1
 
-      - name: Deploy to S3
+      - name: Deploy to Cloudinary
+        run: pnpm --filter id run upload-images-to-cloudinary --key ${{ secrets.CLOUDINARY_API_KEY }} --secret ${{ secrets.CLOUDINARY_API_SECRET }}
+
+      - name: Deploy to AWS S3
         run: aws s3 sync ./packages/id/dist s3://beraliv.com --delete
diff --git a/packages/id/index.html b/packages/id/index.html
@@ -2,7 +2,11 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/png" href="/me.png" />
+    <link
+      rel="icon"
+      type="image/png"
+      href="https://res.cloudinary.com/beraliv/image/upload/v1729597492/beraliv_com/me.png"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>beraliv</title>
     <script

diff --git a/packages/id/package.json b/packages/id/package.json
@@ -5,9 +5,11 @@
   "scripts": {
     "dev": "vite --port 3000",
     "build": "tsc && vite build",
-    "preview": "vite preview --port 3000"
+    "preview": "vite preview --port 3000",
+    "upload-images-to-cloudinary": "node ./scripts/uploadImagesToCloudinary.js"
   },
   "devDependencies": {
+    "cloudinary": "^2.5.1",
     "typescript": "^5.5.3",
     "vite": "^5.4.8"
   }

diff --git a/packages/id/scripts/uploadImagesToCloudinary.js b/packages/id/scripts/uploadImagesToCloudinary.js
@@ -0,0 +1,90 @@
+import { parseArgs } from "node:util";
+import { readdirSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import cloudinary from "cloudinary";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+const {
+  values: { key, secret },
+} = parseArgs({
+  options: {
+    key: {
+      type: "string",
+    },
+    secret: {
+      type: "string",
+    },
+  },
+});
+
+const CLOUD_NAME = "beraliv";
+const CLOUDINARY_FOLDER = "beraliv_com";
+const LOCAL_FOLDER = join(__dirname, "../src/components/images");
+
+// Configure Cloudinary with your API credentials
+cloudinary.v2.config({
+  cloud_name: CLOUD_NAME,
+  api_key: key,
+  api_secret: secret,
+});
+
+/**
+ * @param {string} filename
+ * @param {string} imageUrl
+ */
+async function uploadToCloudinary(imageNameWithExtension) {
+  const [imageName] = imageNameWithExtension.split(".");
+
+  const imageUrl = `${LOCAL_FOLDER}/${imageNameWithExtension}`;
+
+  try {
+    if (imageName.includes(" ")) {
+      console.error(`Invalid image name ❌: remove a space from ${imageName}`);
+      return;
+    }
+
+    await cloudinary.v2.uploader.upload(imageUrl, {
+      public_id: imageName,
+      folder: CLOUDINARY_FOLDER,
+    });
+
+    console.error(`Image is uploaded ✅: ${imageNameWithExtension}`);
+  } catch (error) {
+    console.error(
+      `Error uploading image ❌:\n` +
+        `   Error:  ${error.message}\n` +
+        `   Name:   ${imageName}`
+    );
+    process.exit(1);
+  }
+}
+
+async function getImages() {
+  try {
+    const files = readdirSync(LOCAL_FOLDER);
+    return files;
+  } catch (error) {
+    return [];
+  }
+}
+
+async function main() {
+  const images = await getImages();
+  const uploads = [];
+  for (const image of images) {
+    uploads.push(uploadToCloudinary(image));
+  }
+  try {
+    await Promise.all(uploads);
+
+    console.error(`Images are uploaded ✅`);
+    process.exit(0);
+  } catch (error) {
+    console.error(`Image are failed to upload ❌`);
+    process.exit(1);
+  }
+}
+
+main();
diff --git a/packages/id/src/components/image.ts b/packages/id/src/components/image.ts
@@ -0,0 +1,12 @@
+import { CLOUDINARY_FOLDER } from "../constants/CLOUDINARY_FOLDER";
+
+interface ImageProps {
+  alt: string;
+  className?: string;
+  name: string;
+}
+
+export const image = ({ alt, className, name }: ImageProps) =>
+  `<img src="https://res.cloudinary.com/beraliv/image/upload/v${msToSeconds(
+    Date.now()
+  )}/${CLOUDINARY_FOLDER}/${name}" class="${className}" alt="${alt}" />`;
diff --git a/...s/id/src/components/images/dazn-crew.jpeg → ...es/id/src/components/images/dazn-crew.jpg b/...s/id/src/components/images/dazn-crew.jpeg → ...es/id/src/components/images/dazn-crew.jpg
diff --git a/packages/id/src/components/page-about.ts b/packages/id/src/components/page-about.ts
@@ -1,10 +1,8 @@
-import meImageSrc from "./images/me.png";
-import daznCrewImageSrc from "./images/dazn-crew.jpeg";
-import joynCrewImageSrc from "./images/joyn-crew.jpg";
 import { header } from "./header";
 import { footer } from "./footer";
 import { link } from "./link";
 import { yearsSince } from "../utils/yearsSince";
+import { image } from "./image";
 
 const mainContent = `
 	<main>
@@ -15,7 +13,7 @@ const mainContent = `
           <h3>UK-based, Video Software Engineer</h3>
         </div>
         <div>
-          <img src="${meImageSrc}" class="meImage" alt="My photo" />
+          ${image({ name: "me.png", alt: "My photo", className: "meImage" })}
         </div>
       </div>
       <p>
@@ -93,7 +91,11 @@ const mainContent = `
         )}, held at the BBC office.
       </p>
       <figure>
-        <img src="${daznCrewImageSrc}" class="image" alt="My DAZN crew image" />
+        ${image({
+          name: "dazn-crew.jpg",
+          alt: "My DAZN crew image",
+          className: "image",
+        })}
         <figcaption>
           Mercury's hard work and achievements have been recognised by our CTO Sandeep Tiku with the presentation of the "Chief Technology Officer's Tech Innovation Award" to the team.
         </figcaption>
@@ -117,7 +119,11 @@ const mainContent = `
         })} as Senior Software Engineer. I played a key role in bridging the gap between the Player and Connected Devices teams.
       </p>
       <figure>
-        <img src="${joynCrewImageSrc}" class="image" alt="My Joyn crew image" />
+        ${image({
+          name: "joyn-crew.jpg",
+          alt: "My Joyn crew image",
+          className: "image",
+        })}
         <figcaption>
           Workshop with a hike around Eibsee with my ex-colleagues from Joyn
         </figcaption>

diff --git a/packages/id/src/constants/CLOUDINARY_FOLDER.ts b/packages/id/src/constants/CLOUDINARY_FOLDER.ts
@@ -0,0 +1 @@
+export const CLOUDINARY_FOLDER = "beraliv_com";
diff --git a/packages/id/src/utils/msToSeconds.ts b/packages/id/src/utils/msToSeconds.ts
@@ -0,0 +1 @@
+export const msToSeconds = (ms: number): number => Math.floor(ms / 1_000);
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export const CLOUDINARY_FOLDER = "beraliv_com";
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export const msToSeconds = (ms: number): number => Math.floor(ms / 1_000);