WIP

fbuireu · Dec 10, 2023 · cf5ea0b · cf5ea0b
1 parent 91d424a
commit cf5ea0b
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 8 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -7,7 +7,12 @@ import netlify from "@astrojs/netlify/functions";
 
 export default defineConfig({
   site: 'https://biancafiore.me',
-  integrations: [mdx(), sitemap(), react(), partytown()],
+  integrations: [mdx(), sitemap(), react(),
+    partytown({
+    config: {
+      forward: ["dataLayer.push"],
+    },
+  })],
   output: "server",
   adapter: netlify(),
   vite: {

diff --git a/package.json b/package.json
@@ -3,6 +3,7 @@
   "packageManager": "[email protected]",
   "description": "A portfolio for the best content writer ever",
   "version": "2.0.0",
+  "type": "module",
   "author": "Ferran Buireu <[email protected]>",
   "engines": {
     "node": ">=20.10.0"

diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro
@@ -2,6 +2,8 @@
 import '../styles/index.css'
 import '@fontsource/zilla-slab';
 import '@fontsource-variable/literata';
+import {ViewTransitions} from "astro:transitions";
+import { loadEnv } from "vite";
 
 interface Props {
 	title: string;
@@ -11,8 +13,12 @@ interface Props {
 
 const canonicalURL = new URL(Astro.url.pathname, Astro.site);
 const { title, description, image = '/blog-placeholder-1.jpg' } = Astro.props;
+const { PUBLIC_GOOGLE_ANALYTICS_ID } = loadEnv(process.env.NODE_ENV, process.cwd(), "");
+console.log("PUBLIC_GOOGLE_ANALYTICS_ID", PUBLIC_GOOGLE_ANALYTICS_ID)
 ---
 
+<head>
+<meta name="generator" content={Astro.generator} />
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width,initial-scale=1" />
 <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
@@ -31,3 +37,16 @@ const { title, description, image = '/blog-placeholder-1.jpg' } = Astro.props;
 <meta property="twitter:title" content={title} />
 <meta property="twitter:description" content={description} />
 <meta property="twitter:image" content={new URL(image, Astro.url)} />
+<ViewTransitions />
+<script
+        type="text/partytown"
+        src=`https://www.googletagmanager.com/gtag/js?id=${import.meta.env.PUBLIC_GOOGLE_ANALYTICS_ID}`></script>
+<script type="text/partytown">
+    window.dataLayer = window.dataLayer || [];
+    function gtag() {
+      dataLayer.push(arguments);
+    }
+    gtag("js", new Date());
+    gtag("config", PUBLIC_GOOGLE_ANALYTICS_ID);
+</script>
+</head>
diff --git a/src/env.d.ts b/src/env.d.ts
@@ -1,2 +1,10 @@
 /// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
+
+interface ImportMetaEnv {
+    readonly PUBLIC_GOOGLE_ANALYTICS_ID: string;
+}
+
+interface ImportMeta {
+    readonly env: ImportMetaEnv;
+}
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -3,20 +3,20 @@ import BaseHead from '../components/BaseHead.astro';
 import Header from '../components/Header.astro';
 import Footer from '../components/Footer.astro';
 import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
-import { ViewTransitions } from 'astro:transitions';
 ---
 
+<!-- todo: import alias -->
+<!-- todo: fix env file to load gtag-->
+<!-- todo: prettierc-->
+<!-- todo: eslint-->
+
 <!doctype html>
 <html lang="en">
-	<head>
-		<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
-        <ViewTransitions />
-    </head>
+    <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
 	<body>
-		<Header title={SITE_TITLE} />
+		<Header title={SITE_TITLE} client:load/>
 		<main>
 			<h1>🧑‍🚀 Hello, Astronaut!</h1>
-            <input type="search" placeholder="heheheh">
 			<p>
 				Welcome to the official <a href="https://astro.build/">Astro</a> blog starter template. This
 				template serves as a lightweight, minimally-styled starting point for anyone looking to