Merge branch 'cloud-1.1.x' of https://github.com/appwrite/console int…

…o cloud-1.2.x
appwrite · Aug 4, 2023 · e33335b · e33335b
2 parents 2bec09c + 59d6ebe
commit e33335b
Show file tree

Hide file tree

Showing 39 changed files with 1,766 additions and 79 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
     },
     "dependencies": {
         "@analytics/google-analytics": "^1.0.5",
+        "@analytics/google-tag-manager": "^0.5.3",
         "@appwrite.io/pink": "^0.0.4",
         "@aw-labs/appwrite-console": "npm:appwrite-shimon@^7.2.4",
         "@popperjs/core": "^2.11.6",

diff --git a/src/app.html b/src/app.html
@@ -43,6 +43,8 @@
         <link rel="preload" as="style" type="text/css" href="/fonts/main.css" />
         <link rel="stylesheet" href="/fonts/main.css" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <!-- {{CLOUD_OG}} -->
+
         %sveltekit.head%
     </head>
     <body>

diff --git a/src/lib/actions/analytics.ts b/src/lib/actions/analytics.ts
@@ -1,7 +1,8 @@
 import { page } from '$app/stores';
 import { user } from '$lib/stores/user';
-import { ENV, MODE, VARS } from '$lib/system';
+import { ENV, MODE, VARS, isCloud } from '$lib/system';
 import googleAnalytics from '@analytics/google-analytics';
+import googleTagManager from '@analytics/google-tag-manager';
 import { AppwriteException } from '@aw-labs/appwrite-console';
 import Analytics from 'analytics';
 import { get } from 'svelte/store';
@@ -11,7 +12,14 @@ const analytics = Analytics({
     plugins: [
         googleAnalytics({
             measurementIds: [VARS.GOOGLE_ANALYTICS || 'G-R4YJ9JN8L4']
-        })
+        }),
+        ...(isCloud
+            ? [
+                  googleTagManager({
+                      containerId: [VARS.GOOGLE_TAG || 'GTM-P3T9TBV']
+                  })
+              ]
+            : [])
     ]
 });
 

diff --git a/src/lib/images/login/cloud-bg-mobile.svg b/src/lib/images/login/cloud-bg-mobile.svg
diff --git a/src/lib/layout/notifications.svelte b/src/lib/layout/notifications.svelte
@@ -26,4 +26,12 @@
         right: 24px;
         z-index: 1000;
     }
+
+    @media (max-width: 512px) {
+        section {
+            top: calc(var(--main-header-height) + 16px);
+            right: 16px;
+            left: 16px;
+        }
+    }
 </style>
diff --git a/src/lib/layout/unauthenticated.svelte b/src/lib/layout/unauthenticated.svelte
@@ -5,6 +5,7 @@
     import Cloud1 from '$lib/images/login/cloud-1.svg';
     import Cloud2 from '$lib/images/login/cloud-2.svg';
     import AppwriteCloudBg from '$lib/images/login/cloud-bg.svg';
+    import AppwriteCloudBgMobile from '$lib/images/login/cloud-bg-mobile.svg';
     import LoginDark from '$lib/images/login/login-dark-mode.svg';
     import LoginLight from '$lib/images/login/login-light-mode.svg';
     import { app } from '$lib/stores/app';
@@ -143,10 +144,9 @@
     <section
         class="grid-1-1-col-2 u-flex u-main-center u-cross-center"
         class:is-cloud={isCloud}
-        style:--url={`url(${AppwriteCloudBg})`}>
-        <div
-            class="container u-flex u-flex-vertical u-cross-center full-height"
-            class:cloud-contents={isCloud}>
+        style:--url={`url(${AppwriteCloudBg})`}
+        style:--url-mobile={`url(${AppwriteCloudBgMobile})`}>
+        <div class="container u-flex u-flex-vertical u-cross-center" class:cloud-contents={isCloud}>
             {#if isCloud}
                 <a class="mobile-logo is-only-mobile" href={user ? '/console' : '/'}>
                     <img
@@ -163,8 +163,14 @@
             {/if}
 
             <div class="u-max-width-500 u-width-full-line">
-                <h1 class="heading-level-3 u-margin-block-start-auto"><slot name="title" /></h1>
-                <div class="u-margin-block-start-40">
+                <h1 class="heading-level-2 u-margin-block-start-auto">
+                    {#if isCloud}
+                        <img src={Cloud1} alt="" class="cloud-1" />
+                        <img src={Cloud2} alt="" class="cloud-2" />
+                    {/if}
+                    <slot name="title" />
+                </h1>
+                <div class="u-margin-block-start-24">
                     <slot />
                 </div>
 
@@ -195,11 +201,6 @@
         }
     }
 
