bartvdbraak/hellob.art
1
0
Fork 0
mirror of https://github.com/bartvdbraak/hellob.art.git synced 2025-06-29 07:49:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: added vercel web vitals implementation

Browse source
This commit is contained in:
Bart van der Braak 2023-07-29 19:07:32 +02:00
parent f84989021c
commit 5df4d20ee1
5 changed files with 112 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/routes/+layout.svelte
View file

@ -7,6 +7,20 @@
import Navigation from '../lib/components/Navigation.svelte';
import Header from '$lib/components/Header.svelte';
import { webVitals } from '$lib/vitals';
import { browser } from '$app/env';
import { page } from '$app/stores';
let analyticsId = import.meta.env.VERCEL_ANALYTICS_ID;
$: if (browser && analyticsId) {
webVitals({
path: $page.url.pathname,
params: $page.params,
analyticsId
})
}
let routes = [
{ url: '/', label: 'Home' },
{ url: '/projects', label: 'Projects' },
@ -16,20 +30,17 @@
let progress = 0;
function handleScroll(event: Event) {
const { scrollTop, scrollHeight, clientHeight } = event.currentTarget as HTMLElement;
progress = (scrollTop / (scrollHeight - clientHeight)) * 100;
}
function handleScroll(event: Event) {
const { scrollTop, scrollHeight, clientHeight } = event.currentTarget as HTMLElement;
progress = (scrollTop / (scrollHeight - clientHeight)) * 100;
}
</script>
<Drawer width="w-[280px] md:w-[480px]">
<Navigation {routes} />
</Drawer>
<AppShell
slotSidebarLeft="w-0 md:w-40"
on:scroll={handleScroll}
>
<AppShell slotSidebarLeft="w-0 md:w-40" on:scroll={handleScroll}>
<svelte:fragment slot="header">
<Header {progress} />
</svelte:fragment>