Merge pull request #15 from xandemon/analytics

Integrate basic analytics with GA4

.github/workflows/astro.yml

@@ -27,13 +27,14 @@ concurrency:
   cancel-in-progress: false
 
 env:
-  VITE_PUBLIC_BASE_URL: "/developer-icons"
   BUILD_PATH: "docs" # default value when not using subfolders
   # BUILD_PATH: subfolder
 
 jobs:
   build:
     name: Build
+    env:
+      PUBLIC_GA_MEASUREMENT_ID: ${{ secrets.PUBLIC_GA_MEASUREMENT_ID }}
     runs-on: ubuntu-latest
     steps:
       - name: Checkout

docs/.gitignore

@@ -14,6 +14,7 @@ yarn-error.log*
 pnpm-debug.log*
 
 # environment variables
+.env
 .env.production
 
 # macOS-specific files

docs/astro.config.mjs

@@ -1,17 +1,18 @@
 import { defineConfig } from "astro/config";
 import react from "@astrojs/react";
-
 import tailwind from "@astrojs/tailwind";
+import partytown from "@astrojs/partytown";
 
 // https://astro.build/config
 export default defineConfig({
   site: "https://xandemon.github.io",
   base: "/developer-icons/docs",
   publicDir: "./assets",
-  integrations: [
-    react(),
-    tailwind({
-      applyBaseStyles: false,
-    }),
-  ],
-});
+  integrations: [react(), tailwind({
+    applyBaseStyles: false,
+  }), partytown({
+    config: {
+      forward: ['dataLayer.push']
+    }
+  })],
+});

docs/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.6.0",
+    "@astrojs/partytown": "^2.1.2",
     "@astrojs/react": "^3.3.4",
     "@astrojs/tailwind": "^5.1.0",
     "@fontsource-variable/noto-sans": "^5.0.5",

docs/src/components/HeroSection.astro

@@ -2,7 +2,7 @@
 import { ArrowUpRight } from "lucide-react";
 import { Badge } from "./ui/badge";
 import { Button } from "./ui/button";
-import { publicBaseUrl } from "@/lib/utils";
+import { publicBaseUrl } from "@/config";
 ---
 
 <div class="flex items-center justify-between gap-4 w-full py-4">

docs/src/components/Navbar.astro

@@ -1,7 +1,7 @@
 ---
 import { GitHubDarkIcon, NPMIcon } from "developer-icons";
 import Container from "./Container.astro";
-import { publicBaseUrl } from "@/lib/utils";
+import { publicBaseUrl } from "@/config";
 ---
 
 <div class="navbar bg-zinc-900">

docs/src/components/UnderDevelopment.astro

@@ -1,6 +1,6 @@
 ---
 import { Button } from "./ui/button";
-import { publicBaseUrl } from "@/lib/utils";
+import { publicBaseUrl } from "@/config";
 ---
 
 <div class="w-full flex flex-col items-center justify-center gap-6">

docs/src/components/ui/iconCard.tsx

@@ -5,7 +5,8 @@ import type { IconDataType } from "../../../../lib/iconsData";
 import { generateIconCompName } from "../../../../lib/utils";
 import { Badge } from "./badge";
 import { Loader } from "./loader";
-import { downloader, publicBaseUrl } from "@/lib/utils";
+import { downloader } from "@/lib/utils";
+import { publicBaseUrl } from "@/config";
 
 export const IconCard = ({ icon }: { icon: IconDataType }) => {
   const [downloadLoading, setDownloadLoading] = useState(false);

docs/src/config.ts

@@ -0,0 +1,5 @@
+const publicBaseUrl = import.meta.env.PROD
+  ? "/developer-icons"
+  : "/developer-icons/docs";
+
+export { publicBaseUrl };

docs/src/layouts/DocsLayout.astro

@@ -1,7 +1,8 @@
 ---
 import Container from "@/components/Container.astro";
 import Navbar from "@/components/Navbar.astro";
-import { cn, publicBaseUrl } from "@/lib/utils";
+import { cn } from "@/lib/utils";
+import { publicBaseUrl } from "@/config";
 import "@fontsource-variable/noto-sans";
 import "../styles/globals.css";
 import "../styles/docs.css";
@@ -42,6 +43,24 @@ flattenedDocs.sort((a, b) => a.frontmatter.order - b.frontmatter.order);
     <meta name="generator" content={Astro.generator} />
 
     <title>{props.frontmatter.title}</title>
+
+    <!-- Google tag (gtag.js) -->
+    <script
+      type="text/partytown"
+      src="https://www.googletagmanager.com/gtag/js?id=G-ELYLP3JJDR"></script>
+    <script
+      type="text/partytown"
+      define:vars={{ measurementId: import.meta.env.PUBLIC_GA_MEASUREMENT_ID }}
+    >
+      {
+        `window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());
+      gtag("config", "${measurementId}");`;
+      }
+    </script>
   </head>
   <body class="text-zinc-300 bg-zinc-900 min-h-screen">
     <Navbar />

docs/src/layouts/Layout.astro

@@ -1,7 +1,7 @@
 ---
 import Container from "@/components/Container.astro";
 import Navbar from "@/components/Navbar.astro";
-import { publicBaseUrl } from "@/lib/utils";
+import { publicBaseUrl } from "@/config";
 import "@fontsource-variable/noto-sans";
 import "../styles/globals.css";
 
@@ -28,6 +28,24 @@ const { title } = Astro.props;
     />
     <meta name="generator" content={Astro.generator} />
     <title>{title}</title>
+
+    <!-- Google tag (gtag.js) -->
+    <script
+      type="text/partytown"
+      src="https://www.googletagmanager.com/gtag/js?id=G-ELYLP3JJDR"></script>
+    <script
+      type="text/partytown"
+      define:vars={{ measurementId: import.meta.env.PUBLIC_GA_MEASUREMENT_ID }}
+    >
+      {
+        `window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());
+      gtag("config", "${measurementId}");`;
+      }
+    </script>
   </head>
   <body class="text-zinc-300 bg-zinc-900 min-h-screen">
     <Navbar />

docs/src/lib/utils.ts

@@ -1,8 +1,6 @@
 import { type ClassValue, clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 
-export const publicBaseUrl = import.meta.env.VITE_PUBLIC_BASE_URL;
-
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }

docs/src/pages/icons/[category].astro

@@ -3,7 +3,8 @@ import Layout from "@/layouts/Layout.astro";
 import { IconsList } from "@/components/iconsList";
 import { categoriesData, iconsData } from "../../../../lib/iconsData";
 import type { Category as CategoryType } from "../../../../lib/iconsData";
-import { cn, publicBaseUrl } from "@/lib/utils";
+import { cn } from "@/lib/utils";
+import { publicBaseUrl } from "@/config";
 
 export function getStaticPaths() {
   return ["All", ...categoriesData].map((category) => ({