Extract umami tag to component and render based on env

src/app.html

@@ -81,12 +81,6 @@
     <link rel="icon" href="%sveltekit.assets%/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-    <script
-      defer
-      src="https://umami.leomurca.xyz/script.js"
-      data-website-id="bd4c0533-36e6-402d-ac04-577993aaf43a"
-    ></script>
-
     <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <link rel="shortcut icon" href="/favicon.ico" />

src/lib/components/Analytics.svelte

@@ -0,0 +1,13 @@
+<script>
+  import { isDevelopment } from '$lib/utils/env';
+</script>
+
+<svelte:head>
+  {#if !isDevelopment()}
+    <script
+      defer
+      src="https://umami.leomurca.xyz/script.js"
+      data-website-id="bd4c0533-36e6-402d-ac04-577993aaf43a"
+    ></script>
+  {/if}
+</svelte:head>

src/lib/utils/env.js

@@ -4,4 +4,8 @@ function appVersion() {
   return APP_VERSION;
 }
 
-export { appVersion };
+function isDevelopment() {
+  return import.meta.env.MODE === 'development';
+}
+
+export { appVersion, isDevelopment };

src/routes/+layout.svelte

@@ -4,6 +4,7 @@
 
   import Header from '$lib/components/Header.svelte';
   import Footer from '$lib/components/Footer.svelte';
+  import Analytics from '$lib/components/Analytics.svelte';
 
   let mounted = false;
 
@@ -14,6 +15,8 @@
   }
 </script>
 
+<Analytics />
+
 {#if mounted}
   <Header />
   <main>