Merge branch 'main' into connorwinston/web-342-implement-creative-rev…

…iew-changes

.env.example

@@ -1,3 +1,8 @@
 NUXT_PUBLIC_SITE_URL=http://localhost:3000
 NUXT_SITE_ENV=preview
-NUXT_PRODUCT_DIRECTUS_URL=https://product-team.directus.app
+NUXT_PUBLIC_INKEEP_API_KEY=1cc5c5549ed34af9402c9370e3f5f3a095e6c8daafdfa955
+NUXT_PUBLIC_NEWSLETTER_URL=https://product-team.directus.app/flows/trigger/webhook_id
+NUXT_PUBLIC_PRODUCT_DIRECTUS_URL=https://product-team.directus.app
+NUXT_IMAGE_DOMAINS="product-team.directus.app"
+POSTHOG_API_KEY="phc_api_key"
+POSTHOG_API_HOST="https://us.i.posthog.com"

app/components/aside/AsideFeedback.vue

@@ -1,18 +1,52 @@
+<script setup lang="ts">
+const { $clientPosthog } = useNuxtApp();
+
+const buttonLoading = ref<'good' | 'bad' | null>(null);
+const buttonTimeout = 500;
+
+const handleFeedback = (feedback: 'good' | 'bad') => {
+	if (buttonLoading.value) return;
+	buttonLoading.value = feedback;
+	$clientPosthog?.capture(`feedback_${feedback}`);
+	setTimeout(() => {
+		buttonLoading.value = null;
+	}, buttonTimeout);
+};
+</script>
+
 <template>
 	<div class="feedback">
 		<Button
 			color="outline-only"
 			size="small"
 			class="feedback-button"
+			:disabled="buttonLoading !== null"
+			@click="() => handleFeedback('good')"
 		>
-			<Icon name="material-symbols:thumb-up-rounded" />
+			<Icon
+				v-if="buttonLoading === 'good'"
+				name="svg-spinners:180-ring-with-bg"
+			/>
+			<Icon
+				v-else
+				name="material-symbols:thumb-up-rounded"
+			/>
 		</Button>
 		<Button
 			color="outline-only"
 			size="small"
 			class="feedback-button"
+			:disabled="buttonLoading !== null"
+			@click="() => handleFeedback('bad')"
 		>
-			<Icon name="material-symbols:thumb-down-rounded" />
+			<Icon
+				v-if="buttonLoading === 'bad'"
+				name="svg-spinners:180-ring-with-bg"
+			/>
+			<Icon
+				v-else
+				name="material-symbols:thumb-down-rounded"
+			/>
 		</Button>
 		<div>
 			<p class="cta">
@@ -25,9 +59,6 @@
 	</div>
 </template>
 
-<script setup lang="ts">
-</script>
-
 <style scoped lang="scss">
 .feedback {
 	padding-top: 0.75rem;

nuxt.config.ts

@@ -11,6 +11,7 @@ export default defineNuxtConfig({
 		'@nuxt/icon',
 		'@nuxtjs/seo',
 		'@nuxtjs/color-mode',
+		'nuxt-posthog',
 	],
 	devtools: { enabled: true },
 	css: ['~/assets/css/main.scss'],
@@ -144,7 +145,7 @@ export default defineNuxtConfig({
 		rateLimiter: false,
 		headers: {
 			crossOriginEmbedderPolicy:
-				process.env.NODE_ENV === 'development' ? 'unsafe-none' : 'require-corp',
+																process.env.NODE_ENV === 'development' ? 'unsafe-none' : 'require-corp',
 		},
 	},
 });

package.json

@@ -38,6 +38,7 @@
         "confbox": "^0.1.8",
         "consola": "^3.2.3",
         "nuxt": "^3.13.2",
+        "nuxt-posthog": "^1.5.4",
         "nuxt-security": "2.0.0",
         "radix-vue": "^1.9.7",
         "ufo": "^1.5.4",