Add feedback button, interaction tracking, and heatmaps to docs site

.github/scripts/update-example-dates.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 
-const fs = require("fs");
-const path = require("path");
+const fs = require("node:fs");
+const path = require("node:path");
 
 function parseRepositoriesFromMDX(content) {
   const repositories = [];
@@ -90,7 +90,10 @@ async function updateExampleDates() {
   console.log("Parsing repositories from MDX file...");
 
   // Read the current MDX file
-  const mdxPath = path.join(__dirname, "../../app/en/home/examples/page.mdx");
+  const mdxPath = path.join(
+    __dirname,
+    "../../app/en/resources/examples/page.mdx"
+  );
   let content = fs.readFileSync(mdxPath, "utf8");
 
   // Parse repositories from the MDX file

.github/workflows/translate-docs.yml

@@ -32,7 +32,7 @@ on:
         type: boolean
 
       single_file:
-        description: "Single file to translate (relative to app/en, e.g. 'home/page.mdx')"
+        description: "Single file to translate (relative to app/en, e.g. 'resources/examples/page.mdx')"
         required: false
         default: ""
         type: string
@@ -121,14 +121,14 @@ jobs:
           else
             echo "Changes detected"
             echo "has_changes=true" >> $GITHUB_OUTPUT
-            
+
             # Count changed files
             CHANGED_FILES=$(git diff --name-only | wc -l)
             STAGED_FILES=$(git diff --cached --name-only | wc -l)
             TOTAL_CHANGES=$((CHANGED_FILES + STAGED_FILES))
-            
+
             echo "changed_files=$TOTAL_CHANGES" >> $GITHUB_OUTPUT
-            
+
             # Get list of changed locales
             CHANGED_LOCALES=$(git diff --name-only | grep -E '^app/(es|pt-BR)/' | cut -d'/' -f2 | sort -u | tr '\n' ',' | sed 's/,$//')
             if [ -z "$CHANGED_LOCALES" ]; then
@@ -213,22 +213,22 @@ jobs:
               head: '${{ steps.branch_name.outputs.branch_name }}',
               base: 'main',
               body: `## 📖 Automated Translation Update
-              
+
               This PR contains automated translations generated by the GitHub Actions workflow.
-              
+
               ### 📊 Translation Summary
               - **Target Locale**: ${{ inputs.target_locale }}
               - **Files Changed**: ${{ steps.check_changes.outputs.changed_files }}
               - **Locales Updated**: ${{ steps.check_changes.outputs.changed_locales }}
-              
+
               ### ⚙️ Configuration Used
               - **Force Translate**: ${{ inputs.force_translate }}
               - **Cleanup Deleted Files**: ${{ inputs.cleanup_deleted }}
               - **Dry Run**: ${{ inputs.dry_run }}
               - **Single File**: ${{ inputs.single_file || 'None (all files)' }}
               - **Concurrency**: ${{ inputs.concurrency }}
               - **Model**: gpt-4o-mini
-              
+
               ### 🔍 Review Guidelines
               Please review the translations for:
               - [ ] Accuracy and context preservation
@@ -237,10 +237,10 @@ jobs:
               - [ ] Code blocks and inline code unchanged
               - [ ] Markdown formatting preserved
               - [ ] Brand names (Arcade, Arcade Engine, Control Plane) kept in English
-              
+
               ### 🚀 Auto-generated
               This PR was automatically created by the \`translate-docs.yml\` GitHub Action.
-              
+
               **Triggered by**: @${{ github.actor }}
               **Workflow Run**: [${{ github.run_id }}](${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }})`,
               draft: false

.gitignore

@@ -15,3 +15,4 @@ make_toolkit_docs/.venv/
 make_toolkit_docs/.env
 make_toolkit_docs/__pycache__/
 make_toolkit_docs/uv.lock
+*.bak

_dictionaries/en.ts

@@ -9,7 +9,7 @@ export default {
   lastUpdated: "Last updated on",
   notFound: "This page could not be found",
   poweredBy: "Powered by",
-  editPage: "Edit this page on GitHub →",
+  editPage: "Edit this page on GitHub",
   by: "by",
   banner: {
     aiTranslation:

app/_components/cheat-sheet.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+import { AlertTriangle, Info, Lightbulb } from "lucide-react";
+import type React from "react";
+
+type CheatSheetSectionProps = {
+  title: string;
+  icon: string;
+  color:
+    | "red"
+    | "orange"
+    | "purple"
+    | "blue"
+    | "green"
+    | "cyan"
+    | "pink"
+    | "yellow";
+  children: React.ReactNode;
+};
+
+const colorClasses = {
+  red: "bg-red-500/10 border-red-500/20 dark:bg-red-500/10 dark:border-red-400/30",
+  orange:
+    "bg-orange-500/10 border-orange-500/20 dark:bg-orange-500/10 dark:border-orange-400/30",
+  purple:
+    "bg-purple-500/10 border-purple-500/20 dark:bg-purple-500/10 dark:border-purple-400/30",
+  blue: "bg-blue-500/10 border-blue-500/20 dark:bg-blue-500/10 dark:border-blue-400/30",
+  green:
+    "bg-green-500/10 border-green-500/20 dark:bg-green-500/10 dark:border-green-400/30",
+  cyan: "bg-cyan-500/10 border-cyan-500/20 dark:bg-cyan-500/10 dark:border-cyan-400/30",
+  pink: "bg-pink-500/10 border-pink-500/20 dark:bg-pink-500/10 dark:border-pink-400/30",
+  yellow:
+    "bg-yellow-500/10 border-yellow-500/20 dark:bg-yellow-500/10 dark:border-yellow-400/30",
+};
+
+const headerColorClasses = {
+  red: "bg-red-500 text-white",
+  orange: "bg-orange-500 text-white",
+  purple: "bg-purple-500 text-white",
+  blue: "bg-blue-500 text-white",
+  green: "bg-green-500 text-white",
+  cyan: "bg-cyan-500 text-white",
+  pink: "bg-pink-500 text-white",
+  yellow: "bg-yellow-500 text-black",
+};
+
+export function CheatSheetSection({
+  title,
+  icon,
+  color,
+  children,
+}: CheatSheetSectionProps) {
+  return (
+    <div
+      className={`cheat-sheet-section rounded-lg border ${colorClasses[color]} overflow-hidden print:break-inside-avoid print:border-gray-300 print:text-[6pt]`}
+    >
+      <div
+        className={`px-4 py-2 font-semibold text-sm ${headerColorClasses[color]} print:!bg-gray-100 print:!text-black print:!text-[7pt] print:!py-[3pt] print:!px-[4pt]`}
+      >
+        <span className="mr-2">{icon}</span>
+        {title}
+      </div>
+      <div className="print:!p-[4pt] print:!text-[6pt] print:!space-y-[2pt] space-y-3 p-4 text-sm">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export function CheatSheetGrid({
+  children,
+  pageNumber,
+}: {
+  children: React.ReactNode;
+  pageNumber?: number;
+}) {
+  const pageClass = pageNumber ? `cheat-sheet-page-${pageNumber}` : "";
+  return (
+    <div
+      className={`cheat-sheet-grid ${pageClass} grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3 print:grid-cols-5 print:gap-2`}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function CommandBlock({ children }: { children: React.ReactNode }) {
+  return (
+    <pre className="print:!bg-gray-100 print:!border-0 print:!p-[2pt] print:!text-[5.5pt] overflow-auto whitespace-pre rounded border border-gray-200 bg-black/5 p-2 font-mono text-xs dark:border-gray-700 dark:bg-white/5">
+      {children}
+    </pre>
+  );
+}
+
+export function CommandList({ children }: { children: React.ReactNode }) {
+  return <div className="space-y-2">{children}</div>;
+}
+
+export function CommandItem({
+  command,
+  description,
+}: {
+  command: string;
+  description?: string;
+}) {
+  return (
+    <div className="print:!space-y-[1pt] space-y-1">
+      <code className="print:!bg-gray-100 print:!border-0 print:!px-[2pt] print:!py-[1pt] print:!text-[5.5pt] block rounded bg-black/5 px-2 py-1 font-mono text-xs dark:bg-white/5">
+        {command}
+      </code>
+      {description && (
+        <div className="print:!text-gray-600 print:!text-[5pt] print:!pl-[2pt] pl-2 text-gray-600 text-xs dark:text-gray-400">
+          {description}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function InfoBox({
+  type = "tip",
+  children,
+}: {
+  type?: "tip" | "note" | "warning";
+  children: React.ReactNode;
+}) {
+  const styles = {
+    tip: "bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800 text-green-800 dark:text-green-200",
+    note: "bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800 text-blue-800 dark:text-blue-200",
+    warning:
+      "bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-800 text-yellow-800 dark:text-yellow-200",
+  };
+
+  const icons = {
+    tip: Lightbulb,
+    note: Info,
+    warning: AlertTriangle,
+  };
+
+  const Icon = icons[type];
+
+  return (
+    <div
+      className={`rounded border p-2 text-xs ${styles[type]} print:!bg-gray-50 print:!text-black print:!border-gray-300 print:!text-[5.5pt] print:!p-[2pt] flex items-start gap-1.5`}
+    >
+      <Icon className="print:!h-[8pt] print:!w-[8pt] h-3 w-3 flex-shrink-0" />
+      <span className="flex-1">{children}</span>
+    </div>
+  );
+}

app/_components/integration-card.tsx

@@ -2,6 +2,7 @@
 import { Card, CardContent } from "@arcadeai/design-system";
 import { cn } from "@arcadeai/design-system/lib/utils";
 import type { LucideIcon } from "lucide-react";
+import { usePostHog } from "posthog-js/react";
 
 type IntegrationCardProps = {
   id: string;
@@ -13,12 +14,24 @@ type IntegrationCardProps = {
 };
 
 export function IntegrationCard({
+  id,
   icon: Icon,
   title,
   description,
   isActive = false,
   onClick,
 }: IntegrationCardProps) {
+  const posthog = usePostHog();
+
+  const handleClick = () => {
+    posthog?.capture("integration_card_clicked", {
+      integration_id: id,
+      integration_title: title,
+      is_active: isActive,
+    });
+    onClick();
+  };
+
   return (
     <Card
       className={cn(
@@ -27,7 +40,7 @@ export function IntegrationCard({
           ? "border-primary/50 bg-primary/5"
           : "border-zinc-800 bg-zinc-900/50 hover:bg-zinc-900"
       )}
-      onClick={onClick}
+      onClick={handleClick}
     >
       <div
         className={cn(

app/_components/logo.tsx

@@ -1,17 +1,17 @@
-import { Arcade, Badge } from "@arcadeai/design-system";
+import { Arcade } from "@arcadeai/design-system";
 import ArcadeLogo from "@arcadeai/design-system/assets/images/arcade-logo";
 
 export function Logo() {
   return (
     <>
       <div className="mr-2 hidden w-40 flex-row lg:flex lg:items-end lg:gap-2.5">
         <ArcadeLogo className="h-7 w-auto invert dark:invert-0" />
-        <Badge
+        {/* <Badge
           className="relative top-0.5 font-medium font-mono text-xs"
           variant="outline"
         >
           Docs
-        </Badge>
+        </Badge> */}
       </div>
 
       <div className="mr-16 block w-6 lg:hidden">

app/_components/posthog.tsx

@@ -16,12 +16,19 @@ export const PostHog = ({ children }: { children: React.ReactNode }) => {
           process.env.NEXT_PUBLIC_POSTHOG_HOST || "https://us.i.posthog.com",
         ui_host:
           process.env.NEXT_PUBLIC_POSTHOG_UI_HOST || "https://us.posthog.com",
-        disable_session_recording: true,
+        // Enable session recording for user behavior analysis
+        disable_session_recording: false,
+        session_recording: {
+          maskAllInputs: true, // Privacy: mask sensitive input fields
+          blockClass: "ph-no-capture", // Allow opting out specific elements
+          recordCrossOriginIframes: false, // Don't record third-party iframes
+        },
+        // Enable heatmaps for click tracking
+        enable_heatmaps: true,
+        // Enable surveys for CSAT
+        disable_surveys: false,
         loaded: (posthogInstance) => {
-          if (
-            process.env.NODE_ENV === "development" ||
-            process.env.NEXT_PUBLIC_POSTHOG_DEBUG
-          ) {
+          if (process.env.NEXT_PUBLIC_POSTHOG_DEBUG === "true") {
             posthogInstance.debug();
           }
         },

app/_components/quick-start-card.tsx

@@ -7,6 +7,7 @@ import {
 } from "@arcadeai/design-system";
 import { motion } from "motion/react";
 import Link from "next/link";
+import { usePostHog } from "posthog-js/react";
 
 type QuickStartCardProps = {
   icon: React.ElementType;
@@ -25,6 +26,16 @@ export function QuickStartCard({
   onClick,
   code,
 }: QuickStartCardProps) {
+  const posthog = usePostHog();
+
+  const handleCardClick = () => {
+    posthog?.capture("quickstart_card_clicked", {
+      card_title: title,
+      card_href: href || null,
+      has_custom_onclick: !!onClick,
+    });
+  };
+
   const content = (
     <>
       <CardHeader className="flex flex-row items-center gap-3 p-6">
@@ -48,20 +59,25 @@ export function QuickStartCard({
     </>
   );
 
+  const handleClick = () => {
+    handleCardClick();
+    onClick?.();
+  };
+
   let wrapper: React.ReactElement | null = null;
   if (onClick) {
     wrapper = (
       <button
         className="block h-full w-full text-left"
-        onClick={onClick}
+        onClick={handleClick}
         type="button"
       >
         {content}
       </button>
     );
   } else if (href) {
     wrapper = (
-      <Link className="block h-full" href={href}>
+      <Link className="block h-full" href={href} onClick={handleCardClick}>
         {content}
       </Link>
     );