kaddidlehopper 0.1.0

package/examples/events/assets/src/routes/talks.$slug.tsx

@@ -0,0 +1,116 @@
+import { createFileRoute, Link } from '@tanstack/react-router'
+import { marked } from 'marked'
+import { Clock, User, ArrowLeft, Tag } from 'lucide-react'
+
+import { allTalks, allSpeakers } from 'content-collections'
+
+import RemyAssistant from '@/components/RemyAssistant'
+
+export const Route = createFileRoute('/talks/$slug')({
+  loader: async ({ params }) => {
+    const talk = allTalks.find((t) => t.slug === params.slug)
+    if (!talk) {
+      throw new Error('Talk not found')
+    }
+    const speaker = allSpeakers.find((s) => s.name === talk.speaker)
+    return { talk, speaker }
+  },
+  component: TalkDetailPage,
+})
+
+function TalkDetailPage() {
+  const { talk, speaker } = Route.useLoaderData()
+
+  return (
+    <div className="min-h-screen">
+      <RemyAssistant />
+
+      {/* Back navigation */}
+      <div className="max-w-7xl mx-auto px-6 py-4">
+        <Link 
+          to="/talks" 
+          className="inline-flex items-center gap-2 text-cream/60 hover:text-gold transition-colors"
+        >
+          <ArrowLeft className="w-4 h-4" />
+          <span>All Sessions</span>
+        </Link>
+      </div>
+
+      {/* Hero image */}
+      <div className="relative h-[40vh] max-w-7xl mx-auto px-6 mb-8">
+        <div className="w-full h-full rounded-2xl overflow-hidden border border-border/50">
+          <img 
+            src={`/${talk.image}`} 
+            alt={talk.title}
+            className="w-full h-full object-cover"
+          />
+        </div>
+        <div className="absolute inset-6 bg-gradient-to-t from-charcoal/60 to-transparent rounded-2xl pointer-events-none" />
+      </div>
+
+      {/* Content */}
+      <div className="max-w-4xl mx-auto px-6">
+        {/* Topics */}
+        <div className="flex flex-wrap gap-2 mb-6">
+          {talk.topics.map((topic) => (
+            <span 
+              key={topic}
+              className="inline-flex items-center gap-1.5 px-3 py-1 text-sm font-medium tracking-wide uppercase bg-gold/15 text-gold border border-gold/30 rounded-full"
+            >
+              <Tag className="w-3 h-3" />
+              {topic}
+            </span>
+          ))}
+        </div>
+
+        {/* Title */}
+        <h1 className="font-display text-4xl md:text-5xl font-bold text-cream mb-6 leading-tight">
+          {talk.title}
+        </h1>
+
+        {/* Meta info */}
+        <div className="flex flex-wrap items-center gap-6 mb-10 pb-10 border-b border-border/50">
+          {/* Speaker link */}
+          {speaker ? (
+            <Link 
+              to={`/speakers/${speaker.slug}`}
+              className="flex items-center gap-3 group"
+            >
+              <div className="w-12 h-12 rounded-full overflow-hidden border border-border/50">
+                <img 
+                  src={`/${speaker.headshot}`} 
+                  alt={speaker.name}
+                  className="w-full h-full object-cover"
+                />
+              </div>
+              <div>
+                <p className="text-cream group-hover:text-gold transition-colors font-medium">
+                  {talk.speaker}
+                </p>
+                <p className="text-cream/50 text-sm">{speaker.restaurant}</p>
+              </div>
+            </Link>
+          ) : (
+            <div className="flex items-center gap-2 text-cream/70">
+              <User className="w-5 h-5 text-copper" />
+              <span>{talk.speaker}</span>
+            </div>
+          )}
+
+          {/* Duration */}
+          <div className="flex items-center gap-2 text-cream/60">
+            <Clock className="w-5 h-5 text-copper" />
+            <span className="text-lg">{talk.duration}</span>
+          </div>
+        </div>
+
+        {/* Description content */}
+        <div className="prose prose-lg max-w-none prose-invert prose-p:text-cream/80 prose-headings:text-cream prose-headings:font-display prose-strong:text-cream prose-a:text-gold prose-li:text-cream/80 prose-ul:text-cream/80 font-body text-lg leading-relaxed pb-20">
+          <div
+            dangerouslySetInnerHTML={{ __html: marked(talk.content) }}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

package/examples/events/assets/src/routes/talks.index.tsx

@@ -0,0 +1,40 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+import { allTalks } from 'content-collections'
+
+import TalkCard from '@/components/TalkCard'
+import RemyAssistant from '@/components/RemyAssistant'
+
+export const Route = createFileRoute('/talks/')({
+  component: TalksPage,
+})
+
+function TalksPage() {
+  return (
+    <>
+      <RemyAssistant />
+      <div className="min-h-screen">
+        {/* Hero section */}
+        <div className="relative py-16 px-6">
+          <div className="max-w-7xl mx-auto text-center">
+            <h1 className="font-display text-5xl md:text-6xl font-bold text-cream mb-4">
+              Conference <span className="text-gold italic">Sessions</span>
+            </h1>
+            <p className="text-xl text-cream/70 max-w-2xl mx-auto font-body">
+              Immerse yourself in masterclasses and demonstrations covering every aspect of artisan baking and pastry.
+            </p>
+          </div>
+        </div>
+
+        {/* Talks grid */}
+        <div className="max-w-7xl mx-auto px-6 pb-20">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+            {allTalks.map((talk) => (
+              <TalkCard key={talk.slug} talk={talk} />
+            ))}
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

package/examples/events/assets/src/styles.css

@@ -0,0 +1,182 @@
+@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&display=swap');
+@import 'tailwindcss';
+
+@plugin "tailwindcss-animate";
+
+@custom-variant dark (&:is(.dark *));
+
+body {
+  @apply m-0;
+  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family:
+    source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+}
+
+/* Haute Patisserie Dark Theme */
+:root {
+  /* Core colors - Dark elegant bakery */
+  --background: oklch(0.13 0.01 60);
+  --foreground: oklch(0.93 0.02 85);
+  
+  /* Warm cream for cards */
+  --card: oklch(0.17 0.015 55);
+  --card-foreground: oklch(0.93 0.02 85);
+  
+  /* Copper accent */
+  --primary: oklch(0.65 0.14 55);
+  --primary-foreground: oklch(0.13 0.01 60);
+  
+  /* Antique gold */
+  --secondary: oklch(0.72 0.12 85);
+  --secondary-foreground: oklch(0.13 0.01 60);
+  
+  /* Muted warm tones */
+  --muted: oklch(0.22 0.02 55);
+  --muted-foreground: oklch(0.65 0.03 85);
+  
+  /* Accent - rich copper */
+  --accent: oklch(0.55 0.15 45);
+  --accent-foreground: oklch(0.95 0.02 85);
+  
+  /* Destructive */
+  --destructive: oklch(0.55 0.2 25);
+  --destructive-foreground: oklch(0.95 0.02 85);
+  
+  /* Borders and inputs */
+  --border: oklch(0.28 0.03 55);
+  --input: oklch(0.22 0.02 55);
+  --ring: oklch(0.65 0.14 55);
+  
+  /* Chart colors - pastry inspired */
+  --chart-1: oklch(0.65 0.14 55);
+  --chart-2: oklch(0.72 0.12 85);
+  --chart-3: oklch(0.55 0.15 45);
+  --chart-4: oklch(0.60 0.10 30);
+  --chart-5: oklch(0.50 0.08 150);
+  
+  --radius: 0.625rem;
+  
+  /* Popover */
+  --popover: oklch(0.17 0.015 55);
+  --popover-foreground: oklch(0.93 0.02 85);
+  
+  /* Sidebar */
+  --sidebar: oklch(0.15 0.01 55);
+  --sidebar-foreground: oklch(0.93 0.02 85);
+  --sidebar-primary: oklch(0.65 0.14 55);
+  --sidebar-primary-foreground: oklch(0.95 0.02 85);
+  --sidebar-accent: oklch(0.22 0.02 55);
+  --sidebar-accent-foreground: oklch(0.93 0.02 85);
+  --sidebar-border: oklch(0.28 0.03 55);
+  --sidebar-ring: oklch(0.65 0.14 55);
+}
+
+@theme inline {
+  --font-display: 'Playfair Display', Georgia, serif;
+  --font-body: 'Cormorant Garamond', Georgia, serif;
+  
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  
+  /* Custom colors for the theme */
+  --color-copper: oklch(0.65 0.14 55);
+  --color-copper-light: oklch(0.75 0.12 55);
+  --color-copper-dark: oklch(0.50 0.15 50);
+  --color-gold: oklch(0.72 0.12 85);
+  --color-gold-light: oklch(0.82 0.10 85);
+  --color-cream: oklch(0.93 0.02 85);
+  --color-cream-dark: oklch(0.85 0.03 80);
+  --color-charcoal: oklch(0.13 0.01 60);
+  --color-charcoal-light: oklch(0.20 0.015 55);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* Custom utilities for the theme */
+.font-display {
+  font-family: 'Playfair Display', Georgia, serif;
+}
+
+.font-body {
+  font-family: 'Cormorant Garamond', Georgia, serif;
+}
+
+/* Elegant grain texture overlay */
+.grain-texture {
+  position: relative;
+}
+
+.grain-texture::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E");
+  pointer-events: none;
+  opacity: 0.4;
+}
+
+/* Golden border accent */
+.border-gold-accent {
+  border-image: linear-gradient(135deg, oklch(0.72 0.12 85), oklch(0.65 0.14 55), oklch(0.72 0.12 85)) 1;
+}
+
+/* Copper glow effect */
+.glow-copper {
+  box-shadow: 0 0 20px oklch(0.65 0.14 55 / 0.3), 0 0 40px oklch(0.65 0.14 55 / 0.1);
+}
+
+/* Elegant card hover effect */
+.card-hover {
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.card-hover:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 12px 40px oklch(0 0 0 / 0.4), 0 0 20px oklch(0.65 0.14 55 / 0.15);
+}

package/examples/events/info.json

@@ -0,0 +1,74 @@
+{
+  "name": "Events",
+  "description": "A pastry conference website with speakers, sessions, schedule, and AI assistant built with content-collections and TanStack Start for Netlify.",
+  "phase": "example",
+  "modes": ["file-router"],
+  "type": "example",
+  "priority": 10,
+  "link": "",
+  "routes": [
+    {
+      "url": "/",
+      "path": "src/routes/index.tsx",
+      "jsName": "EventsHome"
+    },
+    {
+      "url": "/schedule",
+      "path": "src/routes/schedule.index.tsx",
+      "jsName": "SchedulePage"
+    },
+    {
+      "url": "/speakers",
+      "path": "src/routes/speakers.index.tsx",
+      "jsName": "SpeakersPage"
+    },
+    {
+      "url": "/speakers/$slug",
+      "path": "src/routes/speakers.$slug.tsx",
+      "jsName": "SpeakerDetail"
+    },
+    {
+      "url": "/talks",
+      "path": "src/routes/talks.index.tsx",
+      "jsName": "TalksPage"
+    },
+    {
+      "url": "/talks/$slug",
+      "path": "src/routes/talks.$slug.tsx",
+      "jsName": "TalkDetail"
+    },
+    {
+      "url": "/api/remy-chat",
+      "path": "src/routes/api.remy-chat.ts",
+      "jsName": "RemyChatAPI"
+    }
+  ],
+  "integrations": [
+    {
+      "type": "vite-plugin",
+      "import": "import contentCollections from '@content-collections/vite'",
+      "code": "contentCollections()"
+    }
+  ],
+  "dependsOn": [],
+  "variables": [],
+  "bareBones": {
+    "deleteFiles": [
+      "public/background-2.jpg",
+      "public/background-3.jpg",
+      "public/background-4.jpg",
+      "public/speakers/hans-mueller.jpg",
+      "public/speakers/isabella-martinez.jpg",
+      "public/speakers/kenji-nakamura.jpg",
+      "public/speakers/marie-dubois.jpg",
+      "public/speakers/priya-sharma.jpg",
+      "public/talks/french-macaron-mastery.jpg",
+      "public/talks/neapolitan-pizza-tradition-meets-innovation.jpg",
+      "public/talks/savory-breads-of-the-mediterranean.jpg",
+      "public/talks/sourdough-from-starter-to-masterpiece.jpg",
+      "public/talks/the-art-of-the-perfect-tart.jpg",
+      "public/talks/the-science-of-sugar.jpg",
+      "public/talks/umami-in-pastry-east-meets-west.jpg"
+    ]
+  }
+}

package/examples/events/package.json

@@ -0,0 +1,23 @@
+{
+  "dependencies": {
+    "@tanstack/ai": "0.2.2",
+    "@tanstack/ai-anthropic": "0.2.0",
+    "@tanstack/ai-client": "0.2.2",
+    "@tanstack/ai-gemini": "0.3.2",
+    "@tanstack/ai-ollama": "0.3.0",
+    "@tanstack/ai-openai": "0.3.0",
+    "@tanstack/ai-react": "0.2.2",
+    "@tanstack/store": "^0.8.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "marked": "^17.0.1",
+    "streamdown": "^2.1.0",
+    "tailwind-merge": "^3.0.2",
+    "tailwindcss-animate": "^1.0.7",
+    "zod": "^4.3.5"
+  },
+  "devDependencies": {
+    "@content-collections/core": "^0.13.1",
+    "@content-collections/vite": "^0.2.8"
+  }
+}

package/examples/marketing/README.md

@@ -0,0 +1,60 @@
+# E-commerce Example
+
+An AI-powered motorcycle e-commerce store built with TanStack Start and TanStack AI for Netlify deployment.
+
+## Features
+
+- **AI Chat Assistant**: Powered by TanStack AI with Anthropic Claude
+- **Product Catalog**: Browse Luna-C motorcycle inventory
+- **Smart Recommendations**: AI can recommend motorcycles based on your needs
+- **SSR Ready**: Full server-side rendering with TanStack Start
+
+## Project Structure
+
+```
+├── src/
+│   ├── components/
+│   │   ├── AIAssistant.tsx           # Chat panel component
+│   │   ├── Header.tsx                # Navigation with AI button
+│   │   └── MotorcycleRecommendation.tsx  # Product card for AI
+│   ├── data/
+│   │   └── motorcycles.ts            # Product inventory
+│   ├── lib/
+│   │   ├── ai-hook.ts                # useMotorcycleChat hook
+│   │   └── motorcycle-tools.ts       # AI tool definitions
+│   ├── store/
+│   │   └── assistant.ts              # UI state with TanStack Store
+│   └── routes/
+│       ├── __root.tsx                # Root layout
+│       ├── index.tsx                 # Product listing
+│       ├── motorcycles/$motorcycleId.tsx  # Product detail
+│       └── api.motorcycle-chat.ts    # Chat API endpoint
+└── public/
+    └── *.jpg                         # Product images
+```
+
+## AI Chat Features
+
+The AI assistant can:
+- Answer questions about motorcycles
+- Recommend bikes based on your preferences (budget, experience level, riding style)
+- Display product cards directly in the chat
+- Help you find the perfect motorcycle
+
+## Environment Variables
+
+Create a `.env.local` file with your Anthropic API key:
+
+```
+ANTHROPIC_API_KEY=your_api_key_here
+```
+
+## Development
+
+```bash
+# Start development server
+npm run dev
+
+# Build for production
+npm run build
+```

package/examples/marketing/assets/src/components/Header.tsx

@@ -0,0 +1,36 @@
+import { Link } from '@tanstack/react-router'
+
+import HeaderNav from './HeaderNav'
+
+import MotorcycleAIAssistant from '@/components/MotorcycleAIAssistant'
+
+export default function Header() {
+  return (
+    <>
+      <div className="z-40">
+        <HeaderNav />
+      </div>
+      <header className="p-4 flex gap-2 bg-black/30 text-white border-b border-orange-500/20 backdrop-blur-md sticky top-0 z-40">
+        <nav className="flex flex-row items-center">
+          <div className="px-4 font-extrabold text-lg">
+            <Link
+              to="/"
+              className="hover:text-orange-400 transition-colors flex flex-row items-center"
+            >
+              <img
+                src="/logo.png"
+                alt="Luna-C Motorcycles"
+                className="w-20 h-20"
+              />
+              <span className="text-2xl font-bold">Luna-C Motorcycles</span>
+            </Link>
+          </div>
+        </nav>
+
+        <div className="ml-auto">
+          <MotorcycleAIAssistant />
+        </div>
+      </header>
+    </>
+  )
+}