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/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/src/lib/studio/studio-widget.ts b/src/lib/studio/studio-widget.ts index 82c3464d0..79495883a 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; @@ -158,6 +160,9 @@ export function ensureStudioComponent(): HTMLElement | null { } const created = document.createElement('imagine-web-components-wrapper'); + created.addEventListener('click', (event) => { + event.stopPropagation(); + }); created.dataset.appwriteStudio = 'true'; ensureBaseStyles(created); document.body.appendChild(created); @@ -287,7 +292,7 @@ export async function initImagine( { AI_SERVICE_ENDPOINT: PUBLIC_AI_SERVICE_BASE_URL, APPWRITE_ENDPOINT: PUBLIC_APPWRITE_ENDPOINT, - APPWRITE_SITES_BASE_URL: 'https://stage.appwrite.network' + APPWRITE_SITES_BASE_URL: '' }, { initialTheme: get(app).themeInUse, 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} diff --git a/static/css/loading.css b/static/css/loading.css index f4b292985..a00c8de85 100644 --- a/static/css/loading.css +++ b/static/css/loading.css @@ -10,10 +10,21 @@ 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; } @@ -43,11 +54,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 +83,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; 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 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +