kaddidlehopper 0.1.0

package/examples/blog/README.md

@@ -0,0 +1,60 @@
+# Blog Example
+
+A Hawaii adventures travel blog built with TanStack Start and content-collections for Netlify deployment.
+
+## Features
+
+- **Content Collections**: Blog posts managed as markdown files with frontmatter
+- **Category Navigation**: Filter posts by category (Relaxing, Hiking)
+- **Beautiful UI**: Postcard-style blog cards with shadcn/ui components
+- **SSR Ready**: Full server-side rendering with TanStack Start
+
+## Project Structure
+
+```
+├── content/
+│   └── posts/           # Markdown blog posts
+├── src/
+│   ├── components/
+│   │   ├── blog-posts.tsx    # Blog post grid
+│   │   ├── Header.tsx        # Navigation header
+│   │   └── ui/
+│   │       └── card.tsx      # Shadcn card component
+│   ├── lib/
+│   │   └── utils.ts          # Utility functions
+│   └── routes/
+│       ├── __root.tsx        # Root layout
+│       ├── index.tsx         # Home page
+│       ├── posts.$slug.tsx   # Individual post
+│       └── category.$category.tsx  # Category filter
+└── public/
+    └── *.jpg                 # Blog images
+```
+
+## Adding Blog Posts
+
+Create a new markdown file in `content/posts/` with the following frontmatter:
+
+```markdown
+---
+date: 2025-03-01
+title: "Your Post Title"
+summary: "A brief summary of your post"
+categories:
+  - Category1
+  - Category2
+image: your-image.jpg
+---
+
+Your post content here...
+```
+
+## Development
+
+```bash
+# Start development server
+npm run dev
+
+# Build for production
+npm run build
+```

package/examples/blog/assets/content/posts/beach.md

@@ -0,0 +1,12 @@
+---
+date: 2025-03-01
+title: "Day At The Beach"
+summary: "Had a great day at the beach in Hawaii"
+categories:
+  - Relaxing
+image: beach.jpg
+---
+
+The morning sun painted the ocean in shimmering gold as I paddled out beyond the break, my surfboard gliding smoothly through the crystal-clear Hawaiian waters. The waves were perfect today - clean, consistent sets rolling in with just enough power to make things interesting without being intimidating. After catching several exhilarating rides, each one lasting what felt like an eternity, I found myself grinning from ear to ear, salt water dripping from my hair, and feeling completely in tune with the rhythm of the ocean.
+
+After my surf session, I found the perfect spot on the warm sand to soak in the midday sun. The gentle trade winds carried the sweet scent of plumeria, while palm trees swayed overhead providing occasional patches of shade. I alternated between reading my book, taking refreshing dips in the turquoise water, and simply watching the parade of beach life unfold around me - children building sandcastles, paddleboarders gliding by in the distance, and sea turtles occasionally popping their heads above the surface. It was one of those perfect Hawaiian days that remind you why these islands are called paradise.

package/examples/blog/assets/content/posts/jungle.md.ejs

@@ -0,0 +1,12 @@
+<% if (addOnOption.project?.bareBones) { ignoreFile() } %>---
+date: 2025-03-02
+title: "Hiking The Jungle"
+summary: "Picking our way through the jungle in Hawaii"
+categories:
+  - Hiking
+image: jungle.jpg
+---
+
+The ascent through the Hawaiian jungle was a feast for the senses. Massive tree ferns unfurled their prehistoric fronds overhead, creating a living canopy that filtered the morning sunlight into ethereal green beams. The air was thick with humidity and alive with sound – the melodic calls of 'apapane birds echoed through the forest, while the distinctive cry of the 'i'iwi punctuated the constant background chorus of buzzing insects and rustling leaves.
+
+As we picked our way along the narrow trail, each step carefully placed on the rain-slicked earth, the dense jungle gradually began to thin. Through gaps in the vegetation, tantalizing glimpses of the valley below emerged, hinting at the spectacular vista that awaited us at the summit. The sweet scent of wild ginger mingled with the earthy aroma of damp soil, while delicate 'ōhi'a lehua blossoms dotted the path with splashes of crimson, their presence a hopeful sign of the forest's resilience against environmental challenges.

package/examples/blog/assets/content/posts/mountains.md.ejs

