From 1324a51bec4796414ae3c5e5ef70e2a72f0b5365 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Leonardo=20Mur=C3=A7a?= <leo@leomurca.xyz>
Date: Fri, 6 Jun 2025 16:45:23 -0300
Subject: [PATCH] Extract umami tag to component and render based on env

---
 src/app.html                        |  6 ------
 src/lib/components/Analytics.svelte | 13 +++++++++++++
 src/lib/utils/env.js                |  6 +++++-
 src/routes/+layout.svelte           |  3 +++
 4 files changed, 21 insertions(+), 7 deletions(-)
 create mode 100644 src/lib/components/Analytics.svelte

diff --git a/src/app.html b/src/app.html
index 6d343c1..50c86a5 100644
--- a/src/app.html
+++ b/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" />
diff --git a/src/lib/components/Analytics.svelte b/src/lib/components/Analytics.svelte
new file mode 100644
index 0000000..0b6fcd4
--- /dev/null
+++ b/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>
diff --git a/src/lib/utils/env.js b/src/lib/utils/env.js
index 5dde7bb..5d1b53b 100644
--- a/src/lib/utils/env.js
+++ b/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 };
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 244c409..38404ed 100644
--- a/src/routes/+layout.svelte
+++ b/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>