add google analytics and microsoft clarity

src/components/Analytics.astro

@@ -0,0 +1,34 @@
+---
+const gaId = import.meta.env.PUBLIC_GA_ID;
+const clarityId = import.meta.env.PUBLIC_CLARITY_ID;
+
+const isProd = import.meta.env.MODE === "production";
+---
+
+{isProd && gaId && (
+  <>
+    <!-- Google Analytics -->
+    <script async src={`https://www.googletagmanager.com/gtag/js?id=${gaId}`}></script>
+
+    <script is:inline>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+
+      gtag('js', new Date());
+      gtag('config', "${gaId}");
+    </script>
+  </>
+)}
+
+{isProd && clarityId && (
+  <script is:inline>
+    (function(c,l,a,r,i,t,y){
+      c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+      t=l.createElement(r);
+      t.async=1;
+      t.src="https://www.clarity.ms/tag/"+i;
+      y=l.getElementsByTagName(r)[0];
+      y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", clarityId);
+  </script>
+)}

src/constants/tools.ts

@@ -105,7 +105,8 @@ export const tools: Tool[] = [
   },
   {
     name: "Number Base Converter",
-    description: "Convert numbers between Decimal, Binary, Hexadecimal, and Octal in real time.",
+    description:
+      "Convert numbers between Decimal, Binary, Hexadecimal, and Octal in real time.",
     href: "/tools/number-base-converter",
     icon: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v20"/><path d="m17 5 5 5-5 5"/><path d="m7 19-5-5 5-5"/></svg>`,
   },
@@ -265,22 +266,23 @@ export const tools: Tool[] = [
   },
   {
     name: "OpenAPI / Swagger Viewer",
-    description: "Parse and view OpenAPI/Swagger specifications visually in an interactive, clean API documentation viewer.",
+    description:
+      "Parse and view OpenAPI/Swagger specifications visually in an interactive, clean API documentation viewer.",
     href: "/tools/openapi-swagger-viewer",
-
+    icon: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1-2.5-2.5Z"/><path d="M8 7h8"/><path d="M8 11h8"/><path d="M8 15h6"/></svg>`,
   },
   {
-    icon: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1-2.5-2.5Z"/><path d="M6 6h10"/><path d="M6 10h10"/><path d="M6 14h10"/></svg>`,
     name: "JWT Generator & Validator",
-    description: "Generate, inspect, decode, and verify JSON Web Tokens directly in your browser.",
+    description:
+      "Generate, inspect, decode, and verify JSON Web Tokens directly in your browser.",
     href: "/tools/jwt-generator-validator",
     icon: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="M12 8v4"/><path d="M8 12h8"/></svg>`,
   },
   {
-  name: "Bcrypt Generator & Validator",
-  description:
-    "Generate bcrypt hashes with configurable salt rounds and validate plaintext against existing hashes. Runs entirely in your browser.",
-  href: "/tools/bcrypt-generator",
-  icon: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="m9 12 2 2 4-4"/></svg>`,
-},
+    name: "Bcrypt Generator & Validator",
+    description:
+      "Generate bcrypt hashes with configurable salt rounds and validate plaintext against existing hashes. Runs entirely in your browser.",
+    href: "/tools/bcrypt-generator",
+    icon: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="m9 12 2 2 4-4"/></svg>`,
+  },
 ];

src/layouts/BaseLayout.astro

@@ -3,6 +3,7 @@ import "../styles/global.css";
 import { Image } from "astro:assets";
 import ThemeToggle from "../components/ThemeToggle";
 import Search from "../components/tool/Search";
+import Analytics from "../components/Analytics.astro";
 
 export interface Props {
   title?: string;
@@ -70,6 +71,7 @@ const {
         document.documentElement.setAttribute('data-theme', theme);
       })();
     </script>
+    <Analytics />
   </head>
 
   <body class="flex min-h-screen flex-col bg-ground text-secondary antialiased selection:bg-accent/30">