Feature/logo fix

.env.example

@@ -13,4 +13,5 @@ VITE_APP_FIREBASE_MESSAGINGSENDERID=
 VITE_APP_FIREBASE_APPID=
 VITE_APP_IOS_APIKEY=
 VITE_APP_ANDROID_APIKEY=
-VITE_APP_PUBLIC_IMG_URL=
+VITE_APP_PUBLIC_IMG_URL=
+VITE_APP_PUBLIC_IMG_BUCKET_FOLDER=

.github/workflows/pages.yml

@@ -23,6 +23,7 @@ jobs:
           # VITE_APP_PUBLIC_MOBILE_DEVICE: false
           VITE_APP_PUBLIC_URL: https://demo-stage.app.s.wellms.io
           VITE_APP_PUBLIC_IMG_URL: https://wellms-multidomain-demo-stage.s3.pl-waw.scw.cloud
+          VITE_APP_PUBLIC_IMG_BUCKET_FOLDER: ""
         run: |
           npm i --legacy-peer-deps
           npm run build

entrypoint.sh

@@ -11,6 +11,8 @@ sed -ie "s~YBUG_ID = null~YBUG_ID=\"$YBUG_ID\"~" /var/www/html/index.html
 sed -ie "s~BASENAME = null~BASENAME=\"$BASENAME\"~" /var/www/html/index.html
 sed -ie "s~ROUTING_TYPE = null~ROUTING_TYPE=\"$ROUTING_TYPE\"~" /var/www/html/index.html
 sed -ie "s~APP_URL = null~APP_URL=\"$APP_URL\"~" /var/www/html/index.html
+sed -ie "s~IMG_URL = null~IMG_URL=\"$IMG_URL\"~" /var/www/html/index.html
+sed -ie "s~IMG_BUCKET_FOLDER = null~IMG_BUCKET_FOLDER=\"$IMG_BUCKET_FOLDER\"~" /var/www/html/index.html
 sed -ie "s~APP_FIREBASE_VAPID_KEY = null~APP_FIREBASE_VAPID_KEY=\"$APP_FIREBASE_VAPID_KEY\"~" /var/www/html/index.html
 sed -ie "s~APP_FIREBASE_APIKEY = null~APP_FIREBASE_APIKEY=\"$APP_FIREBASE_APIKEY\"~" /var/www/html/index.html
 sed -ie "s~APP_FIREBASE_AUTHDOMAIN = null~APP_FIREBASE_AUTHDOMAIN=\"$APP_FIREBASE_AUTHDOMAIN\"~" /var/www/html/index.html
@@ -27,6 +29,8 @@ echo "YBUG_ID= " $YBUG_ID
 echo "BASENAME= " $BASENAME
 echo "ROUTING_TYPE= " $ROUTING_TYPE
 echo "APP_URL= " $APP_URL
+echo "IMG_URL=" $IMG_URL
+echo "IMG_BUCKET_FOLDER= " $IMG_BUCKET_FOLDER
 echo "APP_FIREBASE_VAPID_KEY= " $APP_FIREBASE_VAPID_KEY
 echo "APP_FIREBASE_APIKEY= " $APP_FIREBASE_APIKEY
 echo "APP_FIREBASE_AUTHDOMAIN= " $APP_FIREBASE_AUTHDOMAIN

src/components/_App/Navbar/index.tsx

@@ -27,6 +27,7 @@ import useDeleteAccountModal from "@/hooks/useDeleteAccount";
 import DeleteAccountModal from "@/components/Authentication/DeleteAccountModal";
 import { isMobilePlatform } from "@/utils/index";
 import { metaDataKeys } from "@/utils/meta";
+import { VITE_APP_PUBLIC_IMG_BUCKET_FOLDER } from "@/config/index";
 
 const StyledHeader = styled.header`
   width: 100%;
@@ -286,6 +287,29 @@ const Navbar = () => {
     return cart?.value?.items?.length ?? 0;
   }, [cart]);
 
+  const getProperLogoPath = useMemo(() => {
+    const bucket = VITE_APP_PUBLIC_IMG_BUCKET_FOLDER.replace(/^\/|\/$/g, ""); // e.g. "/wellms" // -> "wellms"
+
+    // Full link, e.g. "https://randomdomain/somefolder/folder/testimg.jpg"
+    const url = settings.value.global.logo;
+
+    // 1. Extract pathname: "/wellms/avatars/testimg.jpg"
+    let relativePath = new URL(url).pathname;
+
+    // 2. Remove the bucket prefix
+    const bucketPrefix = `/${bucket}`; // "/wellms"
+    if (relativePath.startsWith(bucketPrefix)) {
+      relativePath = relativePath.slice(bucketPrefix.length);
+    }
+
+    // 3. Make sure the result begins with one leading slash
+    if (!relativePath.startsWith("/")) {
+      relativePath = "/" + relativePath;
+    }
+
+    return relativePath;
+  }, [settings.value.global.logo]);
+
   const menuItems = [
     {
       title: (
@@ -373,7 +397,7 @@ const Navbar = () => {
             <div className="logo-container">
               <Link to="/" aria-label={t("Go to the main page")}>
                 <ResponsiveImage
-                  path={`${settings?.value?.global?.logo.split("/")[3]}` || ""}
+                  path={getProperLogoPath || ""}
                   srcSizes={[100, 200, 300]}
                 />
               </Link>
@@ -550,7 +574,7 @@ const Navbar = () => {
         <div className="logo-container">
           <Link to="/" aria-label={t("Go to the main page")}>
             <ResponsiveImage
-              path={`${settings?.value?.global?.logo.split("/")[3]}` || ""}
+              path={getProperLogoPath || ""}
               srcSizes={[50, 100, 150]}
             />
           </Link>

src/config/index.ts

@@ -52,3 +52,8 @@ export const VITE_APP_PUBLIC_IMG_URL =
   window.VITE_APP_PUBLIC_IMG_URL ||
   import.meta.env.VITE_APP_PUBLIC_IMG_URL ||
   null;
+
+export const VITE_APP_PUBLIC_IMG_BUCKET_FOLDER =
+  window.VITE_APP_PUBLIC_IMG_BUCKET_FOLDER ||
+  import.meta.env.VITE_APP_PUBLIC_IMG_BUCKET_FOLDER ||
+  "";

src/index.tsx

@@ -22,6 +22,7 @@ declare global {
     VITE_APP_IOS_APIKEY: string;
     VITE_APP_ANDROID_APIKEY: string;
     VITE_APP_PUBLIC_IMG_URL: string;
+    VITE_APP_PUBLIC_IMG_BUCKET_FOLDER: string;
   }
 }