formatting and lazy load

1 files changed, 31 insertions, 7 deletions

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index ac15a2e..5229cac 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,20 +1,44 @@
 <script lang="ts">
-	import Header from "$lib/components/Header.svelte";
-	import Footer from "$lib/components/Footer.svelte";
-	import favicon from "$lib/assets/favicon.svg";
-	import "$lib/styles/global.css";
+  import { onMount } from "svelte";
+  import Header from "$lib/components/Header.svelte";
+  import Footer from "$lib/components/Footer.svelte";
+  import favicon from "$lib/assets/favicon.svg";
+  import "$lib/styles/global.css";
 
-	let { children } = $props();
+  let { children } = $props();
+
+  onMount(() => {
+    const loadAnalytics = () => {
+      if (document.querySelector('script[data-goatcounter-script="true"]'))
+        return;
+
+      const script = document.createElement("script");
+      script.src = "https://stats.wsap.dev/count.js";
+      script.async = true;
+      script.defer = true;
+      script.setAttribute("data-goatcounter", "https://stats.wsap.dev/count");
+      script.setAttribute("data-goatcounter-script", "true");
+      document.head.appendChild(script);
+    };
+
+    if (document.readyState === "complete") {
+      window.setTimeout(loadAnalytics, 0);
+      return;
+    }
+
+    window.addEventListener("load", loadAnalytics, { once: true });
+    return () => window.removeEventListener("load", loadAnalytics);
+  });
 </script>
 
 <svelte:head>
-	<link rel="icon" href={favicon} />
+  <link rel="icon" href={favicon} />
 </svelte:head>
 
 <Header title="Berke Güzel" description="Super. Bad. Code." />
 
 <main class="container">
-	{@render children()}
+  {@render children()}
 </main>
 
 <Footer />