@@ -0,0 +1,12 @@
+<% if (addOnOption.project?.bareBones) { ignoreFile() } %>---
+date: 2025-03-02
+title: "Mountain Tops"
+summary: "Ending our hike with mountain views"
+categories:
+  - Hiking
+image: mountains.jpg
+---
+
+The day's journey took an unexpected turn when we stumbled upon a hidden waterfall cascading down moss-covered rocks. The thundering sound of water drew us off our planned trail, and we spent a magical hour exploring the crystal-clear pool at its base, watching rainbow-like mist dance in the afternoon sun. What started as a simple jungle trek transformed into an adventure of discovery, with exotic birds calling from the canopy above and vibrant butterflies fluttering between patches of filtered sunlight.
+
+As dusk approached, we finally reached the summit, where jagged peaks pierced through a sea of clouds stretching endlessly toward the horizon. However, our triumph was short-lived as we realized we'd need to navigate the descent in fading light. Armed with only two headlamps between the four of us, we carefully picked our way down the rocky trail, our hearts racing with each uncertain step. The stars emerged one by one above us, and the distant lights of our hotel served as a welcome beacon, guiding us safely back just as true darkness settled over the mountains.

package/examples/blog/assets/content/posts/snorkeling.md.ejs

@@ -0,0 +1,12 @@
+<% if (addOnOption.project?.bareBones) { ignoreFile() } %>---
+date: 2025-03-01
+title: "Snorkeling"
+summary: "Snorkling with the fish in Hawaii"
+categories:
+  - Relaxing
+image: snorkeling.jpg
+---
+
+As I glided through the crystal-clear waters off the Hawaiian coast, I found myself immersed in an underwater paradise. The warm Pacific waters, hovering around 80 degrees Fahrenheit, embraced me like a gentle blanket while visibility extended for what seemed like eternity. Each gentle wave brought new wonders into view, with sunlight dancing through the water creating mesmerizing patterns on the sandy ocean floor below.
+
+The vibrant marine life was absolutely breathtaking, with schools of yellow tang darting between clusters of coral and parrotfish methodically grazing on the reef. Brilliant butterfly fish, their distinctive patterns catching the sunlight, swam fearlessly past my mask, while iridescent humuhumunukunukuapua'a (Hawaii's state fish) investigated my presence with curious eyes. In every direction, the coral reefs teemed with life, creating a natural aquarium that made me feel like a privileged guest in this underwater world.

package/examples/blog/assets/content/posts/waterfall.md.ejs

@@ -0,0 +1,12 @@
+<% if (addOnOption.project?.bareBones) { ignoreFile() } %>---
+date: 2025-03-02
+title: "Waterfall Surprise"
+summary: "We weren't expecting this waterfall in Hawaii"
+categories:
+  - Hiking
+image: waterfall.jpg
+---
+
+As we made our way through the dense Hawaiian rainforest, the humid air clung to our skin and the chirping of native birds provided a natural symphony to our adventure. The trail had been relatively straightforward, winding through groves of towering bamboo and past ancient lava flows, but nothing prepared us for what lay around the final bend. The sound hit us first - a distant rushing that grew louder with each step, until we emerged into a hidden grotto where a magnificent waterfall cascaded down moss-covered volcanic rocks.
+
+The secluded waterfall, easily sixty feet tall, created its own microclimate of cool mist and swirling breezes. Crystal clear water plunged into a pristine pool below, surrounded by delicate ferns and vibrant tropical flowers that seemed to thrive in this hidden paradise. We hadn't seen this waterfall mentioned in any of our guidebooks or trail maps, which made the discovery even more special. Standing there, with water droplets dancing in the filtered sunlight, we felt like we had stumbled upon one of Hawaii's best-kept secrets.

package/examples/blog/assets/content-collections.ts

@@ -0,0 +1,30 @@
+import { defineCollection, defineConfig } from '@content-collections/core'
+import { z } from 'zod'
+
+const posts = defineCollection({
+  name: 'posts',
+  directory: 'content/posts',
+  include: '**/*.md',
+  schema: z.object({
+    title: z.string(),
+    summary: z.string(),
+    categories: z.array(z.string()),
+    slug: z.string().optional(),
+    image: z.string(),
+    date: z.string(),
+    content: z.string(),
+  }),
+  transform: async (doc) => {
+    return {
+      ...doc,
+      slug: doc.title
+        .toLowerCase()
+        .replace('.md', '')
+        .replace(/[^\w-]+/g, '_'),
+    }
+  },
+})
+
+export default defineConfig({
+  collections: [posts],
+})

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

