Merge pull request #323 from appwrite/fix-flicker

TorstenDittmann · web-flow · commit d72a760876d3 · 2023-11-06T16:46:21.000+01:00
Fix FOUC
diff --git a/src/app.html b/src/app.html
@@ -19,6 +19,7 @@
 
     <body class="theme-dark" data-sveltekit-preload-data="hover">
         <script>
+            // Theme
             const isDocs = window.location.pathname.startsWith('/docs');
             if (isDocs) {
                 const theme = localStorage.getItem('theme');
@@ -35,6 +36,16 @@
                     }
                 }
             }
+
+            // Progressive enhancement
+            document.body.dataset.jsEnabled = '';
+
+            // Banner
+            const BANNER_KEY = '%aw_banner_key%';
+            const hideBanner = localStorage.getItem(BANNER_KEY);
+            if (hideBanner === 'true') {
+                document.body.dataset.bannerHidden = '';
+            }
         </script>
         <div style="display: contents">%sveltekit.body%</div>
     </body>
diff --git a/src/hooks/server.ts b/src/hooks/server.ts
@@ -1,18 +1,29 @@
 import type { Handle } from '@sveltejs/kit';
 import redirects from './redirects.json';
+import { sequence } from '@sveltejs/kit/hooks';
+import { BANNER_KEY } from '$lib/constants';
 
 const redirectMap = new Map(redirects.map(({ link, redirect }) => [link, redirect]));
 
-export const handle: Handle = async ({ event, resolve }) => {
-	const currentPath = event.url.pathname;
-	if (redirectMap.has(currentPath)) {
-		return new Response(null, {
-			status: 308,
-			headers: {
-				location: redirectMap.get(currentPath) ?? ''
-			}
-		});
-	}
+const redirecter: Handle = async ({ event, resolve }) => {
+    const currentPath = event.url.pathname;
+    if (redirectMap.has(currentPath)) {
+        return new Response(null, {
+            status: 308,
+            headers: {
+                location: redirectMap.get(currentPath) ?? ''
+            }
+        });
+    }
 
-	return await resolve(event);
+    return await resolve(event);
 };
+
+const bannerRewriter: Handle = async ({ event, resolve }) => {
+    const response = await resolve(event, {
+        transformPageChunk: ({ html }) => html.replace('%aw_banner_key%', BANNER_KEY)
+    });
+    return response;
+};
+
+export const handle = sequence(redirecter, bannerRewriter);
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
@@ -0,0 +1 @@
+export const BANNER_KEY = 'discord-banner-01'; // Change key to force banner to show again
diff --git a/src/lib/layouts/Main.svelte b/src/lib/layouts/Main.svelte
@@ -12,12 +12,11 @@
 <script lang="ts">
     import { browser } from '$app/environment';
     import { MobileNav } from '$lib/components';
+    import { BANNER_KEY } from '$lib/constants';
     import { isVisible } from '$lib/utils/isVisible';
     import { createScrollInfo } from '$lib/utils/scroll';
     import { addEventListener } from '@melt-ui/svelte/internal/helpers';
     import { onMount } from 'svelte';
-    import { slide } from 'svelte/transition';
-    import { persisted } from '$lib/utils/persisted';
 
     let theme: 'light' | 'dark' | null = 'dark';
 
@@ -112,11 +111,10 @@
         return $scrollInfo.deltaDirChange < 200;
     })();
 
-    const BANNER_KEY = 'discord-banner-00'; // Change this key whenever you want to show the banner again for all users
-    let showTopBanner = persisted(BANNER_KEY, {
-        defaultValue: true,
-        validate: (value): value is boolean => typeof value === 'boolean'
-    });
+    const hideTopBanner = () => {
+        document.body.dataset.bannerHidden = '';
+        localStorage.setItem(BANNER_KEY, 'true');
+    };
 </script>
 
 <div class="u-position-relative">
@@ -163,30 +161,28 @@
         </div>
     </section>
     <header
-        class="aw-main-header is-special-padding theme-{resolvedTheme}"
-        class:is-transparent={browser}
+        class="aw-main-header is-special-padding theme-{resolvedTheme} is-transparent"
         class:is-hidden={$isHeaderHidden}
     >
