chore: reduce cloudinary usage (#858)

* update assets types file

* replace videos by images in hands section

* optimize jobs assets

* optimize hero mobile asset

* Reduce Cloudinary usage

Reduced usage of Cloudinary in the application.

* address feedback

* regenerate asset types for

* remove unused cloudinary script from

* remove unused env:check

* add missing cloudinary script to

* regenerate asset types for

Author: jkbktl

.changeset/seven-olives-design.md

@@ -0,0 +1,5 @@
+---
+"status.app": patch
+---
+
+chore: reduce cloudinary usage

apps/portfolio/package.json

@@ -12,6 +12,7 @@
     "format": "prettier --write .",
     "typecheck": "tsc",
     "env:check": "node -r dotenv/config ./src/config/env.server.mjs dotenv_config_path=./.env && node -r dotenv/config ./src/config/env.client.mjs dotenv_config_path=./.env && :",
+    "sync:cloudinary": "DOTENV_CONFIG_PATH='.env.local' node -r dotenv/config scripts/generate-cloudinary-type.mjs && prettier -w 'src/app/_components/assets/types.ts'",
     "clean": "rimraf .next .vercel/output node_modules .turbo"
   },
   "dependencies": {

…ork/scripts/generate-cloudinary-type.mjs …lio/scripts/generate-cloudinary-type.mjspackages/status-network/scripts/generate-cloudinary-type.mjs renamed to apps/portfolio/scripts/generate-cloudinary-type.mjs packages/status-network/scripts/generate-cloudinary-type.mjs renamed to apps/portfolio/scripts/generate-cloudinary-type.mjs

@@ -33,10 +33,10 @@ const fetchResources = async url => {
       {
         headers: {
           Authorization: `Basic ${btoa(
-            `${env.data.CLOUDINARY_API_KEY}:${env.data.CLOUDINARY_API_SECRET}`,
+            `${env.data.CLOUDINARY_API_KEY}:${env.data.CLOUDINARY_API_SECRET}`
           )}`,
         },
-      },
+      }
     )
 
     const { resources, next_cursor } = await response.json()
@@ -46,7 +46,7 @@ const fetchResources = async url => {
       nextCursor = next_cursor
     } else {
       console.warn(
-        'Empty or undefined response received. Consider running the script again.',
+        'Empty or undefined response received. Consider running the script again.'
       )
       break
     }
@@ -56,19 +56,19 @@ const fetchResources = async url => {
 }
 
 const [images, videos, zipFiles] = await Promise.all(
-  RESOURCE_URLS.map(async url => fetchResources(url)),
+  RESOURCE_URLS.map(async url => fetchResources(url))
 )
 
 fs.writeFile(
-  'src/components/image/types.ts',
+  'src/app/_components/assets/types.ts',
   `
 export type ImageType =
   ${images
     .map(
       i =>
         `{ id: '${i.public_id}:${i.width}:${i.height}', alt: "${
           i.context?.custom?.alt ?? ''
-        }" }`,
+        }" }`
     )
     .join(' | ')}
 
@@ -85,5 +85,5 @@ export type VideoId = ${[...videos]
      .map(z => `'${z.public_id}'`)
      .sort()
      .join(' | ')}
- `,
+ `
 )

apps/portfolio/src/app/_components/assets/types.ts

@@ -1,6 +1,6 @@
 import { Text } from '@status-im/components'
 
-import { Icon, Video } from '~components/assets'
+import { Icon, Image } from '~components/assets'
 
 import type { ImageId } from '~components/assets'
 
@@ -9,18 +9,18 @@ const HandsSection = () => {
     <div className="relative z-20 bg-white-100">
       <div className="container-lg relative pb-24 pt-40 xl:pb-40 xl:pt-20">
         <div className="relative grid aspect-[0.44] place-content-center 2md:aspect-[1.715]">
-          {/* MOBILE VIDEO */}
           <div className="absolute -inset-x-6 top-10 scale-[1.7] sm:scale-150 2md:hidden">
-            <Video
-              id="Non Beta Release/Animations/Wallet_01_Mobile:990:1467"
-              posterId="Non Beta Release/Animations/Frames/Wallet_01_Mobile_Frame:990:1467"
+            <Image
+              id="Non Beta Release/Animations/Frames/Wallet_01_Mobile_Frame:990:1467"
+              alt=""
+              aria-hidden="true"
             />
           </div>
-          {/* DESKTOP VIDEO  */}
           <div className="absolute -inset-x-10 top-10 z-0 hidden h-full scale-[1.15] 2md:block">
-            <Video
-              id="Non Beta Release/Animations/Wallet_01:2256:1178"
-              posterId="Non Beta Release/Animations/Frames/Wallet_01_Frame:2256:1178"
+            <Image
+              id="Non Beta Release/Animations/Frames/Wallet_01_Frame:2256:1178"
+              alt=""
+              aria-hidden="true"
             />
           </div>
 

apps/status.app/src/app/(website)/_components/hands-section.tsx

@@ -89,13 +89,13 @@ export default async function JobsPage() {
       <div className="mx-auto mb-12 mt-8 max-w-[1224px] px-5 2md:mb-0 2md:mt-[-72px] 2md:px-0">
         <div className="relative z-[2] 2md:mx-[-18%]">
           <Image
-            id="Jobs/Top Section/Jobs_01:5113:2971"
+            id="Jobs/Top Section/Jobs_01-optimized:2448:1422"
             alt=""
             className="hidden 2md:block"
             priority
           />
           <Image
-            id="Jobs/Top Section/Jobs_01_Mobile:1745:1867"
+            id="Jobs/Top Section/Jobs_01_Mobile-optimized:1745:1867"
             alt=""
             className="2md:hidden"
           />

apps/status.app/src/app/(website)/jobs/page.tsx

@@ -109,7 +109,7 @@ export default async function HomePage() {
             </div>
           </div>
           <Image
-            id="Non Beta Release/Illustrations/Hero_Non_Beta_Release_Mobile_Long:4662:2579"
+            id="Non Beta Release/Illustrations/Hero_Non_Beta_Release_Mobile_Long-optimized:1470:813"
             alt=""
             aria-hidden
             width={735}