fix: cloud card endpoint

src/routes/card/Card.svelte

@@ -13,6 +13,8 @@
 
     import { spring } from 'svelte/motion';
     import { getCardImgUrls } from './helpers';
+    import { VARS } from '$lib/system';
+    import { page } from '$app/stores';
 
     let cardEl: HTMLDivElement | undefined;
     export let active = false;
@@ -228,7 +230,8 @@
 		--center: ${$centerProximity};
 	`;
 
-    const { frontImg, backImg } = getCardImgUrls(userId);
+    const endpoint = VARS.APPWRITE_ENDPOINT ?? `${$page.url.origin}/v1`;
+    const { frontImg, backImg } = getCardImgUrls(userId, endpoint);
 </script>
 
 <svelte:window on:keydown={windowKeyDown} />

src/routes/card/[uid]/+page.ts

@@ -1,11 +1,13 @@
+import { VARS } from '$lib/system.js';
 import { redirect } from '@sveltejs/kit';
 import { getCardImgUrls } from '../helpers.js';
 
 export const ssr = true;
 
-export async function load({ params }) {
+export async function load({ params, url }) {
     const userId = params.uid;
-    const { frontImg } = getCardImgUrls(userId);
+    const endpoint = VARS.APPWRITE_ENDPOINT ?? `${url.origin}/v1`;
+    const { frontImg } = getCardImgUrls(userId, endpoint);
 
     const res = await fetch(frontImg);
     if (!res.ok) {

src/routes/card/display.svelte

@@ -9,6 +9,8 @@
     import Code from '$lib/components/code.svelte';
     import Button from '$lib/elements/forms/button.svelte';
     import { browser } from '$app/environment';
+    import { VARS } from '$lib/system';
+    import { page } from '$app/stores';
 
     export let userId: string;
     export let variant: 'owner' | 'external';
@@ -27,7 +29,8 @@
     let cardIsFlipped = false;
     let showEmbedCode = false;
 
-    const { frontImg, ogImg } = getCardImgUrls(userId);
+    const endpoint = VARS.APPWRITE_ENDPOINT ?? `${$page.url.origin}/v1`;
+    const { frontImg, ogImg } = getCardImgUrls(userId, endpoint);
 
     $: title = variant === 'owner' ? 'Welcome to the cloud' : 'Join the Appwrite Cloud';
     $: shareableLink =
@@ -128,10 +131,7 @@
                 </p>
             </div>
         </div>
-        <img
-            class="card-preview"
-            src={getCardImgUrls(userId).frontImg}
-            alt="The front of the card" />
+        <img class="card-preview" src={frontImg} alt="The front of the card" />
         <ul class="buttons-list u-margin-block-start-32">
             <li class="buttons-list-item">
                 <a

src/routes/card/helpers.ts

@@ -1,9 +1,11 @@
 import { VARS } from '$lib/system';
 
-export function getCardImgUrls(userId: string) {
-    const frontImg = `${VARS.APPWRITE_ENDPOINT}/cards/cloud?userId=${userId}`;
-    const backImg = `${VARS.APPWRITE_ENDPOINT}/cards/cloud-back?userId=${userId}`;
-    const ogImg = `${VARS.APPWRITE_ENDPOINT}/cards/cloud-og?userId=${userId}`;
+export function getCardImgUrls(userId: string, endpoint: string) {
+    const resolved = endpoint;
+
+    const frontImg = `${resolved}/cards/cloud?userId=${userId}`;
+    const backImg = `${resolved}/cards/cloud-back?userId=${userId}`;
+    const ogImg = `${resolved}/cards/cloud-og?userId=${userId}`;
 
     return { frontImg, backImg, ogImg };
 }