Merge pull request #63 from appwrite/fix-torsten-qa

fix: torsten-qa

.gitignore

@@ -2,6 +2,7 @@
 node_modules
 /build
 /.svelte-kit
+/.idea
 /package
 .env
 .env.*

src/lib/animations/Products/Products.svelte

@@ -235,7 +235,7 @@
 							{#if copy}
 								<li data-active={isActive ? '' : undefined}>
 									<h3>
-										<img src={isActive ? copy.icon.active : copy.icon.inactive} alt="" />
+										<img src={isActive ? copy.icon.active : copy.icon.inactive} alt="" width="32" height="32" />
 										<span class="aw-label">{copy.title}</span>
 									</h3>
 									{#if isActive}

src/lib/components/Spline.svelte

@@ -18,7 +18,6 @@
 
 		const onLoad = () => {
 			loaded.set(true);
-
 			node.shadowRoot?.querySelector('#logo')?.remove(); // Remove Spline logo
 		};
 
@@ -40,7 +39,7 @@
 			if (!l) return;
 			setTimeout(() => {
 				node?.style.setProperty('display', 'none');
-			}, 500);
+			}, 150);
 		});
 
 		return {

src/lib/layouts/Docs.svelte

@@ -6,19 +6,23 @@
 	export type DocsLayoutState = {
 		showReferences: boolean;
 		showSidenav: boolean;
+		currentVariant: DocsLayoutVariant | null;
 	};
 	export const layoutState = writable<DocsLayoutState>({
 		showReferences: false,
-		showSidenav: false
+		showSidenav: false,
+		currentVariant: null
 	});
 	export function toggleReferences() {
 		layoutState.update((state) => ({
+			...state,
 			showReferences: !state.showReferences,
 			showSidenav: false
 		}));
 	}
 	export function toggleSidenav() {
 		layoutState.update((state) => ({
+			...state,
 			showReferences: false,
 			showSidenav: !state.showSidenav
 		}));
@@ -35,12 +39,14 @@
 	};
 
 	$: variantClass = variantClasses[variant];
+	$: $layoutState.currentVariant = variant;
 
 	navigating.subscribe(() => {
-		layoutState.set({
+		layoutState.update((n) => ({
+			...n,
 			showReferences: false,
 			showSidenav: false
-		});
+		}));
 	});
 </script>
 
@@ -124,7 +130,11 @@
 					</div>
 					<div class="aw-main-header-end">
 						<div class="u-flex u-gap-8">
-							<a href="https://github.com/appwrite/appwrite/stargazers" target="_blank" class="aw-button is-text">
+							<a
+								href="https://github.com/appwrite/appwrite/stargazers"
+								target="_blank"
+								class="aw-button is-text"
+							>
 								<svg
 									xmlns="http://www.w3.org/2000/svg"
 									width="18"

src/lib/layouts/Sidebar.svelte

@@ -33,7 +33,10 @@
 	}
 </script>
 
-<nav class="aw-side-nav">
+<nav
+	class="aw-side-nav is-transparent"
+	class:is-transparent={$layoutState.currentVariant !== 'two-side-navs'}
+>
 	<div class="aw-side-nav-wrapper">
 		<button class="aw-input-text aw-is-not-desktop">
 			<span class="icon-search" />
@@ -95,7 +98,11 @@
 				<span class="text">Go to console</span>
 			</button>
 
-			<a href="https://github.com/appwrite/appwrite/stargazers" target="_blank" class="aw-button is-text u-width-full-line">
+			<a
+				href="https://github.com/appwrite/appwrite/stargazers"
+				target="_blank"
+				class="aw-button is-text u-width-full-line"
+			>
 				<span class="aw-icon-star" aria-hidden="true" />
 				<span class="text">Star on GitHub</span>
 				<span class="aw-inline-tag aw-sub-body-400">33.2K</span>

src/routes/+page.svelte

@@ -174,8 +174,8 @@
 							Self-host your data or take it to the Cloud
 						</h2>
 						<p class="aw-description u-max-width-700">
-							Migrate your data from and to any platform at any time with Appwrite Migrations.
-							With built-in security and privacy for peace of mind.
+							Migrate your data from and to any platform at any time with Appwrite Migrations. With
+							built-in security and privacy for peace of mind.
 						</p>
 					</section>
 					<div class="u-overflow-hidden aw-u-margin-block-start-80">
@@ -331,23 +331,23 @@
 			<Spline let:fallback let:viewer>
 				<div
 					class="u-position-absolute aw-is-not-mobile"
-					style:inline-size="512px"
-					style:block-size="512px"
-					style:inset-block-start="8rem"
-					style:left="calc(50% - 256px + 18rem)"
+					style:inline-size="768px"
+					style:block-size="768px"
+					style:inset-block-start="0rem"
+					style:left="calc(50% - 384px + 350px)"
 				>
 					<img
 						src="/images/animations/tech.png"
-						width="512"
-						height="512"
+						width="768"
+						height="768"
 						alt=""
 						style="position: absolute; display: block;"
 						use:fallback
 					/>
-
 					<spline-viewer
-						url="https://prod.spline.design/KvoQWZAi5foGUXxJ/scene.splinecode"
-						loading="eager"
+						url="https://prod.spline.design/0WfvducTgy5c8aVi/scene.splinecode"
+						width="768"
+						height="768"
 						use:viewer
 					/>
 				</div>