-        {#if $showTopBanner}
-            <div class="aw-top-banner" transition:slide={{ duration: 250 }}>
-                <div class="aw-top-banner-content aw-u-color-text-primary">
-                    <a href="/discord" target="_blank" rel="noopener noreferrer">
-                        <span class="aw-caption-500">We are having lots of fun on</span>
-                        <span class="aw-icon-discord" aria-hidden="true" />
-                        <span class="aw-caption-500">Discord. Come and join us!</span>
-                    </a>
-                    {#if browser}
-                        <button
-                            class="aw-top-banner-button"
-                            aria-label="close discord message"
-                            on:click={() => ($showTopBanner = false)}
-                        >
-                            <span class="aw-icon-close" aria-hidden="true" />
-                        </button>
-                    {/if}
-                </div>
+        <div class="aw-top-banner">
+            <div class="aw-top-banner-content aw-u-color-text-primary">
+                <a href="/discord" target="_blank" rel="noopener noreferrer">
+                    <span class="aw-caption-500">We are having lots of fun on</span>
+                    <span class="aw-icon-discord" aria-hidden="true" />
+                    <span class="aw-caption-500">Discord. Come and join us!</span>
+                </a>
+                {#if browser}
+                    <button
+                        class="aw-top-banner-button"
+                        aria-label="close discord message"
+                        on:click={hideTopBanner}
+                    >
+                        <span class="aw-icon-close" aria-hidden="true" />
+                    </button>
+                {/if}
             </div>
-        {/if}
+        </div>
+
         <div class="aw-main-header-wrapper">
             <div class="aw-main-header-start">
                 <a href="/">
diff --git a/src/routes/api/blog/+server.ts b/src/routes/api/blog/+server.ts
diff --git a/src/routes/docs/references/+layout.svelte b/src/routes/docs/references/+layout.svelte
@@ -1,18 +1,10 @@
-<script lang="ts" context="module">
-    export function getReferencesContext() {
-        return getContext<Writable<boolean>>('references-expandable');
-    }
-</script>
-
 <script lang="ts">
     import { page } from '$app/stores';
     import Docs from '$lib/layouts/Docs.svelte';
-    import { preferredPlatform, preferredVersion } from '$lib/utils/references';
-    import { writable, type Writable } from 'svelte/store';
-    import { getContext, setContext } from 'svelte';
     import Sidebar, { type NavParent, type NavTree } from '$lib/layouts/Sidebar.svelte';
+    import { preferredPlatform, preferredVersion } from '$lib/utils/references';
 
-    const expandable = setContext('references-expandable', writable(false));
+    $: expandable = !!$page.url.pathname.match(/\/docs\/references\/.*?\/.*?\/.*?\/?/);
 
     $: prefix = `/docs/references/${$preferredVersion ?? $page.params?.version ?? 'cloud'}/${
         $preferredPlatform ?? $page.params?.platform ?? 'client-web'
@@ -96,7 +88,7 @@
     };
 </script>
 
-<Docs variant={$expandable ? 'expanded' : 'two-side-navs'} isReferences={$expandable}>
-    <Sidebar {navigation} expandable={$expandable} {parent} />
+<Docs variant={expandable ? 'expanded' : 'two-side-navs'} isReferences={expandable}>
+    <Sidebar {navigation} {expandable} {parent} />
     <slot />
 </Docs>
diff --git a/src/routes/docs/references/[version]/[platform]/[service]/+layout.svelte b/src/routes/docs/references/[version]/[platform]/[service]/+layout.svelte
diff --git a/src/scss/7-components/_main-header.scss b/src/scss/7-components/_main-header.scss
@@ -44,7 +44,11 @@
     &-link { color:hsl(var(--color-neutral-0) / 0.64); }
   }
 
-  &.is-transparent { background-color:transparent; -webkit-backdrop-filter:blur(pxToRem(10)); backdrop-filter:blur(pxToRem(10)); }
+  &.is-transparent { 
+    [data-js-enabled] & {
+      background-color: transparent; -webkit-backdrop-filter:blur(pxToRem(10)); backdrop-filter:blur(pxToRem(10)); 
+    }
+  }
 
   #{$theme-dark} &,
   &#{$theme-dark} {
diff --git a/src/scss/7-components/_top-banner.scss b/src/scss/7-components/_top-banner.scss
@@ -6,4 +6,8 @@
   background: linear-gradient(94deg, rgba(253, 54, 110, 0.00) 0%, rgba(253, 54, 110, 0.50) 50.82%, rgba(253, 54, 110, 0.00) 100%);
   &-content { line-height:pxToRem(20); transition:var(--transition); }
   &-button { position:absolute; inset-inline-end:pxToRem(12); }
+
+  [data-banner-hidden] & {
+    display: none;
+  }
 }

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export const BANNER_KEY = 'discord-banner-01'; // Change key to force banner to show again`
Original file line number	Diff line number	Diff line change
`@@ -6,4 +6,8 @@`
`6`	`6`	`background: linear-gradient(94deg, rgba(253, 54, 110, 0.00) 0%, rgba(253, 54, 110, 0.50) 50.82%, rgba(253, 54, 110, 0.00) 100%);`
`7`	`7`	`&-content { line-height:pxToRem(20); transition:var(--transition); }`
`8`	`8`	`&-button { position:absolute; inset-inline-end:pxToRem(12); }`
	`9`	`+`
	`10`	`+ [data-banner-hidden] & {`
	`11`	`+ display: none;`
	`12`	`+ }`
`9`	`13`	`}`