feat(demo): Little Friend analytics on yable-demo.vercel.app

examples/react-demo/src/app/HomeClient.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useMemo, useRef, useState } from 'react'
 import Link from 'next/link'
+import { track } from '@/lib/little-friend'
 import {
   useTable,
   Table,
@@ -373,31 +374,31 @@
 
 const speedColumnHelper = createColumnHelper<SpeedRow>()
 
 const speedColumns: ColumnDef<SpeedRow, any>[] = [
   speedColumnHelper.accessor('title', {
     header: 'Title',
     cell: (info: any) => <span className={s.speedCellTitle}>{info.getValue()}</span>,
     size: 220,
     measureRecipe: SPEED_TITLE_RECIPE,
   }) as ColumnDef<SpeedRow, any>,
   speedColumnHelper.accessor('excerpt', {
     header: 'Excerpt',
     cell: (info: any) => <span className={s.speedCellExcerpt}>{info.getValue()}</span>,
     size: 440,
     measureRecipe: SPEED_EXCERPT_RECIPE,
   }) as ColumnDef<SpeedRow, any>,
   speedColumnHelper.accessor('author', {
     header: 'Author',
     cell: (info: any) => <span className={s.speedCellAuthor}>{info.getValue()}</span>,
     size: 140,
   }) as ColumnDef<SpeedRow, any>,
   speedColumnHelper.accessor('category', {
     header: 'Category',
     cell: (info: any) => (
       <span className={getCategoryClassName(info.getValue() as string)}>{info.getValue()}</span>
     ),
     size: 130,
   }) as ColumnDef<SpeedRow, any>,
 ]
 
 const SPEED_SIZES = [100, 1000, 5000, 10000, 25000] as const
@@ -411,7 +412,7 @@
  * Main demo columns
  * ─────────────────────────────────────────────────────────────────────── */
 
 const mainColumns: ColumnDef<Person, any>[] = [
   columnHelper.display({
     id: 'select',
     header: ({ table }: { table: TableInstance<Person> }) => (
@@ -698,7 +699,9 @@
   const reducedMotion = useReducedMotion()
 
   const copyInstall = () => {
-    navigator.clipboard.writeText('npm i @zvndev/yable-react @zvndev/yable-themes')
+    navigator.clipboard
+      .writeText('npm i @zvndev/yable-react @zvndev/yable-themes')
+      .then(() => track('install.copy'))
     setCopied(true)
     setTimeout(() => setCopied(false), 2000)
   }
@@ -744,18 +747,19 @@
             </div>
 
             <div className={s.heroCtas}>
-              <Link href="/gallery" className={s.heroCtaPrimary}>
+              <Link href="/gallery" data-lf="cta.gallery" className={s.heroCtaPrimary}>
                 Explore the gallery<span aria-hidden="true">→</span>
               </Link>
-              <Link href="/docs/quickstart" className={s.heroCtaSecondary}>
+              <Link href="/docs/quickstart" data-lf="cta.docs" className={s.heroCtaSecondary}>
                 Read the docs<span aria-hidden="true">→</span>
               </Link>
-              <Link href="/drag-lab" className={s.heroCtaSecondary}>
+              <Link href="/drag-lab" data-lf="cta.drag_lab" className={s.heroCtaSecondary}>
                 <span className={s.heroCtaBadge}>New</span>
                 Try column drag<span aria-hidden="true">→</span>
               </Link>
               <a
                 href="https://github.com/ZVN-DEV/yable"
+                data-lf="cta.github"
                 target="_blank"
                 rel="noreferrer"
                 className={s.heroCtaSecondary}

examples/react-demo/src/app/docs/layout.tsx

@@ -35,6 +35,7 @@ export default function DocsLayout({ children }: { children: React.ReactNode })
             </Link>
             <a
               href="https://github.com/ZVN-DEV/yable"
+              data-lf="docs.github"
               target="_blank"
               rel="noreferrer"
               className={s.topLink}
@@ -43,6 +44,7 @@ export default function DocsLayout({ children }: { children: React.ReactNode })
             </a>
             <a
               href="https://www.npmjs.com/package/@zvndev/yable-react"
+              data-lf="docs.npm"
               target="_blank"
               rel="noreferrer"
               className={s.topLink}

examples/react-demo/src/app/layout.tsx

@@ -1,5 +1,7 @@
 import type { Metadata } from 'next'
 import { IBM_Plex_Mono, IBM_Plex_Sans } from 'next/font/google'
+import { LITTLE_FRIEND_ENABLED, LITTLE_FRIEND_SITE_KEY } from '@/lib/little-friend'
+import LittleFriendEvents from './little-friend'
 import './globals.css'
 import '@zvndev/yable-themes'
 import '@zvndev/yable-themes/default.css'
@@ -40,6 +42,21 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en" className={`${body.variable} ${mono.variable}`} data-yable-theme="dark">
+      {LITTLE_FRIEND_ENABLED && (
+        <head>
+          <script
+            defer
+            src="https://cdn.littlefriend.io/lf.js"
+            data-site={LITTLE_FRIEND_SITE_KEY}
+            data-mode="journey"
+          />
+          <script
+            defer
+            src="https://cdn.littlefriend.io/lf-replay.js"
+            data-site={LITTLE_FRIEND_SITE_KEY}
+          />
+        </head>
+      )}
       <body
         style={{
           margin: 0,
@@ -51,6 +68,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
           MozOsxFontSmoothing: 'grayscale',
         }}
       >
+        {LITTLE_FRIEND_ENABLED && <LittleFriendEvents />}
         {children}
       </body>
     </html>

examples/react-demo/src/app/little-friend.tsx

@@ -0,0 +1,26 @@
+'use client'
+
+import { useEffect } from 'react'
+import { track } from '@/lib/little-friend'
+
+// Goals match event names, so GitHub and npm links send their own.
+function onClick(event: MouseEvent) {
+  if (event.button > 1 || !(event.target instanceof Element)) return
+  const link = event.target.closest('a[href]')
+  if (!(link instanceof HTMLAnchorElement)) return
+  const host = link.hostname.replace(/^www\./, '')
+  if (host === 'github.com') track('github.click')
+  else if (host === 'npmjs.com') track('npm.click')
+}
+
+export default function LittleFriendEvents() {
+  useEffect(() => {
+    document.addEventListener('click', onClick)
+    document.addEventListener('auxclick', onClick)
+    return () => {
+      document.removeEventListener('click', onClick)
+      document.removeEventListener('auxclick', onClick)
+    }
+  }, [])
+  return null
+}

examples/react-demo/src/lib/little-friend.ts

@@ -0,0 +1,24 @@
+// Little Friend analytics (littlefriend.io). The site key is public: it only
+// names the project the tracker reports to. The tracker sets no cookies, reads
+// no form values or page text, and strips query strings.
+
+export const LITTLE_FRIEND_SITE_KEY = 'lf_pniimTFHtNePHKo5ysDuIpo5'
+
+// Production deployments only, so previews, local dev and e2e runs send nothing.
+// turbo.json in this package declares VERCEL_ENV so Turborepo passes it through.
+export const LITTLE_FRIEND_ENABLED = process.env.VERCEL_ENV === 'production'
+
+type LittleFriendProps = Record<string, string | number | boolean>
+
+declare global {
+  interface Window {
+    lf?: (command: string, ...args: unknown[]) => void
+  }
+}
+
+// A named event. Does nothing until the tracker has loaded, and nothing at
+// all outside production, where the tag is not rendered.
+export function track(name: string, props?: LittleFriendProps) {
+  if (typeof window === 'undefined') return
+  window.lf?.('track', name, props)
+}

examples/react-demo/turbo.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://turbo.build/schema.json",
+  "extends": ["//"],
+  "tasks": {
+    "build": {
+      "env": ["VERCEL_ENV"]
+    }
+  }
+}