-    .full-height {
-        block-size: 100vh;
-        block-size: 100lvh;
-    }
-
     .cloud-section {
         background: var(--url);
         background-repeat: no-repeat;
@@ -274,13 +275,13 @@
     }
 
     .mobile-logo {
-        margin-block-start: 5rem;
+        margin-block-start: 1rem;
         margin-block-end: 0.5rem;
     }
 
     .mobile-beta {
         font-size: 0.75rem;
-        margin-block-end: 2rem;
+        margin-block-end: 6rem;
 
         > span {
             background: hsl(var(--color-neutral-120));
@@ -292,7 +293,32 @@
         justify-content: center;
     }
 
+    .heading-level-2 {
+        .cloud-1,
+        .cloud-2 {
+            display: none;
+        }
+    }
+
     @media (max-width: 767px) {
+        .heading-level-2 {
+            position: relative;
+            .cloud-1,
+            .cloud-2 {
+                display: block;
+                position: absolute;
+            }
+
+            .cloud-1 {
+                left: 32px;
+                top: -40px;
+            }
+
+            .cloud-2 {
+                right: 0;
+                top: 10px;
+            }
+        }
         .main-cloud {
             background-color: hsl(var(--color-neutral-500));
         }
@@ -302,14 +328,31 @@
         }
 
         .is-cloud {
-            background: var(--url);
-            background-position: center -150px;
+            background: var(--url-mobile);
+            background-position: 0px calc(30px - 5vw);
+            background-size: 100vw;
 
             background-repeat: no-repeat;
         }
 
         .cloud-section {
             display: none;
         }
+
+        section:last-child {
+            padding-block-end: 32px;
+        }
+    }
+
+    @media (min-width: 530px) and (max-width: 767px) {
+        .heading-level-2 {
+            .cloud-1 {
+                display: none;
+            }
+        }
+
+        .is-cloud {
+            background-position: 0px calc(30px - 15vw);
+        }
     }
 </style>
