chore:little fixes and formating and linting and patches

admin/src/cli.ts

@@ -24,7 +24,7 @@ async function main() {
   const CLICKHOUSE_URL = process.env.CLICKHOUSE_URL;
   const REDIS_URL = process.env.REDIS_URL;
 
-  if (!DATABASE_URL || !CLICKHOUSE_URL || !REDIS_URL) {
+  if (!(DATABASE_URL && CLICKHOUSE_URL && REDIS_URL)) {
     console.error('Environment variables are not set');
     process.exit(1);
   }

admin/src/commands/clear-cache.ts

@@ -40,7 +40,7 @@ export async function clearCache() {
     displayText: `${org.name} ${chalk.gray(`(${org.id})`)}`,
   }));
 
-  const searchFunction = async (_answers: unknown, input = '') => {
+  const searchFunction = (_answers: unknown, input = '') => {
     const fuzzyResult = fuzzy.filter(input, searchItems, {
       extract: (item: OrgSearchItem) => `${item.name} ${item.id}`,
     });
@@ -94,7 +94,7 @@ export async function clearCache() {
     console.log(chalk.yellow('\n📊 Projects:\n'));
     for (const project of organization.projects) {
       console.log(
-        `  - ${project.name} ${chalk.gray(`(${project.id})`)} - ${chalk.cyan(`${project.eventsCount.toLocaleString()} events`)}`,
+        `  - ${project.name} ${chalk.gray(`(${project.id})`)} - ${chalk.cyan(`${project.eventsCount.toLocaleString()} events`)}`
       );
     }
   }
@@ -119,9 +119,11 @@ export async function clearCache() {
   for (const project of organization.projects) {
     // Clear project access cache for each member
     for (const member of organization.members) {
-      if (!member.user?.id) continue;
+      if (!member.user?.id) {
+        continue;
+      }
       console.log(
-        `Clearing cache for project: ${project.name} and member: ${member.user?.email}`,
+        `Clearing cache for project: ${project.name} and member: ${member.user?.email}`
       );
       await getProjectAccess.clear({
         userId: member.user?.id,
@@ -141,8 +143,8 @@ export async function clearCache() {
   console.log(chalk.gray(`Organization ID: ${organization.id}`));
   console.log(
     chalk.gray(
-      `Project IDs: ${organization.projects.map((p) => p.id).join(', ')}`,
-    ),
+      `Project IDs: ${organization.projects.map((p) => p.id).join(', ')}`
+    )
   );
 
   // Example of what you might do:

admin/src/commands/delete-organization.ts

@@ -21,8 +21,8 @@ export async function deleteOrganization() {
   console.log(chalk.red('\n🗑️  Delete Organization\n'));
   console.log(
     chalk.yellow(
-      '⚠️  WARNING: This will permanently delete the organization and all its data!\n',
-    ),
+      '⚠️  WARNING: This will permanently delete the organization and all its data!\n'
+    )
   );
   console.log('Loading organizations...\n');
 
@@ -51,7 +51,7 @@ export async function deleteOrganization() {
     displayText: `${org.name} ${chalk.gray(`(${org.id})`)} ${chalk.cyan(`- ${org.projects.length} projects, ${org.members.length} members`)}`,
   }));
 
-  const searchFunction = async (_answers: unknown, input = '') => {
+  const searchFunction = (_answers: unknown, input = '') => {
     const fuzzyResult = fuzzy.filter(input, searchItems, {
       extract: (item: OrgSearchItem) => `${item.name} ${item.id}`,
     });
@@ -107,7 +107,7 @@ export async function deleteOrganization() {
     console.log(chalk.red('\n  Projects that will be deleted:'));
     for (const project of organization.projects) {
       console.log(
-        `    - ${project.name} ${chalk.gray(`(${project.eventsCount.toLocaleString()} events, ${project.clients.length} clients)`)}`,
+        `    - ${project.name} ${chalk.gray(`(${project.eventsCount.toLocaleString()} events, ${project.clients.length} clients)`)}`
       );
     }
   }
@@ -122,8 +122,8 @@ export async function deleteOrganization() {
 
   console.log(
     chalk.red(
-      '\n⚠️  This will delete ALL projects, clients, events, and data associated with this organization!',
-    ),
+      '\n⚠️  This will delete ALL projects, clients, events, and data associated with this organization!'
+    )
   );
 
   // First confirmation
@@ -132,7 +132,7 @@ export async function deleteOrganization() {
       type: 'confirm',
       name: 'confirmFirst',
       message: chalk.red(
-        `Are you ABSOLUTELY SURE you want to delete "${organization.name}"?`,
+        `Are you ABSOLUTELY SURE you want to delete "${organization.name}"?`
       ),
       default: false,
     },
@@ -154,7 +154,7 @@ export async function deleteOrganization() {
 
   if (confirmName !== organization.name) {
     console.log(
-      chalk.red('\n❌ Organization name does not match. Deletion cancelled.'),
+      chalk.red('\n❌ Organization name does not match. Deletion cancelled.')
     );
     return;
   }
@@ -165,7 +165,7 @@ export async function deleteOrganization() {
       type: 'confirm',
       name: 'confirmFinal',
       message: chalk.red(
-        'FINAL WARNING: This action CANNOT be undone. Delete now?',
+        'FINAL WARNING: This action CANNOT be undone. Delete now?'
       ),
       default: false,
     },
@@ -185,8 +185,8 @@ export async function deleteOrganization() {
     if (projectIds.length > 0) {
       console.log(
         chalk.yellow(
-          `Deleting data from ClickHouse for ${projectIds.length} projects...`,
-        ),
+          `Deleting data from ClickHouse for ${projectIds.length} projects...`
+        )
       );
       await deleteFromClickhouse(projectIds);
       console.log(chalk.green('✓ ClickHouse data deletion initiated'));
@@ -200,13 +200,13 @@ export async function deleteOrganization() {
     console.log(chalk.green('\n✅ Organization deleted successfully!'));
     console.log(
       chalk.gray(
-        `Deleted: ${organization.name} with ${organization.projects.length} projects and ${organization.members.length} members`,
-      ),
+        `Deleted: ${organization.name} with ${organization.projects.length} projects and ${organization.members.length} members`
+      )
     );
     console.log(
       chalk.gray(
-        '\nNote: ClickHouse deletions are processed asynchronously and may take a few moments to complete.',
-      ),
+        '\nNote: ClickHouse deletions are processed asynchronously and may take a few moments to complete.'
+      )
     );
   } catch (error) {
     console.error(chalk.red('\n❌ Error deleting organization:'), error);

admin/src/commands/delete-user.ts

@@ -19,8 +19,8 @@ export async function deleteUser() {
   console.log(chalk.red('\n🗑️  Delete User\n'));
   console.log(
     chalk.yellow(
-      '⚠️  WARNING: This will permanently delete the user and remove them from all organizations!\n',
-    ),
+      '⚠️  WARNING: This will permanently delete the user and remove them from all organizations!\n'
+    )
   );
   console.log('Loading users...\n');
 
@@ -59,7 +59,7 @@ export async function deleteUser() {
     };
   });
 
-  const searchFunction = async (_answers: unknown, input = '') => {
+  const searchFunction = (_answers: unknown, input = '') => {
     const fuzzyResult = fuzzy.filter(input, searchItems, {
       extract: (item: UserSearchItem) =>
         `${item.email} ${item.firstName || ''} ${item.lastName || ''}`,
@@ -107,46 +107,46 @@ export async function deleteUser() {
   console.log(`  ${chalk.bold('User:')} ${user.email}`);
   if (user.firstName || user.lastName) {
     console.log(
-      `  ${chalk.gray('Name:')} ${user.firstName || ''} ${user.lastName || ''}`,
+      `  ${chalk.gray('Name:')} ${user.firstName || ''} ${user.lastName || ''}`
     );
   }
   console.log(`  ${chalk.gray('ID:')} ${user.id}`);
   console.log(
-    `  ${chalk.gray('Member of:')} ${user.membership.length} organizations`,
+    `  ${chalk.gray('Member of:')} ${user.membership.length} organizations`
   );
   console.log(`  ${chalk.gray('Auth accounts:')} ${user.accounts.length}`);
 
   if (user.createdOrganizations.length > 0) {
     console.log(
       chalk.red(
-        `\n  ⚠️  This user CREATED ${user.createdOrganizations.length} organization(s):`,
-      ),
+        `\n  ⚠️  This user CREATED ${user.createdOrganizations.length} organization(s):`
+      )
     );
     for (const org of user.createdOrganizations) {
       console.log(`    - ${org.name} ${chalk.gray(`(${org.id})`)}`);
     }
     console.log(
       chalk.yellow(
-        '    Note: These organizations will NOT be deleted, only the user reference.',
-      ),
+        '    Note: These organizations will NOT be deleted, only the user reference.'
+      )
     );
   }
 
   if (user.membership.length > 0) {
     console.log(
-      chalk.red('\n  Organizations where user will be removed from:'),
+      chalk.red('\n  Organizations where user will be removed from:')
     );
     for (const member of user.membership) {
       console.log(
-        `    - ${member.organization.name} ${chalk.gray(`(${member.role})`)}`,
+        `    - ${member.organization.name} ${chalk.gray(`(${member.role})`)}`
       );
     }
   }
 
   console.log(
     chalk.red(
-      '\n⚠️  This will delete the user account, all sessions, and remove them from all organizations!',
-    ),
+      '\n⚠️  This will delete the user account, all sessions, and remove them from all organizations!'
+    )
   );
 
   // First confirmation
@@ -155,7 +155,7 @@ export async function deleteUser() {
       type: 'confirm',
       name: 'confirmFirst',
       message: chalk.red(
-        `Are you ABSOLUTELY SURE you want to delete user "${user.email}"?`,
+        `Are you ABSOLUTELY SURE you want to delete user "${user.email}"?`
       ),
       default: false,
     },
@@ -186,7 +186,7 @@ export async function deleteUser() {
       type: 'confirm',
       name: 'confirmFinal',
       message: chalk.red(
-        'FINAL WARNING: This action CANNOT be undone. Delete now?',
+        'FINAL WARNING: This action CANNOT be undone. Delete now?'
       ),
       default: false,
     },
@@ -210,8 +210,8 @@ export async function deleteUser() {
     console.log(chalk.green('\n✅ User deleted successfully!'));
     console.log(
       chalk.gray(
-        `Deleted: ${user.email} (removed from ${user.membership.length} organizations)`,
-      ),
+        `Deleted: ${user.email} (removed from ${user.membership.length} organizations)`
+      )
     );
   } catch (error) {
     console.error(chalk.red('\n❌ Error deleting user:'), error);

admin/src/commands/lookup-client.ts

@@ -47,7 +47,7 @@ export async function lookupByClient() {
     displayText: `${client.organization.name} → ${client.project?.name || '[No Project]'} → ${client.name} ${chalk.gray(`(${client.id})`)}`,
   }));
 
-  const searchFunction = async (_answers: unknown, input = '') => {
+  const searchFunction = (_answers: unknown, input = '') => {
     const fuzzyResult = fuzzy.filter(input, searchItems, {
       extract: (item: ClientSearchItem) =>
         `${item.organizationName} ${item.projectName || ''} ${item.name} ${item.id}`,
@@ -101,4 +101,3 @@ export async function lookupByClient() {
     highlightClientId: selectedClient.id,
   });
 }
-

admin/src/commands/lookup-email.ts

@@ -52,7 +52,7 @@ export async function lookupByEmail() {
     };
   });
 
-  const searchFunction = async (_answers: unknown, input = '') => {
+  const searchFunction = (_answers: unknown, input = '') => {
     const fuzzyResult = fuzzy.filter(input, searchItems, {
       extract: (item: EmailSearchItem) =>
         `${item.email} ${item.organizationName}`,
@@ -103,10 +103,9 @@ export async function lookupByEmail() {
 
   console.log(
     chalk.yellow(
-      `\nShowing organization for: ${selectedMember.email} (${selectedMember.role})\n`,
-    ),
+      `\nShowing organization for: ${selectedMember.email} (${selectedMember.role})\n`
+    )
   );
 
   displayOrganizationDetails(organization);
 }
-

admin/src/commands/lookup-org.ts

@@ -35,7 +35,7 @@ export async function lookupByOrg() {
     displayText: `${org.name} ${chalk.gray(`(${org.id})`)}`,
   }));
 
-  const searchFunction = async (_answers: unknown, input = '') => {
+  const searchFunction = (_answers: unknown, input = '') => {
     const fuzzyResult = fuzzy.filter(input, searchItems, {
       extract: (item: OrgSearchItem) => `${item.name} ${item.id}`,
     });
@@ -85,4 +85,3 @@ export async function lookupByOrg() {
 
   displayOrganizationDetails(organization);
 }
-

admin/src/commands/lookup-project.ts

@@ -42,7 +42,7 @@ export async function lookupByProject() {
     displayText: `${project.organization.name} → ${project.name} ${chalk.gray(`(${project.id})`)}`,
   }));
 
-  const searchFunction = async (_answers: unknown, input = '') => {
+  const searchFunction = (_answers: unknown, input = '') => {
     const fuzzyResult = fuzzy.filter(input, searchItems, {
       extract: (item: ProjectSearchItem) =>
         `${item.organizationName} ${item.name} ${item.id}`,
@@ -95,4 +95,3 @@ export async function lookupByProject() {
     highlightProjectId: selectedProject.id,
   });
 }
-

admin/src/utils/display.ts

@@ -23,7 +23,7 @@ interface DisplayOptions {
 
 export function displayOrganizationDetails(
   organization: OrganizationWithDetails,
-  options: DisplayOptions = {},
+  options: DisplayOptions = {}
 ) {
   console.log(`\n${'='.repeat(80)}`);
   console.log(chalk.bold.yellow(`\n📊 ORGANIZATION: ${organization.name}`));
@@ -34,18 +34,18 @@ export function displayOrganizationDetails(
   console.log(`  ${chalk.gray('ID:')} ${organization.id}`);
   console.log(`  ${chalk.gray('Name:')} ${organization.name}`);
   console.log(
-    `  ${chalk.gray('Created:')} ${organization.createdAt.toISOString()}`,
+    `  ${chalk.gray('Created:')} ${organization.createdAt.toISOString()}`
   );
   console.log(`  ${chalk.gray('Timezone:')} ${organization.timezone || 'UTC'}`);
 
   // Subscription info
   if (organization.subscriptionStatus) {
     console.log(
-      `  ${chalk.gray('Subscription Status:')} ${getSubscriptionStatusColor(organization.subscriptionStatus)}`,
+      `  ${chalk.gray('Subscription Status:')} ${getSubscriptionStatusColor(organization.subscriptionStatus)}`
     );
     if (organization.subscriptionPriceId) {
       console.log(
-        `  ${chalk.gray('Price ID:')} ${organization.subscriptionPriceId}`,
+        `  ${chalk.gray('Price ID:')} ${organization.subscriptionPriceId}`
       );
     }
     if (organization.subscriptionPeriodEventsLimit) {
@@ -61,24 +61,24 @@ export function displayOrganizationDetails(
             ? chalk.yellow
             : chalk.green;
       console.log(
-        `  ${chalk.gray('Event Usage:')} ${color(usage)} (${percentage.toFixed(1)}%)`,
+        `  ${chalk.gray('Event Usage:')} ${color(usage)} (${percentage.toFixed(1)}%)`
       );
     }
     if (organization.subscriptionStartsAt) {
       console.log(
-        `  ${chalk.gray('Starts:')} ${organization.subscriptionStartsAt.toISOString()}`,
+        `  ${chalk.gray('Starts:')} ${organization.subscriptionStartsAt.toISOString()}`
       );
     }
     if (organization.subscriptionEndsAt) {
       console.log(
-        `  ${chalk.gray('Ends:')} ${organization.subscriptionEndsAt.toISOString()}`,
+        `  ${chalk.gray('Ends:')} ${organization.subscriptionEndsAt.toISOString()}`
       );
     }
   }
 
   if (organization.deleteAt) {
     console.log(
-      `  ${chalk.red.bold('⚠️  Scheduled for deletion:')} ${organization.deleteAt.toISOString()}`,
+      `  ${chalk.red.bold('⚠️  Scheduled for deletion:')} ${organization.deleteAt.toISOString()}`
     );
   }
 
@@ -90,7 +90,7 @@ export function displayOrganizationDetails(
     for (const member of organization.members) {
       const roleBadge = getRoleBadge(member.role);
       console.log(
-        `  ${roleBadge} ${member.user?.email || member.email || 'Unknown'} ${chalk.gray(`(${member.role})`)}`,
+        `  ${roleBadge} ${member.user?.email || member.email || 'Unknown'} ${chalk.gray(`(${member.role})`)}`
       );
     }
   }
@@ -108,7 +108,7 @@ export function displayOrganizationDetails(
       console.log(`\n${projectPrefix}${chalk.bold.green(project.name)}`);
       console.log(`    ${chalk.gray('ID:')} ${project.id}`);
       console.log(
-        `    ${chalk.gray('Events Count:')} ${project.eventsCount.toLocaleString()}`,
+        `    ${chalk.gray('Events Count:')} ${project.eventsCount.toLocaleString()}`
       );
 
       if (project.domain) {
@@ -120,15 +120,15 @@ export function displayOrganizationDetails(
       }
 
       console.log(
-        `    ${chalk.gray('Cross Domain:')} ${project.crossDomain ? chalk.green('✓') : chalk.red('✗')}`,
+        `    ${chalk.gray('Cross Domain:')} ${project.crossDomain ? chalk.green('✓') : chalk.red('✗')}`
       );
       console.log(
-        `    ${chalk.gray('Created:')} ${project.createdAt.toISOString()}`,
+        `    ${chalk.gray('Created:')} ${project.createdAt.toISOString()}`
       );
 
       if (project.deleteAt) {
         console.log(
-          `    ${chalk.red.bold('⚠️  Scheduled for deletion:')} ${project.deleteAt.toISOString()}`,
+          `    ${chalk.red.bold('⚠️  Scheduled for deletion:')} ${project.deleteAt.toISOString()}`
         );
       }
 
@@ -146,10 +146,10 @@ export function displayOrganizationDetails(
           console.log(`        ${chalk.gray('ID:')} ${client.id}`);
           console.log(`        ${chalk.gray('Type:')} ${client.type}`);
           console.log(
-            `        ${chalk.gray('Has Secret:')} ${client.secret ? chalk.green('✓') : chalk.red('✗')}`,
+            `        ${chalk.gray('Has Secret:')} ${client.secret ? chalk.green('✓') : chalk.red('✗')}`
           );
           console.log(
-            `        ${chalk.gray('Ignore CORS/Secret:')} ${client.ignoreCorsAndSecret ? chalk.yellow('✓') : chalk.gray('✗')}`,
+            `        ${chalk.gray('Ignore CORS/Secret:')} ${client.ignoreCorsAndSecret ? chalk.yellow('✓') : chalk.gray('✗')}`
           );
         }
       } else {
@@ -159,7 +159,7 @@ export function displayOrganizationDetails(
   }
 
   // Clients without projects (organization-level clients)
-  const orgLevelClients = organization.projects.length > 0 ? [] : []; // We need to query these separately
+  const _orgLevelClients = organization.projects.length > 0 ? [] : []; // We need to query these separately
 
   console.log(`\n${'='.repeat(80)}\n`);
 }

admin/tsconfig.json

@@ -5,11 +5,8 @@
     "rootDir": "src",
     "target": "ES2022",
     "lib": ["ES2022"],
-    "types": [
-      "node"
-    ],
+    "types": ["node"],
     "strictNullChecks": true
   },
   "include": ["src"]
 }
-

apps/api/scripts/get-bots.ts

@@ -1,14 +1,14 @@
 import fs from 'node:fs';
-import path from 'node:path';
-import { dirname } from 'node:path';
+import path, { dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
+
 import yaml from 'js-yaml';
 
 // Regex special characters that indicate we need actual regex
-const regexSpecialChars = /[|^$.*+?(){}\[\]\\]/;
+const regexSpecialChars = /[|^$.*+?(){}[\]\\]/;
 
 function transformBots(bots: any[]): any[] {
   return bots.map((bot) => {
@@ -28,7 +28,7 @@ async function main() {
   // Get document, or throw exception on error
   try {
     const data = await fetch(
-      'https://raw.githubusercontent.com/matomo-org/device-detector/master/regexes/bots.yml',
+      'https://raw.githubusercontent.com/matomo-org/device-detector/master/regexes/bots.yml'
     ).then((res) => res.text());
 
     const parsedData = yaml.load(data) as any[];
@@ -45,11 +45,11 @@ async function main() {
         'export default bots;',
         '',
       ].join('\n'),
-      'utf-8',
+      'utf-8'
     );
 
     console.log(
-      `✅ Generated bots.ts with ${transformedBots.length} bot entries`,
+      `✅ Generated bots.ts with ${transformedBots.length} bot entries`
     );
     const regexCount = transformedBots.filter((b) => 'regex' in b).length;
     const includesCount = transformedBots.filter((b) => 'includes' in b).length;

apps/api/scripts/mock.ts

@@ -133,7 +133,7 @@ function generateEvents(): Event[] {
           clientId,
           profile: profiles[i % PROFILE_COUNT]!,
           eventsCount: Math.floor(Math.random() * 10),
-        }),
+        })
       );
     }
   });
@@ -150,7 +150,7 @@ let lastTriggeredIndex = 0;
 async function triggerEvents(generatedEvents: any[]) {
   const EVENTS_PER_SECOND = Number.parseInt(
     process.env.EVENTS_PER_SECOND || '100',
-    10,
+    10
   );
   const INTERVAL_MS = 1000 / EVENTS_PER_SECOND;
 
@@ -164,7 +164,7 @@ async function triggerEvents(generatedEvents: any[]) {
     await trackit(event);
     console.log(`Event ${lastTriggeredIndex + 1} sent successfully`);
     console.log(
-      `sending ${event.track.payload?.properties?.__path} from user ${event.headers['user-agent']}`,
+      `sending ${event.track.payload?.properties?.__path} from user ${event.headers['user-agent']}`
     );
   } catch (error) {
     console.error(`Failed to send event ${lastTriggeredIndex + 1}:`, error);
@@ -174,7 +174,7 @@ async function triggerEvents(generatedEvents: any[]) {
   const remainingEvents = generatedEvents.length - lastTriggeredIndex;
 
   console.log(
-    `Triggered ${lastTriggeredIndex} events. Remaining: ${remainingEvents}`,
+    `Triggered ${lastTriggeredIndex} events. Remaining: ${remainingEvents}`
   );
 
   if (remainingEvents > 0) {
@@ -215,7 +215,7 @@ async function createMock(file: string) {
   fs.writeFileSync(
     file,
     JSON.stringify(insertFakeEvents(scrambleEvents(generateEvents())), null, 2),
-    'utf-8',
+    'utf-8'
   );
 }
 
@@ -438,7 +438,7 @@ async function simultaneousRequests() {
       if (group.parallel && group.tracks.length > 1) {
         // Parallel execution for same-flagged tracks
         console.log(
-          `Firing ${group.tracks.length} parallel requests with flag '${group.parallel}'`,
+          `Firing ${group.tracks.length} parallel requests with flag '${group.parallel}'`
         );
         const promises = group.tracks.map(async (track) => {
           const { name, parallel, ...properties } = track;

apps/api/scripts/test-manage-api.ts

@@ -14,7 +14,7 @@ const CLIENT_ID = process.env.CLIENT_ID!;
 const CLIENT_SECRET = process.env.CLIENT_SECRET!;
 const API_BASE_URL = process.env.API_URL || 'http://localhost:3333';
 
-if (!CLIENT_ID || !CLIENT_SECRET) {
+if (!(CLIENT_ID && CLIENT_SECRET)) {
   console.error('CLIENT_ID and CLIENT_SECRET must be set');
   process.exit(1);
 }
@@ -34,7 +34,7 @@ const results: TestResult[] = [];
 async function makeRequest(
   method: string,
   path: string,
-  body?: any,
+  body?: any
 ): Promise<TestResult> {
   const url = `${API_BASE_URL}${path}`;
   const headers: Record<string, string> = {
@@ -90,9 +90,11 @@ async function testProjects() {
   });
   results.push(createResult);
   console.log(
-    `✓ POST /manage/projects: ${createResult.success ? '✅' : '❌'} ${createResult.status}`,
+    `✓ POST /manage/projects: ${createResult.success ? '✅' : '❌'} ${createResult.status}`
   );
-  if (createResult.error) console.log(`  Error: ${createResult.error}`);
+  if (createResult.error) {
+    console.log(`  Error: ${createResult.error}`);
+  }
 
   const projectId = createResult.data?.data?.id;
   const clientId = createResult.data?.data?.client?.id;
@@ -100,15 +102,19 @@ async function testProjects() {
 
   if (projectId) {
     console.log(`  Created project: ${projectId}`);
-    if (clientId) console.log(`  Created client: ${clientId}`);
-    if (clientSecret) console.log(`  Client secret: ${clientSecret}`);
+    if (clientId) {
+      console.log(`  Created client: ${clientId}`);
+    }
+    if (clientSecret) {
+      console.log(`  Client secret: ${clientSecret}`);
+    }
   }
 
   // List projects
   const listResult = await makeRequest('GET', '/manage/projects');
   results.push(listResult);
   console.log(
-    `✓ GET /manage/projects: ${listResult.success ? '✅' : '❌'} ${listResult.status}`,
+    `✓ GET /manage/projects: ${listResult.success ? '✅' : '❌'} ${listResult.status}`
   );
   if (listResult.data?.data?.length) {
     console.log(`  Found ${listResult.data.data.length} projects`);
@@ -119,7 +125,7 @@ async function testProjects() {
     const getResult = await makeRequest('GET', `/manage/projects/${projectId}`);
     results.push(getResult);
     console.log(
-      `✓ GET /manage/projects/:id: ${getResult.success ? '✅' : '❌'} ${getResult.status}`,
+      `✓ GET /manage/projects/:id: ${getResult.success ? '✅' : '❌'} ${getResult.status}`
     );
 
     // Update project
@@ -129,21 +135,21 @@ async function testProjects() {
       {
         name: 'Updated Test Project',
         crossDomain: true,
-      },
+      }
     );
     results.push(updateResult);
     console.log(
-      `✓ PATCH /manage/projects/:id: ${updateResult.success ? '✅' : '❌'} ${updateResult.status}`,
+      `✓ PATCH /manage/projects/:id: ${updateResult.success ? '✅' : '❌'} ${updateResult.status}`
     );
 
     // Delete project (soft delete)
     const deleteResult = await makeRequest(
       'DELETE',
-      `/manage/projects/${projectId}`,
+      `/manage/projects/${projectId}`
     );
     results.push(deleteResult);
     console.log(
-      `✓ DELETE /manage/projects/:id: ${deleteResult.success ? '✅' : '❌'} ${deleteResult.status}`,
+      `✓ DELETE /manage/projects/:id: ${deleteResult.success ? '✅' : '❌'} ${deleteResult.status}`
     );
   }
 
@@ -161,26 +167,30 @@ async function testClients(projectId?: string) {
   });
   results.push(createResult);
   console.log(
-    `✓ POST /manage/clients: ${createResult.success ? '✅' : '❌'} ${createResult.status}`,
+    `✓ POST /manage/clients: ${createResult.success ? '✅' : '❌'} ${createResult.status}`
   );
-  if (createResult.error) console.log(`  Error: ${createResult.error}`);
+  if (createResult.error) {
+    console.log(`  Error: ${createResult.error}`);
+  }
 
   const clientId = createResult.data?.data?.id;
   const clientSecret = createResult.data?.data?.secret;
 
   if (clientId) {
     console.log(`  Created client: ${clientId}`);
-    if (clientSecret) console.log(`  Client secret: ${clientSecret}`);
+    if (clientSecret) {
+      console.log(`  Client secret: ${clientSecret}`);
+    }
   }
 
   // List clients
   const listResult = await makeRequest(
     'GET',
-    projectId ? `/manage/clients?projectId=${projectId}` : '/manage/clients',
+    projectId ? `/manage/clients?projectId=${projectId}` : '/manage/clients'
   );
   results.push(listResult);
   console.log(
-    `✓ GET /manage/clients: ${listResult.success ? '✅' : '❌'} ${listResult.status}`,
+    `✓ GET /manage/clients: ${listResult.success ? '✅' : '❌'} ${listResult.status}`
   );
   if (listResult.data?.data?.length) {
     console.log(`  Found ${listResult.data.data.length} clients`);
@@ -191,7 +201,7 @@ async function testClients(projectId?: string) {
     const getResult = await makeRequest('GET', `/manage/clients/${clientId}`);
     results.push(getResult);
     console.log(
-      `✓ GET /manage/clients/:id: ${getResult.success ? '✅' : '❌'} ${getResult.status}`,
+      `✓ GET /manage/clients/:id: ${getResult.success ? '✅' : '❌'} ${getResult.status}`
     );
 
     // Update client
@@ -200,21 +210,21 @@ async function testClients(projectId?: string) {
       `/manage/clients/${clientId}`,
       {
         name: 'Updated Test Client',
-      },
+      }
     );
     results.push(updateResult);
     console.log(
-      `✓ PATCH /manage/clients/:id: ${updateResult.success ? '✅' : '❌'} ${updateResult.status}`,
+      `✓ PATCH /manage/clients/:id: ${updateResult.success ? '✅' : '❌'} ${updateResult.status}`
     );
 
     // Delete client
     const deleteResult = await makeRequest(
       'DELETE',
-      `/manage/clients/${clientId}`,
+      `/manage/clients/${clientId}`
     );
     results.push(deleteResult);
     console.log(
-      `✓ DELETE /manage/clients/:id: ${deleteResult.success ? '✅' : '❌'} ${deleteResult.status}`,
+      `✓ DELETE /manage/clients/:id: ${deleteResult.success ? '✅' : '❌'} ${deleteResult.status}`
     );
   }
 }
@@ -236,9 +246,11 @@ async function testReferences(projectId?: string) {
   });
   results.push(createResult);
   console.log(
-    `✓ POST /manage/references: ${createResult.success ? '✅' : '❌'} ${createResult.status}`,
+    `✓ POST /manage/references: ${createResult.success ? '✅' : '❌'} ${createResult.status}`
   );
-  if (createResult.error) console.log(`  Error: ${createResult.error}`);
+  if (createResult.error) {
+    console.log(`  Error: ${createResult.error}`);
+  }
 
   const referenceId = createResult.data?.data?.id;
 
@@ -249,11 +261,11 @@ async function testReferences(projectId?: string) {
   // List references
   const listResult = await makeRequest(
     'GET',
-    `/manage/references?projectId=${projectId}`,
+    `/manage/references?projectId=${projectId}`
   );
   results.push(listResult);
   console.log(
-    `✓ GET /manage/references: ${listResult.success ? '✅' : '❌'} ${listResult.status}`,
+    `✓ GET /manage/references: ${listResult.success ? '✅' : '❌'} ${listResult.status}`
   );
   if (listResult.data?.data?.length) {
     console.log(`  Found ${listResult.data.data.length} references`);
@@ -263,11 +275,11 @@ async function testReferences(projectId?: string) {
     // Get reference
     const getResult = await makeRequest(
       'GET',
-      `/manage/references/${referenceId}`,
+      `/manage/references/${referenceId}`
     );
     results.push(getResult);
     console.log(
-      `✓ GET /manage/references/:id: ${getResult.success ? '✅' : '❌'} ${getResult.status}`,
+      `✓ GET /manage/references/:id: ${getResult.success ? '✅' : '❌'} ${getResult.status}`
     );
 
     // Update reference
@@ -278,21 +290,21 @@ async function testReferences(projectId?: string) {
         title: 'Updated Test Reference',
         description: 'Updated description',
         datetime: new Date().toISOString(),
-      },
+      }
     );
     results.push(updateResult);
     console.log(
-      `✓ PATCH /manage/references/:id: ${updateResult.success ? '✅' : '❌'} ${updateResult.status}`,
+      `✓ PATCH /manage/references/:id: ${updateResult.success ? '✅' : '❌'} ${updateResult.status}`
     );
 
     // Delete reference
     const deleteResult = await makeRequest(
       'DELETE',
-      `/manage/references/${referenceId}`,
+      `/manage/references/${referenceId}`
     );
     results.push(deleteResult);
     console.log(
-      `✓ DELETE /manage/references/:id: ${deleteResult.success ? '✅' : '❌'} ${deleteResult.status}`,
+      `✓ DELETE /manage/references/:id: ${deleteResult.success ? '✅' : '❌'} ${deleteResult.status}`
     );
   }
 }
@@ -328,7 +340,9 @@ async function main() {
         .filter((r) => !r.success)
         .forEach((r) => {
           console.log(`  ❌ ${r.name} (${r.status})`);
-          if (r.error) console.log(`     Error: ${r.error}`);
+          if (r.error) {
+            console.log(`     Error: ${r.error}`);
+          }
         });
     }
   } catch (error) {

apps/api/scripts/test.ts

@@ -1,11 +1,10 @@
-import { type IClickhouseEvent, ch, createEvent } from '@openpanel/db';
-import { formatClickhouseDate } from '@openpanel/db';
+import { ch, formatClickhouseDate, type IClickhouseEvent } from '@openpanel/db';
 import { v4 as uuid } from 'uuid';
 
 async function main() {
   const startDate = new Date('2025-01-01T00:00:00Z');
   const endDate = new Date();
-  const eventsPerDay = 25000;
+  const eventsPerDay = 25_000;
   const variance = 3000;
 
   // Event names to randomly choose from
@@ -36,7 +35,7 @@ async function main() {
         device_id: `device_${Math.floor(Math.random() * 1000)}`,
         profile_id: `profile_${Math.floor(Math.random() * 1000)}`,
         project_id: 'testing',
-        session_id: `session_${Math.floor(Math.random() * 10000)}`,
+        session_id: `session_${Math.floor(Math.random() * 10_000)}`,
         properties: {
           hash: 'test-hash',
           'query.utm_source': 'test',
@@ -75,7 +74,7 @@ async function main() {
 
     // Log progress
     console.log(
-      `Created ${dailyEvents} events for ${currentDate.toISOString().split('T')[0]}`,
+      `Created ${dailyEvents} events for ${currentDate.toISOString().split('T')[0]}`
     );
   }
 }

apps/api/src/controllers/ai.controller.ts

@@ -1,3 +1,7 @@
+import { db, getOrganizationByProjectIdCached } from '@openpanel/db';
+import { getProjectAccess } from '@openpanel/trpc/src/access';
+import { appendResponseMessages, type Message, streamText } from 'ai';
+import type { FastifyReply, FastifyRequest } from 'fastify';
 import { getChatModel, getChatSystemPrompt } from '@/utils/ai';
 import {
   getAllEventNames,
@@ -8,10 +12,6 @@ import {
   getReport,
 } from '@/utils/ai-tools';
 import { HttpError } from '@/utils/errors';
-import { db, getOrganizationByProjectIdCached } from '@openpanel/db';
-import { getProjectAccess } from '@openpanel/trpc/src/access';
-import { type Message, appendResponseMessages, streamText } from 'ai';
-import type { FastifyReply, FastifyRequest } from 'fastify';
 
 export async function chat(
   request: FastifyRequest<{
@@ -22,7 +22,7 @@ export async function chat(
       messages: Message[];
     };
   }>,
-  reply: FastifyReply,
+  reply: FastifyReply
 ) {
   const { session } = request.session;
   const { messages } = request.body;
@@ -117,7 +117,7 @@ export async function chat(
           },
         });
       },
-      onError: async (error) => {
+      onError: (error) => {
         request.log.error('chat error', { error });
       },
     });

apps/api/src/controllers/error.html

@@ -1,18 +1,20 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
+  <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Error - OpenPanel</title>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
+      rel="stylesheet"
+    >
     <style>
     * {
       box-sizing: border-box;
     }
 
     body {
-      font-family: 'Inter', sans-serif;
+      font-family: "Inter", sans-serif;
       display: flex;
       justify-content: center;
       align-items: center;
@@ -48,15 +50,20 @@
       line-height: 1.5;
     }
     </style>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="error-container">
-    <img src="https://openpanel.dev/logo.svg" alt="OpenPanel Logo" class="logo">
+      <img
+        src="https://openpanel.dev/logo.svg"
+        alt="OpenPanel Logo"
+        class="logo"
+      >
       <h1>Oops! Something went wrong</h1>
-    <p>We encountered an error while processing your request. Please try again later or contact support if the problem
-      persists.</p>
+      <p>
+        We encountered an error while processing your request. Please try again
+        later or contact support if the problem persists.
+      </p>
     </div>
-</body>
-
+  </body>
 </html>

apps/api/src/controllers/export.controller.ts

@@ -71,8 +71,7 @@ const eventsScheme = z.object({
   page: z.coerce.number().optional().default(1),
   limit: z.coerce.number().optional().default(50),
   includes: z
-    .preprocess(
-      (arg) => {
+    .preprocess((arg) => {
       if (arg == null) {
         return undefined;
       }
@@ -80,13 +79,14 @@ const eventsScheme = z.object({
         return arg;
       }
       if (typeof arg === 'string') {
-          const parts = arg.split(',').map((s) => s.trim()).filter(Boolean);
+        const parts = arg
+          .split(',')
+          .map((s) => s.trim())
+          .filter(Boolean);
         return parts;
       }
       return arg;
-      },
-      z.array(z.string())
-    )
+    }, z.array(z.string()))
     .optional(),
 });
 

apps/api/src/controllers/import.controller.ts

@@ -1,14 +1,13 @@
-import type { FastifyReply, FastifyRequest } from 'fastify';
-
 import { toDots } from '@openpanel/common';
 import type { IClickhouseEvent } from '@openpanel/db';
-import { TABLE_NAMES, ch, formatClickhouseDate } from '@openpanel/db';
+import { ch, formatClickhouseDate, TABLE_NAMES } from '@openpanel/db';
+import type { FastifyReply, FastifyRequest } from 'fastify';
 
 export async function importEvents(
   request: FastifyRequest<{
     Body: IClickhouseEvent[];
   }>,
-  reply: FastifyReply,
+  reply: FastifyReply
 ) {
   const projectId = request.client?.projectId;
   if (!projectId) {

apps/api/src/controllers/insights.controller.ts

@@ -1,4 +1,3 @@
-import { parseQueryString } from '@/utils/parse-zod-query-string';
 import { getDefaultIntervalByDates } from '@openpanel/constants';
 import {
   eventBuffer,
@@ -9,6 +8,7 @@ import {
 import { zChartEventFilter, zRange } from '@openpanel/validation';
 import type { FastifyReply, FastifyRequest } from 'fastify';
 import { z } from 'zod';
+import { parseQueryString } from '@/utils/parse-zod-query-string';
 
 const zGetMetricsQuery = z.object({
   startDate: z.string().nullish(),
@@ -22,7 +22,7 @@ export async function getMetrics(
     Params: { projectId: string };
     Querystring: z.infer<typeof zGetMetricsQuery>;
   }>,
-  reply: FastifyReply,
+  reply: FastifyReply
 ) {
   const { timezone } = await getSettingsForProject(request.params.projectId);
   const parsed = zGetMetricsQuery.safeParse(parseQueryString(request.query));
@@ -41,11 +41,11 @@ export async function getMetrics(
     await overviewService.getMetrics({
       projectId: request.params.projectId,
       filters: parsed.data.filters,
-      startDate: startDate,
-      endDate: endDate,
+      startDate,
+      endDate,
       interval: getDefaultIntervalByDates(startDate, endDate) ?? 'day',
       timezone,
-    }),
+    })
   );
 }
 
@@ -54,7 +54,7 @@ export async function getLiveVisitors(
   request: FastifyRequest<{
     Params: { projectId: string };
   }>,
-  reply: FastifyReply,
+  reply: FastifyReply
 ) {
   reply.send({
     visitors: await eventBuffer.getActiveVisitorCount(request.params.projectId),
@@ -76,7 +76,7 @@ export async function getPages(
     Params: { projectId: string };
     Querystring: z.infer<typeof zGetTopPagesQuery>;
   }>,
-  reply: FastifyReply,
+  reply: FastifyReply
 ) {
   const { timezone } = await getSettingsForProject(request.params.projectId);
   const { startDate, endDate } = getChartStartEndDate(request.query, timezone);
@@ -93,8 +93,8 @@ export async function getPages(
   return overviewService.getTopPages({
     projectId: request.params.projectId,
     filters: parsed.data.filters,
-    startDate: startDate,
-    endDate: endDate,
+    startDate,
+    endDate,
     timezone,
   });
 }
@@ -132,19 +132,19 @@ const zGetOverviewGenericQuery = z.object({
 });
 
 export function getOverviewGeneric(
-  column: z.infer<typeof zGetOverviewGenericQuery>['column'],
+  column: z.infer<typeof zGetOverviewGenericQuery>['column']
 ) {
   return async (
     request: FastifyRequest<{
       Params: { projectId: string; key: string };
       Querystring: z.infer<typeof zGetOverviewGenericQuery>;
     }>,
-    reply: FastifyReply,
+    reply: FastifyReply
   ) => {
     const { timezone } = await getSettingsForProject(request.params.projectId);
     const { startDate, endDate } = getChartStartEndDate(
       request.query,
-      timezone,
+      timezone
     );
     const parsed = zGetOverviewGenericQuery.safeParse({
       ...parseQueryString(request.query),
@@ -165,10 +165,10 @@ export function getOverviewGeneric(
         column,
         projectId: request.params.projectId,
         filters: parsed.data.filters,
-        startDate: startDate,
-        endDate: endDate,
+        startDate,
+        endDate,
         timezone,
-      }),
+      })
     );
   };
 }

apps/api/src/controllers/misc.controller.ts

@@ -1,16 +1,15 @@
 import crypto from 'node:crypto';
-import { logger } from '@/utils/logger';
-import { parseUrlMeta } from '@/utils/parseUrlMeta';
-import type { FastifyReply, FastifyRequest } from 'fastify';
-import sharp from 'sharp';
-
 import {
   DEFAULT_IP_HEADER_ORDER,
   getClientIpFromHeaders,
 } from '@openpanel/common/server/get-client-ip';
-import { TABLE_NAMES, ch, chQuery, formatClickhouseDate } from '@openpanel/db';
+import { ch, chQuery, formatClickhouseDate, TABLE_NAMES } from '@openpanel/db';
 import { type GeoLocation, getGeoLocation } from '@openpanel/geo';
 import { getCache, getRedisCache } from '@openpanel/redis';
+import type { FastifyReply, FastifyRequest } from 'fastify';
+import sharp from 'sharp';
+import { logger } from '@/utils/logger';
+import { parseUrlMeta } from '@/utils/parseUrlMeta';
 
 interface GetFaviconParams {
   url: string;
@@ -29,7 +28,9 @@ function createCacheKey(url: string, prefix = 'favicon'): string {
 
 function validateUrl(raw?: string): URL | null {
   try {
-    if (!raw) throw new Error('Missing ?url');
+    if (!raw) {
+      throw new Error('Missing ?url');
+    }
     const url = new URL(raw);
     if (url.protocol !== 'http:' && url.protocol !== 'https:') {
       throw new Error('Only http/https URLs are allowed');
@@ -42,7 +43,7 @@ function validateUrl(raw?: string): URL | null {
 
 // Binary cache functions (more efficient than base64)
 async function getFromCacheBinary(
-  key: string,
+  key: string
 ): Promise<{ buffer: Buffer; contentType: string } | null> {
   const redis = getRedisCache();
   const [bufferBase64, contentType] = await Promise.all([
@@ -50,14 +51,16 @@ async function getFromCacheBinary(
     redis.get(`${key}:ctype`),
   ]);
 
-  if (!bufferBase64 || !contentType) return null;
+  if (!(bufferBase64 && contentType)) {
+    return null;
+  }
   return { buffer: Buffer.from(bufferBase64, 'base64'), contentType };
 }
 
 async function setToCacheBinary(
   key: string,
   buffer: Buffer,
-  contentType: string,
+  contentType: string
 ): Promise<void> {
   const redis = getRedisCache();
   await Promise.all([
@@ -68,7 +71,7 @@ async function setToCacheBinary(
 
 // Fetch image with timeout and size limits
 async function fetchImage(
-  url: URL,
+  url: URL
 ): Promise<{ buffer: Buffer; contentType: string; status: number }> {
   const controller = new AbortController();
   const timeout = setTimeout(() => controller.abort(), 1000); // 10s timeout
@@ -132,7 +135,7 @@ function isSvgFile(url: string, contentType?: string): boolean {
 async function processImage(
   buffer: Buffer,
   originalUrl?: string,
-  contentType?: string,
+  contentType?: string
 ): Promise<Buffer> {
   // If it's an ICO file, just return it as-is (no conversion needed)
   if (originalUrl && isIcoFile(originalUrl, contentType)) {
@@ -183,10 +186,10 @@ async function processImage(
 async function processOgImage(
   buffer: Buffer,
   originalUrl?: string,
-  contentType?: string,
+  contentType?: string
 ): Promise<Buffer> {
   // If buffer is small enough, return it as-is
-  if (buffer.length < 10000) {
+  if (buffer.length < 10_000) {
     logger.debug('Serving OG image directly without processing', {
       originalUrl,
       bufferSize: buffer.length,
@@ -227,7 +230,7 @@ export async function getFavicon(
   request: FastifyRequest<{
     Querystring: GetFaviconParams;
   }>,
-  reply: FastifyReply,
+  reply: FastifyReply
 ) {
   try {
     logger.info('getFavicon', {
@@ -295,7 +298,7 @@ export async function getFavicon(
     if (buffer.length === 0 && !imageUrl.hostname.includes('duckduckgo.com')) {
       const { hostname } = url;
       const duckduckgoUrl = new URL(
-        `https://icons.duckduckgo.com/ip3/${hostname}.ico`,
+        `https://icons.duckduckgo.com/ip3/${hostname}.ico`
       );
 
       logger.info('Trying DuckDuckGo favicon service', {
@@ -328,7 +331,7 @@ export async function getFavicon(
     const processedBuffer = await processImage(
       buffer,
       imageUrl.toString(),
-      contentType,
+      contentType
     );
 
     logger.info('Favicon processing result', {
@@ -380,7 +383,7 @@ export async function getFavicon(
 
 export async function clearFavicons(
   request: FastifyRequest,
-  reply: FastifyReply,
+  reply: FastifyReply
 ) {
   const redis = getRedisCache();
   const keys = await redis.keys('favicon:*');
@@ -396,7 +399,7 @@ export async function clearFavicons(
 
 export async function clearOgImages(
   request: FastifyRequest,
-  reply: FastifyReply,
+  reply: FastifyReply
 ) {
   const redis = getRedisCache();
   const keys = await redis.keys('og:*');
@@ -417,7 +420,7 @@ export async function ping(
       count: number;
     };
   }>,
-  reply: FastifyReply,
+  reply: FastifyReply
 ) {
   try {
     await ch.insert({
@@ -449,10 +452,10 @@ export async function ping(
 export async function stats(request: FastifyRequest, reply: FastifyReply) {
   const res = await getCache('api:stats', 60 * 60, async () => {
     const projects = await chQuery<{ project_id: string; count: number }>(
-      `SELECT project_id, count(*) as count from ${TABLE_NAMES.events} GROUP by project_id order by count()`,
+      `SELECT project_id, count(*) as count from ${TABLE_NAMES.events} GROUP by project_id order by count()`
     );
     const last24h = await chQuery<{ count: number }>(
-      `SELECT count(*) as count from ${TABLE_NAMES.events} WHERE created_at > now() - interval '24 hours'`,
+      `SELECT count(*) as count from ${TABLE_NAMES.events} WHERE created_at > now() - interval '24 hours'`
     );
     return { projects, last24hCount: last24h[0]?.count || 0 };
   });
@@ -474,7 +477,7 @@ export async function getGeo(request: FastifyRequest, reply: FastifyReply) {
         ip,
         geo: await getGeoLocation(ip),
       };
-    }),
+    })
   );
 
   if (!ip) {
@@ -492,7 +495,7 @@ export async function getGeo(request: FastifyRequest, reply: FastifyReply) {
         acc[other.header] = other;
         return acc;
       },
-      {} as Record<string, { ip: string; header: string; geo: GeoLocation }>,
+      {} as Record<string, { ip: string; header: string; geo: GeoLocation }>
     ),
   });
 }
@@ -503,7 +506,7 @@ export async function getOgImage(
       url: string;
     };
   }>,
-  reply: FastifyReply,
+  reply: FastifyReply
 ) {
   try {
     const url = validateUrl(request.query.url);
@@ -547,7 +550,7 @@ export async function getOgImage(
     const processedBuffer = await processOgImage(
       buffer,
       imageUrl.toString(),
-      contentType,
+      contentType
     );
 
     // Cache the result

apps/api/src/controllers/profile.controller.ts

@@ -1,6 +1,3 @@
-import type { FastifyReply, FastifyRequest } from 'fastify';
-import { assocPath, pathOr } from 'ramda';
-
 import { parseUserAgent } from '@openpanel/common/server';
 import { getProfileById, upsertProfile } from '@openpanel/db';
 import { getGeoLocation } from '@openpanel/geo';
@@ -8,12 +5,14 @@ import type {
   DeprecatedIncrementProfilePayload,
   DeprecatedUpdateProfilePayload,
 } from '@openpanel/validation';
+import type { FastifyReply, FastifyRequest } from 'fastify';
+import { assocPath, pathOr } from 'ramda';
 
 export async function updateProfile(
   request: FastifyRequest<{
     Body: DeprecatedUpdateProfilePayload;
   }>,
-  reply: FastifyReply,
+  reply: FastifyReply
 ) {
   const payload = request.body;
   const projectId = request.client!.projectId;
@@ -54,7 +53,7 @@ export async function incrementProfileProperty(
   request: FastifyRequest<{
     Body: DeprecatedIncrementProfilePayload;
   }>,
-  reply: FastifyReply,
+  reply: FastifyReply
 ) {
   const { profileId, property, value } = request.body;
   const projectId = request.client!.projectId;
@@ -69,7 +68,7 @@ export async function incrementProfileProperty(
 
   const parsed = Number.parseInt(
     pathOr<string>('0', property.split('.'), profile.properties),
-    10,
+    10
   );
 
   if (Number.isNaN(parsed)) {
@@ -79,7 +78,7 @@ export async function incrementProfileProperty(
   profile.properties = assocPath(
     property.split('.'),
     parsed + value,
-    profile.properties,
+    profile.properties
   );
 
   await upsertProfile({
@@ -96,7 +95,7 @@ export async function decrementProfileProperty(
   request: FastifyRequest<{
     Body: DeprecatedIncrementProfilePayload;
   }>,
-  reply: FastifyReply,
+  reply: FastifyReply
 ) {
   const { profileId, property, value } = request.body;
   const projectId = request.client?.projectId;
@@ -111,7 +110,7 @@ export async function decrementProfileProperty(
 
   const parsed = Number.parseInt(
     pathOr<string>('0', property.split('.'), profile.properties),
-    10,
+    10
   );
 
   if (Number.isNaN(parsed)) {
@@ -121,7 +120,7 @@ export async function decrementProfileProperty(
   profile.properties = assocPath(
     property.split('.'),
     parsed - value,
-    profile.properties,
+    profile.properties
   );
 
   await upsertProfile({

apps/api/src/controllers/webhook.controller.ts

@@ -1,18 +1,18 @@
 import fs from 'node:fs';
-import path from 'node:path';
-import { dirname } from 'node:path';
+import path, { dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
+
 import { db, getOrganizationByProjectIdCached } from '@openpanel/db';
 import {
   sendSlackNotification,
   slackInstaller,
 } from '@openpanel/integrations/src/slack';
 import {
-  PolarWebhookVerificationError,
   getProduct,
+  PolarWebhookVerificationError,
   validatePolarEvent,
 } from '@openpanel/payments';
 import { publishEvent } from '@openpanel/redis';
@@ -34,7 +34,7 @@ export async function slackWebhook(
   request: FastifyRequest<{
     Querystring: unknown;
   }>,
-  reply: FastifyReply,
+  reply: FastifyReply
 ) {
   const parsedParams = paramsSchema.safeParse(request.query);
 
@@ -45,10 +45,10 @@ export async function slackWebhook(
 
   const veryfiedState = await slackInstaller.stateStore?.verifyStateParam(
     new Date(),
-    parsedParams.data.state,
+    parsedParams.data.state
   );
   const parsedMetadata = metadataSchema.safeParse(
-    JSON.parse(veryfiedState?.metadata ?? '{}'),
+    JSON.parse(veryfiedState?.metadata ?? '{}')
   );
 
   if (!parsedMetadata.success) {
@@ -75,7 +75,7 @@ export async function slackWebhook(
           zod: parsedJson,
           json,
         },
-        'Failed to parse slack auth response',
+        'Failed to parse slack auth response'
       );
       const html = fs.readFileSync(path.join(__dirname, 'error.html'), 'utf8');
       return reply.status(500).header('Content-Type', 'text/html').send(html);
@@ -104,7 +104,7 @@ export async function slackWebhook(
     });
 
     return reply.redirect(
-      `${process.env.DASHBOARD_URL || process.env.NEXT_PUBLIC_DASHBOARD_URL}/${organizationId}/integrations/installed`,
+      `${process.env.DASHBOARD_URL || process.env.NEXT_PUBLIC_DASHBOARD_URL}/${organizationId}/integrations/installed`
     );
   } catch (err) {
     request.log.error(err);
@@ -128,13 +128,13 @@ export async function polarWebhook(
   request: FastifyRequest<{
     Querystring: unknown;
   }>,
-  reply: FastifyReply,
+  reply: FastifyReply
 ) {
   try {
     const event = validatePolarEvent(
       request.rawBody!,
       request.headers as Record<string, string>,
-      process.env.POLAR_WEBHOOK_SECRET ?? '',
+      process.env.POLAR_WEBHOOK_SECRET ?? ''
     );
 
     switch (event.type) {

apps/api/src/hooks/client.hook.ts

@@ -1,15 +1,15 @@
-import { SdkAuthError, validateSdkRequest } from '@/utils/auth';
 import type {
   DeprecatedPostEventPayload,
   ITrackHandlerPayload,
 } from '@openpanel/validation';
 import type { FastifyReply, FastifyRequest } from 'fastify';
+import { SdkAuthError, validateSdkRequest } from '@/utils/auth';
 
 export async function clientHook(
   req: FastifyRequest<{
     Body: ITrackHandlerPayload | DeprecatedPostEventPayload;
   }>,
-  reply: FastifyReply,
+  reply: FastifyReply
 ) {
   try {
     const client = await validateSdkRequest(req);

apps/api/src/hooks/request-id.hook.ts

@@ -1,8 +1,4 @@
-import type {
-  FastifyReply,
-  FastifyRequest,
-  HookHandlerDoneFunction,
-} from 'fastify';
+import type { FastifyRequest } from 'fastify';
 
 export async function requestIdHook(request: FastifyRequest) {
   if (!request.headers['request-id']) {

apps/api/src/routes/ai.router.ts

@@ -1,6 +1,6 @@
+import type { FastifyPluginCallback, FastifyRequest } from 'fastify';
 import * as controller from '@/controllers/ai.controller';
 import { activateRateLimiter } from '@/utils/rate-limiter';
-import type { FastifyPluginCallback, FastifyRequest } from 'fastify';
 
 const aiRouter: FastifyPluginCallback = async (fastify) => {
   await activateRateLimiter<

apps/api/src/routes/event.router.ts

@@ -1,6 +1,5 @@
-import * as controller from '@/controllers/event.controller';
 import type { FastifyPluginCallback } from 'fastify';
-
+import * as controller from '@/controllers/event.controller';
 import { clientHook } from '@/hooks/client.hook';
 import { duplicateHook } from '@/hooks/duplicate.hook';
 import { isBotHook } from '@/hooks/is-bot.hook';

apps/api/src/routes/export.router.ts

@@ -1,8 +1,8 @@
+import { Prisma } from '@openpanel/db';
+import type { FastifyPluginCallback, FastifyRequest } from 'fastify';
 import * as controller from '@/controllers/export.controller';
 import { validateExportRequest } from '@/utils/auth';
 import { activateRateLimiter } from '@/utils/rate-limiter';
-import { Prisma } from '@openpanel/db';
-import type { FastifyPluginCallback, FastifyRequest } from 'fastify';
 
 const exportRouter: FastifyPluginCallback = async (fastify) => {
   await activateRateLimiter({

apps/api/src/routes/gsc-callback.router.ts

@@ -1,5 +1,5 @@
-import { gscGoogleCallback } from '@/controllers/gsc-oauth-callback.controller';
 import type { FastifyPluginCallback } from 'fastify';
+import { gscGoogleCallback } from '@/controllers/gsc-oauth-callback.controller';
 
 const router: FastifyPluginCallback = async (fastify) => {
   fastify.route({

apps/api/src/routes/import.router.ts

@@ -1,8 +1,7 @@
+import { Prisma } from '@openpanel/db';
+import type { FastifyPluginCallback, FastifyRequest } from 'fastify';
 import * as controller from '@/controllers/import.controller';
 import { validateImportRequest } from '@/utils/auth';
-import type { FastifyPluginCallback, FastifyRequest } from 'fastify';
-
-import { Prisma } from '@openpanel/db';
 
 const importRouter: FastifyPluginCallback = async (fastify) => {
   fastify.addHook('preHandler', async (req: FastifyRequest, reply) => {

apps/api/src/routes/insights.router.ts

@@ -1,8 +1,8 @@
+import { Prisma } from '@openpanel/db';
+import type { FastifyPluginCallback, FastifyRequest } from 'fastify';
 import * as controller from '@/controllers/insights.controller';
 import { validateExportRequest } from '@/utils/auth';
 import { activateRateLimiter } from '@/utils/rate-limiter';
-import { Prisma } from '@openpanel/db';
-import type { FastifyPluginCallback, FastifyRequest } from 'fastify';
 
 const insightsRouter: FastifyPluginCallback = async (fastify) => {
   await activateRateLimiter({

apps/api/src/routes/live.router.ts

@@ -1,6 +1,6 @@
-import * as controller from '@/controllers/live.controller';
 import fastifyWS from '@fastify/websocket';
 import type { FastifyPluginCallback } from 'fastify';
+import * as controller from '@/controllers/live.controller';
 
 const liveRouter: FastifyPluginCallback = async (fastify) => {
   fastify.register(fastifyWS);
@@ -9,22 +9,22 @@ const liveRouter: FastifyPluginCallback = async (fastify) => {
     fastify.get(
       '/organization/:organizationId',
       { websocket: true },
-      controller.wsOrganizationEvents,
+      controller.wsOrganizationEvents
     );
     fastify.get(
       '/visitors/:projectId',
       { websocket: true },
-      controller.wsVisitors,
+      controller.wsVisitors
     );
     fastify.get(
       '/events/:projectId',
       { websocket: true },
-      controller.wsProjectEvents,
+      controller.wsProjectEvents
     );
     fastify.get(
       '/notifications/:projectId',
       { websocket: true },
-      controller.wsProjectNotifications,
+      controller.wsProjectNotifications
     );
   });
 };

apps/api/src/routes/manage.router.ts

@@ -1,8 +1,8 @@
+import { Prisma } from '@openpanel/db';
+import type { FastifyPluginCallback, FastifyRequest } from 'fastify';
 import * as controller from '@/controllers/manage.controller';
 import { validateManageRequest } from '@/utils/auth';
 import { activateRateLimiter } from '@/utils/rate-limiter';
-import { Prisma } from '@openpanel/db';
-import type { FastifyPluginCallback, FastifyRequest } from 'fastify';
 
 const manageRouter: FastifyPluginCallback = async (fastify) => {
   await activateRateLimiter({

apps/api/src/routes/misc.router.ts

@@ -1,5 +1,5 @@
-import * as controller from '@/controllers/misc.controller';
 import type { FastifyPluginCallback } from 'fastify';
+import * as controller from '@/controllers/misc.controller';
 
 const miscRouter: FastifyPluginCallback = async (fastify) => {
   fastify.route({

apps/api/src/routes/oauth-callback.router.ts

@@ -1,5 +1,5 @@
-import * as controller from '@/controllers/oauth-callback.controller';
 import type { FastifyPluginCallback } from 'fastify';
+import * as controller from '@/controllers/oauth-callback.controller';
 
 const router: FastifyPluginCallback = async (fastify) => {
   fastify.route({

apps/api/src/routes/profile.router.ts

@@ -1,7 +1,7 @@
+import type { FastifyPluginCallback } from 'fastify';
 import * as controller from '@/controllers/profile.controller';
 import { clientHook } from '@/hooks/client.hook';
 import { isBotHook } from '@/hooks/is-bot.hook';
-import type { FastifyPluginCallback } from 'fastify';
 
 const eventRouter: FastifyPluginCallback = async (fastify) => {
   fastify.addHook('preHandler', clientHook);

apps/api/src/routes/webhook.router.ts

@@ -1,5 +1,5 @@
-import * as controller from '@/controllers/webhook.controller';
 import type { FastifyPluginCallback } from 'fastify';
+import * as controller from '@/controllers/webhook.controller';
 
 const webhookRouter: FastifyPluginCallback = async (fastify) => {
   fastify.route({

apps/api/src/utils/ai-tools.ts

@@ -1,23 +1,18 @@
 import { chartTypes } from '@openpanel/constants';
 import type { IClickhouseSession } from '@openpanel/db';
 import {
+  ch,
+  clix,
   type IClickhouseEvent,
   type IClickhouseProfile,
   TABLE_NAMES,
-  ch,
-  clix,
 } from '@openpanel/db';
-import { ChartEngine } from '@openpanel/db';
 import { getCache } from '@openpanel/redis';
 import { zReportInput } from '@openpanel/validation';
 import { tool } from 'ai';
 import { z } from 'zod';
 
-export function getReport({
-  projectId,
-}: {
-  projectId: string;
-}) {
+export function getReport({ projectId }: { projectId: string }) {
   return tool({
     description: `Generate a report (a chart) for 
     - ${chartTypes.area}
@@ -67,11 +62,7 @@ export function getReport({
     },
   });
 }
-export function getConversionReport({
-  projectId,
-}: {
-  projectId: string;
-}) {
+export function getConversionReport({ projectId }: { projectId: string }) {
   return tool({
     description:
       'Generate a report (a chart) for conversions between two actions a unique user took.',
@@ -92,11 +83,7 @@ export function getConversionReport({
     },
   });
 }
-export function getFunnelReport({
-  projectId,
-}: {
-  projectId: string;
-}) {
+export function getFunnelReport({ projectId }: { projectId: string }) {
   return tool({
     description:
       'Generate a report (a chart) for funnel between two or more actions a unique user (session_id or profile_id) took.',
@@ -118,11 +105,7 @@ export function getFunnelReport({
   });
 }
 
-export function getProfiles({
-  projectId,
-}: {
-  projectId: string;
-}) {
+export function getProfiles({ projectId }: { projectId: string }) {
   return tool({
     description: 'Get profiles',
     parameters: z.object({
@@ -188,11 +171,7 @@ export function getProfiles({
   });
 }
 
-export function getProfile({
-  projectId,
-}: {
-  projectId: string;
-}) {
+export function getProfile({ projectId }: { projectId: string }) {
   return tool({
     description: 'Get a specific profile',
     parameters: z.object({
@@ -276,11 +255,7 @@ export function getProfile({
   });
 }
 
-export function getEvents({
-  projectId,
-}: {
-  projectId: string;
-}) {
+export function getEvents({ projectId }: { projectId: string }) {
   return tool({
     description: 'Get events for a project or specific profile',
     parameters: z.object({
@@ -369,11 +344,7 @@ export function getEvents({
   });
 }
 
-export function getSessions({
-  projectId,
-}: {
-  projectId: string;
-}) {
+export function getSessions({ projectId }: { projectId: string }) {
   return tool({
     description: 'Get sessions for a project or specific profile',
     parameters: z.object({
@@ -458,11 +429,7 @@ export function getSessions({
   });
 }
 
-export function getAllEventNames({
-  projectId,
-}: {
-  projectId: string;
-}) {
+export function getAllEventNames({ projectId }: { projectId: string }) {
   return tool({
     description: 'Get the top 50 event names in a comma separated list',
     parameters: z.object({}),

apps/api/src/utils/ai.ts

@@ -14,11 +14,7 @@ export const getChatModel = () => {
   }
 };
 
-export const getChatSystemPrompt = ({
-  projectId,
-}: {
-  projectId: string;
-}) => {
+export const getChatSystemPrompt = ({ projectId }: { projectId: string }) => {
   return `You're an product and web analytics expert. Don't generate more than the user asks for. Follow all rules listed below!
 ## General:
 - projectId: \`${projectId}\`

apps/api/src/utils/auth.ts

@@ -1,5 +1,3 @@
-import type { FastifyRequest, RawRequestDefaultExpression } from 'fastify';
-
 import { verifyPassword } from '@openpanel/common/server';
 import type { IServiceClientWithProject } from '@openpanel/db';
 import { ClientType, getClientByIdCached } from '@openpanel/db';
@@ -10,6 +8,7 @@ import type {
   IProjectFilterProfileId,
   ITrackHandlerPayload,
 } from '@openpanel/validation';
+import type { FastifyRequest, RawRequestDefaultExpression } from 'fastify';
 import { path } from 'ramda';
 
 const cleanDomain = (domain: string) =>
@@ -31,7 +30,7 @@ export class SdkAuthError extends Error {
       clientId?: string;
       clientSecret?: string;
       origin?: string;
-    },
+    }
   ) {
     super(message);
     this.name = 'SdkAuthError';
@@ -43,7 +42,7 @@ export class SdkAuthError extends Error {
 export async function validateSdkRequest(
   req: FastifyRequest<{
     Body: ITrackHandlerPayload | DeprecatedPostEventPayload;
-  }>,
+  }>
 ): Promise<IServiceClientWithProject> {
   const { headers, clientIp } = req;
   const clientIdNew = headers['openpanel-client-id'] as string;
@@ -70,7 +69,7 @@ export async function validateSdkRequest(
 
   if (
     !/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/.test(
-      clientId,
+      clientId
     )
   ) {
     throw createError('Ingestion: Client ID must be a valid UUIDv4');
@@ -88,7 +87,7 @@ export async function validateSdkRequest(
 
   // Filter out blocked IPs
   const ipFilter = client.project.filters.filter(
-    (filter): filter is IProjectFilterIp => filter.type === 'ip',
+    (filter): filter is IProjectFilterIp => filter.type === 'ip'
   );
   if (ipFilter.some((filter) => filter.ip === clientIp)) {
     throw createError('Ingestion: IP address is blocked by project filter');
@@ -96,7 +95,7 @@ export async function validateSdkRequest(
 
   // Filter out blocked profile ids
   const profileFilter = client.project.filters.filter(
-    (filter): filter is IProjectFilterProfileId => filter.type === 'profile_id',
+    (filter): filter is IProjectFilterProfileId => filter.type === 'profile_id'
   );
   const profileId =
     path<string | undefined>(['payload', 'profileId'], req.body) || // Track handler
@@ -113,12 +112,11 @@ export async function validateSdkRequest(
   // Only allow revenue tracking if it was sent with a client secret
   // or if the project has allowUnsafeRevenueTracking enabled
   if (
-    !client.project.allowUnsafeRevenueTracking &&
-    !clientSecret &&
+    !(client.project.allowUnsafeRevenueTracking || clientSecret) &&
     typeof revenue !== 'undefined'
   ) {
     throw createError(
-      'Ingestion: Revenue tracking is not allowed without a client secret',
+      'Ingestion: Revenue tracking is not allowed without a client secret'
     );
   }
 
@@ -132,7 +130,7 @@ export async function validateSdkRequest(
       // support wildcard domains `*.foo.com`
       if (cleanedDomain.includes('*')) {
         const regex = new RegExp(
-          `${cleanedDomain.replaceAll('.', '\\.').replaceAll('*', '.+?')}`,
+          `${cleanedDomain.replaceAll('.', '\\.').replaceAll('*', '.+?')}`
         );
 
         return regex.test(origin || '');
@@ -157,7 +155,7 @@ export async function validateSdkRequest(
       `client:auth:${clientId}:${Buffer.from(clientSecret).toString('base64')}`,
       60 * 5,
       async () => await verifyPassword(clientSecret, client.secret!),
-      true,
+      true
     );
     if (isVerified) {
       return client;
@@ -168,14 +166,14 @@ export async function validateSdkRequest(
 }
 
 export async function validateExportRequest(
-  headers: RawRequestDefaultExpression['headers'],
+  headers: RawRequestDefaultExpression['headers']
 ): Promise<IServiceClientWithProject> {
   const clientId = headers['openpanel-client-id'] as string;
   const clientSecret = (headers['openpanel-client-secret'] as string) || '';
 
   if (
     !/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/.test(
-      clientId,
+      clientId
     )
   ) {
     throw new Error('Export: Client ID must be a valid UUIDv4');
@@ -203,14 +201,14 @@ export async function validateExportRequest(
 }
 
 export async function validateImportRequest(
-  headers: RawRequestDefaultExpression['headers'],
+  headers: RawRequestDefaultExpression['headers']
 ): Promise<IServiceClientWithProject> {
   const clientId = headers['openpanel-client-id'] as string;
   const clientSecret = (headers['openpanel-client-secret'] as string) || '';
 
   if (
     !/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/.test(
-      clientId,
+      clientId
     )
   ) {
     throw new Error('Import: Client ID must be a valid UUIDv4');
@@ -238,14 +236,14 @@ export async function validateImportRequest(
 }
 
 export async function validateManageRequest(
-  headers: RawRequestDefaultExpression['headers'],
+  headers: RawRequestDefaultExpression['headers']
 ): Promise<IServiceClientWithProject> {
   const clientId = headers['openpanel-client-id'] as string;
   const clientSecret = (headers['openpanel-client-secret'] as string) || '';
 
   if (
     !/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/.test(
-      clientId,
+      clientId
     )
   ) {
     throw new Error('Manage: Client ID must be a valid UUIDv4');
@@ -263,7 +261,7 @@ export async function validateManageRequest(
 
   if (client.type !== ClientType.root) {
     throw new Error(
-      'Manage: Only root clients are allowed to manage resources',
+      'Manage: Only root clients are allowed to manage resources'
     );
   }
 

apps/api/src/utils/deduplicate.ts

@@ -20,10 +20,10 @@ export async function isDuplicatedEvent({
         origin,
         projectId,
       },
-      'md5',
+      'md5'
     )}`,
     '1',
-    100,
+    100
   );
 
   if (locked) {

apps/api/src/utils/errors.ts

@@ -4,7 +4,7 @@ export class LogError extends Error {
   constructor(
     message: string,
     payload?: Record<string, unknown>,
-    options?: ErrorOptions,
+    options?: ErrorOptions
   ) {
     super(message, options);
     this.name = 'LogError';
@@ -26,7 +26,7 @@ export class HttpError extends Error {
       fingerprint?: string;
       extra?: Record<string, unknown>;
       error?: Error | unknown;
-    },
+    }
   ) {
     super(message);
     this.name = 'HttpError';

apps/api/src/utils/graceful-shutdown.ts

@@ -29,7 +29,7 @@ export function isShuttingDown() {
 export async function shutdown(
   fastify: FastifyInstance,
   signal: string,
-  exitCode = 0,
+  exitCode = 0
 ) {
   if (isShuttingDown()) {
     logger.warn('Shutdown already in progress, ignoring signal', { signal });
@@ -96,7 +96,7 @@ export async function shutdown(
         if (redis.status === 'ready') {
           await redis.quit();
         }
-      }),
+      })
     );
     logger.info('Redis connections closed');
   } catch (error) {

apps/api/src/utils/parse-zod-query-string.ts

@@ -3,14 +3,21 @@ import { getSafeJson } from '@openpanel/json';
 export const parseQueryString = (obj: Record<string, any>): any => {
   return Object.fromEntries(
     Object.entries(obj).map(([k, v]) => {
-      if (typeof v === 'object') return [k, parseQueryString(v)];
+      if (typeof v === 'object') {
+        return [k, parseQueryString(v)];
+      }
       if (
         /^-?[0-9]+(\.[0-9]+)?$/i.test(v) &&
         !Number.isNaN(Number.parseFloat(v))
-      )
+      ) {
         return [k, Number.parseFloat(v)];
-      if (v === 'true') return [k, true];
-      if (v === 'false') return [k, false];
+      }
+      if (v === 'true') {
+        return [k, true];
+      }
+      if (v === 'false') {
+        return [k, false];
+      }
       if (typeof v === 'string') {
         if (getSafeJson(v) !== null) {
           return [k, getSafeJson(v)];
@@ -18,6 +25,6 @@ export const parseQueryString = (obj: Record<string, any>): any => {
         return [k, v];
       }
       return [k, null];
-    }),
+    })
   );
 };

apps/api/src/utils/parseUrlMeta.ts

@@ -19,7 +19,7 @@ function findBestFavicon(favicons: UrlMetaData['favicons']) {
       (favicon) =>
         favicon.rel === 'shortcut icon' ||
         favicon.rel === 'icon' ||
-        favicon.rel === 'apple-touch-icon',
+        favicon.rel === 'apple-touch-icon'
     );
 
   if (match) {

apps/api/tsdown.config.ts

@@ -1,5 +1,5 @@
-import { defineConfig } from 'tsdown';
 import type { Options } from 'tsdown';
+import { defineConfig } from 'tsdown';
 
 const options: Options = {
   clean: true,

apps/justfuckinguseopenpanel/index.html

@@ -1,14 +1,23 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
+  <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <!-- Primary Meta Tags -->
     <title>Just Fucking Use OpenPanel - Stop Overpaying for Analytics</title>
-  <meta name="title" content="Just Fucking Use OpenPanel - Stop Overpaying for Analytics">
-  <meta name="description" content="Mixpanel costs $2,300/month at scale. PostHog costs $1,982/month. Web-only tools tell you nothing about user behavior. OpenPanel gives you full product analytics for a fraction of the cost, or FREE self-hosted.">
-  <meta name="keywords" content="openpanel, analytics, mixpanel alternative, posthog alternative, product analytics, web analytics, open source analytics, self-hosted analytics">
+    <meta
+      name="title"
+      content="Just Fucking Use OpenPanel - Stop Overpaying for Analytics"
+    >
+    <meta
+      name="description"
+      content="Mixpanel costs $2,300/month at scale. PostHog costs $1,982/month. Web-only tools tell you nothing about user behavior. OpenPanel gives you full product analytics for a fraction of the cost, or FREE self-hosted."
+    >
+    <meta
+      name="keywords"
+      content="openpanel, analytics, mixpanel alternative, posthog alternative, product analytics, web analytics, open source analytics, self-hosted analytics"
+    >
     <meta name="author" content="OpenPanel">
     <meta name="robots" content="index, follow">
     <link rel="canonical" href="https://justfuckinguseopenpanel.dev/">
@@ -17,8 +26,14 @@
     <!-- Open Graph / Facebook -->
     <meta property="og:type" content="website">
     <meta property="og:url" content="https://justfuckinguseopenpanel.dev/">
-  <meta property="og:title" content="Just Fucking Use OpenPanel - Stop Overpaying for Analytics">
-  <meta property="og:description" content="Mixpanel costs $2,300/month at scale. PostHog costs $1,982/month. Web-only tools tell you nothing about user behavior. OpenPanel gives you full product analytics for a fraction of the cost, or FREE self-hosted.">
+    <meta
+      property="og:title"
+      content="Just Fucking Use OpenPanel - Stop Overpaying for Analytics"
+    >
+    <meta
+      property="og:description"
+      content="Mixpanel costs $2,300/month at scale. PostHog costs $1,982/month. Web-only tools tell you nothing about user behavior. OpenPanel gives you full product analytics for a fraction of the cost, or FREE self-hosted."
+    >
     <meta property="og:image" content="/ogimage.png">
     <meta property="og:image:width" content="1200">
     <meta property="og:image:height" content="630">
@@ -27,8 +42,14 @@
     <!-- Twitter -->
     <meta name="twitter:card" content="summary_large_image">
     <meta name="twitter:url" content="https://justfuckinguseopenpanel.dev/">
-  <meta name="twitter:title" content="Just Fucking Use OpenPanel - Stop Overpaying for Analytics">
-  <meta name="twitter:description" content="Mixpanel costs $2,300/month at scale. PostHog costs $1,982/month. Web-only tools tell you nothing about user behavior. OpenPanel gives you full product analytics for a fraction of the cost, or FREE self-hosted.">
+    <meta
+      name="twitter:title"
+      content="Just Fucking Use OpenPanel - Stop Overpaying for Analytics"
+    >
+    <meta
+      name="twitter:description"
+      content="Mixpanel costs $2,300/month at scale. PostHog costs $1,982/month. Web-only tools tell you nothing about user behavior. OpenPanel gives you full product analytics for a fraction of the cost, or FREE self-hosted."
+    >
     <meta name="twitter:image" content="/ogimage.png">
 
     <!-- Additional Meta Tags -->
@@ -44,7 +65,9 @@
     body {
       background: #0a0a0a;
       color: #e5e5e5;
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+      font-family:
+        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
+        Arial, sans-serif;
       font-size: 18px;
       line-height: 1.75;
       padding: 2rem 1.5rem;
@@ -100,7 +123,8 @@
       color: #60a5fa;
     }
 
-    ul, ol {
+    ul,
+    ol {
       margin-left: 1.5rem;
       margin-bottom: 1.25em;
     }
@@ -123,7 +147,8 @@
       margin: 2rem 0;
     }
 
-    th, td {
+    th,
+    td {
       padding: 0.75rem;
       text-align: left;
       border-bottom: 1px solid #374151;
@@ -265,12 +290,15 @@
       max-width: 100%;
     }
     </style>
-</head>
-<body>
+  </head>
+  <body>
     <div class="container">
       <div class="hero">
         <h1>Just Fucking Use OpenPanel</h1>
-      <p>Stop settling for basic metrics. Get real insights that actually help you build a better product.</p>
+        <p>
+          Stop settling for basic metrics. Get real insights that actually help
+          you build a better product.
+        </p>
       </div>
 
       <figure class="screenshot">
@@ -281,15 +309,26 @@
             <div class="window-dot green"></div>
           </div>
           <div class="screenshot-image-wrapper">
-          <img src="screenshots/realtime-dark.webp" alt="OpenPanel Real-time Analytics" width="1400" height="800">
+            <img
+              src="screenshots/realtime-dark.webp"
+              alt="OpenPanel Real-time Analytics"
+              width="1400"
+              height="800"
+            >
           </div>
         </div>
-      <figcaption>Real-time analytics - see events as they happen. No waiting, no delays.</figcaption>
+        <figcaption>
+          Real-time analytics - see events as they happen. No waiting, no
+          delays.
+        </figcaption>
       </figure>
 
       <h2>The PostHog/Mixpanel Problem (Volume Pricing Hell)</h2>
 
-    <p>Let's talk about what happens when you have a <strong>real product</strong> with <strong>real users</strong>.</p>
+      <p>
+        Let's talk about what happens when you have a
+        <strong>real product</strong> with <strong>real users</strong>.
+      </p>
 
       <p><strong>Real pricing at scale (20M+ events/month):</strong></p>
       <ul>
@@ -297,35 +336,82 @@
         <li><strong>PostHog</strong>: $1,982/month (and more with add-ons)</li>
       </ul>
 
-    <p>"1 million free events!" they scream. Cute. Until you have an actual product with actual users doing actual things. Then suddenly you need to "talk to sales" and your wallet starts bleeding.</p>
+      <p>
+        "1 million free events!" they scream. Cute. Until you have an actual
+        product with actual users doing actual things. Then suddenly you need to
+        "talk to sales" and your wallet starts bleeding.
+      </p>
 
-    <p>Add-ons, add-ons everywhere. Session replay? +$X. Feature flags? +$X. HIPAA compliance? +$250/month. A/B testing? That'll be extra. You're hemorrhaging money just to understand what your users are doing, you magnificent fool.</p>
+      <p>
+        Add-ons, add-ons everywhere. Session replay? +$X. Feature flags? +$X.
+        HIPAA compliance? +$250/month. A/B testing? That'll be extra. You're
+        hemorrhaging money just to understand what your users are doing, you
+        magnificent fool.
+      </p>
 
       <h2>The Web-Only Analytics Trap</h2>
 
-    <p>You built a great fucking product. You have real traffic. Thousands, tens of thousands of visitors. But you're flying blind.</p>
+      <p>
+        You built a great fucking product. You have real traffic. Thousands,
+        tens of thousands of visitors. But you're flying blind.
+      </p>
 
       <blockquote>
-      "Congrats, 50,000 visitors from France this month. Why didn't a single one buy your baguette?"
+        "Congrats, 50,000 visitors from France this month. Why didn't a single
+        one buy your baguette?"
       </blockquote>
 
-    <p>You see the traffic. You see the bounce rate. You see the referrers. You see where they're from. You have <strong>NO FUCKING IDEA</strong> what users actually do.</p>
+      <p>
+        You see the traffic. You see the bounce rate. You see the referrers. You
+        see where they're from. You have <strong>NO FUCKING IDEA</strong> what
+        users actually do.
+      </p>
 
-    <p>Where do they drop off? Do they come back? What features do they use? Why didn't they convert? Who the fuck knows! You're using a glorified hit counter with a pretty dashboard that tells you everything about geography and nothing about behavior.</p>
+      <p>
+        Where do they drop off? Do they come back? What features do they use?
+        Why didn't they convert? Who the fuck knows! You're using a glorified
+        hit counter with a pretty dashboard that tells you everything about
+        geography and nothing about behavior.
+      </p>
 
-    <p>Plausible. Umami. Fathom. Simple Analytics. GoatCounter. Cabin. Pirsch. They're all the same story: simple analytics with some goals you can define. Page views, visitors, countries, basic funnels. That's it. No retention analysis. No user profiles. No event tracking. No cohorts. No revenue tracking. Just... basic web analytics.</p>
+      <p>
+        Plausible. Umami. Fathom. Simple Analytics. GoatCounter. Cabin. Pirsch.
+        They're all the same story: simple analytics with some goals you can
+        define. Page views, visitors, countries, basic funnels. That's it. No
+        retention analysis. No user profiles. No event tracking. No cohorts. No
+        revenue tracking. Just... basic web analytics.
+      </p>
 
-    <p>And when you finally need to understand your users—when you need to see where they drop off in your signup flow, or which features drive retention, or why your conversion rate is shit—you end up paying for a <strong>SECOND tool</strong> on top. Now you're paying for two subscriptions, managing two dashboards, and your users' data is split across two platforms like a bad divorce.</p>
+      <p>
+        And when you finally need to understand your users—when you need to see
+        where they drop off in your signup flow, or which features drive
+        retention, or why your conversion rate is shit—you end up paying for a
+        <strong>SECOND tool</strong> on top. Now you're paying for two
+        subscriptions, managing two dashboards, and your users' data is split
+        across two platforms like a bad divorce.
+      </p>
 
       <h2>Counter One Dollar Stats</h2>
 
       <p>"$1/month for page views. Adorable."</p>
 
-    <p>Look, I get it. A dollar is cheap. But you're getting exactly what you pay for: page views. That's it. No funnels. No retention. No user profiles. No event tracking. Just... page views.</p>
+      <p>
+        Look, I get it. A dollar is cheap. But you're getting exactly what you
+        pay for: page views. That's it. No funnels. No retention. No user
+        profiles. No event tracking. Just... page views.
+      </p>
 
-    <p>Here's the thing: if you want to make <strong>good decisions</strong> about your product, you need to understand <strong>what your users are actually doing</strong>, not just where the fuck they're from.</p>
+      <p>
+        Here's the thing: if you want to make <strong>good decisions</strong>
+        about your product, you need to understand
+        <strong>what your users are actually doing</strong>, not just where the
+        fuck they're from.
+      </p>
 
-    <p>OpenPanel gives you the full product analytics suite. Or self-host for <strong>FREE</strong> with <strong>UNLIMITED events</strong>.</p>
+      <p>
+        OpenPanel gives you the full product analytics suite. Or self-host for
+        <strong>FREE</strong> with <strong>UNLIMITED events</strong>.
+      </p>
 
       <p>You get:</p>
       <ul>
@@ -335,23 +421,54 @@
         <li>User profiles to understand individual behavior</li>
         <li>Custom dashboards to see what matters to YOU</li>
         <li>Revenue tracking to see what actually makes money</li>
-      <li>All the web analytics (page views, visitors, referrers) that the other tools give you</li>
+        <li>
+          All the web analytics (page views, visitors, referrers) that the other
+          tools give you
+        </li>
       </ul>
 
-    <p>One Dollar Stats tells you 50,000 people visited from France. OpenPanel tells you why they didn't buy your baguette. That's the difference between vanity metrics and actual insights.</p>
+      <p>
+        One Dollar Stats tells you 50,000 people visited from France. OpenPanel
+        tells you why they didn't buy your baguette. That's the difference
+        between vanity metrics and actual insights.
+      </p>
 
       <h2>Why OpenPanel is the Answer</h2>
 
-    <p>You want analytics that actually help you build a better product. Not vanity metrics. Not enterprise pricing. Not two separate tools.</p>
+      <p>
+        You want analytics that actually help you build a better product. Not
+        vanity metrics. Not enterprise pricing. Not two separate tools.
+      </p>
 
-    <p>To make good decisions, you need to understand <strong>what your users are doing</strong>, not just where they're from. You need to see where they drop off. You need to know which features they use. You need to understand why they convert or why they don't.</p>
+      <p>
+        To make good decisions, you need to understand
+        <strong>what your users are doing</strong>, not just where they're from.
+        You need to see where they drop off. You need to know which features
+        they use. You need to understand why they convert or why they don't.
+      </p>
 
       <ul>
-      <li><strong>Open Source & Self-Hostable</strong>: AGPL-3.0 - fork it, audit it, own it. Self-host for FREE with unlimited events, or use our cloud</li>
-      <li><strong>Price</strong>: Affordable pricing that scales, or FREE self-hosted (unlimited events, forever)</li>
-      <li><strong>SDK Size</strong>: 2.3KB (PostHog is 52KB+ - that's 22x bigger, you performance-obsessed maniac)</li>
-      <li><strong>Privacy</strong>: Cookie-free by default, EU-only hosting (or your own servers if you self-host)</li>
-      <li><strong>Full Suite</strong>: Web analytics + product analytics in one tool. No need for two subscriptions.</li>
+        <li>
+          <strong>Open Source & Self-Hostable</strong>: AGPL-3.0 - fork it,
+          audit it, own it. Self-host for FREE with unlimited events, or use our
+          cloud
+        </li>
+        <li>
+          <strong>Price</strong>: Affordable pricing that scales, or FREE
+          self-hosted (unlimited events, forever)
+        </li>
+        <li>
+          <strong>SDK Size</strong>: 2.3KB (PostHog is 52KB+ - that's 22x
+          bigger, you performance-obsessed maniac)
+        </li>
+        <li>
+          <strong>Privacy</strong>: Cookie-free by default, EU-only hosting (or
+          your own servers if you self-host)
+        </li>
+        <li>
+          <strong>Full Suite</strong>: Web analytics + product analytics in one
+          tool. No need for two subscriptions.
+        </li>
       </ul>
 
       <figure class="screenshot">
@@ -362,23 +479,50 @@
             <div class="window-dot green"></div>
           </div>
           <div class="screenshot-image-wrapper">
-          <img src="screenshots/overview-dark.webp" alt="OpenPanel Overview Dashboard" width="1400" height="800">
+            <img
+              src="screenshots/overview-dark.webp"
+              alt="OpenPanel Overview Dashboard"
+              width="1400"
+              height="800"
+            >
           </div>
         </div>
-      <figcaption>OpenPanel overview showing web analytics and product analytics in one clean interface</figcaption>
+        <figcaption>
+          OpenPanel overview showing web analytics and product analytics in one
+          clean interface
+        </figcaption>
       </figure>
 
       <h2>Open Source & Self-Hosting: The Ultimate Fuck You to Pricing Hell</h2>
 
-    <p>Tired of watching your analytics bill grow every month? Tired of "talk to sales" when you hit their arbitrary limits? Tired of paying $2,000+/month just to understand your users?</p>
+      <p>
+        Tired of watching your analytics bill grow every month? Tired of "talk
+        to sales" when you hit their arbitrary limits? Tired of paying
+        $2,000+/month just to understand your users?
+      </p>
 
-    <p><strong>OpenPanel is open source.</strong> AGPL-3.0 licensed. You can fork it. You can audit it. You can own it. And you can <strong>self-host it for FREE with UNLIMITED events</strong>.</p>
+      <p>
+        <strong>OpenPanel is open source.</strong> AGPL-3.0 licensed. You can
+        fork it. You can audit it. You can own it. And you can
+        <strong>self-host it for FREE with UNLIMITED events</strong>.
+      </p>
 
-    <p>That's right. Zero dollars. Unlimited events. All the features. Your data on your servers. No vendor lock-in. No surprise bills. No "enterprise sales" calls.</p>
+      <p>
+        That's right. Zero dollars. Unlimited events. All the features. Your
+        data on your servers. No vendor lock-in. No surprise bills. No
+        "enterprise sales" calls.
+      </p>
 
-    <p>Mixpanel at 20M events? $2,300/month. PostHog? $1,982/month. OpenPanel self-hosted? <strong>$0/month</strong>. Forever.</p>
+      <p>
+        Mixpanel at 20M events? $2,300/month. PostHog? $1,982/month. OpenPanel
+        self-hosted? <strong>$0/month</strong>. Forever.
+      </p>
 
-    <p>Don't want to manage infrastructure? That's fine. Use our cloud. But if you want to escape the pricing hell entirely, self-hosting is a Docker command away. Your data, your rules, your wallet.</p>
+      <p>
+        Don't want to manage infrastructure? That's fine. Use our cloud. But if
+        you want to escape the pricing hell entirely, self-hosting is a Docker
+        command away. Your data, your rules, your wallet.
+      </p>
 
       <h2>The Comparison Table (The Brutal Truth)</h2>
 
@@ -404,7 +548,10 @@
           <tr>
             <td><strong>Plausible</strong></td>
             <td>Various pricing</td>
-          <td>Simple analytics with basic goals. Page views and visitors. That's it.</td>
+            <td>
+              Simple analytics with basic goals. Page views and visitors. That's
+              it.
+            </td>
           </tr>
           <tr>
             <td><strong>One Dollar Stats</strong></td>
@@ -414,7 +561,12 @@
           <tr style="background: #131313; border: 2px solid #3b82f6;">
             <td><strong>OpenPanel</strong></td>
             <td><strong>~$530/mo or FREE (self-hosted)</strong></td>
-          <td><strong>Web + Product analytics. The full package. Open source. Your data.</strong></td>
+            <td>
+              <strong
+                >Web + Product analytics. The full package. Open source. Your
+                data.</strong
+              >
+            </td>
           </tr>
         </tbody>
       </table>
@@ -427,10 +579,18 @@
             <div class="window-dot green"></div>
           </div>
           <div class="screenshot-image-wrapper">
-          <img src="screenshots/profile-dark.webp" alt="OpenPanel User Profiles" width="1400" height="800">
+            <img
+              src="screenshots/profile-dark.webp"
+              alt="OpenPanel User Profiles"
+              width="1400"
+              height="800"
+            >
           </div>
         </div>
-      <figcaption>User profiles - see individual user journeys and behavior. Something web-only tools can't give you.</figcaption>
+        <figcaption>
+          User profiles - see individual user journeys and behavior. Something
+          web-only tools can't give you.
+        </figcaption>
       </figure>
 
       <figure class="screenshot">
@@ -441,33 +601,79 @@
             <div class="window-dot green"></div>
           </div>
           <div class="screenshot-image-wrapper">
-          <img src="screenshots/report-dark.webp" alt="OpenPanel Reports and Funnels" width="1400" height="800">
+            <img
+              src="screenshots/report-dark.webp"
+              alt="OpenPanel Reports and Funnels"
+              width="1400"
+              height="800"
+            >
           </div>
         </div>
-      <figcaption>Funnels, retention, and custom reports - the features you CAN'T get with web-only tools</figcaption>
+        <figcaption>
+          Funnels, retention, and custom reports - the features you CAN'T get
+          with web-only tools
+        </figcaption>
       </figure>
 
       <h2>The Bottom Fucking Line</h2>
 
-    <p>If you want to make good decisions about your product, you need to understand what your users are actually doing. Not just where they're from. Not just how many page views you got. You need to see the full picture: funnels, retention, user behavior, conversion paths.</p>
+      <p>
+        If you want to make good decisions about your product, you need to
+        understand what your users are actually doing. Not just where they're
+        from. Not just how many page views you got. You need to see the full
+        picture: funnels, retention, user behavior, conversion paths.
+      </p>
 
       <p>You have three choices:</p>
 
       <ol>
-      <li>Keep using Google Analytics like a data-harvesting accomplice, adding cookie banners, annoying your users, and contributing to the dystopian surveillance economy</li>
-      <li>Pay $2,000+/month for Mixpanel or PostHog when you scale, or use simple web-only analytics that tell you nothing about user behavior—just where they're from</li>
-      <li>Use OpenPanel (affordable pricing or FREE self-hosted) and get the full analytics suite: web analytics AND product analytics in one tool, so you can actually understand what your users do</li>
+        <li>
+          Keep using Google Analytics like a data-harvesting accomplice, adding
+          cookie banners, annoying your users, and contributing to the dystopian
+          surveillance economy
+        </li>
+        <li>
+          Pay $2,000+/month for Mixpanel or PostHog when you scale, or use
+          simple web-only analytics that tell you nothing about user
+          behavior—just where they're from
+        </li>
+        <li>
+          Use OpenPanel (affordable pricing or FREE self-hosted) and get the
+          full analytics suite: web analytics AND product analytics in one tool,
+          so you can actually understand what your users do
+        </li>
       </ol>
 
-    <p>If you picked option 1 or 2, I can't help you. You're beyond saving. Go enjoy your complicated, privacy-violating, overpriced analytics life where you know everything about where your users are from but nothing about what they actually do.</p>
+      <p>
+        If you picked option 1 or 2, I can't help you. You're beyond saving. Go
+        enjoy your complicated, privacy-violating, overpriced analytics life
+        where you know everything about where your users are from but nothing
+        about what they actually do.
+      </p>
 
-    <p>But if you have even one functioning brain cell, you'll realize that OpenPanel gives you everything you need—web analytics AND product analytics—for a fraction of what the enterprise tools cost. You'll finally understand what your users are doing, not just where the fuck they're from.</p>
+      <p>
+        But if you have even one functioning brain cell, you'll realize that
+        OpenPanel gives you everything you need—web analytics AND product
+        analytics—for a fraction of what the enterprise tools cost. You'll
+        finally understand what your users are doing, not just where the fuck
+        they're from.
+      </p>
 
       <div class="cta">
         <h2>Ready to understand what your users actually do?</h2>
-      <p>Stop settling for vanity metrics. Get the full analytics suite—web analytics AND product analytics—so you can make better decisions. Or self-host for free.</p>
-      <a href="https://openpanel.dev" target="_blank">Get Started with OpenPanel</a>
-      <a href="https://openpanel.dev/docs/self-hosting/self-hosting" target="_blank">Self-Host Guide</a>
+        <p>
+          Stop settling for vanity metrics. Get the full analytics suite—web
+          analytics AND product analytics—so you can make better decisions. Or
+          self-host for free.
+        </p>
+        <a href="https://openpanel.dev" target="_blank"
+          >Get Started with OpenPanel</a
+        >
+        <a
+          href="https://openpanel.dev/docs/self-hosting/self-hosting"
+          target="_blank"
+          >Self-Host Guide</a
+        >
       </div>
 
       <figure class="screenshot">
@@ -478,21 +684,77 @@
             <div class="window-dot green"></div>
           </div>
           <div class="screenshot-image-wrapper">
-          <img src="screenshots/dashboard-dark.webp" alt="OpenPanel Custom Dashboards" width="1400" height="800">
+            <img
+              src="screenshots/dashboard-dark.webp"
+              alt="OpenPanel Custom Dashboards"
+              width="1400"
+              height="800"
+            >
           </div>
         </div>
-      <figcaption>Custom dashboards - build exactly what you need to understand your product</figcaption>
+        <figcaption>
+          Custom dashboards - build exactly what you need to understand your
+          product
+        </figcaption>
       </figure>
 
       <footer>
         <p><strong>Just Fucking Use OpenPanel</strong></p>
-      <p>Inspired by <a href="https://justfuckingusereact.com" target="_blank" rel="nofollow">justfuckingusereact.com</a>, <a href="https://justfuckingusehtml.com" target="_blank" rel="nofollow">justfuckingusehtml.com</a>, and <a href="https://justfuckinguseonedollarstats.com" target="_blank" rel="nofollow">justfuckinguseonedollarstats.com</a> and all other just fucking use sites.</p>
-      <p style="margin-top: 1rem;">This is affiliated with <a href="https://openpanel.dev" target="_blank" rel="nofollow">OpenPanel</a>. We still love all products mentioned in this website, and we're grateful for them and what they do 🫶</p>
+        <p>
+          Inspired by
+          <a
+            href="https://justfuckingusereact.com"
+            target="_blank"
+            rel="nofollow"
+            >justfuckingusereact.com</a
+          >, <a
+            href="https://justfuckingusehtml.com"
+            target="_blank"
+            rel="nofollow"
+            >justfuckingusehtml.com</a
+          >, and
+          <a
+            href="https://justfuckinguseonedollarstats.com"
+            target="_blank"
+            rel="nofollow"
+            >justfuckinguseonedollarstats.com</a
+          >
+          and all other just fucking use sites.
+        </p>
+        <p style="margin-top: 1rem;">
+          This is affiliated with
+          <a href="https://openpanel.dev" target="_blank" rel="nofollow"
+            >OpenPanel</a
+          >. We still love all products mentioned in this website, and we're
+          grateful for them and what they do 🫶
+        </p>
       </footer>
     </div>
 
     <script>
-    window.op=window.op||function(){var n=[];return new Proxy(function(){arguments.length&&n.push([].slice.call(arguments))},{get:function(t,r){return"q"===r?n:function(){n.push([r].concat([].slice.call(arguments)))}} ,has:function(t,r){return"q"===r}}) }();
+    'use strict';
+    window.op =
+      window.op ||
+      (() => {
+        var n = [];
+        return new Proxy(
+          function () {
+            arguments.length && n.push([].slice.call(arguments));
+          },
+          {
+            get(t, r) {
+              returnr === 'q'
+                ? n
+                : function () {
+                    n.push([r].concat([].slice.call(arguments)));
+                  };
+            },
+            has(t, r) {
+              returnr === 'q';
+            },
+          }
+        );
+      })();
     window.op('init', {
       clientId: '59d97757-9449-44cf-a8c1-8f213843b4f0',
       trackScreenViews: true,
@@ -501,5 +763,5 @@
     });
     </script>
     <script src="https://openpanel.dev/op1.js" defer async></script>
-</body>
+  </body>
 </html>

apps/public/components/sections/supporter-perks.tsx

@@ -1,15 +1,15 @@
-import { cn } from '@/lib/utils';
 import {
   CheckIcon,
   HeartHandshakeIcon,
   MessageSquareIcon,
+  PackageIcon,
   RocketIcon,
   SparklesIcon,
   StarIcon,
   ZapIcon,
-  PackageIcon,
 } from 'lucide-react';
 import Link from 'next/link';
+import { cn } from '@/lib/utils';
 
 const perks = [
   {
@@ -52,17 +52,17 @@ export function SupporterPerks({ className }: { className?: string }) {
   return (
     <div
       className={cn(
-        'col gap-4 p-6 rounded-xl border bg-card',
+        'col gap-4 rounded-xl border bg-card p-6',
         'sticky top-24',
-        className,
+        className
       )}
     >
-      <div className="col gap-2 mb-2">
-        <div className="row gap-2 items-center">
+      <div className="col mb-2 gap-2">
+        <div className="row items-center gap-2">
           <HeartHandshakeIcon className="size-5 text-primary" />
           <h3 className="font-semibold text-lg">Supporter Perks</h3>
         </div>
-        <p className="text-sm text-muted-foreground">
+        <p className="text-muted-foreground text-sm">
           Everything you get when you support OpenPanel
         </p>
       </div>
@@ -72,42 +72,42 @@ export function SupporterPerks({ className }: { className?: string }) {
           const Icon = perk.icon;
           return (
             <div
-              key={index}
               className={cn(
-                'col gap-1.5 p-3 rounded-lg border transition-colors',
+                'col gap-1.5 rounded-lg border p-3 transition-colors',
                 perk.highlight
-                  ? 'bg-primary/5 border-primary/20'
-                  : 'bg-background border-border',
+                  ? 'border-primary/20 bg-primary/5'
+                  : 'border-border bg-background'
               )}
+              key={index}
             >
-              <div className="row gap-2 items-start">
+              <div className="row items-start gap-2">
                 <Icon
                   className={cn(
-                    'size-4 mt-0.5 shrink-0',
-                    perk.highlight ? 'text-primary' : 'text-muted-foreground',
+                    'mt-0.5 size-4 shrink-0',
+                    perk.highlight ? 'text-primary' : 'text-muted-foreground'
                   )}
                 />
-                <div className="col gap-0.5 flex-1 min-w-0">
-                  <div className="row gap-2 items-center">
+                <div className="col min-w-0 flex-1 gap-0.5">
+                  <div className="row items-center gap-2">
                     <h4
                       className={cn(
                         'font-medium text-sm',
-                        perk.highlight && 'text-primary',
+                        perk.highlight && 'text-primary'
                       )}
                     >
                       {perk.title}
                     </h4>
                     {perk.highlight && (
-                      <CheckIcon className="size-3.5 text-primary shrink-0" />
+                      <CheckIcon className="size-3.5 shrink-0 text-primary" />
                     )}
                   </div>
-                  <p className="text-xs text-muted-foreground">
+                  <p className="text-muted-foreground text-xs">
                     {perk.description}
                   </p>
                   {perk.href && (
                     <Link
+                      className="mt-1 text-primary text-xs hover:underline"
                       href={perk.href}
-                      className="text-xs text-primary hover:underline mt-1"
                     >
                       Learn more →
                     </Link>
@@ -119,12 +119,11 @@ export function SupporterPerks({ className }: { className?: string }) {
         })}
       </div>
 
-      <div className="mt-4 pt-4 border-t">
-        <p className="text-xs text-muted-foreground text-center">
+      <div className="mt-4 border-t pt-4">
+        <p className="text-center text-muted-foreground text-xs">
           Starting at <strong className="text-foreground">$20/month</strong>
         </p>
       </div>
     </div>
   );
 }
-

apps/public/content/compare/amplitude-alternative.json

@@ -9,12 +9,7 @@
   "hero": {
     "heading": "Best Amplitude Alternatives",
     "subheading": "OpenPanel is an open-source, privacy-first alternative to Amplitude. Get powerful product analytics with web analytics built in, cookie-free tracking, and the freedom to self-host or use our cloud.",
-    "badges": [
-      "Open-source",
-      "Cookie-free",
-      "EU-only hosting",
-      "Self-hostable"
-    ]
+    "badges": ["Open-source", "Cookie-free", "EU-only hosting", "Self-hostable"]
   },
   "competitor": {
     "name": "Amplitude",

apps/public/content/compare/countly-alternative.json

@@ -9,12 +9,7 @@
   "hero": {
     "heading": "Best Countly Alternative",
     "subheading": "Want Countly's product analytics without the complexity? OpenPanel offers a simpler, more affordable approach to user analytics with self-hosting, mobile SDKs, and modern product analytics - all with transparent pricing.",
-    "badges": [
-      "Open-source",
-      "Simple Pricing",
-      "Lightweight",
-      "MIT License"
-    ]
+    "badges": ["Open-source", "Simple Pricing", "Lightweight", "MIT License"]
   },
   "competitor": {
     "name": "Countly",

apps/public/content/compare/crazy-egg-alternative.json

@@ -274,9 +274,7 @@
           "Android",
           "Flutter"
         ],
-        "competitor": [
-          "JavaScript (web only)"
-        ],
+        "competitor": ["JavaScript (web only)"],
         "notes": null
       },
       {

apps/public/content/compare/ensure.ts

@@ -1,4 +1,4 @@
-import { readFile, readdir } from 'node:fs/promises';
+import { readdir, readFile } from 'node:fs/promises';
 import { join } from 'node:path';
 
 interface FileStructure {
@@ -10,7 +10,7 @@ interface FileStructure {
 }
 
 async function analyzeJsonFiles(): Promise<void> {
-  const dirPath = join(import.meta.dirname || __dirname);
+  const dirPath = join(import.meta.dirname || import.meta.dirname);
   const files = await readdir(dirPath);
   const jsonFiles = files.filter((f) => f.endsWith('.json'));
 
@@ -88,7 +88,7 @@ async function analyzeJsonFiles(): Promise<void> {
   console.log(separator);
 
   const sortedGroups = Array.from(groups.entries()).sort(
-    (a, b) => b[1].length - a[1].length,
+    (a, b) => b[1].length - a[1].length
   );
 
   sortedGroups.forEach(([structureKey, files], index) => {
@@ -117,7 +117,7 @@ async function analyzeJsonFiles(): Promise<void> {
   console.log(separator);
 
   const validFiles = structures.filter((s) => s.hasContent && !s.error);
-  const emptyFiles = structures.filter((s) => !s.hasContent && !s.error);
+  const emptyFiles = structures.filter((s) => !(s.hasContent || s.error));
   const errorFiles = structures.filter((s) => s.error);
 
   console.log(`  Total files: ${structures.length}`);
@@ -148,7 +148,9 @@ async function analyzeJsonFiles(): Promise<void> {
     console.log(separator);
 
     sortedGroups.forEach(([structureKey, files], index) => {
-      if (structureKey === 'empty' || structureKey === 'error') return;
+      if (structureKey === 'empty' || structureKey === 'error') {
+        return;
+      }
 
       const groupNum = index + 1;
       console.log(`\nGroup ${groupNum} structure:`);

apps/public/content/compare/fathom-alternative.json

@@ -9,12 +9,7 @@
   "hero": {
     "heading": "Best Fathom Alternative",
     "subheading": "Love Fathom's simplicity and privacy focus? OpenPanel adds product analytics capabilities - funnels, cohorts, retention, and user identification - plus self-hosting options and a free tier.",
-    "badges": [
-      "Open-source",
-      "Privacy-first",
-      "Self-hostable",
-      "Free Tier"
-    ]
+    "badges": ["Open-source", "Privacy-first", "Self-hostable", "Free Tier"]
   },
   "competitor": {
     "name": "Fathom Analytics",

apps/public/content/compare/matomo-alternative.json

@@ -9,12 +9,7 @@
   "hero": {
     "heading": "Best Matomo Alternative",
     "subheading": "OpenPanel is a modern, open-source alternative to Matomo. Get powerful web and product analytics with a cleaner interface, truly cookie-free tracking by default, and no premium plugins required for essential features.",
-    "badges": [
-      "Open-source",
-      "Cookie-free",
-      "EU-only hosting",
-      "Self-hostable"
-    ]
+    "badges": ["Open-source", "Cookie-free", "EU-only hosting", "Self-hostable"]
   },
   "competitor": {
     "name": "Matomo",

apps/public/content/compare/mouseflow-alternative.json

@@ -280,9 +280,7 @@
           "Android",
           "Flutter"
         ],
-        "competitor": [
-          "JavaScript (web only)"
-        ],
+        "competitor": ["JavaScript (web only)"],
         "notes": null
       },
       {

apps/public/content/docs/(tracking)/meta.json

@@ -1,3 +1,9 @@
 {
-  "pages": ["sdks", "how-it-works", "session-replay", "consent-management", "..."]
+  "pages": [
+    "sdks",
+    "how-it-works",
+    "session-replay",
+    "consent-management",
+    "..."
+  ]
 }

apps/public/content/docs/dashboard/meta.json

@@ -1,7 +1,4 @@
 {
   "title": "Dashboard",
-  "pages": [
-    "understand-the-overview",
-    "..."
-  ]
+  "pages": ["understand-the-overview", "..."]
 }

apps/public/content/features/retention.json

@@ -4,10 +4,7 @@
   "seo": {
     "title": "Retention & Cohort Analysis",
     "description": "User retention analytics and cohort analysis that show who comes back. See product stickiness at a glance-no sampling, no guesswork. Built on your events.",
-    "keywords": [
-      "user retention analytics",
-      "cohort analysis"
-    ]
+    "keywords": ["user retention analytics", "cohort analysis"]
   },
   "hero": {
     "heading": "Retention: Who comes back?",

apps/public/content/for/agencies.json

@@ -151,16 +151,34 @@
   "related_links": {
     "guides": [
       { "title": "Script tag SDK setup", "url": "/docs/sdks/script" },
-      { "title": "Migrate from Google Analytics", "url": "/guides/migrate-from-google-analytics" }
+      {
+        "title": "Migrate from Google Analytics",
+        "url": "/guides/migrate-from-google-analytics"
+      }
     ],
     "articles": [
-      { "title": "Cookieless analytics explained", "url": "/articles/cookieless-analytics" },
-      { "title": "How to self-host OpenPanel", "url": "/articles/how-to-self-host-openpanel" },
-      { "title": "Best open source analytics tools", "url": "/articles/open-source-web-analytics" }
+      {
+        "title": "Cookieless analytics explained",
+        "url": "/articles/cookieless-analytics"
+      },
+      {
+        "title": "How to self-host OpenPanel",
+        "url": "/articles/how-to-self-host-openpanel"
+      },
+      {
+        "title": "Best open source analytics tools",
+        "url": "/articles/open-source-web-analytics"
+      }
     ],
     "comparisons": [
-      { "title": "OpenPanel vs Google Analytics", "url": "/compare/google-analytics-alternative" },
-      { "title": "OpenPanel vs Plausible", "url": "/compare/plausible-alternative" },
+      {
+        "title": "OpenPanel vs Google Analytics",
+        "url": "/compare/google-analytics-alternative"
+      },
+      {
+        "title": "OpenPanel vs Plausible",
+        "url": "/compare/plausible-alternative"
+      },
       { "title": "OpenPanel vs Matomo", "url": "/compare/matomo-alternative" }
     ]
   },

apps/public/content/for/developers.json

@@ -156,13 +156,28 @@
       { "title": "Python analytics setup", "url": "/guides/python-analytics" }
     ],
     "articles": [
-      { "title": "How to self-host OpenPanel", "url": "/articles/how-to-self-host-openpanel" },
-      { "title": "Best open source analytics tools", "url": "/articles/open-source-web-analytics" },
-      { "title": "Cookieless analytics explained", "url": "/articles/cookieless-analytics" }
+      {
+        "title": "How to self-host OpenPanel",
+        "url": "/articles/how-to-self-host-openpanel"
+      },
+      {
+        "title": "Best open source analytics tools",
+        "url": "/articles/open-source-web-analytics"
+      },
+      {
+        "title": "Cookieless analytics explained",
+        "url": "/articles/cookieless-analytics"
+      }
     ],
     "comparisons": [
-      { "title": "OpenPanel vs PostHog", "url": "/compare/posthog-alternative" },
-      { "title": "OpenPanel vs Plausible", "url": "/compare/plausible-alternative" },
+      {
+        "title": "OpenPanel vs PostHog",
+        "url": "/compare/posthog-alternative"
+      },
+      {
+        "title": "OpenPanel vs Plausible",
+        "url": "/compare/plausible-alternative"
+      },
       { "title": "OpenPanel vs Umami", "url": "/compare/umami-alternative" }
     ]
   },

apps/public/content/for/nextjs.json

@@ -135,10 +135,16 @@
       { "title": "Track custom events", "url": "/guides/track-custom-events" }
     ],
     "articles": [
-      { "title": "Self-hosted web analytics", "url": "/articles/self-hosted-web-analytics" }
+      {
+        "title": "Self-hosted web analytics",
+        "url": "/articles/self-hosted-web-analytics"
+      }
     ],
     "comparisons": [
-      { "title": "OpenPanel vs Google Analytics", "url": "/compare/google-analytics-alternative" },
+      {
+        "title": "OpenPanel vs Google Analytics",
+        "url": "/compare/google-analytics-alternative"
+      },
       { "title": "OpenPanel vs PostHog", "url": "/compare/posthog-alternative" }
     ]
   },

apps/public/content/for/saas.json

@@ -143,13 +143,28 @@
       { "title": "React analytics setup", "url": "/guides/react-analytics" }
     ],
     "articles": [
-      { "title": "How to create a funnel", "url": "/articles/how-to-create-a-funnel" },
-      { "title": "Self-hosted web analytics", "url": "/articles/self-hosted-web-analytics" }
+      {
+        "title": "How to create a funnel",
+        "url": "/articles/how-to-create-a-funnel"
+      },
+      {
+        "title": "Self-hosted web analytics",
+        "url": "/articles/self-hosted-web-analytics"
+      }
     ],
     "comparisons": [
-      { "title": "OpenPanel vs Mixpanel", "url": "/compare/mixpanel-alternative" },
-      { "title": "OpenPanel vs PostHog", "url": "/compare/posthog-alternative" },
-      { "title": "OpenPanel vs Amplitude", "url": "/compare/amplitude-alternative" }
+      {
+        "title": "OpenPanel vs Mixpanel",
+        "url": "/compare/mixpanel-alternative"
+      },
+      {
+        "title": "OpenPanel vs PostHog",
+        "url": "/compare/posthog-alternative"
+      },
+      {
+        "title": "OpenPanel vs Amplitude",
+        "url": "/compare/amplitude-alternative"
+      }
     ]
   },
   "ctas": {

apps/public/content/for/shopify.json

@@ -134,15 +134,30 @@
   },
   "related_links": {
     "guides": [
-      { "title": "Ecommerce tracking setup", "url": "/guides/ecommerce-tracking" }
+      {
+        "title": "Ecommerce tracking setup",
+        "url": "/guides/ecommerce-tracking"
+      }
     ],
     "articles": [
-      { "title": "Cookieless analytics explained", "url": "/articles/cookieless-analytics" },
-      { "title": "Best open source analytics tools", "url": "/articles/open-source-web-analytics" }
+      {
+        "title": "Cookieless analytics explained",
+        "url": "/articles/cookieless-analytics"
+      },
+      {
+        "title": "Best open source analytics tools",
+        "url": "/articles/open-source-web-analytics"
+      }
     ],
     "comparisons": [
-      { "title": "OpenPanel vs Google Analytics", "url": "/compare/google-analytics-alternative" },
-      { "title": "OpenPanel vs Plausible", "url": "/compare/plausible-alternative" }
+      {
+        "title": "OpenPanel vs Google Analytics",
+        "url": "/compare/google-analytics-alternative"
+      },
+      {
+        "title": "OpenPanel vs Plausible",
+        "url": "/compare/plausible-alternative"
+      }
     ]
   },
   "ctas": {

apps/public/content/for/startups.json

@@ -152,17 +152,38 @@
     "guides": [
       { "title": "Next.js analytics setup", "url": "/guides/nextjs-analytics" },
       { "title": "React analytics setup", "url": "/guides/react-analytics" },
-      { "title": "Migrate from Google Analytics", "url": "/guides/migrate-from-google-analytics" }
+      {
+        "title": "Migrate from Google Analytics",
+        "url": "/guides/migrate-from-google-analytics"
+      }
     ],
     "articles": [
-      { "title": "Best open source analytics tools", "url": "/articles/open-source-web-analytics" },
-      { "title": "How to create a funnel", "url": "/articles/how-to-create-a-funnel" },
-      { "title": "Cookieless analytics guide", "url": "/articles/cookieless-analytics" }
+      {
+        "title": "Best open source analytics tools",
+        "url": "/articles/open-source-web-analytics"
+      },
+      {
+        "title": "How to create a funnel",
+        "url": "/articles/how-to-create-a-funnel"
+      },
+      {
+        "title": "Cookieless analytics guide",
+        "url": "/articles/cookieless-analytics"
+      }
     ],
     "comparisons": [
-      { "title": "OpenPanel vs Mixpanel", "url": "/compare/mixpanel-alternative" },
-      { "title": "OpenPanel vs PostHog", "url": "/compare/posthog-alternative" },
-      { "title": "OpenPanel vs Amplitude", "url": "/compare/amplitude-alternative" }
+      {
+        "title": "OpenPanel vs Mixpanel",
+        "url": "/compare/mixpanel-alternative"
+      },
+      {
+        "title": "OpenPanel vs PostHog",
+        "url": "/compare/posthog-alternative"
+      },
+      {
+        "title": "OpenPanel vs Amplitude",
+        "url": "/compare/amplitude-alternative"
+      }
     ]
   },
   "ctas": {

apps/public/content/for/wordpress.json

@@ -130,17 +130,38 @@
   },
   "related_links": {
     "guides": [
-      { "title": "Ecommerce tracking setup", "url": "/guides/ecommerce-tracking" },
-      { "title": "Website analytics setup", "url": "/guides/website-analytics-setup" },
-      { "title": "OpenPanel WordPress plugin", "url": "https://sv.wordpress.org/plugins/openpanel/" }
+      {
+        "title": "Ecommerce tracking setup",
+        "url": "/guides/ecommerce-tracking"
+      },
+      {
+        "title": "Website analytics setup",
+        "url": "/guides/website-analytics-setup"
+      },
+      {
+        "title": "OpenPanel WordPress plugin",
+        "url": "https://sv.wordpress.org/plugins/openpanel/"
+      }
     ],
     "articles": [
-      { "title": "Cookieless analytics explained", "url": "/articles/cookieless-analytics" },
-      { "title": "How to self-host OpenPanel", "url": "/articles/self-hosted-web-analytics" }
+      {
+        "title": "Cookieless analytics explained",
+        "url": "/articles/cookieless-analytics"
+      },
+      {
+        "title": "How to self-host OpenPanel",
+        "url": "/articles/self-hosted-web-analytics"
+      }
     ],
     "comparisons": [
-      { "title": "OpenPanel vs Google Analytics", "url": "/compare/google-analytics-alternative" },
-      { "title": "OpenPanel vs Plausible", "url": "/compare/plausible-alternative" },
+      {
+        "title": "OpenPanel vs Google Analytics",
+        "url": "/compare/google-analytics-alternative"
+      },
+      {
+        "title": "OpenPanel vs Plausible",
+        "url": "/compare/plausible-alternative"
+      },
       { "title": "OpenPanel vs Matomo", "url": "/compare/matomo-alternative" }
     ]
   },

apps/public/public/op.js

@@ -1,2 +1,254 @@
-"use strict";(()=>{function v(r){return Promise.all(Object.entries(r).map(async([e,i])=>[e,await i??""])).then(e=>Object.fromEntries(e))}function m(r){let e={"Content-Type":"application/json"};return{headers:e,async fetch(i,t,n){let s=`${r}${i}`,o,a=await v(e);return new Promise(p=>{let c=l=>{clearTimeout(o),fetch(s,{headers:a,method:"POST",body:JSON.stringify(t??{}),keepalive:!0,...n??{}}).then(async d=>{if(d.status===401)return null;if(d.status!==200&&d.status!==202)return h(l,p);let g=await d.text();if(!g)return p(null);p(g)}).catch(()=>h(l,p))};function h(l,d){if(l>1)return d(null);o=setTimeout(()=>{c(l+1)},Math.pow(2,l)*500)}c(0)})}}}var u=class{constructor(e){this.state={properties:{}};this.options=e,this.api=m(e.url??"https://api.openpanel.dev"),this.api.headers["openpanel-client-id"]=e.clientId,this.options.clientSecret&&(this.api.headers["openpanel-client-secret"]=this.options.clientSecret)}setProfileId(e){this.state.profileId=e}setProfile(e){this.setProfileId(e.profileId),this.api.fetch("/profile",{...e,properties:{...this.state.properties,...e.properties}})}increment(e,i,t){let n=t?.profileId??this.state.profileId;if(!n)return console.log("No profile id");this.api.fetch("/profile/increment",{profileId:n,property:e,value:i})}decrement(e,i,t){let n=t?.profileId??this.state.profileId;if(!n)return console.log("No profile id");this.api.fetch("/profile/decrement",{profileId:n,property:e,value:i})}event(e,i){let t=i?.profileId??this.state.profileId;delete i?.profileId,this.api.fetch("/event",{name:e,properties:{...this.state.properties,...i??{}},timestamp:this.timestamp(),deviceId:this.getDeviceId(),profileId:t}).then(n=>{this.options.setDeviceId&&n&&this.options.setDeviceId(n)})}setGlobalProperties(e){this.state.properties={...this.state.properties,...e}}clear(){this.state.deviceId=void 0,this.state.profileId=void 0,this.options.removeDeviceId&&this.options.removeDeviceId()}timestamp(){return new Date().toISOString()}getDeviceId(){if(this.state.deviceId)return this.state.deviceId;this.options.getDeviceId&&(this.state.deviceId=this.options.getDeviceId()||void 0)}};function b(r){return r.replace(/([-_][a-z])/gi,e=>e.toUpperCase().replace("-","").replace("_",""))}var f=class extends u{constructor(i){super(i);this.lastPath="";this.isServer()||(this.setGlobalProperties({__referrer:document.referrer}),this.options.trackOutgoingLinks&&this.trackOutgoingLinks(),this.options.trackScreenViews&&this.trackScreenViews(),this.options.trackAttributes&&this.trackAttributes())}debounce(i,t){clearTimeout(this.debounceTimer),this.debounceTimer=setTimeout(i,t)}isServer(){return typeof document>"u"}trackOutgoingLinks(){this.isServer()||document.addEventListener("click",i=>{let t=i.target,n=t.closest("a");if(n&&t){let s=n.getAttribute("href");s?.startsWith("http")&&super.event("link_out",{href:s,text:n.innerText||n.getAttribute("title")||t.getAttribute("alt")||t.getAttribute("title")})}})}trackScreenViews(){if(this.isServer())return;let i=history.pushState;history.pushState=function(...o){let a=i.apply(this,o);return window.dispatchEvent(new Event("pushstate")),window.dispatchEvent(new Event("locationchange")),a};let t=history.replaceState;history.replaceState=function(...o){let a=t.apply(this,o);return window.dispatchEvent(new Event("replacestate")),window.dispatchEvent(new Event("locationchange")),a},window.addEventListener("popstate",function(){window.dispatchEvent(new Event("locationchange"))});let n=()=>this.debounce(()=>this.screenView(),50);this.options.hash?window.addEventListener("hashchange",n):window.addEventListener("locationchange",n),setTimeout(()=>n(),50)}trackAttributes(){this.isServer()||document.addEventListener("click",i=>{let t=i.target,n=t.closest("button"),s=t.closest("a"),o=n?.getAttribute("data-event")?n:s?.getAttribute("data-event")?s:null;if(o){let a={};for(let c of o.attributes)c.name.startsWith("data-")&&c.name!=="data-event"&&(a[b(c.name.replace(/^data-/,""))]=c.value);let p=o.getAttribute("data-event");p&&super.event(p,a)}})}screenView(i){if(this.isServer())return;let t=window.location.href;this.lastPath!==t&&(this.lastPath=t,super.event("screen_view",{...i??{},__path:t,__title:document.title}))}};(r=>{if(r.op&&"q"in r.op){let e=r.op.q||[],i=new f(e.shift()[1]);e.forEach(t=>{t[0]in i&&i[t[0]](...t.slice(1))}),r.op=(t,...n)=>{let s=i[t].bind(i);typeof s=="function"&&s(...n)}}})(window);})();
+(() => {
+  function v(r) {
+    return Promise.all(
+      Object.entries(r).map(async ([e, i]) => [e, (await i) ?? ''])
+    ).then((e) => Object.fromEntries(e));
+  }
+  function m(r) {
+    const e = { 'Content-Type': 'application/json' };
+    return {
+      headers: e,
+      async fetch(i, t, n) {
+        let s = `${r}${i}`,
+          o,
+          a = await v(e);
+        return new Promise((p) => {
+          const c = (l) => {
+            clearTimeout(o),
+              fetch(s, {
+                headers: a,
+                method: 'POST',
+                body: JSON.stringify(t ?? {}),
+                keepalive: !0,
+                ...(n ?? {}),
+              })
+                .then(async (d) => {
+                  if (d.status === 401) {
+                    return null;
+                  }
+                  if (d.status !== 200 && d.status !== 202) {
+                    return h(l, p);
+                  }
+                  const g = await d.text();
+                  if (!g) {
+                    return p(null);
+                  }
+                  p(g);
+                })
+                .catch(() => h(l, p));
+          };
+          function h(l, d) {
+            if (l > 1) {
+              return d(null);
+            }
+            o = setTimeout(
+              () => {
+                c(l + 1);
+              },
+              2 ** l * 500
+            );
+          }
+          c(0);
+        });
+      },
+    };
+  }
+  var u = class {
+    constructor(e) {
+      this.state = { properties: {} };
+      (this.options = e),
+        (this.api = m(e.url ?? 'https://api.openpanel.dev')),
+        (this.api.headers['openpanel-client-id'] = e.clientId),
+        this.options.clientSecret &&
+          (this.api.headers['openpanel-client-secret'] =
+            this.options.clientSecret);
+    }
+    setProfileId(e) {
+      this.state.profileId = e;
+    }
+    setProfile(e) {
+      this.setProfileId(e.profileId),
+        this.api.fetch('/profile', {
+          ...e,
+          properties: { ...this.state.properties, ...e.properties },
+        });
+    }
+    increment(e, i, t) {
+      const n = t?.profileId ?? this.state.profileId;
+      if (!n) {
+        return console.log('No profile id');
+      }
+      this.api.fetch('/profile/increment', {
+        profileId: n,
+        property: e,
+        value: i,
+      });
+    }
+    decrement(e, i, t) {
+      const n = t?.profileId ?? this.state.profileId;
+      if (!n) {
+        return console.log('No profile id');
+      }
+      this.api.fetch('/profile/decrement', {
+        profileId: n,
+        property: e,
+        value: i,
+      });
+    }
+    event(e, i) {
+      const t = i?.profileId ?? this.state.profileId;
+      delete i?.profileId,
+        this.api
+          .fetch('/event', {
+            name: e,
+            properties: { ...this.state.properties, ...(i ?? {}) },
+            timestamp: this.timestamp(),
+            deviceId: this.getDeviceId(),
+            profileId: t,
+          })
+          .then((n) => {
+            this.options.setDeviceId && n && this.options.setDeviceId(n);
+          });
+    }
+    setGlobalProperties(e) {
+      this.state.properties = { ...this.state.properties, ...e };
+    }
+    clear() {
+      (this.state.deviceId = void 0),
+        (this.state.profileId = void 0),
+        this.options.removeDeviceId && this.options.removeDeviceId();
+    }
+    timestamp() {
+      return new Date().toISOString();
+    }
+    getDeviceId() {
+      if (this.state.deviceId) {
+        return this.state.deviceId;
+      }
+      this.options.getDeviceId &&
+        (this.state.deviceId = this.options.getDeviceId() || void 0);
+    }
+  };
+  function b(r) {
+    return r.replace(/([-_][a-z])/gi, (e) =>
+      e.toUpperCase().replace('-', '').replace('_', '')
+    );
+  }
+  var f = class extends u {
+    constructor(i) {
+      super(i);
+      this.lastPath = '';
+      this.isServer() ||
+        (this.setGlobalProperties({ __referrer: document.referrer }),
+        this.options.trackOutgoingLinks && this.trackOutgoingLinks(),
+        this.options.trackScreenViews && this.trackScreenViews(),
+        this.options.trackAttributes && this.trackAttributes());
+    }
+    debounce(i, t) {
+      clearTimeout(this.debounceTimer), (this.debounceTimer = setTimeout(i, t));
+    }
+    isServer() {
+      return typeof document > 'u';
+    }
+    trackOutgoingLinks() {
+      this.isServer() ||
+        document.addEventListener('click', (i) => {
+          const t = i.target,
+            n = t.closest('a');
+          if (n && t) {
+            const s = n.getAttribute('href');
+            s?.startsWith('http') &&
+              super.event('link_out', {
+                href: s,
+                text:
+                  n.innerText ||
+                  n.getAttribute('title') ||
+                  t.getAttribute('alt') ||
+                  t.getAttribute('title'),
+              });
+          }
+        });
+    }
+    trackScreenViews() {
+      if (this.isServer()) {
+        return;
+      }
+      const i = history.pushState;
+      history.pushState = function (...o) {
+        const a = i.apply(this, o);
+        return (
+          window.dispatchEvent(new Event('pushstate')),
+          window.dispatchEvent(new Event('locationchange')),
+          a
+        );
+      };
+      const t = history.replaceState;
+      (history.replaceState = function (...o) {
+        const a = t.apply(this, o);
+        return (
+          window.dispatchEvent(new Event('replacestate')),
+          window.dispatchEvent(new Event('locationchange')),
+          a
+        );
+      }),
+        window.addEventListener('popstate', () => {
+          window.dispatchEvent(new Event('locationchange'));
+        });
+      const n = () => this.debounce(() => this.screenView(), 50);
+      this.options.hash
+        ? window.addEventListener('hashchange', n)
+        : window.addEventListener('locationchange', n),
+        setTimeout(() => n(), 50);
+    }
+    trackAttributes() {
+      this.isServer() ||
+        document.addEventListener('click', (i) => {
+          const t = i.target,
+            n = t.closest('button'),
+            s = t.closest('a'),
+            o = n?.getAttribute('data-event')
+              ? n
+              : s?.getAttribute('data-event')
+                ? s
+                : null;
+          if (o) {
+            const a = {};
+            for (const c of o.attributes) {
+              c.name.startsWith('data-') &&
+                c.name !== 'data-event' &&
+                (a[b(c.name.replace(/^data-/, ''))] = c.value);
+            }
+            const p = o.getAttribute('data-event');
+            p && super.event(p, a);
+          }
+        });
+    }
+    screenView(i) {
+      if (this.isServer()) {
+        return;
+      }
+      const t = window.location.href;
+      this.lastPath !== t &&
+        ((this.lastPath = t),
+        super.event('screen_view', {
+          ...(i ?? {}),
+          __path: t,
+          __title: document.title,
+        }));
+    }
+  };
+  ((r) => {
+    if (r.op && 'q' in r.op) {
+      const e = r.op.q || [],
+        i = new f(e.shift()[1]);
+      e.forEach((t) => {
+        t[0] in i && i[t[0]](...t.slice(1));
+      }),
+        (r.op = (t, ...n) => {
+          const s = i[t].bind(i);
+          typeof s == 'function' && s(...n);
+        });
+    }
+  })(window);
+})();
 //# sourceMappingURL=cdn.global.js.map

apps/public/source.config.ts

@@ -49,7 +49,7 @@ const zGuide = z.object({
     z.object({
       name: z.string(),
       anchor: z.string(),
-    }),
+    })
   ),
 });
 

apps/public/src/app/(content)/[...pages]/page.tsx

@@ -1,12 +1,12 @@
+import type { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+import Script from 'next/script';
 import { HeroContainer } from '@/app/(home)/_sections/hero';
 import { SectionHeader } from '@/components/section';
 import { url } from '@/lib/layout.shared';
 import { getOgImageUrl, getPageMetadata } from '@/lib/metadata';
 import { pageSource } from '@/lib/source';
 import { getMDXComponents } from '@/mdx-components';
-import type { Metadata } from 'next';
-import { notFound } from 'next/navigation';
-import Script from 'next/script';
 
 export async function generateMetadata({
   params,
@@ -46,7 +46,7 @@ export default async function Page({
   const page = await pageSource.getPage(pages);
   const Body = page?.data.body;
 
-  if (!page || !Body) {
+  if (!(page && Body)) {
     return notFound();
   }
 
@@ -70,16 +70,16 @@ export default async function Page({
   return (
     <div>
       <Script
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
         id="page-schema"
         strategy="beforeInteractive"
         type="application/ld+json"
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
       />
       <HeroContainer>
         <SectionHeader
           as="h1"
-          title={page.data.title}
           description={page.data.description}
+          title={page.data.title}
         />
       </HeroContainer>
       <main className="container">

apps/public/src/app/(content)/articles/[articleSlug]/page.tsx

@@ -1,3 +1,9 @@
+import { ArrowLeftIcon } from 'lucide-react';
+import type { Metadata } from 'next';
+import Image from 'next/image';
+import Link from 'next/link';
+import { notFound } from 'next/navigation';
+import Script from 'next/script';
 import { CtaBanner } from '@/app/(home)/_sections/cta-banner';
 import { HeroContainer } from '@/app/(home)/_sections/hero';
 import { Testimonials } from '@/app/(home)/_sections/testimonials';
@@ -7,16 +13,10 @@ import { GetStartedButton } from '@/components/get-started-button';
 import { Logo } from '@/components/logo';
 import { SectionHeader } from '@/components/section';
 import { Toc } from '@/components/toc';
-import { url, getAuthor } from '@/lib/layout.shared';
+import { getAuthor, url } from '@/lib/layout.shared';
 import { getOgImageUrl, getPageMetadata } from '@/lib/metadata';
 import { articleSource } from '@/lib/source';
 import { getMDXComponents } from '@/mdx-components';
-import { ArrowLeftIcon } from 'lucide-react';
-import type { Metadata } from 'next';
-import Image from 'next/image';
-import Link from 'next/link';
-import { notFound } from 'next/navigation';
-import Script from 'next/script';
 
 export async function generateStaticParams() {
   const articles = await articleSource.getPages();
@@ -63,8 +63,7 @@ export default async function Page({
 
   const relatedArticles = (await articleSource.getPages())
     .filter(
-      (item) =>
-        item.data.tag === article?.data.tag && item.url !== article?.url,
+      (item) => item.data.tag === article?.data.tag && item.url !== article?.url
     )
     .sort((a, b) => b.data.date.getTime() - a.data.date.getTime());
 
@@ -107,29 +106,29 @@ export default async function Page({
       <HeroContainer>
         <div className="col">
           <Link
+            className="mb-4 flex items-center gap-2 text-muted-foreground"
             href={goBackUrl}
-            className="flex items-center gap-2 mb-4 text-muted-foreground"
           >
-            <ArrowLeftIcon className="w-4 h-4" />
+            <ArrowLeftIcon className="h-4 w-4" />
             <span>Back to all articles</span>
           </Link>
           <SectionHeader
             as="h1"
-            title={article?.data.title}
             description={article?.data.description}
+            title={article?.data.title}
           />
-          <div className="row gap-4 items-center mt-8">
-            <div className="size-10 center-center bg-black rounded-full">
+          <div className="row mt-8 items-center gap-4">
+            <div className="center-center size-10 rounded-full bg-black">
               {author.image ? (
                 <Image
-                  className="size-10 object-cover rounded-full"
-                  src={author.image}
                   alt={author.name}
-                  width={48}
+                  className="size-10 rounded-full object-cover"
                   height={48}
+                  src={author.image}
+                  width={48}
                 />
               ) : (
-                <Logo className="w-6 h-6 fill-white" />
+                <Logo className="h-6 w-6 fill-white" />
               )}
             </div>
             <div className="col">
@@ -149,23 +148,23 @@ export default async function Page({
         </div>
       </HeroContainer>
       <Script
-        strategy="beforeInteractive"
-        id="article-schema"
-        type="application/ld+json"
         dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+        id="article-schema"
+        strategy="beforeInteractive"
+        type="application/ld+json"
       />
-      <article className="container max-w-5xl col">
-        <div className="grid grid-cols-1 md:grid-cols-[1fr_300px] gap-0">
+      <article className="col container max-w-5xl">
+        <div className="grid grid-cols-1 gap-0 md:grid-cols-[1fr_300px]">
           <div className="min-w-0">
-            <div className="prose [&_table]:w-auto [&_img]:max-w-full [&_img]:h-auto">
+            <div className="prose [&_img]:h-auto [&_img]:max-w-full [&_table]:w-auto">
               <Body components={getMDXComponents()} />
             </div>
           </div>
-          <aside className="pl-12 pb-12 gap-8 col">
+          <aside className="col gap-8 pb-12 pl-12">
             <Toc toc={article?.data.toc} />
             <FeatureCardContainer className="gap-2">
-              <span className="text-lg font-semibold">Try OpenPanel</span>
-              <p className="text-muted-foreground text-sm mb-4">
+              <span className="font-semibold text-lg">Try OpenPanel</span>
+              <p className="mb-4 text-muted-foreground text-sm">
                 Give it a spin for free. No credit card required.
               </p>
               <GetStartedButton />
@@ -175,17 +174,17 @@ export default async function Page({
 
         {relatedArticles.length > 0 && (
           <div className="my-16">
-            <h3 className="text-2xl font-bold mb-8">Related articles</h3>
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <h3 className="mb-8 font-bold text-2xl">Related articles</h3>
+            <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
               {relatedArticles.map((item) => (
                 <ArticleCard
-                  key={item.url}
-                  url={item.url}
-                  title={item.data.title}
-                  tag={item.data.tag}
                   cover={item.data.cover}
-                  team={item.data.team}
                   date={item.data.date}
+                  key={item.url}
+                  tag={item.data.tag}
+                  team={item.data.team}
+                  title={item.data.title}
+                  url={item.url}
                 />
               ))}
             </div>

apps/public/src/app/(content)/articles/page.tsx

@@ -1,3 +1,4 @@
+import type { Metadata } from 'next';
 import { CtaBanner } from '@/app/(home)/_sections/cta-banner';
 import { HeroContainer } from '@/app/(home)/_sections/hero';
 import { Testimonials } from '@/app/(home)/_sections/testimonials';
@@ -6,9 +7,6 @@ import { Section, SectionHeader } from '@/components/section';
 import { url } from '@/lib/layout.shared';
 import { getOgImageUrl, getPageMetadata } from '@/lib/metadata';
 import { articleSource } from '@/lib/source';
-import type { Metadata } from 'next';
-import Image from 'next/image';
-import Link from 'next/link';
 
 export const metadata: Metadata = getPageMetadata({
   title: 'Articles',
@@ -20,30 +18,30 @@ export const metadata: Metadata = getPageMetadata({
 
 export default async function Page() {
   const articles = (await articleSource.getPages()).sort(
-    (a, b) => b.data.date.getTime() - a.data.date.getTime(),
+    (a, b) => b.data.date.getTime() - a.data.date.getTime()
   );
   return (
     <div>
       <HeroContainer className="-mb-32">
         <SectionHeader
-          as="h1"
           align="center"
+          as="h1"
           className="flex-1"
-          title="Articles"
           description="Read our latest articles and stay up to date with the latest news and updates."
+          title="Articles"
         />
       </HeroContainer>
 
-      <Section className="container grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8">
+      <Section className="container grid grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-3">
         {articles.map((item) => (
           <ArticleCard
-            key={item.url}
-            url={item.url}
-            title={item.data.title}
-            tag={item.data.tag}
             cover={item.data.cover}
-            team={item.data.team}
             date={item.data.date}
+            key={item.url}
+            tag={item.data.tag}
+            team={item.data.team}
+            title={item.data.title}
+            url={item.url}
           />
         ))}
       </Section>

apps/public/src/app/(content)/compare/[slug]/_components/benefits-section.tsx

@@ -1,8 +1,8 @@
+import { CheckIcon } from 'lucide-react';
+import Link from 'next/link';
 import { Section } from '@/components/section';
 import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
-import { CheckIcon } from 'lucide-react';
-import Link from 'next/link';
 
 interface BenefitsSectionProps {
   label?: string;
@@ -26,23 +26,23 @@ export function BenefitsSection({
 }: BenefitsSectionProps) {
   return (
     <Section className={cn('container', className)}>
-      <div className="max-w-3xl col gap-6">
+      <div className="col max-w-3xl gap-6">
         {label && (
-          <p className="text-sm italic text-primary font-medium">{label}</p>
+          <p className="font-medium text-primary text-sm italic">{label}</p>
         )}
-        <h2 className="text-4xl md:text-5xl font-semibold leading-tight">
+        <h2 className="font-semibold text-4xl leading-tight md:text-5xl">
           {title}
         </h2>
         <p className="text-lg text-muted-foreground">{description}</p>
         {cta && (
-          <Button size="lg" asChild className="w-fit">
+          <Button asChild className="w-fit" size="lg">
             <Link href={cta.href}>{cta.label}</Link>
           </Button>
         )}
-        <div className="col gap-4 mt-4">
+        <div className="col mt-4 gap-4">
           {benefits.map((benefit) => (
-            <div key={benefit} className="row gap-3 items-start">
-              <CheckIcon className="size-5 text-green-500 shrink-0 mt-0.5" />
+            <div className="row items-start gap-3" key={benefit}>
+              <CheckIcon className="mt-0.5 size-5 shrink-0 text-green-500" />
               <p className="text-muted-foreground">{benefit}</p>
             </div>
           ))}

apps/public/src/app/(content)/compare/[slug]/_components/compare-hero.tsx

@@ -1,12 +1,12 @@
+import { CheckCircle2Icon } from 'lucide-react';
+import Link from 'next/link';
+import { CompareToc } from './compare-toc';
 import { HeroContainer } from '@/app/(home)/_sections/hero';
 import { GetStartedButton } from '@/components/get-started-button';
 import { Perks } from '@/components/perks';
 import { SectionHeader } from '@/components/section';
 import { Button } from '@/components/ui/button';
 import type { CompareHero as CompareHeroData } from '@/lib/compare';
-import { CheckCircle2Icon } from 'lucide-react';
-import Link from 'next/link';
-import { CompareToc } from './compare-toc';
 
 interface CompareHeroProps {
   hero: CompareHeroData;
@@ -15,11 +15,11 @@ interface CompareHeroProps {
 
 export function CompareHero({ hero, tocItems = [] }: CompareHeroProps) {
   return (
-    <HeroContainer divider={false} className="-mb-32">
+    <HeroContainer className="-mb-32" divider={false}>
       <div
         className={
           tocItems.length > 0
-            ? 'grid md:grid-cols-[1fr_auto] gap-8 items-start'
+            ? 'grid items-start gap-8 md:grid-cols-[1fr_auto]'
             : 'col gap-6'
         }
       >
@@ -27,24 +27,24 @@ export function CompareHero({ hero, tocItems = [] }: CompareHeroProps) {
           <SectionHeader
             as="h1"
             className="flex-1"
-            title={hero.heading}
             description={hero.subheading}
+            title={hero.heading}
             variant="sm"
           />
           <div className="row gap-4">
             <GetStartedButton />
-            <Button size="lg" variant="outline" asChild>
+            <Button asChild size="lg" variant="outline">
               <Link
                 href={'https://demo.openpanel.dev'}
-                target="_blank"
                 rel="noreferrer noopener nofollow"
+                target="_blank"
               >
                 See live demo
               </Link>
             </Button>
           </div>
           <Perks
-            className="flex gap-4 flex-wrap"
+            className="flex flex-wrap gap-4"
             perks={hero.badges.map((badge) => ({
               text: badge,
               icon: CheckCircle2Icon,

apps/public/src/app/(content)/compare/[slug]/_components/compare-overview.tsx

@@ -8,15 +8,13 @@ interface CompareOverviewProps {
 export function CompareOverview({ overview }: CompareOverviewProps) {
   return (
     <Section className="container">
-      <article className="col gap-6 max-w-3xl">
-        <h2 className="text-3xl md:text-4xl font-semibold">
-          {overview.title}
-        </h2>
+      <article className="col max-w-3xl gap-6">
+        <h2 className="font-semibold text-3xl md:text-4xl">{overview.title}</h2>
         <div className="col gap-4">
           {overview.paragraphs.map((paragraph) => (
             <p
+              className="text-base text-muted-foreground leading-relaxed md:text-lg"
               key={paragraph.slice(0, 48)}
-              className="text-muted-foreground leading-relaxed text-base md:text-lg"
             >
               {paragraph}
             </p>

apps/public/src/app/(content)/compare/[slug]/_components/compare-toc.tsx

@@ -1,10 +1,10 @@
 'use client';
 
-import { FeatureCardContainer } from '@/components/feature-card';
-import { cn } from '@/lib/utils';
 import { ArrowRightIcon } from 'lucide-react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
+import { FeatureCardContainer } from '@/components/feature-card';
+import { cn } from '@/lib/utils';
 
 interface TocItem {
   id: string;
@@ -22,17 +22,17 @@ export function CompareToc({ items, className }: CompareTocProps) {
   return (
     <FeatureCardContainer
       className={cn(
-        'hidden md:block sticky top-24 h-fit w-64 shrink-0',
-        'col gap-3 p-4 rounded-xl border bg-background/50 backdrop-blur-sm',
-        className,
+        'sticky top-24 hidden h-fit w-64 shrink-0 md:block',
+        'col gap-3 rounded-xl border bg-background/50 p-4 backdrop-blur-sm',
+        className
       )}
     >
       <nav className="col gap-1">
         {items.map((item) => (
           <Link
-            key={item.id}
+            className="group/toc relative flex min-h-6 items-center py-1 text-muted-foreground text-sm transition-colors duration-200 hover:text-foreground"
             href={`${pathname}#${item.id}`}
-            className="group/toc relative flex items-center text-sm text-muted-foreground hover:text-foreground transition-colors duration-200 py-1 min-h-6"
+            key={item.id}
             onClick={(e) => {
               e.preventDefault();
               e.stopPropagation();
@@ -45,8 +45,8 @@ export function CompareToc({ items, className }: CompareTocProps) {
               }
             }}
           >
-            <div className="absolute left-0 flex items-center w-0 overflow-hidden transition-all duration-300 ease-out group-hover/toc:w-5">
-              <ArrowRightIcon className="size-3 shrink-0 -translate-x-full group-hover/toc:translate-x-0 transition-transform duration-300 ease-out delay-75" />
+            <div className="absolute left-0 flex w-0 items-center overflow-hidden transition-all duration-300 ease-out group-hover/toc:w-5">
+              <ArrowRightIcon className="size-3 shrink-0 -translate-x-full transition-transform delay-75 duration-300 ease-out group-hover/toc:translate-x-0" />
             </div>
             <span className="transition-transform duration-300 ease-out group-hover/toc:translate-x-5">
               {item.label}

apps/public/src/app/(content)/compare/[slug]/_components/comparison-table.tsx

@@ -1,6 +1,9 @@
-import { Section, SectionHeader } from '@/components/section';
-import { CompareHighlights, CompareFeatureComparison } from '@/lib/compare';
 import { CheckIcon, XIcon } from 'lucide-react';
+import { Section, SectionHeader } from '@/components/section';
+import type {
+  CompareFeatureComparison,
+  CompareHighlights,
+} from '@/lib/compare';
 import { cn } from '@/lib/utils';
 
 interface ComparisonTableProps {
@@ -40,7 +43,7 @@ export function ComparisonTable({
       openpanel: feature.openpanel,
       competitor: feature.competitor,
       notes: feature.notes,
-    })),
+    }))
   );
 
   const allRows = [
@@ -56,42 +59,44 @@ export function ComparisonTable({
   return (
     <Section className="container">
       <SectionHeader
-        title={highlights.title}
         description={highlights.intro}
+        title={highlights.title}
         variant="sm"
       />
-      <div className="mt-12 border rounded-2xl overflow-hidden">
+      <div className="mt-12 overflow-hidden rounded-2xl border">
         <div className="overflow-x-auto">
           <table className="w-full">
             <thead>
               <tr className="border-b bg-muted/30">
-                <th className="text-left p-4 font-semibold">Feature</th>
-                <th className="text-left p-4 font-semibold">OpenPanel</th>
-                <th className="text-left p-4 font-semibold">{competitorName}</th>
+                <th className="p-4 text-left font-semibold">Feature</th>
+                <th className="p-4 text-left font-semibold">OpenPanel</th>
+                <th className="p-4 text-left font-semibold">
+                  {competitorName}
+                </th>
               </tr>
             </thead>
             <tbody>
               {allRows.map((row, index) => (
                 <tr
-                  key={row.feature}
                   className={cn(
                     'border-b last:border-b-0',
                     index % 2 === 0 ? 'bg-background' : 'bg-muted/20'
                   )}
+                  key={row.feature}
                 >
                   <td className="p-4 font-medium">{row.feature}</td>
                   <td className="p-4">
-                    <div className="row gap-2 items-center">
+                    <div className="row items-center gap-2">
                       {renderValue(row.openpanel)}
                     </div>
                   </td>
                   <td className="p-4">
                     <div className="col gap-1">
-                      <div className="row gap-2 items-center text-muted-foreground">
+                      <div className="row items-center gap-2 text-muted-foreground">
                         {renderValue(row.competitor)}
                       </div>
                       {row.notes && (
-                        <span className="text-xs text-muted-foreground/70 mt-1">
+                        <span className="mt-1 text-muted-foreground/70 text-xs">
                           {row.notes}
                         </span>
                       )}
@@ -106,4 +111,3 @@ export function ComparisonTable({
     </Section>
   );
 }
-

apps/public/src/app/(content)/compare/[slug]/_components/feature-comparison.tsx

@@ -1,13 +1,12 @@
-import { Section, SectionHeader } from '@/components/section';
-import { CompareFeatureGroup } from '@/lib/compare';
 import { CheckIcon, XIcon } from 'lucide-react';
-import { cn } from '@/lib/utils';
+import { Section, SectionHeader } from '@/components/section';
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
 } from '@/components/ui/accordion';
+import type { CompareFeatureGroup } from '@/lib/compare';
 
 interface FeatureComparisonProps {
   featureGroups: CompareFeatureGroup[];
@@ -21,37 +20,39 @@ function renderFeatureValue(value: boolean | string) {
       <XIcon className="size-5 text-red-500" />
     );
   }
-  return <span className="text-sm text-muted-foreground">{value}</span>;
+  return <span className="text-muted-foreground text-sm">{value}</span>;
 }
 
 export function FeatureComparison({ featureGroups }: FeatureComparisonProps) {
   return (
     <Section className="container">
       <SectionHeader
-        title="Feature comparison"
-        description="Detailed breakdown of capabilities"
         align="center"
+        description="Detailed breakdown of capabilities"
+        title="Feature comparison"
       />
-      <div className="mt-12 col gap-4">
+      <div className="col mt-12 gap-4">
         {featureGroups.map((group) => (
-          <div key={group.group} className="border rounded-3xl overflow-hidden">
-            <Accordion type="single" collapsible className="w-full">
-              <AccordionItem value={group.group} className="border-0">
+          <div className="overflow-hidden rounded-3xl border" key={group.group}>
+            <Accordion className="w-full" collapsible type="single">
+              <AccordionItem className="border-0" value={group.group}>
                 <AccordionTrigger className="px-6 py-4 hover:no-underline">
-                  <h3 className="text-lg font-semibold">{group.group}</h3>
+                  <h3 className="font-semibold text-lg">{group.group}</h3>
                 </AccordionTrigger>
                 <AccordionContent className="px-6 pb-6">
                   <div className="col gap-4">
                     {group.features.map((feature) => (
                       <div
+                        className="grid gap-4 border-b py-3 last:border-b-0 md:grid-cols-3"
                         key={feature.name}
-                        className="grid md:grid-cols-3 gap-4 py-3 border-b last:border-b-0"
                       >
-                        <div className="font-medium text-sm">{feature.name}</div>
-                        <div className="row gap-2 items-center">
+                        <div className="font-medium text-sm">
+                          {feature.name}
+                        </div>
+                        <div className="row items-center gap-2">
                           {renderFeatureValue(feature.openpanel)}
                         </div>
-                        <div className="row gap-2 items-center text-muted-foreground">
+                        <div className="row items-center gap-2 text-muted-foreground">
                           {renderFeatureValue(feature.competitor)}
                         </div>
                       </div>
@@ -66,4 +67,3 @@ export function FeatureComparison({ featureGroups }: FeatureComparisonProps) {
     </Section>
   );
 }
-

apps/public/src/app/(content)/compare/[slug]/_components/features-showcase.tsx

@@ -1,15 +1,15 @@
-import { Section, SectionHeader } from '@/components/section';
-import { CompareFeatureComparison } from '@/lib/compare';
 import {
+  BellIcon,
+  BrainIcon,
   HeartIcon,
+  LayoutIcon,
+  LockIcon,
   MessageSquareIcon,
   RefreshCwIcon,
   SparklesIcon,
-  LayoutIcon,
-  BellIcon,
-  BrainIcon,
-  LockIcon,
 } from 'lucide-react';
+import { Section, SectionHeader } from '@/components/section';
+import type { CompareFeatureComparison } from '@/lib/compare';
 
 interface FeaturesShowcaseProps {
   featureComparison: CompareFeatureComparison;
@@ -33,23 +33,23 @@ export function FeaturesShowcase({ featureComparison }: FeaturesShowcaseProps) {
     .filter(
       (f) =>
         f.openpanel === true ||
-        (typeof f.openpanel === 'string' && f.openpanel.toLowerCase() !== 'no'),
+        (typeof f.openpanel === 'string' && f.openpanel.toLowerCase() !== 'no')
     )
     .slice(0, 8);
 
   return (
     <Section className="container">
       <SectionHeader
-        title={featureComparison.title}
         description={featureComparison.intro}
+        title={featureComparison.title}
         variant="sm"
       />
-      <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mt-12">
+      <div className="mt-12 grid gap-6 md:grid-cols-2 lg:grid-cols-4">
         {openpanelFeatures.map((feature, index) => {
           const Icon = featureIcons[index] || SparklesIcon;
           return (
-            <div key={feature.name} className="col gap-3">
-              <div className="size-10 rounded-lg bg-primary/10 center-center">
+            <div className="col gap-3" key={feature.name}>
+              <div className="center-center size-10 rounded-lg bg-primary/10">
                 <Icon className="size-5 text-primary" />
               </div>
               <h3 className="font-semibold text-sm">{feature.name}</h3>
@@ -60,4 +60,3 @@ export function FeaturesShowcase({ featureComparison }: FeaturesShowcaseProps) {
     </Section>
   );
 }
-

apps/public/src/app/(content)/compare/[slug]/_components/highlights-grid.tsx

@@ -1,6 +1,6 @@
+import { CheckIcon, MinusIcon, XIcon } from 'lucide-react';
 import { Section, SectionHeader } from '@/components/section';
-import { CompareHighlight } from '@/lib/compare';
-import { CheckIcon, XIcon, MinusIcon } from 'lucide-react';
+import type { CompareHighlight } from '@/lib/compare';
 import { cn } from '@/lib/utils';
 
 interface HighlightsGridProps {
@@ -22,28 +22,28 @@ export function HighlightsGrid({ highlights }: HighlightsGridProps) {
   return (
     <Section className="container">
       <SectionHeader
-        title="Key differences"
-        description="See how OpenPanel compares at a glance"
         align="center"
+        description="See how OpenPanel compares at a glance"
+        title="Key differences"
       />
-      <div className="mt-12 border rounded-3xl overflow-hidden">
+      <div className="mt-12 overflow-hidden rounded-3xl border">
         <div className="divide-y divide-border">
           {highlights.map((highlight, index) => (
             <div
-              key={highlight.label}
               className={cn(
-                'grid md:grid-cols-3 gap-4 p-6',
+                'grid gap-4 p-6 md:grid-cols-3',
                 index % 2 === 0 ? 'bg-muted/30' : 'bg-background'
               )}
+              key={highlight.label}
             >
               <div className="font-semibold text-sm md:text-base">
                 {highlight.label}
               </div>
-              <div className="row gap-3 items-center">
+              <div className="row items-center gap-3">
                 {getIcon(highlight.openpanel)}
                 <span className="text-sm">{highlight.openpanel}</span>
               </div>
-              <div className="row gap-3 items-center text-muted-foreground">
+              <div className="row items-center gap-3 text-muted-foreground">
                 {getIcon(highlight.competitor)}
                 <span className="text-sm">{highlight.competitor}</span>
               </div>
@@ -54,4 +54,3 @@ export function HighlightsGrid({ highlights }: HighlightsGridProps) {
     </Section>
   );
 }
-

apps/public/src/app/(content)/compare/[slug]/_components/migration-section.tsx

@@ -1,7 +1,6 @@
-import { Section, SectionHeader } from '@/components/section';
-import { CompareMigration } from '@/lib/compare';
 import { CheckIcon, ClockIcon } from 'lucide-react';
-import { cn } from '@/lib/utils';
+import { Section, SectionHeader } from '@/components/section';
+import type { CompareMigration } from '@/lib/compare';
 
 interface MigrationSectionProps {
   migration: CompareMigration;
@@ -11,22 +10,22 @@ export function MigrationSection({ migration }: MigrationSectionProps) {
   return (
     <Section className="container">
       <SectionHeader
-        title={migration.title}
         description={migration.intro}
+        title={migration.title}
         variant="sm"
       />
 
       {/* Difficulty and time */}
-      <div className="row gap-6 mt-8">
+      <div className="row mt-8 gap-6">
         <div className="col gap-2">
-          <div className="row gap-2 items-center text-sm text-muted-foreground">
+          <div className="row items-center gap-2 text-muted-foreground text-sm">
             <ClockIcon className="size-4" />
             <span className="font-medium">Difficulty:</span>
             <span className="capitalize">{migration.difficulty}</span>
           </div>
         </div>
         <div className="col gap-2">
-          <div className="row gap-2 items-center text-sm text-muted-foreground">
+          <div className="row items-center gap-2 text-muted-foreground text-sm">
             <ClockIcon className="size-4" />
             <span className="font-medium">Estimated time:</span>
             <span>{migration.estimated_time}</span>
@@ -35,16 +34,18 @@ export function MigrationSection({ migration }: MigrationSectionProps) {
       </div>
 
       {/* Steps */}
-      <div className="col gap-4 mt-12">
+      <div className="col mt-12 gap-4">
         {migration.steps.map((step, index) => (
-          <div key={step.title} className="col gap-2 p-6 border rounded-2xl">
-            <div className="row gap-3 items-start">
-              <div className="size-8 rounded-full bg-primary/10 center-center shrink-0 font-semibold text-sm">
+          <div className="col gap-2 rounded-2xl border p-6" key={step.title}>
+            <div className="row items-start gap-3">
+              <div className="center-center size-8 shrink-0 rounded-full bg-primary/10 font-semibold text-sm">
                 {index + 1}
               </div>
-              <div className="col gap-1 flex-1">
+              <div className="col flex-1 gap-1">
                 <h3 className="font-semibold">{step.title}</h3>
-                <p className="text-sm text-muted-foreground">{step.description}</p>
+                <p className="text-muted-foreground text-sm">
+                  {step.description}
+                </p>
               </div>
             </div>
           </div>
@@ -52,20 +53,22 @@ export function MigrationSection({ migration }: MigrationSectionProps) {
       </div>
 
       {/* SDK Compatibility */}
-      <div className="mt-12 p-6 border rounded-2xl bg-muted/30">
+      <div className="mt-12 rounded-2xl border bg-muted/30 p-6">
         <div className="col gap-4">
-          <div className="row gap-2 items-center">
+          <div className="row items-center gap-2">
             <CheckIcon className="size-5 text-green-500" />
             <h3 className="font-semibold">SDK Compatibility</h3>
           </div>
-          <p className="text-sm text-muted-foreground">{migration.sdk_compatibility.notes}</p>
+          <p className="text-muted-foreground text-sm">
+            {migration.sdk_compatibility.notes}
+          </p>
         </div>
       </div>
 
       {/* Historical Data */}
-      <div className="mt-6 p-6 border rounded-2xl bg-muted/30">
+      <div className="mt-6 rounded-2xl border bg-muted/30 p-6">
         <div className="col gap-4">
-          <div className="row gap-2 items-center">
+          <div className="row items-center gap-2">
             {migration.historical_data.can_import ? (
               <CheckIcon className="size-5 text-green-500" />
             ) : (
@@ -73,10 +76,11 @@ export function MigrationSection({ migration }: MigrationSectionProps) {
             )}
             <h3 className="font-semibold">Historical Data Import</h3>
           </div>
-          <p className="text-sm text-muted-foreground">{migration.historical_data.notes}</p>
+          <p className="text-muted-foreground text-sm">
+            {migration.historical_data.notes}
+          </p>
         </div>
       </div>
     </Section>
   );
 }
-

apps/public/src/app/(content)/compare/[slug]/_components/pricing-comparison.tsx

@@ -1,8 +1,8 @@
+import { DollarSignIcon } from 'lucide-react';
 import { FeatureCard } from '@/components/feature-card';
 import { Section, SectionHeader } from '@/components/section';
 import type { ComparePricing } from '@/lib/compare';
 import { cn } from '@/lib/utils';
-import { DollarSignIcon } from 'lucide-react';
 
 interface PricingComparisonRow {
   feature: string;
@@ -24,34 +24,34 @@ export function PricingComparison({
   return (
     <Section className="container">
       <SectionHeader
-        title={pricing.title}
-        description={pricing.intro}
         align="center"
+        description={pricing.intro}
+        title={pricing.title}
       />
-      <div className="grid md:grid-cols-2 gap-6 mt-12">
+      <div className="mt-12 grid gap-6 md:grid-cols-2">
         <FeatureCard
-          title="OpenPanel"
+          className="border-green-500/20 bg-green-500/5"
           description={pricing.openpanel.model}
           icon={DollarSignIcon}
-          className="border-green-500/20 bg-green-500/5"
+          title="OpenPanel"
         >
-          <div className="col gap-3 mt-4">
-            <p className="text-sm text-muted-foreground">
+          <div className="col mt-4 gap-3">
+            <p className="text-muted-foreground text-sm">
               {pricing.openpanel.description}
             </p>
           </div>
         </FeatureCard>
         <FeatureCard
-          title={competitorName}
           description={pricing.competitor.model}
           icon={DollarSignIcon}
+          title={competitorName}
         >
-          <div className="col gap-3 mt-4">
-            <p className="text-sm text-muted-foreground">
+          <div className="col mt-4 gap-3">
+            <p className="text-muted-foreground text-sm">
               {pricing.competitor.description}
             </p>
             {pricing.competitor.free_tier && (
-              <p className="text-xs text-muted-foreground">
+              <p className="text-muted-foreground text-xs">
                 Free tier: {pricing.competitor.free_tier}
               </p>
             )}
@@ -59,21 +59,21 @@ export function PricingComparison({
         </FeatureCard>
       </div>
       {pricingTable.length > 0 && (
-        <div className="mt-12 border rounded-3xl overflow-hidden">
+        <div className="mt-12 overflow-hidden rounded-3xl border">
           <div className="divide-y divide-border">
             {pricingTable.map((row, index) => (
               <div
-                key={row.feature}
                 className={cn(
-                  'grid md:grid-cols-3 gap-4 p-6',
-                  index % 2 === 0 ? 'bg-muted/30' : 'bg-background',
+                  'grid gap-4 p-6 md:grid-cols-3',
+                  index % 2 === 0 ? 'bg-muted/30' : 'bg-background'
                 )}
+                key={row.feature}
               >
                 <div className="font-semibold text-sm md:text-base">
                   {row.feature}
                 </div>
                 <div className="text-sm">{row.openpanel}</div>
-                <div className="text-sm text-muted-foreground">
+                <div className="text-muted-foreground text-sm">
                   {row.competitor}
                 </div>
               </div>

apps/public/src/app/(content)/compare/[slug]/_components/pricing-section.tsx

@@ -1,10 +1,10 @@
 'use client';
 
+import { motion } from 'framer-motion';
+import { ArrowRightIcon, CheckIcon } from 'lucide-react';
+import Link from 'next/link';
 import { Section, SectionHeader } from '@/components/section';
 import type { ComparePricing } from '@/lib/compare';
-import { ArrowRightIcon, CheckIcon } from 'lucide-react';
-import { motion } from 'framer-motion';
-import Link from 'next/link';
 
 interface PricingSectionProps {
   pricing: ComparePricing;
@@ -47,71 +47,69 @@ export function PricingSection({
   return (
     <Section className="container">
       <SectionHeader
-        title={pricing.title}
         description={pricing.intro}
+        title={pricing.title}
         variant="sm"
       />
 
       {/* Pricing comparison */}
       <motion.div
+        className="mt-12 grid gap-6 md:grid-cols-2"
         initial="hidden"
-        whileInView="visible"
-        viewport={{ once: true, margin: '-100px' }}
         variants={containerVariants}
-        className="grid md:grid-cols-2 gap-6 mt-12"
+        viewport={{ once: true, margin: '-100px' }}
+        whileInView="visible"
       >
         {/* OpenPanel Card */}
         <motion.div
+          className="col group relative gap-4 overflow-hidden rounded-2xl border bg-background p-6 transition-all duration-300 hover:border-emerald-500/30"
           variants={cardVariants}
-          className="col gap-4 p-6 rounded-2xl border bg-background group relative overflow-hidden hover:border-emerald-500/30 transition-all duration-300"
         >
-          <div className="pointer-events-none absolute inset-0 bg-linear-to-br opacity-100 blur-2xl dark:from-emerald-500/5 dark:via-transparent dark:to-green-500/5 light:from-emerald-800/10 light:via-transparent light:to-green-900/10 group-hover:opacity-150 transition-opacity duration-500" />
-          <div className="col gap-3 relative z-10">
+          <div className="pointer-events-none absolute inset-0 bg-linear-to-br light:from-emerald-800/10 light:via-transparent light:to-green-900/10 opacity-100 blur-2xl transition-opacity duration-500 group-hover:opacity-150 dark:from-emerald-500/5 dark:via-transparent dark:to-green-500/5" />
+          <div className="col relative z-10 gap-3">
             <div className="col gap-2">
-              <h3 className="text-xl font-semibold">OpenPanel</h3>
-              <p className="text-sm text-muted-foreground font-medium">
+              <h3 className="font-semibold text-xl">OpenPanel</h3>
+              <p className="font-medium text-muted-foreground text-sm">
                 {pricing.openpanel.model}
               </p>
             </div>
-            <div className="col gap-2 mt-2">
+            <div className="col mt-2 gap-2">
               {openpanelPoints.map((point, index) => (
                 <motion.div
-                  key={index}
+                  className="row group/item items-start gap-2"
                   initial={{ opacity: 0, x: -10 }}
-                  whileInView={{ opacity: 1, x: 0 }}
-                  viewport={{ once: true }}
+                  key={index}
                   transition={{ delay: index * 0.1 }}
-                  className="row gap-2 items-start group/item"
+                  viewport={{ once: true }}
+                  whileInView={{ opacity: 1, x: 0 }}
                 >
-                  <CheckIcon className="size-4 text-emerald-600 dark:text-emerald-400 shrink-0 mt-0.5 group-hover/item:scale-110 transition-transform duration-300" />
-                  <p className="text-sm text-muted-foreground flex-1 group-hover/item:text-foreground transition-colors duration-300">
+                  <CheckIcon className="mt-0.5 size-4 shrink-0 text-emerald-600 transition-transform duration-300 group-hover/item:scale-110 dark:text-emerald-400" />
+                  <p className="flex-1 text-muted-foreground text-sm transition-colors duration-300 group-hover/item:text-foreground">
                     {point.trim()}
                   </p>
                 </motion.div>
               ))}
             </div>
             <motion.div
+              className="col mt-2 gap-2"
               initial={{ opacity: 0 }}
-              whileInView={{ opacity: 1 }}
-              viewport={{ once: true }}
               transition={{ delay: 0.3 }}
-              className="col gap-2 mt-2"
+              viewport={{ once: true }}
+              whileInView={{ opacity: 1 }}
             >
-              <div className="row gap-2 items-center p-3 rounded-lg bg-muted/30 border border-emerald-500/10">
-                <span className="text-xs font-medium text-muted-foreground">
+              <div className="row items-center gap-2 rounded-lg border border-emerald-500/10 bg-muted/30 p-3">
+                <span className="font-medium text-muted-foreground text-xs">
                   Free tier:
                 </span>
-                <span className="text-xs text-muted-foreground">
+                <span className="text-muted-foreground text-xs">
                   Self-hosting (unlimited events)
                 </span>
               </div>
-              <div className="row gap-2 items-center p-3 rounded-lg bg-muted/30 border border-emerald-500/10">
-                <span className="text-xs font-medium text-muted-foreground">
+              <div className="row items-center gap-2 rounded-lg border border-emerald-500/10 bg-muted/30 p-3">
+                <span className="font-medium text-muted-foreground text-xs">
                   Free trial:
                 </span>
-                <span className="text-xs text-muted-foreground">
-                  30 days
-                </span>
+                <span className="text-muted-foreground text-xs">30 days</span>
               </div>
             </motion.div>
           </div>
@@ -119,29 +117,29 @@ export function PricingSection({
 
         {/* Competitor Card */}
         <motion.div
+          className="col group relative gap-4 overflow-hidden rounded-2xl border bg-background p-6 transition-all duration-300 hover:border-orange-500/30"
           variants={cardVariants}
-          className="col gap-4 p-6 rounded-2xl border bg-background group relative overflow-hidden hover:border-orange-500/30 transition-all duration-300"
         >
-          <div className="pointer-events-none absolute inset-0 bg-linear-to-br opacity-100 blur-2xl dark:from-orange-500/5 dark:via-transparent dark:to-amber-500/5 light:from-orange-800/10 light:via-transparent light:to-amber-900/10 group-hover:opacity-150 transition-opacity duration-500" />
-          <div className="col gap-3 relative z-10">
+          <div className="pointer-events-none absolute inset-0 bg-linear-to-br light:from-orange-800/10 light:via-transparent light:to-amber-900/10 opacity-100 blur-2xl transition-opacity duration-500 group-hover:opacity-150 dark:from-orange-500/5 dark:via-transparent dark:to-amber-500/5" />
+          <div className="col relative z-10 gap-3">
             <div className="col gap-2">
-              <h3 className="text-xl font-semibold">{competitorName}</h3>
-              <p className="text-sm text-muted-foreground font-medium">
+              <h3 className="font-semibold text-xl">{competitorName}</h3>
+              <p className="font-medium text-muted-foreground text-sm">
                 {pricing.competitor.model}
               </p>
             </div>
-            <div className="col gap-2 mt-2">
+            <div className="col mt-2 gap-2">
               {competitorPoints.map((point, index) => (
                 <motion.div
-                  key={index}
+                  className="row group/item items-start gap-2"
                   initial={{ opacity: 0, x: -10 }}
-                  whileInView={{ opacity: 1, x: 0 }}
-                  viewport={{ once: true }}
+                  key={index}
                   transition={{ delay: index * 0.1 }}
-                  className="row gap-2 items-start group/item"
+                  viewport={{ once: true }}
+                  whileInView={{ opacity: 1, x: 0 }}
                 >
-                  <CheckIcon className="size-4 text-orange-600 dark:text-orange-400 shrink-0 mt-0.5 group-hover/item:scale-110 transition-transform duration-300" />
-                  <p className="text-sm text-muted-foreground flex-1 group-hover/item:text-foreground transition-colors duration-300">
+                  <CheckIcon className="mt-0.5 size-4 shrink-0 text-orange-600 transition-transform duration-300 group-hover/item:scale-110 dark:text-orange-400" />
+                  <p className="flex-1 text-muted-foreground text-sm transition-colors duration-300 group-hover/item:text-foreground">
                     {point.trim()}
                   </p>
                 </motion.div>
@@ -149,16 +147,16 @@ export function PricingSection({
             </div>
             {pricing.competitor.free_tier && (
               <motion.div
+                className="row mt-2 items-center gap-2 rounded-lg border border-orange-500/10 bg-muted/30 p-3"
                 initial={{ opacity: 0 }}
-                whileInView={{ opacity: 1 }}
-                viewport={{ once: true }}
                 transition={{ delay: 0.3 }}
-                className="row gap-2 items-center mt-2 p-3 rounded-lg bg-muted/30 border border-orange-500/10"
+                viewport={{ once: true }}
+                whileInView={{ opacity: 1 }}
               >
-                <span className="text-xs font-medium text-muted-foreground">
+                <span className="font-medium text-muted-foreground text-xs">
                   Free tier:
                 </span>
-                <span className="text-xs text-muted-foreground">
+                <span className="text-muted-foreground text-xs">
                   {pricing.competitor.free_tier}
                 </span>
               </motion.div>
@@ -166,18 +164,18 @@ export function PricingSection({
             {pricing.competitor.pricing_url && (
               <motion.div
                 initial={{ opacity: 0 }}
-                whileInView={{ opacity: 1 }}
-                viewport={{ once: true }}
                 transition={{ delay: 0.4 }}
+                viewport={{ once: true }}
+                whileInView={{ opacity: 1 }}
               >
                 <Link
+                  className="row group/link mt-2 items-center gap-2 text-primary text-xs transition-colors duration-300 hover:text-primary/80"
                   href={pricing.competitor.pricing_url}
-                  target="_blank"
                   rel="noopener noreferrer"
-                  className="row gap-2 items-center text-xs text-primary hover:text-primary/80 transition-colors duration-300 mt-2 group/link"
+                  target="_blank"
                 >
                   <span>View pricing</span>
-                  <ArrowRightIcon className="size-3 group-hover/link:translate-x-1 transition-transform duration-300" />
+                  <ArrowRightIcon className="size-3 transition-transform duration-300 group-hover/link:translate-x-1" />
                 </Link>
               </motion.div>
             )}
@@ -187,4 +185,3 @@ export function PricingSection({
     </Section>
   );
 }
-

apps/public/src/app/(content)/compare/[slug]/_components/problem-section.tsx

@@ -1,6 +1,11 @@
+import {
+  PuzzleIcon,
+  ShieldIcon,
+  TrendingUpIcon,
+  UsersIcon,
+} from 'lucide-react';
 import { Section, SectionHeader } from '@/components/section';
-import { CompareSummary } from '@/lib/compare';
-import { UsersIcon, TrendingUpIcon, PuzzleIcon, ShieldIcon } from 'lucide-react';
+import type { CompareSummary } from '@/lib/compare';
 
 interface ProblemSectionProps {
   summary: CompareSummary;
@@ -9,25 +14,28 @@ interface ProblemSectionProps {
 
 const problemIcons = [UsersIcon, TrendingUpIcon, PuzzleIcon, ShieldIcon];
 
-export function ProblemSection({ summary, competitorName }: ProblemSectionProps) {
+export function ProblemSection({
+  summary,
+  competitorName,
+}: ProblemSectionProps) {
   const problems = summary.best_for_competitor.slice(0, 4);
 
   return (
     <Section className="container">
       <SectionHeader
-        title={summary.title}
         description={summary.intro}
+        title={summary.title}
         variant="sm"
       />
-      <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mt-12">
+      <div className="mt-12 grid gap-6 md:grid-cols-2 lg:grid-cols-4">
         {problems.map((problem, index) => {
           const Icon = problemIcons[index] || UsersIcon;
           return (
-            <div key={problem} className="col gap-3 text-center">
-              <div className="size-12 rounded-full bg-muted center-center mx-auto">
+            <div className="col gap-3 text-center" key={problem}>
+              <div className="center-center mx-auto size-12 rounded-full bg-muted">
                 <Icon className="size-6 text-muted-foreground" />
               </div>
-              <p className="text-sm text-muted-foreground">{problem}</p>
+              <p className="text-muted-foreground text-sm">{problem}</p>
             </div>
           );
         })}
@@ -35,4 +43,3 @@ export function ProblemSection({ summary, competitorName }: ProblemSectionProps)
     </Section>
   );
 }
-

apps/public/src/app/(content)/compare/[slug]/_components/related-links.tsx

@@ -9,8 +9,12 @@ interface RelatedLinksProps {
 
 export function RelatedLinksSection({ relatedLinks }: RelatedLinksProps) {
   if (
-    !relatedLinks ||
-    (!relatedLinks.guides?.length && !relatedLinks.articles?.length && !relatedLinks.alternatives?.length)
+    !(
+      relatedLinks &&
+      (relatedLinks.guides?.length ||
+        relatedLinks.articles?.length ||
+        relatedLinks.alternatives?.length)
+    )
   ) {
     return null;
   }

apps/public/src/app/(content)/compare/[slug]/_components/summary-comparison.tsx

@@ -1,45 +1,48 @@
+import { CheckIcon, XIcon } from 'lucide-react';
 import { FeatureCard } from '@/components/feature-card';
 import { Section, SectionHeader } from '@/components/section';
-import { CompareSummary } from '@/lib/compare';
-import { CheckIcon, XIcon } from 'lucide-react';
+import type { CompareSummary } from '@/lib/compare';
 
 interface SummaryComparisonProps {
   summary: CompareSummary;
   competitorName: string;
 }
 
-export function SummaryComparison({ summary, competitorName }: SummaryComparisonProps) {
+export function SummaryComparison({
+  summary,
+  competitorName,
+}: SummaryComparisonProps) {
   return (
     <Section className="container">
       <SectionHeader
-        title="Quick comparison"
-        description={summary.one_liner}
         align="center"
+        description={summary.one_liner}
+        title="Quick comparison"
       />
-      <div className="grid md:grid-cols-2 gap-6 mt-12">
+      <div className="mt-12 grid gap-6 md:grid-cols-2">
         <FeatureCard
-          title="Best for OpenPanel"
-          description=""
           className="border-green-500/20 bg-green-500/5"
+          description=""
+          title="Best for OpenPanel"
         >
-          <ul className="col gap-3 mt-4">
+          <ul className="col mt-4 gap-3">
             {summary.best_for_openpanel.map((item) => (
-              <li key={item} className="row gap-2 items-start text-sm">
-                <CheckIcon className="size-4 shrink-0 mt-0.5 text-green-500" />
+              <li className="row items-start gap-2 text-sm" key={item}>
+                <CheckIcon className="mt-0.5 size-4 shrink-0 text-green-500" />
                 <span>{item}</span>
               </li>
             ))}
           </ul>
         </FeatureCard>
         <FeatureCard
-          title={`Best for ${competitorName}`}
-          description=""
           className="border-muted"
+          description=""
+          title={`Best for ${competitorName}`}
         >
-          <ul className="col gap-3 mt-4">
+          <ul className="col mt-4 gap-3">
             {summary.best_for_competitor.map((item) => (
-              <li key={item} className="row gap-2 items-start text-sm">
-                <XIcon className="size-4 shrink-0 mt-0.5 text-muted-foreground" />
+              <li className="row items-start gap-2 text-sm" key={item}>
+                <XIcon className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
                 <span className="text-muted-foreground">{item}</span>
               </li>
             ))}
@@ -49,4 +52,3 @@ export function SummaryComparison({ summary, competitorName }: SummaryComparison
     </Section>
   );
 }
-

apps/public/src/app/(content)/compare/[slug]/_components/technical-comparison.tsx

@@ -1,6 +1,5 @@
 import { Section, SectionHeader } from '@/components/section';
-import { CompareTechnicalComparison } from '@/lib/compare';
-import { CheckIcon, XIcon } from 'lucide-react';
+import type { CompareTechnicalComparison } from '@/lib/compare';
 import { cn } from '@/lib/utils';
 
 interface TechnicalComparisonProps {
@@ -13,7 +12,7 @@ function renderValue(value: string | string[]) {
     return (
       <ul className="col gap-1">
         {value.map((item, idx) => (
-          <li key={idx} className="text-sm">
+          <li className="text-sm" key={idx}>
             {item}
           </li>
         ))}
@@ -30,28 +29,30 @@ export function TechnicalComparison({
   return (
     <Section className="container">
       <SectionHeader
-        title={technical.title}
         description={technical.intro}
+        title={technical.title}
         variant="sm"
       />
-      <div className="mt-12 border rounded-2xl overflow-hidden">
+      <div className="mt-12 overflow-hidden rounded-2xl border">
         <div className="overflow-x-auto">
           <table className="w-full">
             <thead>
               <tr className="border-b bg-muted/30">
-                <th className="text-left p-4 font-semibold">Feature</th>
-                <th className="text-left p-4 font-semibold">OpenPanel</th>
-                <th className="text-left p-4 font-semibold">{competitorName}</th>
+                <th className="p-4 text-left font-semibold">Feature</th>
+                <th className="p-4 text-left font-semibold">OpenPanel</th>
+                <th className="p-4 text-left font-semibold">
+                  {competitorName}
+                </th>
               </tr>
             </thead>
             <tbody>
               {technical.items.map((item, index) => (
                 <tr
-                  key={item.label}
                   className={cn(
                     'border-b last:border-b-0',
                     index % 2 === 0 ? 'bg-background' : 'bg-muted/20'
                   )}
+                  key={item.label}
                 >
                   <td className="p-4 font-medium">{item.label}</td>
                   <td className="p-4">{renderValue(item.openpanel)}</td>
@@ -59,7 +60,7 @@ export function TechnicalComparison({
                     <div className="col gap-1">
                       {renderValue(item.competitor)}
                       {item.notes && (
-                        <span className="text-xs text-muted-foreground/70 mt-1">
+                        <span className="mt-1 text-muted-foreground/70 text-xs">
                           {item.notes}
                         </span>
                       )}
@@ -74,4 +75,3 @@ export function TechnicalComparison({
     </Section>
   );
 }
-

apps/public/src/app/(content)/compare/[slug]/_components/trust-compliance.tsx

@@ -1,8 +1,13 @@
+import {
+  CheckIcon,
+  MapPinIcon,
+  ServerIcon,
+  ShieldIcon,
+  XIcon,
+} from 'lucide-react';
 import { FeatureCard } from '@/components/feature-card';
 import { Section, SectionHeader } from '@/components/section';
-import { CompareTrustCompliance } from '@/lib/compare';
-import { ShieldIcon, MapPinIcon, ServerIcon } from 'lucide-react';
-import { CheckIcon, XIcon } from 'lucide-react';
+import type { CompareTrustCompliance } from '@/lib/compare';
 
 interface TrustComplianceProps {
   trust: CompareTrustCompliance;
@@ -12,41 +17,41 @@ export function TrustCompliance({ trust }: TrustComplianceProps) {
   return (
     <Section className="container">
       <SectionHeader
-        title={trust.title}
         description={trust.intro}
+        title={trust.title}
         variant="sm"
       />
-      <div className="grid md:grid-cols-2 gap-6 mt-12">
+      <div className="mt-12 grid gap-6 md:grid-cols-2">
         <FeatureCard
-          title="OpenPanel"
-          description=""
           className="border-green-500/20 bg-green-500/5"
+          description=""
+          title="OpenPanel"
         >
-          <div className="col gap-4 mt-4">
+          <div className="col mt-4 gap-4">
             <div className="col gap-2">
-              <div className="row gap-2 items-center text-sm">
+              <div className="row items-center gap-2 text-sm">
                 <ShieldIcon className="size-4" />
                 <span className="font-medium">Data Processing</span>
               </div>
-              <p className="text-sm text-muted-foreground ml-6">
+              <p className="ml-6 text-muted-foreground text-sm">
                 {trust.openpanel.data_processing}
               </p>
             </div>
             <div className="col gap-2">
-              <div className="row gap-2 items-center text-sm">
+              <div className="row items-center gap-2 text-sm">
                 <MapPinIcon className="size-4" />
                 <span className="font-medium">Data Location</span>
               </div>
-              <p className="text-sm text-muted-foreground ml-6">
+              <p className="ml-6 text-muted-foreground text-sm">
                 {trust.openpanel.data_location}
               </p>
             </div>
             <div className="col gap-2">
-              <div className="row gap-2 items-center text-sm">
+              <div className="row items-center gap-2 text-sm">
                 <ServerIcon className="size-4" />
                 <span className="font-medium">Self-Hosting</span>
               </div>
-              <div className="row gap-2 items-center text-sm ml-6">
+              <div className="row ml-6 items-center gap-2 text-sm">
                 {trust.openpanel.self_hosting ? (
                   <>
                     <CheckIcon className="size-4 text-green-500" />
@@ -62,32 +67,32 @@ export function TrustCompliance({ trust }: TrustComplianceProps) {
             </div>
           </div>
         </FeatureCard>
-        <FeatureCard title="Competitor" description="">
-          <div className="col gap-4 mt-4">
+        <FeatureCard description="" title="Competitor">
+          <div className="col mt-4 gap-4">
             <div className="col gap-2">
-              <div className="row gap-2 items-center text-sm">
+              <div className="row items-center gap-2 text-sm">
                 <ShieldIcon className="size-4" />
                 <span className="font-medium">Data Processing</span>
               </div>
-              <p className="text-sm text-muted-foreground ml-6">
+              <p className="ml-6 text-muted-foreground text-sm">
                 {trust.competitor.data_processing}
               </p>
             </div>
             <div className="col gap-2">
-              <div className="row gap-2 items-center text-sm">
+              <div className="row items-center gap-2 text-sm">
                 <MapPinIcon className="size-4" />
                 <span className="font-medium">Data Location</span>
               </div>
-              <p className="text-sm text-muted-foreground ml-6">
+              <p className="ml-6 text-muted-foreground text-sm">
                 {trust.competitor.data_location}
               </p>
             </div>
             <div className="col gap-2">
-              <div className="row gap-2 items-center text-sm">
+              <div className="row items-center gap-2 text-sm">
                 <ServerIcon className="size-4" />
                 <span className="font-medium">Self-Hosting</span>
               </div>
-              <div className="row gap-2 items-center text-sm ml-6">
+              <div className="row ml-6 items-center gap-2 text-sm">
                 {trust.competitor.self_hosting ? (
                   <>
                     <CheckIcon className="size-4 text-green-500" />
@@ -107,4 +112,3 @@ export function TrustCompliance({ trust }: TrustComplianceProps) {
     </Section>
   );
 }
-

apps/public/src/app/(content)/compare/[slug]/_components/use-cases.tsx

@@ -1,5 +1,5 @@
 import { Section, SectionHeader } from '@/components/section';
-import { CompareUseCases } from '@/lib/compare';
+import type { CompareUseCases } from '@/lib/compare';
 
 interface UseCasesProps {
   useCases: CompareUseCases;
@@ -9,15 +9,17 @@ export function UseCases({ useCases }: UseCasesProps) {
   return (
     <Section className="container">
       <SectionHeader
-        title={useCases.title}
         description={useCases.intro}
+        title={useCases.title}
         variant="sm"
       />
-      <div className="grid md:grid-cols-2 gap-6 mt-12">
+      <div className="mt-12 grid gap-6 md:grid-cols-2">
         {useCases.items.map((useCase) => (
-          <div key={useCase.title} className="col gap-2 p-6 border rounded-2xl">
+          <div className="col gap-2 rounded-2xl border p-6" key={useCase.title}>
             <h3 className="font-semibold">{useCase.title}</h3>
-            <p className="text-sm text-muted-foreground">{useCase.description}</p>
+            <p className="text-muted-foreground text-sm">
+              {useCase.description}
+            </p>
           </div>
         ))}
       </div>

apps/public/src/app/(content)/compare/[slug]/_components/who-should-choose.tsx

@@ -1,8 +1,8 @@
 'use client';
 
+import { motion } from 'framer-motion';
 import { Section } from '@/components/section';
 import type { CompareSummary } from '@/lib/compare';
-import { motion } from 'framer-motion';
 
 interface WhoShouldChooseProps {
   summary: CompareSummary;
@@ -36,43 +36,43 @@ export function WhoShouldChoose({
 
   return (
     <Section className="container">
-      <div className="col gap-4 mb-12">
-        <h2 className="text-3xl md:text-4xl font-semibold">{summary.title}</h2>
-        <p className="text-muted-foreground max-w-3xl">{summary.intro}</p>
+      <div className="col mb-12 gap-4">
+        <h2 className="font-semibold text-3xl md:text-4xl">{summary.title}</h2>
+        <p className="max-w-3xl text-muted-foreground">{summary.intro}</p>
       </div>
       <motion.div
+        className="grid gap-6 md:grid-cols-2"
         initial="hidden"
-        whileInView="visible"
-        viewport={{ once: true, margin: '-100px' }}
         variants={containerVariants}
-        className="grid md:grid-cols-2 gap-6"
+        viewport={{ once: true, margin: '-100px' }}
+        whileInView="visible"
       >
         {/* OpenPanel Card */}
         <motion.div
+          className="col group relative gap-4 overflow-hidden rounded-2xl border bg-background p-6 transition-all duration-300 hover:border-emerald-500/30"
           variants={cardVariants}
-          className="col gap-4 p-6 rounded-2xl border bg-background group relative overflow-hidden hover:border-emerald-500/30 transition-all duration-300"
         >
-          <div className="pointer-events-none absolute inset-0 bg-linear-to-br opacity-100 blur-2xl dark:from-emerald-500/5 dark:via-transparent dark:to-green-500/5 light:from-emerald-800/10 light:via-transparent light:to-green-900/10 group-hover:opacity-150 transition-opacity duration-500" />
-          <div className="col gap-3 relative z-10">
+          <div className="pointer-events-none absolute inset-0 bg-linear-to-br light:from-emerald-800/10 light:via-transparent light:to-green-900/10 opacity-100 blur-2xl transition-opacity duration-500 group-hover:opacity-150 dark:from-emerald-500/5 dark:via-transparent dark:to-green-500/5" />
+          <div className="col relative z-10 gap-3">
             <div className="col gap-2">
-              <h3 className="text-xl font-semibold">Choose OpenPanel if...</h3>
+              <h3 className="font-semibold text-xl">Choose OpenPanel if...</h3>
             </div>
-            <div className="col gap-2 mt-2">
+            <div className="col mt-2 gap-2">
               {openpanelItems.map((item, index) => (
                 <motion.div
-                  key={item}
+                  className="row group/item items-start gap-2"
                   initial={{ opacity: 0, x: -10 }}
-                  whileInView={{ opacity: 1, x: 0 }}
-                  viewport={{ once: true }}
+                  key={item}
                   transition={{ delay: index * 0.1 }}
-                  className="row gap-2 items-start group/item"
+                  viewport={{ once: true }}
+                  whileInView={{ opacity: 1, x: 0 }}
                 >
-                  <div className="size-4 rounded-full bg-emerald-600 dark:bg-emerald-400 shrink-0 mt-0.5 flex items-center justify-center group-hover/item:scale-110 transition-transform duration-300">
-                    <span className="text-[10px] font-bold text-white">
+                  <div className="mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full bg-emerald-600 transition-transform duration-300 group-hover/item:scale-110 dark:bg-emerald-400">
+                    <span className="font-bold text-[10px] text-white">
                       {index + 1}
                     </span>
                   </div>
-                  <p className="text-sm text-muted-foreground flex-1 group-hover/item:text-foreground transition-colors duration-300">
+                  <p className="flex-1 text-muted-foreground text-sm transition-colors duration-300 group-hover/item:text-foreground">
                     {item}
                   </p>
                 </motion.div>
@@ -83,32 +83,32 @@ export function WhoShouldChoose({
 
         {/* Competitor Card */}
         <motion.div
+          className="col group relative gap-4 overflow-hidden rounded-2xl border bg-background p-6 transition-all duration-300 hover:border-orange-500/30"
           variants={cardVariants}
-          className="col gap-4 p-6 rounded-2xl border bg-background group relative overflow-hidden hover:border-orange-500/30 transition-all duration-300"
         >
-          <div className="pointer-events-none absolute inset-0 bg-linear-to-br opacity-100 blur-2xl dark:from-orange-500/5 dark:via-transparent dark:to-amber-500/5 light:from-orange-800/10 light:via-transparent light:to-amber-900/10 group-hover:opacity-150 transition-opacity duration-500" />
-          <div className="col gap-3 relative z-10">
+          <div className="pointer-events-none absolute inset-0 bg-linear-to-br light:from-orange-800/10 light:via-transparent light:to-amber-900/10 opacity-100 blur-2xl transition-opacity duration-500 group-hover:opacity-150 dark:from-orange-500/5 dark:via-transparent dark:to-amber-500/5" />
+          <div className="col relative z-10 gap-3">
             <div className="col gap-2">
-              <h3 className="text-xl font-semibold">
+              <h3 className="font-semibold text-xl">
                 Choose {competitorName} if...
               </h3>
             </div>
-            <div className="col gap-2 mt-2">
+            <div className="col mt-2 gap-2">
               {competitorItems.map((item, index) => (
                 <motion.div
-                  key={item}
+                  className="row group/item items-start gap-2"
                   initial={{ opacity: 0, x: -10 }}
-                  whileInView={{ opacity: 1, x: 0 }}
-                  viewport={{ once: true }}
+                  key={item}
                   transition={{ delay: index * 0.1 }}
-                  className="row gap-2 items-start group/item"
+                  viewport={{ once: true }}
+                  whileInView={{ opacity: 1, x: 0 }}
                 >
-                  <div className="size-4 rounded-full bg-orange-600 dark:bg-orange-400 shrink-0 mt-0.5 flex items-center justify-center group-hover/item:scale-110 transition-transform duration-300">
-                    <span className="text-[10px] font-bold text-white">
+                  <div className="mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full bg-orange-600 transition-transform duration-300 group-hover/item:scale-110 dark:bg-orange-400">
+                    <span className="font-bold text-[10px] text-white">
                       {index + 1}
                     </span>
                   </div>
-                  <p className="text-sm text-muted-foreground flex-1 group-hover/item:text-foreground transition-colors duration-300">
+                  <p className="flex-1 text-muted-foreground text-sm transition-colors duration-300 group-hover/item:text-foreground">
                     {item}
                   </p>
                 </motion.div>

apps/public/src/app/(content)/compare/[slug]/_components/why-switch.tsx

@@ -1,15 +1,15 @@
-import { Section, SectionHeader } from '@/components/section';
-import { CompareSummary } from '@/lib/compare';
 import {
-  UsersIcon,
-  SparklesIcon,
-  SearchIcon,
-  MoonIcon,
-  ShieldIcon,
-  ServerIcon,
-  ZapIcon,
   CheckCircleIcon,
+  MoonIcon,
+  SearchIcon,
+  ServerIcon,
+  ShieldIcon,
+  SparklesIcon,
+  UsersIcon,
+  ZapIcon,
 } from 'lucide-react';
+import { Section, SectionHeader } from '@/components/section';
+import type { CompareSummary } from '@/lib/compare';
 
 interface WhySwitchProps {
   summary: CompareSummary;
@@ -32,16 +32,16 @@ export function WhySwitch({ summary }: WhySwitchProps) {
   return (
     <Section className="container">
       <SectionHeader
-        title={summary.title}
         description={summary.intro}
+        title={summary.title}
         variant="sm"
       />
-      <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mt-12">
+      <div className="mt-12 grid gap-8 md:grid-cols-2 lg:grid-cols-4">
         {benefits.map((benefit, index) => {
           const Icon = benefitIcons[index] || CheckCircleIcon;
           return (
-            <div key={benefit} className="col gap-3">
-              <div className="size-10 rounded-lg bg-primary/10 center-center">
+            <div className="col gap-3" key={benefit}>
+              <div className="center-center size-10 rounded-lg bg-primary/10">
                 <Icon className="size-5 text-primary" />
               </div>
               <h3 className="font-semibold text-sm">{benefit}</h3>
@@ -52,4 +52,3 @@ export function WhySwitch({ summary }: WhySwitchProps) {
     </Section>
   );
 }
-

apps/public/src/app/(content)/compare/_components/compare-card.tsx

@@ -1,8 +1,7 @@
-import { FeatureCard, FeatureCardContainer } from '@/components/feature-card';
-import { cn } from '@/lib/utils';
 import { ArrowRightIcon } from 'lucide-react';
 import Image from 'next/image';
 import Link from 'next/link';
+import { FeatureCardContainer } from '@/components/feature-card';
 
 interface CompareCardProps {
   name: string;
@@ -20,30 +19,29 @@ export function CompareCard({
   return (
     <Link href={url}>
       <FeatureCardContainer>
-        <div className="row gap-3 items-center">
+        <div className="row items-center gap-3">
           {logo && (
-            <div className="relative size-10 shrink-0 rounded-lg overflow-hidden border bg-background p-1.5">
+            <div className="relative size-10 shrink-0 overflow-hidden rounded-lg border bg-background p-1.5">
               <Image
-                src={logo}
                 alt={`${name} logo`}
-                width={40}
+                className="h-full w-full object-contain"
                 height={40}
-                className="object-contain w-full h-full"
+                src={logo}
+                width={40}
               />
             </div>
           )}
-          <div className="col gap-1 flex-1 min-w-0">
-            <h3 className="text-lg font-semibold group-hover:text-primary transition-colors">
+          <div className="col min-w-0 flex-1 gap-1">
+            <h3 className="font-semibold text-lg transition-colors group-hover:text-primary">
               {name}
             </h3>
-            <p className="text-sm text-muted-foreground line-clamp-2">
+            <p className="line-clamp-2 text-muted-foreground text-sm">
               {description}
             </p>
           </div>
-          <ArrowRightIcon className="opacity-0 group-hover:opacity-100 size-5 shrink-0 text-muted-foreground group-hover:text-primary group-hover:translate-x-1 transition-all duration-300" />
+          <ArrowRightIcon className="size-5 shrink-0 text-muted-foreground opacity-0 transition-all duration-300 group-hover:translate-x-1 group-hover:text-primary group-hover:opacity-100" />
         </div>
       </FeatureCardContainer>
     </Link>
   );
 }
-

apps/public/src/app/(content)/compare/page.tsx

@@ -1,12 +1,12 @@
+import type { Metadata } from 'next';
+import { CompareCard } from './_components/compare-card';
+import { CompareHero } from './[slug]/_components/compare-hero';
 import { CtaBanner } from '@/app/(home)/_sections/cta-banner';
 import { Section, SectionHeader } from '@/components/section';
 import { WindowImage } from '@/components/window-image';
 import { url } from '@/lib/layout.shared';
 import { getOgImageUrl, getPageMetadata } from '@/lib/metadata';
 import { compareSource } from '@/lib/source';
-import type { Metadata } from 'next';
-import { CompareHero } from './[slug]/_components/compare-hero';
-import { CompareCard } from './_components/compare-card';
 
 const title = 'Compare OpenPanel with alternatives';
 const description =
@@ -28,7 +28,7 @@ const heroData = {
 
 export default async function CompareIndexPage() {
   const comparisons = compareSource.sort((a, b) =>
-    a.competitor.name.localeCompare(b.competitor.name),
+    a.competitor.name.localeCompare(b.competitor.name)
   );
 
   return (
@@ -37,36 +37,36 @@ export default async function CompareIndexPage() {
 
       <div className="container my-16">
         <WindowImage
-          srcDark="/screenshots/overview-dark.png"
-          srcLight="/screenshots/overview-light.png"
           alt="OpenPanel Dashboard Overview"
           caption="This is our web analytics dashboard, its an out-of-the-box experience so you can start understanding your traffic and engagement right away."
+          srcDark="/screenshots/overview-dark.png"
+          srcLight="/screenshots/overview-light.png"
         />
       </div>
 
       <Section className="container">
         <SectionHeader
-          title="All product comparisons"
           description="Browse our complete list of detailed comparisons. See how OpenPanel stacks up against each competitor on features, pricing, and value."
+          title="All product comparisons"
           variant="sm"
         />
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mt-12">
+        <div className="mt-12 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
           {comparisons.map((comparison) => (
             <CompareCard
-              key={comparison.slug}
-              url={comparison.url}
-              name={comparison.competitor.name}
               description={comparison.competitor.short_description}
+              key={comparison.slug}
+              name={comparison.competitor.name}
+              url={comparison.url}
             />
           ))}
         </div>
       </Section>
 
       <CtaBanner
-        title="Ready to get started?"
-        description="Join thousands of teams using OpenPanel for their analytics needs."
-        ctaText="Get Started Free"
         ctaLink="https://dashboard.openpanel.dev/onboarding"
+        ctaText="Get Started Free"
+        description="Join thousands of teams using OpenPanel for their analytics needs."
+        title="Ready to get started?"
       />
     </div>
   );

apps/public/src/app/(content)/features/[slug]/_components/capabilities.tsx

@@ -1,7 +1,7 @@
+import { ZapIcon } from 'lucide-react';
 import { FeatureCard } from '@/components/feature-card';
 import { Section, SectionHeader } from '@/components/section';
 import type { FeatureCapability } from '@/lib/features';
-import { ZapIcon } from 'lucide-react';
 
 interface CapabilitiesProps {
   title: string;
@@ -9,22 +9,26 @@ interface CapabilitiesProps {
   capabilities: FeatureCapability[];
 }
 
-export function Capabilities({ title, intro, capabilities }: CapabilitiesProps) {
+export function Capabilities({
+  title,
+  intro,
+  capabilities,
+}: CapabilitiesProps) {
   return (
     <Section className="container">
       <SectionHeader
-        title={title}
-        description={intro}
-        variant="sm"
         className="mb-12"
+        description={intro}
+        title={title}
+        variant="sm"
       />
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+      <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
         {capabilities.map((cap) => (
           <FeatureCard
-            key={cap.title}
-            title={cap.title}
             description={cap.description}
             icon={ZapIcon}
+            key={cap.title}
+            title={cap.title}
           />
         ))}
       </div>

apps/public/src/app/(content)/features/[slug]/_components/feature-hero.tsx

@@ -1,11 +1,11 @@
+import { CheckCircle2Icon } from 'lucide-react';
+import Link from 'next/link';
 import { HeroContainer } from '@/app/(home)/_sections/hero';
 import { GetStartedButton } from '@/components/get-started-button';
 import { Perks } from '@/components/perks';
 import { SectionHeader } from '@/components/section';
 import { Button } from '@/components/ui/button';
 import type { FeatureHero as FeatureHeroData } from '@/lib/features';
-import { CheckCircle2Icon } from 'lucide-react';
-import Link from 'next/link';
 
 interface FeatureHeroProps {
   hero: FeatureHeroData;
@@ -13,29 +13,29 @@ interface FeatureHeroProps {
 
 export function FeatureHero({ hero }: FeatureHeroProps) {
   return (
-    <HeroContainer divider={false} className="-mb-32">
+    <HeroContainer className="-mb-32" divider={false}>
       <div className="col gap-6">
         <SectionHeader
           as="h1"
           className="flex-1"
-          title={hero.heading}
           description={hero.subheading}
+          title={hero.heading}
           variant="sm"
         />
         <div className="row gap-4">
           <GetStartedButton />
-          <Button size="lg" variant="outline" asChild>
+          <Button asChild size="lg" variant="outline">
             <Link
               href="https://demo.openpanel.dev"
-              target="_blank"
               rel="noreferrer noopener nofollow"
+              target="_blank"
             >
               See live demo
             </Link>
           </Button>
         </div>
         <Perks
-          className="flex gap-4 flex-wrap"
+          className="flex flex-wrap gap-4"
           perks={hero.badges.map((badge) => ({
             text: badge,
             icon: CheckCircle2Icon,

apps/public/src/app/(content)/features/[slug]/_components/feature-use-cases.tsx

@@ -9,19 +9,21 @@ export function FeatureUseCasesSection({ useCases }: FeatureUseCasesProps) {
   return (
     <Section className="container">
       <SectionHeader
-        title={useCases.title}
-        description={useCases.intro}
-        variant="sm"
         className="mb-12"
+        description={useCases.intro}
+        title={useCases.title}
+        variant="sm"
       />
-      <div className="grid md:grid-cols-2 gap-6">
+      <div className="grid gap-6 md:grid-cols-2">
         {useCases.items.map((useCase) => (
           <div
+            className="col gap-2 rounded-2xl border bg-card/50 p-6"
             key={useCase.title}
-            className="col gap-2 p-6 border rounded-2xl bg-card/50"
           >
             <h3 className="font-semibold">{useCase.title}</h3>
-            <p className="text-sm text-muted-foreground">{useCase.description}</p>
+            <p className="text-muted-foreground text-sm">
+              {useCase.description}
+            </p>
           </div>
         ))}
       </div>

apps/public/src/app/(content)/features/[slug]/_components/how-it-works.tsx

@@ -10,27 +10,29 @@ export function HowItWorks({ data }: HowItWorksProps) {
   return (
     <Section className="container">
       <SectionHeader
-        title={data.title}
-        description={data.intro}
-        variant="sm"
         className="mb-12"
+        description={data.intro}
+        title={data.title}
+        variant="sm"
       />
       <div className="relative">
         {data.steps.map((step, index) => (
           <div
+            className="relative mb-8 flex min-w-0 gap-4 last:mb-0"
             key={step.title}
-            className="relative flex gap-4 mb-8 last:mb-0 min-w-0"
           >
-            <div className="flex flex-col items-center shrink-0">
-              <div className="flex items-center justify-center size-10 rounded-full bg-primary text-primary-foreground font-semibold text-sm shadow-sm">
+            <div className="flex shrink-0 flex-col items-center">
+              <div className="flex size-10 items-center justify-center rounded-full bg-primary font-semibold text-primary-foreground text-sm shadow-sm">
                 {index + 1}
               </div>
               {index < data.steps.length - 1 && (
-                <div className="w-0.5 bg-border mt-2 flex-1 min-h-[2rem]" />
+                <div className="mt-2 min-h-[2rem] w-0.5 flex-1 bg-border" />
               )}
             </div>
-            <div className="flex-1 pt-1 min-w-0 pb-8">
-              <h3 className="font-semibold text-foreground mb-1">{step.title}</h3>
+            <div className="min-w-0 flex-1 pt-1 pb-8">
+              <h3 className="mb-1 font-semibold text-foreground">
+                {step.title}
+              </h3>
               <p className={cn('text-muted-foreground text-sm')}>
                 {step.description}
               </p>

apps/public/src/app/(content)/features/[slug]/_components/related-features.tsx

@@ -1,8 +1,8 @@
+import { ArrowRightIcon } from 'lucide-react';
+import Link from 'next/link';
 import { FeatureCardContainer } from '@/components/feature-card';
 import { Section, SectionHeader } from '@/components/section';
 import type { RelatedFeature } from '@/lib/features';
-import { ArrowRightIcon } from 'lucide-react';
-import Link from 'next/link';
 
 interface RelatedFeaturesProps {
   title?: string;
@@ -13,32 +13,34 @@ export function RelatedFeatures({
   title = 'Related features',
   related,
 }: RelatedFeaturesProps) {
-  if (related.length === 0) return null;
+  if (related.length === 0) {
+    return null;
+  }
 
   return (
     <Section className="container">
       <SectionHeader
-        title={title}
-        description="Explore more capabilities that work together with this feature."
-        variant="sm"
         className="mb-12"
+        description="Explore more capabilities that work together with this feature."
+        title={title}
+        variant="sm"
       />
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
         {related.map((item) => (
-          <Link key={item.slug} href={`/features/${item.slug}`}>
+          <Link href={`/features/${item.slug}`} key={item.slug}>
             <FeatureCardContainer>
-              <div className="row gap-3 items-center">
-                <div className="col gap-1 flex-1 min-w-0">
-                  <h3 className="text-lg font-semibold group-hover:text-primary transition-colors">
+              <div className="row items-center gap-3">
+                <div className="col min-w-0 flex-1 gap-1">
+                  <h3 className="font-semibold text-lg transition-colors group-hover:text-primary">
                     {item.title}
                   </h3>
                   {item.description && (
-                    <p className="text-sm text-muted-foreground line-clamp-2">
+                    <p className="line-clamp-2 text-muted-foreground text-sm">
                       {item.description}
                     </p>
                   )}
                 </div>
-                <ArrowRightIcon className="opacity-0 group-hover:opacity-100 size-5 shrink-0 text-muted-foreground group-hover:text-primary group-hover:translate-x-1 transition-all duration-300" />
+                <ArrowRightIcon className="size-5 shrink-0 text-muted-foreground opacity-0 transition-all duration-300 group-hover:translate-x-1 group-hover:text-primary group-hover:opacity-100" />
               </div>
             </FeatureCardContainer>
           </Link>

apps/public/src/app/(content)/features/[slug]/_components/what-it-is.tsx

@@ -1,7 +1,7 @@
+import Markdown from 'react-markdown';
 import { Section, SectionHeader } from '@/components/section';
 import type { FeatureDefinition } from '@/lib/features';
 import { cn } from '@/lib/utils';
-import Markdown from 'react-markdown';
 
 interface WhatItIsProps {
   definition: FeatureDefinition;
@@ -12,7 +12,7 @@ export function WhatItIs({ definition, className }: WhatItIsProps) {
   return (
     <Section className={cn('container', className)}>
       {definition.title && (
-        <SectionHeader title={definition.title} variant="sm" className="mb-8" />
+        <SectionHeader className="mb-8" title={definition.title} variant="sm" />
       )}
       <div className="prose prose-lg max-w-3xl text-muted-foreground [&_strong]:text-foreground">
         <Markdown>{definition.text}</Markdown>

apps/public/src/app/(content)/features/[slug]/page.tsx

@@ -1,12 +1,3 @@
-import { CtaBanner } from '@/app/(home)/_sections/cta-banner';
-import { WindowImage } from '@/components/window-image';
-import {
-  type FeatureData,
-  getAllFeatureSlugs,
-  getFeatureData,
-} from '@/lib/features';
-import { url } from '@/lib/layout.shared';
-import { getOgImageUrl, getPageMetadata } from '@/lib/metadata';
 import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 import Script from 'next/script';
@@ -17,6 +8,11 @@ import { FeatureUseCasesSection } from './_components/feature-use-cases';
 import { HowItWorks } from './_components/how-it-works';
 import { RelatedFeatures } from './_components/related-features';
 import { WhatItIs } from './_components/what-it-is';
+import { CtaBanner } from '@/app/(home)/_sections/cta-banner';
+import { WindowImage } from '@/components/window-image';
+import { getAllFeatureSlugs, getFeatureData } from '@/lib/features';
+import { url } from '@/lib/layout.shared';
+import { getOgImageUrl, getPageMetadata } from '@/lib/metadata';
 
 export async function generateStaticParams() {
   const slugs = await getAllFeatureSlugs();
@@ -82,10 +78,10 @@ export default async function FeaturePage({
   return (
     <div>
       <Script
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
         id="feature-schema"
         strategy="beforeInteractive"
         type="application/ld+json"
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
       />
       <FeatureHero hero={data.hero} />
 
@@ -98,9 +94,9 @@ export default async function FeaturePage({
       <WhatItIs definition={data.definition} />
 
       <Capabilities
-        title={capabilitiesSection.title}
-        intro={capabilitiesSection.intro}
         capabilities={data.capabilities}
+        intro={capabilitiesSection.intro}
+        title={capabilitiesSection.title}
       />
 
       {data.screenshots[1] && (
@@ -132,10 +128,10 @@ export default async function FeaturePage({
       </div>
 
       <CtaBanner
-        title="Ready to get started?"
-        description="Track events in minutes. Free 30-day trial, no credit card required."
-        ctaText={data.cta.label}
         ctaLink={data.cta.href}
+        ctaText={data.cta.label}
+        description="Track events in minutes. Free 30-day trial, no credit card required."
+        title="Ready to get started?"
       />
     </div>
   );

apps/public/src/app/(content)/guides/[guideSlug]/page.tsx

@@ -1,3 +1,9 @@
+import { ArrowLeftIcon, ClockIcon } from 'lucide-react';
+import type { Metadata } from 'next';
+import Image from 'next/image';
+import Link from 'next/link';
+import { notFound } from 'next/navigation';
+import Script from 'next/script';
 import { CtaBanner } from '@/app/(home)/_sections/cta-banner';
 import { HeroContainer } from '@/app/(home)/_sections/hero';
 import { Testimonials } from '@/app/(home)/_sections/testimonials';
@@ -7,16 +13,10 @@ import { GuideCard } from '@/components/guide-card';
 import { Logo } from '@/components/logo';
 import { SectionHeader } from '@/components/section';
 import { Toc } from '@/components/toc';
-import { url, getAuthor } from '@/lib/layout.shared';
+import { getAuthor, url } from '@/lib/layout.shared';
 import { getOgImageUrl, getPageMetadata } from '@/lib/metadata';
 import { guideSource } from '@/lib/source';
 import { getMDXComponents } from '@/mdx-components';
-import { ArrowLeftIcon, ClockIcon } from 'lucide-react';
-import type { Metadata } from 'next';
-import Image from 'next/image';
-import Link from 'next/link';
-import { notFound } from 'next/navigation';
-import Script from 'next/script';
 
 const difficultyColors = {
   beginner: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
@@ -77,7 +77,7 @@ export default async function Page({
     .filter(
       (item) =>
         item.data.difficulty === guide?.data.difficulty &&
-        item.url !== guide?.url,
+        item.url !== guide?.url
     )
     .sort((a, b) => b.data.date.getTime() - a.data.date.getTime())
     .slice(0, 3);
@@ -108,34 +108,34 @@ export default async function Page({
       <HeroContainer>
         <div className="col">
           <Link
+            className="mb-4 flex items-center gap-2 text-muted-foreground"
             href={goBackUrl}
-            className="flex items-center gap-2 mb-4 text-muted-foreground"
           >
-            <ArrowLeftIcon className="w-4 h-4" />
+            <ArrowLeftIcon className="h-4 w-4" />
             <span>Back to all guides</span>
           </Link>
           <SectionHeader
             as="h1"
-            title={guide?.data.title}
             description={guide?.data.description}
+            title={guide?.data.title}
           />
-          <div className="row gap-4 items-center mt-8">
-            <div className="size-10 center-center bg-black rounded-full">
+          <div className="row mt-8 items-center gap-4">
+            <div className="center-center size-10 rounded-full bg-black">
               {author?.image ? (
                 <Image
-                  className="size-10 object-cover rounded-full"
-                  src={author.image}
                   alt={author.name}
-                  width={48}
+                  className="size-10 rounded-full object-cover"
                   height={48}
+                  src={author.image}
+                  width={48}
                 />
               ) : (
-                <Logo className="w-6 h-6 fill-white" />
+                <Logo className="h-6 w-6 fill-white" />
               )}
             </div>
             <div className="col flex-1">
               <p className="font-medium">{author?.name || 'OpenPanel Team'}</p>
-              <div className="row gap-4 items-center">
+              <div className="row items-center gap-4">
                 <p className="text-muted-foreground text-sm">
                   {guide?.data.date.toLocaleDateString()}
                 </p>
@@ -146,14 +146,14 @@ export default async function Page({
                 )}
               </div>
             </div>
-            <div className="row gap-3 items-center">
+            <div className="row items-center gap-3">
               <span
-                className={`font-mono text-xs px-3 py-1 rounded ${difficultyColors[guide?.data.difficulty || 'beginner']}`}
+                className={`rounded px-3 py-1 font-mono text-xs ${difficultyColors[guide?.data.difficulty || 'beginner']}`}
               >
                 {difficultyLabels[guide?.data.difficulty || 'beginner']}
               </span>
-              <div className="row gap-1 items-center text-muted-foreground text-sm">
-                <ClockIcon className="w-4 h-4" />
+              <div className="row items-center gap-1 text-muted-foreground text-sm">
+                <ClockIcon className="h-4 w-4" />
                 <span>{guide?.data.timeToComplete} min</span>
               </div>
             </div>
@@ -161,23 +161,23 @@ export default async function Page({
         </div>
       </HeroContainer>
       <Script
-        strategy="beforeInteractive"
-        id="guide-howto-schema"
-        type="application/ld+json"
         dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+        id="guide-howto-schema"
+        strategy="beforeInteractive"
+        type="application/ld+json"
       />
-      <article className="container max-w-5xl col">
-        <div className="grid grid-cols-1 md:grid-cols-[1fr_300px] gap-0">
+      <article className="col container max-w-5xl">
+        <div className="grid grid-cols-1 gap-0 md:grid-cols-[1fr_300px]">
           <div className="min-w-0">
-            <div className="prose [&_table]:w-auto [&_img]:max-w-full [&_img]:h-auto">
+            <div className="prose [&_img]:h-auto [&_img]:max-w-full [&_table]:w-auto">
               <Body components={getMDXComponents()} />
             </div>
           </div>
-          <aside className="pl-12 pb-12 gap-8 col">
+          <aside className="col gap-8 pb-12 pl-12">
             <Toc toc={guide?.data.toc} />
             <FeatureCardContainer className="gap-2">
-              <span className="text-lg font-semibold">Try OpenPanel</span>
-              <p className="text-muted-foreground text-sm mb-4">
+              <span className="font-semibold text-lg">Try OpenPanel</span>
+              <p className="mb-4 text-muted-foreground text-sm">
                 Give it a spin for free. No credit card required.
               </p>
               <GetStartedButton />
@@ -187,18 +187,18 @@ export default async function Page({
 
         {relatedGuides.length > 0 && (
           <div className="my-16">
-            <h3 className="text-2xl font-bold mb-8">Related guides</h3>
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <h3 className="mb-8 font-bold text-2xl">Related guides</h3>
+            <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
               {relatedGuides.map((item) => (
                 <GuideCard
-                  key={item.url}
-                  url={item.url}
-                  title={item.data.title}
-                  difficulty={item.data.difficulty}
-                  timeToComplete={item.data.timeToComplete}
                   cover={item.data.cover}
-                  team={item.data.team}
                   date={item.data.date}
+                  difficulty={item.data.difficulty}
+                  key={item.url}
+                  team={item.data.team}
+                  timeToComplete={item.data.timeToComplete}
+                  title={item.data.title}
+                  url={item.url}
                 />
               ))}
             </div>