Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix FOUC #323

Merged
merged 11 commits into from
Nov 6, 2023
Merged
Show file tree
Hide file tree
Changes from 10 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions src/app.html
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand All @@ -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>
Expand Down
33 changes: 22 additions & 11 deletions src/hooks/server.ts
Original file line number Diff line number Diff line change
@@ -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);
1 change: 1 addition & 0 deletions src/lib/constants.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export const BANNER_KEY = 'discord-banner-01'; // Change key to force banner to show again
52 changes: 24 additions & 28 deletions src/lib/layouts/Main.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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="/">
Expand Down
1 change: 0 additions & 1 deletion src/routes/+layout.server.ts
TorstenDittmann marked this conversation as resolved.
Show resolved Hide resolved

This file was deleted.

28 changes: 0 additions & 28 deletions src/routes/api/blog/+server.ts

This file was deleted.

16 changes: 4 additions & 12 deletions src/routes/docs/references/+layout.svelte
Original file line number Diff line number Diff line change
@@ -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'
Expand Down Expand Up @@ -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>

This file was deleted.

6 changes: 5 additions & 1 deletion src/scss/7-components/_main-header.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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} {
Expand Down
4 changes: 4 additions & 0 deletions src/scss/7-components/_top-banner.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}