Skip to content

Commit d58ee51

Browse files
ItzNotABugItzNotABug
authored
Merge branch 'feat-profiles' into add-domain-callbacks
2 parents 7cdcba9 + e3735b9 commit d58ee51

7 files changed

Lines changed: 386 additions & 16 deletions

File tree

‎src/app.html‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,10 @@
1111
<meta name="viewport" content="width=device-width, initial-scale=1" />
1212
%sveltekit.head%
1313
</head>
14-
<body data-sveltekit-preload-data="hover" data-loading="true">
14+
<body
15+
data-sveltekit-preload-data="hover"
16+
data-loading="true"
17+
data-profile="%sveltekit.env.PUBLIC_CONSOLE_PROFILE%">
1518
<script src="%sveltekit.assets%/js/theme-loader.js"></script>
1619
<div id="svelte">%sveltekit.body%</div>
1720
<div class="page-loader">
@@ -25,13 +28,25 @@
2528
src="%sveltekit.assets%/images/appwrite-logo-light.svg"
2629
width="120"
2730
height="22"
28-
class="logo-light"
31+
class="console-logo-light"
2932
alt="Appwrite Logo" />
3033
<img
3134
src="%sveltekit.assets%/images/appwrite-logo-dark.svg"
3235
width="120"
3336
height="22"
34-
class="logo-dark"
37+
class="console-logo-dark"
38+
alt="Appwrite Logo" />
39+
<img
40+
src="%sveltekit.assets%/images/imagine-logo-light.svg"
41+
width="120"
42+
height="22"
43+
class="studio-logo-light"
44+
alt="Appwrite Logo" />
45+
<img
46+
src="%sveltekit.assets%/images/imagine-logo-dark.svg"
47+
width="120"
48+
height="22"
49+
class="studio-logo-dark"
3550
alt="Appwrite Logo" />
3651
</div>
3752
</body>

‎src/lib/profiles/index.svelte.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { resolve } from '$app/paths';
1+
import { asset, resolve } from '$app/paths';
22
import type { ResolvedPathname } from '$app/types';
33
import { PUBLIC_CONSOLE_PROFILE } from '$env/static/public';
44

