Nav experiment

.env.example

@@ -6,6 +6,7 @@ PUBLIC_APPWRITE_ENDPOINT=
 PUBLIC_APPWRITE_PROJECT_ID=
 PUBLIC_APPWRITE_PROJECT_INIT_ID=
 PUBLIC_GROWTH_ENDPOINT=
+PUBLIC_POSTHOG_API_KEY=
 APPWRITE_DB_INIT_ID=
 APPWRITE_COL_INIT_ID=
 APPWRITE_API_KEY_INIT=

Dockerfile

@@ -45,6 +45,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"
 

docker/production.yml

@@ -80,6 +80,7 @@ services:
             - PUBLIC_APPWRITE_COL_THREADS_ID
             - PUBLIC_APPWRITE_COL_MESSAGES_ID
             - PUBLIC_APPWRITE_FN_TLDR_ID
+            - PUBLIC_POSTHOG_API_KEY
         deploy:
             <<: *x-update-config
             mode: replicated

docker/stage.yml

@@ -74,6 +74,7 @@ services:
             - PUBLIC_APPWRITE_COL_THREADS_ID
             - PUBLIC_APPWRITE_COL_MESSAGES_ID
             - PUBLIC_APPWRITE_FN_TLDR_ID
+            - PUBLIC_POSTHOG_API_KEY
         deploy:
             <<: *x-update-config
             mode: replicated

package.json

@@ -71,6 +71,8 @@
         "oslllo-svg-fixer": "^3.0.0",
         "plausible-tracker": "^0.3.9",
         "postcss": "^8.4.49",
+        "posthog-js": "^1.204.0",
+        "posthog-node": "^4.2.1",
         "prettier": "^3.3.3",
         "prettier-plugin-svelte": "^3.2.8",
         "prettier-plugin-tailwindcss": "^0.6.8",

src/app.css

@@ -85,7 +85,7 @@
     --animate-text: fade 0.75s ease-in-out both, blur 0.75s ease-in-out both,
         up 0.75s ease-in-out both;
     --animate-scroll: scroll 60s linear infinite;
-    --animate-fade-in: fade 0.5s ease-in-out both;
+    --animate-fade-in: fade-in 0.5s ease-in-out both;
     --animate-marquee: marquee var(--speed, 30s) linear infinite var(--direction, forwards);
 
     /* Pink polyfills */

src/lib/actions/analytics.ts

@@ -1,8 +1,8 @@
 import { Analytics, type AnalyticsPlugin } from 'analytics';
 import Plausible from 'plausible-tracker';
+import posthogEvent from 'posthog-js';
 import { get } from 'svelte/store';
 import { page } from '$app/stores';
-import posthogEvent from 'posthog-js';
 
 import { ENV } from '$lib/system';
 import { browser } from '$app/environment';

src/lib/experiments.ts

@@ -0,0 +1,30 @@
+import { PUBLIC_POSTHOG_API_KEY } from '$env/static/public';
+import { PostHog } from 'posthog-node';
+
+export const posthogServerClient = new PostHog(PUBLIC_POSTHOG_API_KEY, {
+    host: 'https://eu.i.posthog.com',
+    persistence: 'memory'
+});
+
+export const experiments = {
+    'sticky-navigation_ab-test': ['control', 'sticky-nav']
+} as const;
+
+type Key = keyof typeof experiments;
+
+export const isFlagEqualTo = <K extends Key>(
+    variant: (typeof experiments)[K][number],
+    currentVariant?: string | boolean
+) => {
+    return currentVariant === variant;
+};
+
+export const getFeatureFlag = async <K extends Key>(
+    key: Key,
+    variant: (typeof experiments)[K][number],
+    distinctId: string
+) => {
+    const flagData = await posthogServerClient.getFeatureFlag(key, distinctId);
+
+    return isFlagEqualTo(variant, flagData);
+};