/** * @file Integration metadata and official SVG logos. * * ! SVG paths sourced from simple-icons (https://simpleicons.org). * All icons use a 24×24 viewBox. */ import { type ReactNode } from 'react' // * ─── Types ────────────────────────────────────────────────────────────────── export type IntegrationCategory = 'framework' | 'cms' | 'ssg' | 'platform' export interface Integration { id: string name: string description: string category: IntegrationCategory /** Brand hex colour (with #) */ brandColor: string /** Whether the icon needs `dark:invert` (black-only logos) */ invertInDark?: boolean /** Official 24×24 SVG as a React node */ icon: ReactNode } // * ─── Category labels (for UI grouping) ────────────────────────────────────── export const categoryLabels: Record = { framework: 'Frameworks', cms: 'CMS & Blogging', ssg: 'Static-Site Generators', platform: 'Platforms & Builders', } export const categoryOrder: IntegrationCategory[] = [ 'framework', 'platform', 'ssg', 'cms', ] // * ─── Integration registry ────────────────────────────────────────────────── export const integrations: Integration[] = [ // * ── Frameworks ─────────────────────────────────────────────────────────── { id: 'nextjs', name: 'Next.js', description: 'Add privacy-friendly analytics to your Next.js application using next/script.', category: 'framework', brandColor: '#000000', invertInDark: true, icon: ( ), }, { id: 'react', name: 'React', description: 'Integrate Pulse with any React SPA (Create React App, Vite, etc).', category: 'framework', brandColor: '#61DAFB', icon: ( ), }, { id: 'vue', name: 'Vue.js', description: 'Simple setup for Vue 2 and Vue 3 applications.', category: 'framework', brandColor: '#4FC08D', icon: ( ), }, { id: 'angular', name: 'Angular', description: 'Add Pulse analytics to your Angular application with a simple script tag.', category: 'framework', brandColor: '#0F0F11', invertInDark: true, icon: ( ), }, { id: 'svelte', name: 'Svelte', description: 'Integrate Pulse with Svelte or SvelteKit in under a minute.', category: 'framework', brandColor: '#FF3E00', icon: ( ), }, { id: 'nuxt', name: 'Nuxt', description: 'Configure Pulse in your Nuxt application via nuxt.config.', category: 'framework', brandColor: '#00DC82', icon: ( ), }, { id: 'remix', name: 'Remix', description: 'Add Pulse to your Remix app via the root route loader.', category: 'framework', brandColor: '#000000', invertInDark: true, icon: ( ), }, { id: 'astro', name: 'Astro', description: 'Integrate Pulse with your Astro site for lightning-fast analytics.', category: 'framework', brandColor: '#BC52EE', icon: ( ), }, { id: 'gatsby', name: 'Gatsby', description: 'Add Pulse to your Gatsby site via gatsby-ssr or a plugin.', category: 'ssg', brandColor: '#663399', icon: ( ), }, // * ── Static-Site Generators ──────────────────────────────────────────────── { id: 'hugo', name: 'Hugo', description: 'Drop the Pulse script into your Hugo partial or base template.', category: 'ssg', brandColor: '#FF4088', icon: ( ), }, // * ── CMS & Blogging ─────────────────────────────────────────────────────── { id: 'wordpress', name: 'WordPress', description: 'Add the tracking script to your WordPress header or use a plugin.', category: 'cms', brandColor: '#21759B', icon: ( ), }, { id: 'ghost', name: 'Ghost', description: 'Inject Pulse into your Ghost theme via Code Injection settings.', category: 'cms', brandColor: '#15171A', invertInDark: true, icon: ( ), }, // * ── Platforms & Builders ────────────────────────────────────────────────── { id: 'shopify', name: 'Shopify', description: 'Add privacy-first analytics to your Shopify store via theme editor.', category: 'platform', brandColor: '#7AB55C', icon: ( ), }, { id: 'webflow', name: 'Webflow', description: 'Paste the Pulse snippet into your Webflow project custom code.', category: 'platform', brandColor: '#146EF5', icon: ( ), }, { id: 'squarespace', name: 'Squarespace', description: 'Add Pulse to Squarespace via the Code Injection panel.', category: 'platform', brandColor: '#000000', invertInDark: true, icon: ( ), }, { id: 'wix', name: 'Wix', description: 'Add Pulse to your Wix site via the Custom Code settings.', category: 'platform', brandColor: '#0C6EFC', icon: ( ), }, ] // * ─── Helpers ──────────────────────────────────────────────────────────────── /** Retrieve a single integration by its route slug. */ export function getIntegration(id: string): Integration | undefined { return integrations.find((i) => i.id === id) } /** Group integrations by category, preserving category ordering. */ export function getGroupedIntegrations(): { category: IntegrationCategory; label: string; items: Integration[] }[] { return categoryOrder .map((cat) => ({ category: cat, label: categoryLabels[cat], items: integrations.filter((i) => i.category === cat), })) .filter((group) => group.items.length > 0) }