PauseAI · Wituareard · Oct 5, 2024 · Oct 5, 2024 · Nov 5, 2024
diff --git a/.gitignore b/.gitignore
@@ -10,4 +10,5 @@ vite.config.ts.timestamp-*
 # Local Netlify folder
 .netlify
 /static/pagefind
+/static/~partytown
 .env
diff --git a/.vscode/ltex.dictionary.en-US.txt b/.vscode/ltex.dictionary.en-US.txt
@@ -112,3 +112,4 @@ Roboto
 Saira
 impersonification
 Partiful
+Partytown
diff --git a/README.md b/README.md
@@ -36,6 +36,10 @@ pnpm run dev
 # Open http://localhost:37572
 ```
 
+## Debugging
+
+The website uses the Partytown library, which can clutter network requests in DevTools with entries for `proxytown`. To exclude those requests, you can use the filter `-url:proxytown`.
+
 ## Deployment
 
 The contents of the repository are continuously deployed to Netlify. You can track the deployment status [here](https://app.netlify.com/sites/pauseai/deploys).
diff --git a/package.json b/package.json
@@ -40,6 +40,7 @@
 		"vite": "^5.2.2"
 	},
 	"dependencies": {
+		"@builder.io/partytown": "^0.10.2",
 		"@fontsource/jetbrains-mono": "^4.5.12",
 		"@fontsource/manrope": "^4.5.13",
 		"@fontsource/roboto-slab": "^5.0.19",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/scripts/exclude-from-edge-function.ts b/scripts/exclude-from-edge-function.ts
@@ -1,7 +1,7 @@
 import { promises as fs } from 'fs'
 
 const MANIFEST_PATH = '.netlify/edge-functions/manifest.json'
-const EXCLUDE_PATHS = ['^/pagefind/.*$']
+const EXCLUDE_PATHS = ['^/pagefind/.*$', '^/~partytown/.*$']
 
 const manifest = JSON.parse(await fs.readFile(MANIFEST_PATH, 'utf-8'))
 const renderFunction = manifest.functions.find(

diff --git a/src/app.html b/src/app.html
@@ -1,38 +1,40 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-	<meta charset="utf-8" />
-	<meta name="viewport" content="width=device-width" />
-	<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-	<link rel="alternate" type="application/atom+xml" href="/rss.xml" />
-
-	<script type="module">
-		const theme = localStorage.getItem('color-scheme')
-
-		theme
-			? document.documentElement.setAttribute('color-scheme', theme)
-			: localStorage.setItem('color-scheme', 'dark')
-	</script>
-
-	<!-- Google tag (gtag.js) -->
-	<script async src="https://www.googletagmanager.com/gtag/js?id=G-VRJ4J53FC8"></script>
-	<script>
-		window.dataLayer ??= []
-		function gtag() {
-			dataLayer.push(arguments)
-		}
-
-		gtag('js', new Date())
-		gtag('config', 'G-VRJ4J53FC8')
-		gtag('config', 'AW-16494962941')
-	</script>
-
-	%sveltekit.head%
-</head>
-
-<body data-sveltekit-preload-data="hover">
-	<div style="display: contents">%sveltekit.body%</div>
-</body>
-
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<link rel="alternate" type="application/atom+xml" href="/rss.xml" />
+
+		<script type="module">
+			const theme = localStorage.getItem('color-scheme')
+
+			theme
+				? document.documentElement.setAttribute('color-scheme', theme)
+				: localStorage.setItem('color-scheme', 'dark')
+		</script>
+
+		<!-- Google tag (gtag.js) -->
+		<script
+			type="text/partytown"
+			async
+			src="https://www.googletagmanager.com/gtag/js?id=G-VRJ4J53FC8"
+		></script>
+		<script type="text/partytown">
+			window.dataLayer ??= []
+			window.gtag = function() {
+				dataLayer.push(arguments)
+			}
+
+			gtag('js', new Date())
+			gtag('config', 'G-VRJ4J53FC8')
+			gtag('config', 'AW-16494962941')
+		</script>
+
+		%sveltekit.head%
+	</head>
+
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
 </html>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { Toaster } from 'svelte-french-toast'
 	import { ProgressBar } from '@prgm/sveltekit-progress-bar'
+	import { partytownSnippet } from '@builder.io/partytown/integration'
 
 	import Footer from './footer.svelte'
 	import Header from './header.svelte'
@@ -16,6 +17,15 @@
 	export let data
 </script>
 
+<svelte:head>
+	<script>
+		partytown = {
+			forward: ['dataLayer.push', 'gtag']
+		}
+	</script>
+	{@html '<script>' + partytownSnippet() + '</script>'}
+</svelte:head>
+
 <h2 style="width: 0; height: 0; margin: 0; padding: 0; visibility: hidden;" data-pagefind-ignore>
 	(Top)
 </h2>

diff --git a/vite.config.ts b/vite.config.ts
@@ -1,10 +1,19 @@
+import { partytownVite } from '@builder.io/partytown/utils'
+import { join } from 'path'
 import { sveltekit } from '@sveltejs/kit/vite'
 
 const config = {
 	server: {
 		port: 37572
 	},
-	plugins: [sveltekit()]
+	plugins: [
+		// Partytown first because SvelteKit copies /static in same hook
+		partytownVite({
+			// Place in /static as /build is wiped by adapter which always runs last
+			dest: join(__dirname, 'static', '~partytown')
+		}),
+		sveltekit()
+	]
 }
 
 export default config