diff --git a/src/lib/system.ts b/src/lib/system.ts
@@ -10,7 +10,8 @@ export const VARS = {
         | undefined,
     CONSOLE_MODE: import.meta.env?.VITE_CONSOLE_MODE?.toString() as string | undefined,
     VERCEL_ENV: import.meta.env?.VITE_VERCEL_ENV?.toString() as string | undefined,
-    GOOGLE_ANALYTICS: import.meta.env?.VITE_GA_PROJECT?.toString() as string | undefined
+    GOOGLE_ANALYTICS: import.meta.env?.VITE_GA_PROJECT?.toString() as string | undefined,
+    GOOGLE_TAG: import.meta.env?.VITE_GTM_PROJECT?.toString() as string | undefined
 };
 
 export const ENV = {

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -60,12 +60,20 @@
          * Handle initial load.
          */
         if (!$page.url.pathname.startsWith('/auth')) {
-            const acceptedRoutes = ['/login', '/register', '/recover', '/invite', '/card'];
+            const acceptedRoutes = [
+                '/login',
+                '/register',
+                '/recover',
+                '/invite',
+                '/card',
+                '/hackathon'
+            ];
             if ($user) {
                 if (
                     !$page.url.pathname.startsWith('/console') &&
                     !$page.url.pathname.startsWith('/invite') &&
-                    !$page.url.pathname.startsWith('/card')
+                    !$page.url.pathname.startsWith('/card') &&
+                    !$page.url.pathname.startsWith('/hackathon')
                 ) {
                     await goto(`${base}/console`, {
                         replaceState: true

diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
@@ -32,7 +32,8 @@ export const load: LayoutLoad = async ({ depends, url }) => {
             '/auth/magic-url',
             '/auth/oauth2/success',
             '/auth/oauth2/failure',
-            '/card'
+            '/card',
+            '/hackathon'
         ];
 
         if (!acceptedRoutes.some((n) => url.pathname.startsWith(n))) {

diff --git a/src/routes/card/+page.ts b/src/routes/card/+page.ts
@@ -5,4 +5,6 @@ export async function load({ parent }) {
     if (!isCloud) throw redirect(303, '/');
     const { account } = await parent();
     if (!account) throw redirect(303, '/login');
+
+    throw redirect(303, `/card/${account.$id}`);
 }
diff --git a/src/routes/card/Card.svelte b/src/routes/card/Card.svelte
@@ -12,14 +12,11 @@
     import { windowFocusStore } from '$lib/stores/windowFocus';
 
     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;
     export let isFlipped = false;
-    export let userId: string;
+    export let base64: { front: string; back: string };
 
     let interacting = false;
 
@@ -128,9 +125,9 @@
         if (!cardEl) return;
         const rect = cardEl.getBoundingClientRect(); // get element's size/position
         let delay = 100;
-        let scaleW = (window.innerWidth / rect.width) * 0.9;
-        let scaleH = (window.innerHeight / rect.height) * 0.9;
-        let scaleF = 1.75;
+        let scaleW = (window.innerWidth / rect.width) * 0.65;
+        let scaleH = (window.innerHeight / rect.height) * 0.65;
+        let scaleF = 1.5;
         setCenter();
 
         delay = 1000;
@@ -229,9 +226,6 @@
 		--angle: ${angle}deg;
 		--center: ${$centerProximity};
 	`;
-
-    const endpoint = VARS.APPWRITE_ENDPOINT ?? `${$page.url.origin}/v1`;
-    const { frontImg, backImg } = getCardImgUrls(userId, endpoint);
 </script>
 
 <svelte:window on:keydown={windowKeyDown} />
@@ -250,7 +244,15 @@
             }}>
             <div class="card__back">
                 <img
-                    src={backImg}
+                    class="invisible"
+                    src={base64.back}
+                    alt="The back of the Card"
+                    loading="lazy"
+                    width="450"
+                    height="274" />
+                <img
+                    class="abs"
+                    src={base64.back}
                     alt="The back of the Card"
                     loading="lazy"
                     width="450"
@@ -262,14 +264,18 @@
                 <div class="card__thick" style:--i={i + 1} />
             {/each}
             <div class="card__front" style:--thickness={THICKNESS}>
-                <img src={frontImg} alt="The front of the card" />
+                <img class="invisible" src={base64.front} alt="" />
+                <img class="abs" src={base64.front} alt="The front of the card" />
                 <div class="card__glare" />
             </div>
         </button>
     </div>
 </div>
 
 <style lang="scss">
+    .invisible {
+        opacity: 0;
+    }
     @media (prefers-reduced-motion: reduce) {
         .cb-card,
         .cb-card * {
@@ -336,10 +342,10 @@
     }
 
     .card__rotator {
-        transform: rotateY(var(--rx)) rotateX(var(--ry)) rotateZ(var(--rz));
-        transform-style: preserve-3d;
         -webkit-transform: rotateY(var(--rx)) rotateX(var(--ry)) rotateZ(var(--rz));
         -webkit-transform-style: preserve-3d;
+        transform: rotateY(var(--rx)) rotateX(var(--ry)) rotateZ(var(--rz));
+        transform-style: preserve-3d;
         box-shadow: 0px 10px 20px -5px var(--shadow-clr);
         border-radius: var(--radius);
         outline: none;
@@ -401,6 +407,21 @@
         }
     }
 
+    .card__front,
+    .card__back {
+        .abs {
+            display: block;
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            translate: -50% -50%;
+            width: 200%;
+            scale: calc(100 / 200);
+            max-inline-size: initial;
+            max-block-size: initial;
+        }
+    }
+
     .card__front::before,
     .card__back::before {
         content: '';