Post Hog for A/B tests

.github/workflows/production.yml

@@ -40,6 +40,7 @@ jobs:
                       "PUBLIC_APPWRITE_FN_TLDR_ID=${{ vars.PUBLIC_APPWRITE_FN_TLDR_ID }}"
                       "PUBLIC_APPWRITE_PROJECT_INIT_ID=${{ vars.PUBLIC_APPWRITE_PROJECT_INIT_ID }}"
                       "PUBLIC_GROWTH_ENDPOINT=${{ vars.PUBLIC_GROWTH_ENDPOINT }}"
+                      "PUBLIC_POSTHOG_API_KEY=${{ vars.PUBLIC_POSTHOG_API_KEY }}"
                       "APPWRITE_DB_INIT_ID=${{ secrets.APPWRITE_DB_INIT_ID }}"
                       "APPWRITE_COL_INIT_ID=${{ secrets.APPWRITE_COL_INIT_ID }}"
                       "APPWRITE_API_KEY_INIT=${{ secrets.APPWRITE_API_KEY_INIT }}"

.github/workflows/staging.yml

@@ -42,6 +42,7 @@ jobs:
                       "PUBLIC_APPWRITE_FN_TLDR_ID=${{ vars.PUBLIC_APPWRITE_FN_TLDR_ID }}"
                       "PUBLIC_APPWRITE_PROJECT_INIT_ID=${{ vars.PUBLIC_APPWRITE_PROJECT_INIT_ID }}"
                       "PUBLIC_GROWTH_ENDPOINT=${{ vars.PUBLIC_GROWTH_ENDPOINT }}"
+                      "PUBLIC_POSTHOG_API_KEY=${{ vars.PUBLIC_POSTHOG_API_KEY }}"
                       "APPWRITE_DB_INIT_ID=${{ secrets.APPWRITE_DB_INIT_ID }}"
                       "APPWRITE_COL_INIT_ID=${{ secrets.APPWRITE_COL_INIT_ID }}"
                       "APPWRITE_API_KEY_INIT=${{ secrets.APPWRITE_API_KEY_INIT }}"

.github/workflows/tests.yml

@@ -45,6 +45,7 @@ jobs:
                   PUBLIC_APPWRITE_FN_TLDR_ID: ${{ secrets.PUBLIC_APPWRITE_FN_TLDR_ID }}
                   PUBLIC_APPWRITE_PROJECT_INIT_ID: ${{ secrets.PUBLIC_APPWRITE_PROJECT_INIT_ID }}
                   PUBLIC_GROWTH_ENDPOINT: ${{ secrets.PUBLIC_GROWTH_ENDPOINT }}
+                  PUBLIC_POSTHOG_API_KEY: ${{ vars.PUBLIC_POSTHOG_API_KEY }}
                   APPWRITE_DB_INIT_ID: ${{ secrets.APPWRITE_DB_INIT_ID }}
                   APPWRITE_COL_INIT_ID: ${{ secrets.APPWRITE_COL_INIT_ID }}
                   APPWRITE_API_KEY_INIT: ${{ secrets.APPWRITE_API_KEY_INIT }}

Dockerfile

@@ -42,6 +42,9 @@ ENV GITHUB_TOKEN ${GITHUB_TOKEN}
 ARG SENTRY_AUTH_TOKEN
 ENV SENTRY_AUTH_TOKEN ${SENTRY_AUTH_TOKEN}
 
+ARG PUBLIC_POSTHOG_API_KEY
+ENV PUBLIC_POSTHOG_API_KEY ${PUBLIC_POSTHOG_API_KEY}
+
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
 

package.json

@@ -68,6 +68,8 @@
         "openapi-types": "^12.1.3",
         "oslllo-svg-fixer": "^3.0.0",
         "plausible-tracker": "^0.3.9",
+        "posthog-js": "^1.174.2",
+        "posthog-node": "^4.2.1",
         "postcss": "^8.4.49",
         "prettier": "^3.3.3",
         "prettier-plugin-svelte": "^3.2.8",

src/lib/system.ts

@@ -1,5 +1,6 @@
 import { dev } from '$app/environment';
-import { PUBLIC_GROWTH_ENDPOINT } from '$env/static/public';
+import { PUBLIC_GROWTH_ENDPOINT, PUBLIC_POSTHOG_API_KEY } from '$env/static/public';
+import { PostHog } from 'posthog-node';
 
 export const VARS = {
     GROWTH_ENDPOINT: PUBLIC_GROWTH_ENDPOINT ?? undefined
@@ -11,3 +12,7 @@ export const ENV = {
     PREVIEW: import.meta.env?.VERCEL === '1',
     TEST: !!import.meta.env?.VITEST
 };
+
+export const posthog = new PostHog(PUBLIC_POSTHOG_API_KEY, {
+    host: 'https://eu.i.posthog.com'
+});

src/routes/+layout.server.ts

@@ -1,9 +1,20 @@
+import posthog from 'posthog-js';
+import { browser } from '$app/environment';
+
 import { getAllChangelogEntries } from './changelog/utils';
+import { PUBLIC_POSTHOG_API_KEY } from '$env/static/public';
 
 export const prerender = true;
 export const trailingSlash = 'never';
 
 export const load = async () => {
+    if (browser) {
+        posthog.init(PUBLIC_POSTHOG_API_KEY, {
+            api_host: 'https://eu.i.posthog.com',
+            person_profiles: 'identified_only'
+        });
+    }
+
     return {
         changelogEntries: (await getAllChangelogEntries()).length
     };

src/routes/+page.server.ts

@@ -0,0 +1,18 @@
+// import { posthog } from '$lib/system';
+
+// export const load = async () => {
+//     let ctaText = 'No variant';
+//     try {
+//         const distinctId = 'placeholder-user-id2';
+//         const enabledVariant = await posthog.getFeatureFlag('homepage_test', distinctId);
+//         if (enabledVariant === 'control') {
+//             ctaText = 'Control Variant';
+//         } else if (enabledVariant === 'test') {
+//             ctaText = 'Test Variant';
+//         }
+//     } catch (error) {
+//         ctaText = 'Error';
+//         console.error('Error fetching feature flag', error);
+//     }
+//     return { ctaText };
+// };

src/routes/+page.svelte

@@ -131,7 +131,6 @@
                         <span class="text-caption shrink-0 font-medium">New</span>
                         <div class="web-hero-banner-button-sep" />
                         <span class="text-caption web-u-trim-1">Introducing Database Backups</span>
-
                         <span class="web-icon-arrow-right shrink-0" aria-hidden="true" />
                     </a>
                     <Hero>
@@ -161,7 +160,7 @@
                 </section>
             </div>
             <div class="mb-12 lg:my-[7.5rem]">
-                <section class="container web-u-padding-block-0" style="--container-size:78.75rem">
+                <section class="web-u-padding-block-0 container" style="--container-size:78.75rem">
                     <div class="web-media-container">
                         <img
                             class="block"