Merge pull request #23 from sfbrigade/jdunning/feat/posthog-test

[Closes #19] Add Posthog analytics

.env.example

@@ -0,0 +1 @@
+POSTHOG_API_KEY=fill_in_key_for_metrics

.github/workflows/deploy.yml

@@ -1,9 +1,11 @@
 name: Deploy to GitHub Pages
 
 on:
-  # Runs on pushes targeting the default branch
+  # Runs on pushes and PRs targeting the default branch
   push:
     branches: ["main"]
+  pull_request:
+    branches: ["main"]
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
@@ -22,7 +24,7 @@ concurrency:
 
 env:
   BUILD_PATH: "." # default value when not using subfolders
-  # BUILD_PATH: subfolder
+  POSTHOG_API_KEY: ${{ secrets.POSTHOG_API_KEY }}
 
 jobs:
   build:
@@ -74,6 +76,8 @@ jobs:
           path: ${{ env.BUILD_PATH }}/dist
 
   deploy:
+    # Only deploy from the main branch, or when manually triggered
+    if: github.ref == 'refs/heads/main' || github.event_name == 'workflow_dispatch'
     environment:
       name: github-pages
       url: ${{ steps.deployment.outputs.page_url }}

astro.config.mjs

@@ -5,7 +5,7 @@ export default defineConfig({
 	site: "https://www.sfcivictech.org",
 	base: "",
 	trailingSlash: "ignore",
-	compressHTML: false,
+	compressHTML: true,
 	integrations: [
 		icon({
 			iconDir: "src/assets/icons",

src/components/Metadata.astro

@@ -16,7 +16,7 @@ const { meta: {
 
 const tags = Object.entries(meta)
 	.map(([key, value]) => metaTag(key, value))
-	.join("\n");
+	.join("\n\t\t");
 const ogTags = Object.entries({
 	title,
 	url,
@@ -28,9 +28,9 @@ const ogTags = Object.entries({
 })
 	.map(([key, value]) => value ? ogMetaTag(key, value) : null)
 	.filter(Boolean)
-	.join("\n");
+	.join("\n\t\t");
 ---
 
 <link rel="canonical" href={String(url)} />
-<Fragment set:html={tags} />
-<Fragment set:html={ogTags} />
+		<Fragment set:html={tags} />
+		<Fragment set:html={ogTags} />

src/components/MetricsSnippet.astro

@@ -0,0 +1,8 @@
+---
+const phKey = import.meta.env.POSTHOG_API_KEY;
+---
+
+<script is:inline define:vars={{ phKey }}>
+				!function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="init capture register register_once register_for_session unregister unregister_for_session getFeatureFlag getFeatureFlagPayload isFeatureEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSessionId getSurveys getActiveMatchingSurveys renderSurvey canRenderSurvey getNextSurveyStep identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException loadToolbar get_property getSessionProperty createPersonProfile opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing clear_opt_in_out_capturing debug".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
+				posthog.init(phKey, {api_host: 'https://us.i.posthog.com', person_profiles: 'identified_only'})
+		</script>

src/layouts/Page.astro

@@ -2,6 +2,7 @@
 import { base } from "@/utils/urls";
 import Metadata from "@/components/Metadata.astro";
 import type { MetadataProp } from "@/components/Metadata.astro";
+import MetricsSnippet from "@/components/MetricsSnippet.astro";
 import "@picocss/pico";
 import "./global.css";
 
@@ -40,8 +41,8 @@ const baseURL = import.meta.env.BASE_URL.replace(/([^/])$/, "$1/");
 			title="SF Civic Tech"
 			href={new URL("rss.xml", Astro.site)}
 		/>
-
 		<Metadata meta={meta} />
+		<MetricsSnippet />
 
 		<title>{pageTitle}</title>
 	</head>