refactor: when using public folder, prefix the path with env var (#394)

Closes FRONT-533

Author: jog1t

apps/hub/src/components/dialogs/secret-dialog.tsx

@@ -1,4 +1,5 @@
 import type { DialogContentProps } from "@/hooks/use-dialog";
+import { publicUrl } from "@/lib/utils";
 import {
   Code,
   DialogHeader,
@@ -19,7 +20,7 @@ export default function SecretDialogContent(props: ContentProps) {
       <Flex gap="4" direction="col" textAlign="center">
         <img
           className="w-20 mx-auto"
-          src="/greg.svg"
+          src={publicUrl("/greg.svg")}
           alt="Mysterious Rivet Frog"
         />
         <Text>

apps/hub/src/components/header/header.tsx

@@ -1,4 +1,5 @@
 import { useAuth } from "@/domains/auth/contexts/auth";
+import { publicUrl } from "@/lib/utils";
 import {
   Button,
   Flex,
@@ -62,7 +63,7 @@ export function Header() {
                     >
                       <img
                         className="h-6"
-                        src="/icon-white-borderless.svg"
+                        src={publicUrl("/icon-white-borderless.svg")}
                         alt="Rivet logo"
                       />
                     </Link>
@@ -111,7 +112,7 @@ export function Header() {
             <Link to="/">
               <img
                 className="h-6"
-                src="/icon-white-borderless.svg"
+                src={publicUrl("/icon-white-borderless.svg")}
                 alt="Rivet logo"
               />
             </Link>

apps/hub/src/layouts/root.tsx

@@ -1,5 +1,6 @@
 import { CommandPanel } from "@/components/command-panel";
 import { NavItem } from "@/components/header/nav-item";
+import { publicUrl } from "@/lib/utils";
 import { cn } from "@rivet-gg/components";
 import { Icon, faDiscord, faGithub, faXTwitter } from "@rivet-gg/icons";
 import { useMatches } from "@tanstack/react-router";
@@ -43,7 +44,7 @@ const Footer = () => {
           <div className="flex gap-4 items-center justify-between w-full lg:w-auto lg:justify-normal">
             <div className="flex gap-4 items-center">
               <img
-                src="/icon-white-borderless.svg"
+                src={publicUrl("/icon-white-borderless.svg")}
                 alt="Rivet"
                 className="h-6"
               />

apps/hub/src/lib/utils.ts

@@ -59,3 +59,12 @@ export function findDuplicated<const Key extends string>(
 
   return duplicatesIdx;
 }
+
+export const publicUrl = (path: string) => {
+  const filename = path.startsWith("/") ? path.slice(1) : path;
+  const url = import.meta.env.BASE_URL.endsWith("/")
+    ? import.meta.env.BASE_URL
+    : `${import.meta.env.BASE_URL}/`;
+
+  return `${url}${filename}`;
+};