@@ -44,8 +44,8 @@ export const base: Profile = {
4444
platform: 'Appwrite',
4545
logo: {
4646
src: {
47-
dark: 'https://appwrite.io/images/logos/logo.svg',
48-
light: 'https://appwrite.io/images/logos/logo.svg'
47+
dark: asset('/images/appwrite-logo-dark.svg'),
48+
light: asset('/images/appwrite-logo-light.svg')
4949
},
5050
alt: 'Logo Appwrite'
5151
},
@@ -81,8 +81,8 @@ export const studio: Profile = {
8181
platform: 'Imagine',
8282
logo: {
8383
src: {
84-
dark: 'https://imagine-console.up.railway.app/images/imagine-logo-dark.svg',
85-
light: 'https://imagine-console.up.railway.app/images/imagine-logo-light.svg'
84+
dark: asset('/images/imagine-logo-dark.svg'),
85+
light: asset('/images/imagine-logo-light.svg')
8686
},
8787
alt: 'Imagine Appwrite'
8888
},

‎src/lib/studio/studio-widget.ts‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,11 @@ const STYLE_ATTRIBUTE = 'data-appwrite-studio-style';
1111
const BLOCK_START_BASE_OFFSET = 48;
1212
const INLINE_START_BASE_OFFSET = 8;
1313
const CACHE_BUSTER = new Date().getTime();
14-
const CDN_URL =
14+
export const CDN_URL =
1515
'https://esm.sh/@imagine.dev/web-components@0/web-components?bundle=false&deps=react@19.1.0,react-dom@19.1.0&cache=' +
1616
CACHE_BUSTER;
17+
export const CDN_CSS_URL =
18+
'https://esm.sh/@imagine.dev/web-components@0/imagine-web-components.css?cache=' + CACHE_BUSTER;
1719
const DEV_OVERRIDE_WEB_COMPONENTS = env?.PUBLIC_AI_OVERRIDE_WEB_COMPONENTS === 'true';
1820

1921
let component: HTMLElement | null = null;
@@ -158,6 +160,9 @@ export function ensureStudioComponent(): HTMLElement | null {
158160
}
159161

160162
const created = document.createElement('imagine-web-components-wrapper');
163+
created.addEventListener('click', (event) => {
164+
event.stopPropagation();
165+
});
161166
created.dataset.appwriteStudio = 'true';
162167
ensureBaseStyles(created);
163168
document.body.appendChild(created);
@@ -287,7 +292,7 @@ export async function initImagine(
287292
{
288293
AI_SERVICE_ENDPOINT: PUBLIC_AI_SERVICE_BASE_URL,
289294
APPWRITE_ENDPOINT: PUBLIC_APPWRITE_ENDPOINT,
290-
APPWRITE_SITES_BASE_URL: 'https://stage.appwrite.network'
295+
APPWRITE_SITES_BASE_URL: ''
291296
},
292297
{
293298
initialTheme: get(app).themeInUse,

‎src/routes/+layout.svelte‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
import { isSmallViewport, updateViewport } from '$lib/stores/viewport';
2626
import { feedback } from '$lib/stores/feedback';
2727
import { ProfileMode, resolvedProfile } from '$lib/profiles/index.svelte';
28+
import { CDN_CSS_URL, CDN_URL } from '$lib/studio/studio-widget';
2829
2930
function resolveTheme(theme: AppStore['themeInUse']) {
3031
switch (theme) {
@@ -185,6 +186,11 @@
185186
{/if}
186187

187188
<link rel="stylesheet" href={`${base}/css/profiles/${resolvedProfile.id}.css`} />
189+
190+
{#if resolvedProfile.id === ProfileMode.STUDIO}
191+
<link rel="preload" as="style" type="text/css" href={CDN_CSS_URL} />
192+
<link rel="preload" as="script" type="text/javascript" href={CDN_URL} />
193+
{/if}
188194
</svelte:head>
189195

190196
<Root theme={resolveTheme($app.themeInUse)}>

‎static/css/loading.css‎

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,21 @@ body {
1010
opacity: 1;
1111
}
1212

13-
.theme-dark .page-loader {
13+
[data-profile='console'].theme-dark .page-loader {
14+
--p-page-loader-primary-color: rgb(219, 26, 90);
1415
--p-page-loader-background-color: #000;
1516
}
16-
.theme-light .page-loader {
17+
[data-profile='console'].theme-light .page-loader {
18+
--p-page-loader-primary-color: rgb(219, 26, 90);
19+
--p-page-loader-background-color: #fff;
20+
}
21+
22+
[data-profile='studio'].theme-dark .page-loader {
23+
--p-page-loader-primary-color: #fff;
24+
--p-page-loader-background-color: #000;
25+
}
26+
[data-profile='studio'].theme-light .page-loader {
27+
--p-page-loader-primary-color: #000;
1728
--p-page-loader-background-color: #fff;
1829
}
1930

@@ -43,11 +54,17 @@ body {
4354
transform: translate(-50%, -50%);
4455
}
4556

46-
.theme-dark .page-loader .logo-dark {
57+
[data-profile='console'].theme-dark .page-loader .console-logo-dark {
58+
visibility: visible;
59+
}
60+
[data-profile='console'].theme-light .page-loader .console-logo-light {
4761
visibility: visible;
4862
}
4963

50-
.theme-light .page-loader .logo-light {
64+
[data-profile='studio'].theme-dark .page-loader .studio-logo-dark {
65+
visibility: visible;
66+
}
67+
[data-profile='studio'].theme-light .page-loader .studio-logo-light {
5168
visibility: visible;
5269
}
5370

@@ -66,10 +83,10 @@ body {
6683
width: 124px;
6784
height: 124px;
6885
margin: 10px;
69-
border: 10px solid rgb(219, 26, 90);
86+
border: 10px solid var(--p-page-loader-primary-color);
7087
border-radius: 50%;
7188
animation: animation 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
72-
border-color: rgb(219, 26, 90) transparent transparent transparent;
89+
border-color: var(--p-page-loader-primary-color) transparent transparent transparent;
7390
}
7491
.page-loader .animation > div:nth-child(1) {
7592
animation-delay: -0.45s;

0 commit comments

Comments
 (0)