@@ -0,0 +1,52 @@
+import { Link } from '@tanstack/react-router'
+
+import HeaderNav from './HeaderNav'
+import { showVacayAssistant } from './VacayAssistant'
+
+import { allPosts } from 'content-collections'
+
+export default function Header() {
+  const categories = Array.from(
+    new Set(allPosts.flatMap((post) => post.categories)),
+  )
+
+  const handleVacayClick = () => {
+    showVacayAssistant.setState(() => true)
+  }
+
+  return (
+    <>
+      <HeaderNav />
+      <header className="text-slate-700 font-serif font-extrabold fixed top-20 left-0 right-0 z-0 backdrop-blur-md bg-white/50 border-b border-slate-200/50 transition-all">
+        <nav className="max-w-7xl mx-auto p-4 flex gap-2 justify-between">
+          <div className="flex flex-row items-center space-x-6">
+            <div className="text-xl tracking-wide">
+              <Link to="/" className="hover:text-emerald-700 transition-colors">
+                Hawaii Adventures
+              </Link>
+            </div>
+            <div className="flex gap-6">
+              {categories.map((category) => (
+                <div key={category}>
+                  <Link
+                    to={`/category/${category}`}
+                    className="hover:text-emerald-700 transition-colors"
+                  >
+                    {category}
+                  </Link>
+                </div>
+              ))}
+            </div>
+          </div>
+          <button
+            onClick={handleVacayClick}
+            className="flex items-center gap-2 px-4 py-2 rounded-xl bg-linear-to-r from-amber-400/90 via-orange-500/90 to-rose-500/90 hover:from-amber-400 hover:via-orange-500 hover:to-rose-500 text-white font-semibold text-sm transition-all hover:shadow-lg hover:shadow-orange-500/20 hover:scale-[1.02]"
+          >
+            <span className="text-base">🌴</span>
+            <span className="tracking-wide">Vacay Assistant</span>
+          </button>
+        </nav>
+      </header>
+    </>
+  )
+}

package/examples/blog/assets/src/components/VacayAssistant.tsx

