Merge pull request #34 from subhayu99/subhayu99/cf-analytics

feat(build): opt-in Cloudflare Web Analytics via VITE_CF_BEACON_TOKEN

Author: subhayu99

.env.example

@@ -46,12 +46,16 @@ NODE_ENV=development
 # ANALYTICS (Optional)
 # ============================================================================
 
-# Google Analytics Measurement ID
-# Get yours at: https://analytics.google.com
-# VITE_GA_MEASUREMENT_ID=G-XXXXXXXXXX
-
-# Plausible Analytics domain
-# VITE_PLAUSIBLE_DOMAIN=yourdomain.com
+# Cloudflare Web Analytics beacon token.
+# When set at build time, the build:
+#   1. Injects the Cloudflare beacon <script> into index.html
+#   2. Adds the two Cloudflare origins to the CSP allowlist
+# When unset, the template ships with a tight CSP and no beacon.
+#
+# How to get one:
+#   dash.cloudflare.com → Web Analytics → your site → Setup
+#   → copy the value of `data-cf-beacon`'s "token" field
+# VITE_CF_BEACON_TOKEN=your_beacon_token_here
 
 # ============================================================================
 # EXTERNAL INTEGRATIONS (Optional - for future features)

.github/workflows/deploy.yaml

@@ -137,6 +137,10 @@ jobs:
         # cache helpers. On normal pushes this stays unset, so each deploy
         # reuses fresh JSON from the previous run / the live site.
         FORCE_REFRESH: ${{ github.event.inputs.force_refresh == 'true' && '1' || '' }}
+        # Cloudflare Web Analytics beacon token. Optional — when unset, the
+        # build no-ops the analytics plugin and the template's tight CSP
+        # stays in place. Set as a repo secret to enable tracking.
+        VITE_CF_BEACON_TOKEN: ${{ secrets.VITE_CF_BEACON_TOKEN }}
 
 
     - name: ⚙️  Configure GitHub Pages

vite.config.ts

@@ -79,6 +79,29 @@ const templateSignaturePlugin = (): Plugin => {
   };
 };
 
+const cloudflareAnalyticsPlugin = (): Plugin => {
+  return {
+    name: 'cloudflare-analytics-injector',
+    transformIndexHtml(html) {
+      const token = process.env.VITE_CF_BEACON_TOKEN;
+      if (!token) return html;
+
+      html = html.replace(
+        "script-src 'self' 'unsafe-inline'",
+        "script-src 'self' 'unsafe-inline' static.cloudflareinsights.com"
+      );
+      html = html.replace(
+        "connect-src 'self'",
+        "connect-src 'self' cloudflareinsights.com"
+      );
+
+      const beaconConfig = JSON.stringify({ token });
+      const snippet = `    <!-- Cloudflare Web Analytics -->\n    <script defer src="https://static.cloudflareinsights.com/beacon.min.js" data-cf-beacon='${beaconConfig}'></script>\n  `;
+      return html.replace('</body>', `${snippet}</body>`);
+    },
+  };
+};
+
 const buildVersionPlugin = (): Plugin => {
   return {
     name: 'build-version',
@@ -108,6 +131,7 @@ export default defineConfig({
     themeInjectorPlugin(),
     siteMetadataPlugin(),
     templateSignaturePlugin(),
+    cloudflareAnalyticsPlugin(),
     buildVersionPlugin(),
     ...(process.env.NODE_ENV !== "production" &&
     process.env.REPL_ID !== undefined