Added Google GTag and .env configuration.

.env.example

@@ -0,0 +1,2 @@
+GOOGLE_ANALYTICS_GTAG=G-1234567890
+SITE_URL=http://localhost

README.md

@@ -25,9 +25,12 @@ Inside this Astro project, you'll see the following folders and files:
 │       └── **/*.astro
 │   └── scraper/
 │       └── **/*.ts
+├── .env
 └── package.json
 ```
 
+You will need to create a `.env` file containing the configuration settings for this app.
+
 Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
 
 There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.

astro.config.mjs

@@ -1,8 +1,10 @@
 import { defineConfig } from 'astro/config';
 import sitemap from '@astrojs/sitemap';
+import { loadEnv } from "vite";
+const { SITE_URL } = loadEnv(process.env.NODE_ENV, process.cwd(), "");
 
 // https://astro.build/config
 export default defineConfig({
-    site: 'https://dashersupply.com',
+    site: SITE_URL||'http://localhost',
     integrations: [sitemap()],
 });

package-lock.json

@@ -14,6 +14,8 @@
         "bootstrap": "^5.3.3",
         "cheerio": "*",
         "crawlee": "^3.0.0",
+        "dotenv": "^16.4.5",
+        "dotenv-expand": "^11.0.6",
         "markdown-it": "^14.0.0",
         "markdown-it-attrs": "^4.1.6",
         "playwright": "*"
@@ -3095,6 +3097,31 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/dotenv": {
+      "version": "16.4.5",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz",
+      "integrity": "sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
+    "node_modules/dotenv-expand": {
+      "version": "11.0.6",
+      "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-11.0.6.tgz",
+      "integrity": "sha512-8NHi73otpWsZGBSZwwknTXS5pqMOrk9+Ssrna8xCaxkzEpU9OTf9R5ArQGVw03//Zmk9MOwLPng9WwndvpAJ5g==",
+      "dependencies": {
+        "dotenv": "^16.4.4"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
     "node_modules/dset": {
       "version": "3.1.3",
       "license": "MIT",

package.json

@@ -16,6 +16,8 @@
     "bootstrap": "^5.3.3",
     "cheerio": "*",
     "crawlee": "^3.0.0",
+    "dotenv": "^16.4.5",
+    "dotenv-expand": "^11.0.6",
     "markdown-it": "^14.0.0",
     "markdown-it-attrs": "^4.1.6",
     "playwright": "*"

src/config.ts

@@ -0,0 +1,39 @@
+import path from 'path';
+import dotenv from 'dotenv';
+import dotenvExpand from 'dotenv-expand';
+import process from 'process';
+import { fileURLToPath } from 'url';
+export const trimSlashes = (dirPath: string) => {
+  return dirPath.replace(/^[\/\\]|[\/\\]$/g, '');
+};
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export interface ProcessEnv {
+    GOOGLE_ANALYTICS_GTAG?: string;
+    SITE_URL?: string;
+}
+
+export interface Config {
+    GoogleAnalyticsGTag: string;
+    siteUrl: string;
+}
+
+const env: ProcessEnv = {};
+let dotEnvConfig = dotenv.config({
+    path: path.join(__dirname, '..', '.env'),
+    processEnv: env as dotenv.DotenvPopulateInput
+});
+dotEnvConfig = dotenvExpand.expand({
+    parsed: env as dotenvExpand.DotenvParseInput,
+    processEnv: process.env as dotenvExpand.DotenvParseInput
+});
+
+export const getGoogleAnalyticsGtag = () => env.GOOGLE_ANALYTICS_GTAG||'';
+export const getSiteUrl = () => trimSlashes(env.SITE_URL||'http://localhost');
+
+export const config: Config = {
+    GoogleAnalyticsGTag: getGoogleAnalyticsGtag(),
+    siteUrl: getSiteUrl(),
+};

src/layouts/Layout.astro

@@ -1,12 +1,14 @@
 ---
 import "bootstrap/dist/css/bootstrap.min.css";
 import bootstrap from "bootstrap/dist/js/bootstrap.min.js?url";
+import { config } from "../config";
 
 interface Props {
 	title: string;
 }
 
 const { title } = Astro.props;
+const gTag = config.GoogleAnalyticsGTag;
 ---
 
 <!DOCTYPE html>
@@ -25,6 +27,14 @@ const { title } = Astro.props;
 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 		<link href="https://fonts.googleapis.com/css2?family=Holtwood+One+SC&family=Caveat:wght@400..700&family=Protest+Strike&family=Charm:wght@400;700&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Urbanist:ital,wght@0,100..900;1,100..900&family=Saira+Extra+Condensed&display=swap" rel="stylesheet">
 		<link rel="sitemap" href="/sitemap-index.xml" />
+		<!-- Google tag (gtag.js) -->
+		<script async src="https://www.googletagmanager.com/gtag/js?id=G-EB3FP1LR55"></script>
+		<script define:vars={{gTag}}>
+			window.dataLayer = window.dataLayer || [];
+			function gtag(){dataLayer.push(arguments);}
+			gtag('js', new Date());
+			gtag('config', gTag);
+		</script>
 	</head>
 	<body>
 		<slot />