@@ -0,0 +1,205 @@
+import { useEffect, useRef, useState } from 'react'
+import { Send, X, Palmtree, Sun } from 'lucide-react'
+import { Streamdown } from 'streamdown'
+import { Store } from '@tanstack/store'
+
+import { useBlogChat } from '@/lib/blog-ai-hook'
+import type { BlogChatMessages } from '@/lib/blog-ai-hook'
+
+function Messages({ messages }: { messages: BlogChatMessages }) {
+  const messagesContainerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (messagesContainerRef.current) {
+      messagesContainerRef.current.scrollTop =
+        messagesContainerRef.current.scrollHeight
+    }
+  }, [messages])
+
+  if (!messages.length) {
+    return (
+      <div className="flex-1 flex flex-col items-center justify-center text-amber-200/60 text-sm px-6 py-8">
+        <div className="relative mb-4">
+          <Sun className="w-12 h-12 text-amber-400/40 animate-pulse" />
+          <Palmtree className="w-6 h-6 text-emerald-400/60 absolute -bottom-1 -right-1" />
+        </div>
+        <p className="text-center text-amber-100/80 font-medium">
+          Aloha! 🌺 How can I help?
+        </p>
+        <p className="text-xs text-amber-200/40 mt-2 text-center max-w-[200px]">
+          Ask about adventures, get trip ideas, or explore the islands!
+        </p>
+      </div>
+    )
+  }
+
+  return (
+    <div ref={messagesContainerRef} className="flex-1 overflow-y-auto">
+      {messages.map(({ id, role, parts }) => (
+        <div
+          key={id}
+          className={`py-3 ${
+            role === 'assistant'
+              ? 'bg-linear-to-r from-amber-500/5 via-orange-500/5 to-rose-500/5'
+              : 'bg-transparent'
+          }`}
+        >
+          {parts.map((part, index) => {
+            if (part.type === 'text' && part.content) {
+              return (
+                <div key={index} className="flex items-start gap-3 px-4">
+                  {role === 'assistant' ? (
+                    <div className="w-7 h-7 rounded-full bg-linear-to-br from-amber-400 via-orange-500 to-rose-500 flex items-center justify-center text-xs font-bold text-white flex-shrink-0 shadow-lg shadow-orange-500/20">
+                      🌴
+                    </div>
+                  ) : (
+                    <div className="w-7 h-7 rounded-full bg-slate-600 flex items-center justify-center text-xs font-medium text-white flex-shrink-0">
+                      You
+                    </div>
+                  )}
+                  <div className="flex-1 min-w-0 text-amber-50 prose dark:prose-invert max-w-none prose-sm prose-p:text-amber-50 prose-headings:text-amber-100 prose-strong:text-amber-200">
+                    <Streamdown>{part.content}</Streamdown>
+                  </div>
+                </div>
+              )
+            }
+            return null
+          })}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+interface VacayAssistantProps {
+  slug?: string
+  postTitle?: string
+}
+
+// Export store for header control
+export const showVacayAssistant = new Store(false)
+
+export default function VacayAssistant({
+  slug,
+  postTitle,
+}: VacayAssistantProps) {
+  const [isOpen, setIsOpen] = useState(false)
+  const { messages, sendMessage, isLoading } = useBlogChat(slug)
+  const [input, setInput] = useState('')
+
+  // Sync with store for header control
+  useEffect(() => {
+    return showVacayAssistant.subscribe(() => {
+      setIsOpen(showVacayAssistant.state)
+    })
+  }, [])
+
+  const handleToggle = () => {
+    const newState = !isOpen
+    setIsOpen(newState)
+    showVacayAssistant.setState(() => newState)
+  }
+
+  const handleSend = () => {
+    if (input.trim()) {
+      sendMessage(input)
+      setInput('')
+    }
+  }
+
+  if (!isOpen) return null
+
+  return (
+    <div className="fixed top-20 right-4 z-[100] w-[400px] h-[520px] rounded-3xl shadow-2xl flex flex-col overflow-hidden border border-amber-500/20 backdrop-blur-xl bg-linear-to-b from-slate-900/98 via-slate-900/95 to-slate-800/98">
+      {/* Decorative top gradient */}
+      <div className="absolute top-0 left-0 right-0 h-32 bg-linear-to-b from-amber-500/10 via-orange-500/5 to-transparent pointer-events-none" />
+
+      {/* Header */}
+      <div className="relative flex items-center justify-between p-4 border-b border-amber-500/10">
+        <div className="flex items-center gap-3">
+          <div className="w-10 h-10 rounded-2xl bg-linear-to-br from-amber-400 via-orange-500 to-rose-500 flex items-center justify-center shadow-lg shadow-orange-500/30 rotate-3 hover:rotate-0 transition-transform">
+            <span className="text-lg">🌴</span>
+          </div>
+          <div>
+            <h3 className="font-bold text-amber-100 text-base tracking-tight">
+              Vacay Assistant
+            </h3>
+            {postTitle && (
+              <p className="text-xs text-amber-300/50 truncate max-w-[220px]">
+                📍 {postTitle}
+              </p>
+            )}
+          </div>
+        </div>
+        <button
+          onClick={handleToggle}
+          className="text-amber-300/50 hover:text-amber-100 transition-colors p-2 hover:bg-white/5 rounded-xl"
+        >
+          <X className="w-5 h-5" />
+        </button>
+      </div>
+
+      {/* Messages */}
+      <Messages messages={messages} />
+
+      {/* Loading indicator */}
+      {isLoading && (
+        <div className="px-4 py-3 border-t border-amber-500/10">
+          <div className="flex items-center gap-2 text-amber-400/80 text-xs">
+            <div className="flex gap-1">
+              <span className="w-2 h-2 bg-amber-400 rounded-full animate-bounce [animation-delay:-0.3s]"></span>
+              <span className="w-2 h-2 bg-orange-400 rounded-full animate-bounce [animation-delay:-0.15s]"></span>
+              <span className="w-2 h-2 bg-rose-400 rounded-full animate-bounce"></span>
+            </div>
+            <span className="font-medium">Planning your adventure...</span>
+          </div>
+        </div>
+      )}
+
+      {/* Input */}
+      <div className="relative p-4 border-t border-amber-500/10 bg-slate-900/50">
+        <form
+          onSubmit={(e) => {
+            e.preventDefault()
+            handleSend()
+          }}
+        >
+          <div className="relative">
+            <textarea
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              placeholder="Ask about Hawaii adventures..."
+              disabled={isLoading}
+              className="w-full rounded-2xl border border-amber-500/20 bg-slate-800/50 pl-4 pr-12 py-3 text-sm text-amber-50 placeholder-amber-200/30 focus:outline-none focus:ring-2 focus:ring-amber-500/40 focus:border-transparent resize-none overflow-hidden disabled:opacity-50 transition-all"
+              rows={1}
+              style={{ minHeight: '48px', maxHeight: '100px' }}
+              onInput={(e) => {
+                const target = e.target as HTMLTextAreaElement
+                target.style.height = 'auto'
+                target.style.height = Math.min(target.scrollHeight, 100) + 'px'
+              }}
+              onKeyDown={(e) => {
+                if (
+                  e.key === 'Enter' &&
+                  !e.shiftKey &&
+                  input.trim() &&
+                  !isLoading
+                ) {
+                  e.preventDefault()
+                  handleSend()
+                }
+              }}
+            />
+            <button
+              type="submit"
+              disabled={!input.trim() || isLoading}
+              className="absolute right-3 top-1/2 -translate-y-1/2 p-2 rounded-xl bg-linear-to-r from-amber-500 to-orange-500 text-white disabled:opacity-30 disabled:bg-gray-600 disabled:from-gray-600 disabled:to-gray-600 transition-all hover:shadow-lg hover:shadow-amber-500/20"
+            >
+              <Send className="w-4 h-4" />
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}

package/examples/blog/assets/src/components/blog-posts.tsx

@@ -0,0 +1,78 @@
+import { Link } from "@tanstack/react-router";
+
+import { type Post } from "content-collections";
+
+import { Card, CardContent } from "@/components/ui/card";
+
+export default function BlogPosts({
+  title,
+  posts,
+}: {
+  title: string;
+  posts: Post[];
+}) {
+  return (
+    <div>
+      <div className="container mx-auto max-w-7xl">
+        <h1 className="mb-16 text-7xl font-bold text-teal-900 text-center font-serif  italic">
+          {title}
+        </h1>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-12 px-4">
+          {posts.map((post, index) => (
+            <Link
+              to={`/posts/${post.slug}`}
+              key={post._meta.path}
+              className="group relative block"
+            >
+              <Card
+                className={`relative overflow-hidden transform transition-all duration-500 bg-white
+                ${
+                  index % 2 === 0
+                    ? "rotate-[-1deg] hover:rotate-[-2deg]"
+                    : "rotate-[1deg] hover:rotate-[2deg]"
+                }
+                hover:scale-105 hover:z-10 hover:shadow-[0_20px_40px_rgba(0,0,0,0.25)]
+                before:absolute before:inset-0 before:z-10 before:border-[12px] before:border-white
+                after:absolute after:inset-0 after:z-0 after:bg-[radial-gradient(#00000005_1px,transparent_1px)] after:bg-[length:4px_4px]`}
+              >
+                <div className="relative z-20">
+                  {/* Postcard Stamp */}
+                  <div className="absolute top-4 right-4 w-16 h-20 border-2 border-dashed border-teal-900/20 rounded-sm" />
+
+                  {/* Image Container */}
+                  <div className="aspect-[3/2] relative overflow-hidden">
+                    <div className="absolute inset-0 bg-black/10 z-10 transition-opacity group-hover:opacity-0" />
+                    <img
+                      src={`/${post.image}`}
+                      alt={post.title}
+                      className="object-cover w-full h-full"
+                    />
+                  </div>
+
+                  {/* Content */}
+                  <CardContent className="p-6 bg-transparent">
+                    <div className="space-y-4">
+                      <h3 className="text-3xl font-serif italic text-teal-900 group-hover:text-teal-800 transition-colors">
+                        {post.title}
+                      </h3>
+                      <p className="text-teal-800/80 font-serif">
+                        {post.summary}
+                      </p>
+                      <p className="text-teal-700/60 text-sm italic font-serif">
+                        {post.date}
+                      </p>
+                    </div>
+                  </CardContent>
+
+                  {/* Decorative Lines */}
+                  <div className="absolute left-0 right-0 bottom-0 h-1 bg-[repeating-linear-gradient(45deg,transparent,transparent_2px,#0F766E20_2px,#0F766E20_4px)]" />
+                  <div className="absolute left-0 top-0 bottom-0 w-1 bg-[repeating-linear-gradient(0deg,transparent,transparent_2px,#0F766E20_2px,#0F766E20_4px)]" />
+                </div>
+              </Card>
+            </Link>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/examples/blog/assets/src/components/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

package/examples/blog/assets/src/lib/blog-ai-hook.ts

@@ -0,0 +1,25 @@
+import {
+  fetchServerSentEvents,
+  useChat,
+  createChatClientOptions,
+} from "@tanstack/ai-react";
+import type { InferChatMessages } from "@tanstack/ai-react";
+
+// Default chat options for type inference
+const defaultChatOptions = createChatClientOptions({
+  connection: fetchServerSentEvents("/api/blog-chat"),
+});
+
+export type BlogChatMessages = InferChatMessages<typeof defaultChatOptions>;
+
+export const useBlogChat = (slug?: string) => {
+  const chatOptions = createChatClientOptions({
+    connection: fetchServerSentEvents("/api/blog-chat", {
+      body: {
+        slug,
+      },
+    }),
+  });
+
+  return useChat(chatOptions);
+};