Fix FOUC

src/app.html

@@ -35,6 +35,8 @@
                     }
                 }
             }
+
+            document.body.dataset.jsEnabled = '';
         </script>
         <div style="display: contents">%sveltekit.body%</div>
     </body>

src/lib/layouts/Main.svelte

@@ -11,13 +11,13 @@
 
 <script lang="ts">
     import { browser } from '$app/environment';
+    import { page } from '$app/stores';
     import { MobileNav } from '$lib/components';
     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 +112,13 @@
         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'
-    });
+    let showTopBanner = $page.data.showBanner;
+    const hideTopBanner = () => {
+        showTopBanner = false;
+        fetch('/api/banner', {
+            method: 'POST'
+        });
+    };
 </script>
 
 <div class="u-position-relative">
@@ -163,11 +165,10 @@
         </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}
+        {#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">
@@ -179,7 +180,7 @@
                         <button
                             class="aw-top-banner-button"
                             aria-label="close discord message"
-                            on:click={() => ($showTopBanner = false)}
+                            on:click={hideTopBanner}
                         >
                             <span class="aw-icon-close" aria-hidden="true" />
                         </button>

src/routes/+layout.server.ts

@@ -1 +1,7 @@
+import { BANNER_KEY } from './api/banner/constants.js';
+
 export const prerender = true;
+
+export const load = async ({ cookies }) => {
+    return { showBanner: cookies.get(BANNER_KEY) !== 'true' };
+};

src/routes/api/banner/+server.ts

@@ -0,0 +1,11 @@
+import { BANNER_KEY } from './constants.js';
+
+export const POST = ({ cookies }) => {
+    cookies.set(BANNER_KEY, 'true', {
+        path: '/'
+    });
+
+    return new Response(null, {
+        status: 200
+    });
+};

src/routes/api/banner/constants.ts

@@ -0,0 +1 @@
+export const BANNER_KEY = 'discord-banner-00'; // Change key to force banner to show again

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>

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} {

svelte.config.js

@@ -11,9 +11,10 @@ function absoulute(path) {
     return join(dirname(fileURLToPath(import.meta.url)), path);
 }
 
-const isVercel = process.env.VERCEL === '1';
+// const isVercel = process.env.VERCEL === '1';
+const isVercel = true;
 
-const adapter = isVercel ? staticAdapter() : nodeAdapter();
+const adapter = isVercel ? staticAdapter({ strict: false, pages: 'public' }) : nodeAdapter();
 
 /** @type {import('@sveltejs/kit').Config}*/
 const config = {