From d24a489b8529e9946ac8a3d51da731ba988566e9 Mon Sep 17 00:00:00 2001 From: Torsten Dittmann Date: Tue, 11 Nov 2025 14:12:46 +0400 Subject: [PATCH 1/7] Use asset helper for profile logos --- src/lib/profiles/index.svelte.ts | 10 +- static/images/imagine-logo-dark.svg | 164 +++++++++++++++++++++++++++ static/images/imagine-logo-light.svg | 163 ++++++++++++++++++++++++++ 3 files changed, 332 insertions(+), 5 deletions(-) create mode 100644 static/images/imagine-logo-dark.svg create mode 100644 static/images/imagine-logo-light.svg diff --git a/src/lib/profiles/index.svelte.ts b/src/lib/profiles/index.svelte.ts index d9aacef71..a8d94562d 100644 --- a/src/lib/profiles/index.svelte.ts +++ b/src/lib/profiles/index.svelte.ts @@ -1,4 +1,4 @@ -import { resolve } from '$app/paths'; +import { asset, resolve } from '$app/paths'; import type { ResolvedPathname } from '$app/types'; import { PUBLIC_CONSOLE_PROFILE } from '$env/static/public'; @@ -44,8 +44,8 @@ export const base: Profile = { platform: 'Appwrite', logo: { src: { - dark: 'https://appwrite.io/images/logos/logo.svg', - light: 'https://appwrite.io/images/logos/logo.svg' + dark: asset('/images/appwrite-logo-dark.svg'), + light: asset('/images/appwrite-logo-light.svg') }, alt: 'Logo Appwrite' }, @@ -81,8 +81,8 @@ export const studio: Profile = { platform: 'Imagine', logo: { src: { - dark: 'https://imagine-console.up.railway.app/images/imagine-logo-dark.svg', - light: 'https://imagine-console.up.railway.app/images/imagine-logo-light.svg' + dark: asset('/images/imagine-logo-dark.svg'), + light: asset('/images/imagine-logo-light.svg') }, alt: 'Imagine Appwrite' }, diff --git a/static/images/imagine-logo-dark.svg b/static/images/imagine-logo-dark.svg new file mode 100644 index 000000000..4325aad8d --- /dev/null +++ b/static/images/imagine-logo-dark.svg @@ -0,0 +1,164 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/images/imagine-logo-light.svg b/static/images/imagine-logo-light.svg new file mode 100644 index 000000000..893dbe226 --- /dev/null +++ b/static/images/imagine-logo-light.svg @@ -0,0 +1,163 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From 30a5f9a60ad96d184d9d7faf1caca63d80e76842 Mon Sep 17 00:00:00 2001 From: Torsten Dittmann Date: Tue, 11 Nov 2025 14:32:58 +0400 Subject: [PATCH 2/7] Add profile-based theming and logos --- src/app.html | 21 ++++++++++++++++++--- static/css/loading.css | 28 ++++++++++++++++++++++------ 2 files changed, 40 insertions(+), 9 deletions(-) diff --git a/src/app.html b/src/app.html index d8813b8a4..cfb017639 100644 --- a/src/app.html +++ b/src/app.html @@ -11,7 +11,10 @@ %sveltekit.head% - +
%sveltekit.body%
@@ -25,13 +28,25 @@ src="%sveltekit.assets%/images/appwrite-logo-light.svg" width="120" height="22" - class="logo-light" + class="console-logo-light" alt="Appwrite Logo" /> Appwrite Logo + Appwrite Logo + Appwrite Logo
diff --git a/static/css/loading.css b/static/css/loading.css index f4b292985..b87cf4232 100644 --- a/static/css/loading.css +++ b/static/css/loading.css @@ -10,13 +10,23 @@ body { opacity: 1; } -.theme-dark .page-loader { +[data-profile='console'].theme-dark .page-loader { + --p-page-loader-primary-color: rgb(219, 26, 90); --p-page-loader-background-color: #000; } -.theme-light .page-loader { +[data-profile='console'].theme-light .page-loader { + --p-page-loader-primary-color: rgb(219, 26, 90); --p-page-loader-background-color: #fff; } +[data-profile='studio'].theme-dark .page-loader { + --p-page-loader-primary-color: #fff; + --p-page-loader-background-color: #000; +} +[data-profile='studio'].theme-light .page-loader { + --p-page-loader-primary-color: #000: --p-page-loader-background-color: #fff; +} + .theme-light .page-loader { background-color: #fff; } @@ -43,11 +53,17 @@ body { transform: translate(-50%, -50%); } -.theme-dark .page-loader .logo-dark { +[data-profile='console'].theme-dark .page-loader .console-logo-dark { + visibility: visible; +} +[data-profile='console'].theme-light .page-loader .console-logo-light { visibility: visible; } -.theme-light .page-loader .logo-light { +[data-profile='studio'].theme-dark .page-loader .studio-logo-dark { + visibility: visible; +} +[data-profile='studio'].theme-light .page-loader .studio-logo-light { visibility: visible; } @@ -66,10 +82,10 @@ body { width: 124px; height: 124px; margin: 10px; - border: 10px solid rgb(219, 26, 90); + border: 10px solid var(--p-page-loader-primary-color); border-radius: 50%; animation: animation 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; - border-color: rgb(219, 26, 90) transparent transparent transparent; + border-color: var(--p-page-loader-primary-color) transparent transparent transparent; } .page-loader .animation > div:nth-child(1) { animation-delay: -0.45s; From 569970a8084711840183a16302833a18251af606 Mon Sep 17 00:00:00 2001 From: Torsten Dittmann Date: Tue, 11 Nov 2025 15:06:41 +0400 Subject: [PATCH 3/7] Fix CSS variable declarations in studio theme --- static/css/loading.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/static/css/loading.css b/static/css/loading.css index b87cf4232..a00c8de85 100644 --- a/static/css/loading.css +++ b/static/css/loading.css @@ -24,7 +24,8 @@ body { --p-page-loader-background-color: #000; } [data-profile='studio'].theme-light .page-loader { - --p-page-loader-primary-color: #000: --p-page-loader-background-color: #fff; + --p-page-loader-primary-color: #000; + --p-page-loader-background-color: #fff; } .theme-light .page-loader { From b0d01e6b880f6f71c727dcc41a102b142a4460e5 Mon Sep 17 00:00:00 2001 From: Torsten Dittmann Date: Tue, 11 Nov 2025 17:58:59 +0400 Subject: [PATCH 4/7] fix: prevent click propagation on studio wrapper --- src/lib/studio/studio-widget.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/lib/studio/studio-widget.ts b/src/lib/studio/studio-widget.ts index 16359c750..e2d52896b 100644 --- a/src/lib/studio/studio-widget.ts +++ b/src/lib/studio/studio-widget.ts @@ -158,6 +158,13 @@ export function ensureStudioComponent(): HTMLElement | null { } const created = document.createElement('imagine-web-components-wrapper'); + created.addEventListener( + 'click', + (event) => { + event.stopPropagation(); + }, + { capture: true } + ); created.dataset.appwriteStudio = 'true'; ensureBaseStyles(created); document.body.appendChild(created); From 08d0e62afdba48c8ab0b4abb7659ed585913ba83 Mon Sep 17 00:00:00 2001 From: Torsten Dittmann Date: Tue, 11 Nov 2025 20:21:33 +0400 Subject: [PATCH 5/7] fix: preload studio assets --- src/lib/studio/studio-widget.ts | 4 +++- src/routes/+layout.svelte | 6 ++++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/lib/studio/studio-widget.ts b/src/lib/studio/studio-widget.ts index 16359c750..907d52948 100644 --- a/src/lib/studio/studio-widget.ts +++ b/src/lib/studio/studio-widget.ts @@ -11,9 +11,11 @@ const STYLE_ATTRIBUTE = 'data-appwrite-studio-style'; const BLOCK_START_BASE_OFFSET = 48; const INLINE_START_BASE_OFFSET = 8; const CACHE_BUSTER = new Date().getTime(); -const CDN_URL = +export const CDN_URL = 'https://esm.sh/@imagine.dev/web-components@0/web-components?bundle=false&deps=react@19.1.0,react-dom@19.1.0&cache=' + CACHE_BUSTER; +export const CDN_CSS_URL = + 'https://esm.sh/@imagine.dev/web-components@0/imagine-web-components.css?cache=' + CACHE_BUSTER; const DEV_OVERRIDE_WEB_COMPONENTS = env?.PUBLIC_AI_OVERRIDE_WEB_COMPONENTS === 'true'; let component: HTMLElement | null = null; diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 81429e239..944f31411 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -25,6 +25,7 @@ import { isSmallViewport, updateViewport } from '$lib/stores/viewport'; import { feedback } from '$lib/stores/feedback'; import { ProfileMode, resolvedProfile } from '$lib/profiles/index.svelte'; + import { CDN_CSS_URL, CDN_URL } from '$lib/studio/studio-widget'; function resolveTheme(theme: AppStore['themeInUse']) { switch (theme) { @@ -185,6 +186,11 @@ {/if} + + {#if resolvedProfile.id === ProfileMode.STUDIO} + + + {/if} From d66b097cdf577be254a774f1e365444678589dd2 Mon Sep 17 00:00:00 2001 From: Torsten Dittmann Date: Wed, 12 Nov 2025 16:43:19 +0400 Subject: [PATCH 6/7] Add APPWRITE_SITES_BASE_URL to initImagine config --- src/lib/studio/studio-widget.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/lib/studio/studio-widget.ts b/src/lib/studio/studio-widget.ts index 2522572ef..32b581eff 100644 --- a/src/lib/studio/studio-widget.ts +++ b/src/lib/studio/studio-widget.ts @@ -291,7 +291,8 @@ export async function initImagine( initImagineConfig( { AI_SERVICE_ENDPOINT: PUBLIC_AI_SERVICE_BASE_URL, - APPWRITE_ENDPOINT: PUBLIC_APPWRITE_ENDPOINT + APPWRITE_ENDPOINT: PUBLIC_APPWRITE_ENDPOINT, + APPWRITE_SITES_BASE_URL: '' }, { initialTheme: get(app).themeInUse, From e3735b9f5aab25d75a50450c9b062062d703a364 Mon Sep 17 00:00:00 2001 From: Torsten Dittmann Date: Wed, 12 Nov 2025 16:49:00 +0400 Subject: [PATCH 7/7] Remove capture in studio wrapper click listener --- src/lib/studio/studio-widget.ts | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/src/lib/studio/studio-widget.ts b/src/lib/studio/studio-widget.ts index 32b581eff..3271400d7 100644 --- a/src/lib/studio/studio-widget.ts +++ b/src/lib/studio/studio-widget.ts @@ -160,13 +160,9 @@ export function ensureStudioComponent(): HTMLElement | null { } const created = document.createElement('imagine-web-components-wrapper'); - created.addEventListener( - 'click', - (event) => { - event.stopPropagation(); - }, - { capture: true } - ); + created.addEventListener('click', (event) => { + event.stopPropagation(); + }); created.dataset.appwriteStudio = 'true'; ensureBaseStyles(created); document.body.appendChild(created);