kaddidlehopper 0.1.0

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

@@ -0,0 +1,212 @@
+@import "tailwindcss";
+@import "highlight.js/styles/github-dark.css";
+
+/* Custom scrollbar styles */
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: rgba(156, 163, 175, 0.5);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(156, 163, 175, 0.7);
+}
+
+/* Smooth transitions for dark mode */
+html {
+  transition: background-color 0.3s ease;
+}
+
+/* Markdown content styles */
+.prose {
+  max-width: none;
+  color: #e5e7eb; /* text-gray-200 */
+}
+
+.prose code {
+  color: #e5e7eb;
+  background-color: rgba(31, 41, 55, 0.5);
+  padding: 0.2em 0.4em;
+  border-radius: 0.375rem;
+  font-size: 0.875em;
+}
+
+.prose pre {
+  background-color: rgba(31, 41, 55, 0.5);
+  border-radius: 0.5rem;
+  padding: 1rem;
+  margin: 1.25em 0;
+  overflow-x: auto;
+}
+
+.prose pre code {
+  background-color: transparent;
+  padding: 0;
+  border-radius: 0;
+  color: inherit;
+}
+
+.prose h1, .prose h2, .prose h3, .prose h4 {
+  color: #f9fafb; /* text-gray-50 */
+}
+
+.prose ul, .prose ol {
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
+  padding-left: 1.625em;
+}
+
+.prose li {
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+
+.prose blockquote {
+  border-left-color: #f97316; /* orange-500 */
+  background-color: rgba(249, 115, 22, 0.1);
+  padding: 1em;
+  margin: 1.25em 0;
+  border-radius: 0.5rem;
+}
+
+.prose hr {
+  border-color: rgba(249, 115, 22, 0.2);
+  margin: 2em 0;
+}
+
+.prose a {
+  color: #f97316; /* orange-500 */
+  text-decoration: underline;
+  text-decoration-thickness: 0.1em;
+  text-underline-offset: 0.2em;
+}
+
+.prose a:hover {
+  color: #fb923c; /* orange-400 */
+}
+
+.prose table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1.25em 0;
+}
+
+.prose th, .prose td {
+  padding: 0.75em;
+  border: 1px solid rgba(249, 115, 22, 0.2);
+}
+
+.prose th {
+  background-color: rgba(249, 115, 22, 0.1);
+  font-weight: 600;
+}
+
+/* Message transition animations */
+.message-enter {
+  opacity: 0;
+  transform: translateY(10px);
+}
+
+.message-enter-active {
+  opacity: 1;
+  transform: translateY(0);
+  transition: opacity 300ms, transform 300ms;
+}
+
+.message-exit {
+  opacity: 1;
+}
+
+.message-exit-active {
+  opacity: 0;
+  transition: opacity 300ms;
+}
+
+/* Add/update these styles to match AI formatting capabilities */
+.prose h1 {
+  font-size: 2em;
+  margin-bottom: 0.5em;
+}
+
+.prose h2 {
+  font-size: 1.5em;
+  margin-top: 1em;
+  margin-bottom: 0.5em;
+}
+
+.prose h3 {
+  font-size: 1.25em;
+  margin-top: 1em;
+  margin-bottom: 0.5em;
+}
+
+.prose ul {
+  list-style-type: disc;
+  padding-left: 1.5em;
+}
+
+.prose ol {
+  list-style-type: decimal;
+  padding-left: 1.5em;
+}
+
+.prose table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1em 0;
+}
+
+.prose th,
+.prose td {
+  border: 1px solid rgba(249, 115, 22, 0.2);
+  padding: 0.5em;
+}
+
+.prose th {
+  background-color: rgba(249, 115, 22, 0.1);
+}
+
+.prose strong {
+  color: #f9fafb; /* text-gray-50 */
+  font-weight: 600;
+}
+
+.prose em {
+  font-style: italic;
+}
+
+.prose blockquote {
+  border-left: 4px solid #f97316; /* orange-500 */
+  padding-left: 1em;
+  margin: 1em 0;
+  color: #d1d5db; /* text-gray-300 */
+}
+
+/* Ensure code blocks match the AI's formatting */
+.prose code {
+  color: #e5e7eb;
+  background-color: rgba(31, 41, 55, 0.5);
+  padding: 0.2em 0.4em;
+  border-radius: 0.375rem;
+  font-size: 0.875em;
+}
+
+.prose pre {
+  background-color: rgba(31, 41, 55, 0.5);
+  border-radius: 0.5rem;
+  padding: 1rem;
+  margin: 1em 0;
+}
+
+.prose pre code {
+  background-color: transparent;
+  padding: 0;
+  border-radius: 0;
+}

package/examples/marketing/info.json

@@ -0,0 +1,38 @@
+{
+  "name": "Marketing",
+  "description": "AI-powered motorcycle marketing site with TanStack AI chat assistant for Netlify.",
+  "phase": "example",
+  "modes": ["file-router"],
+  "type": "example",
+  "priority": 10,
+  "link": "",
+  "routes": [
+    {
+      "url": "/",
+      "name": "Home",
+      "path": "src/routes/index.tsx",
+      "jsName": "MotorcyclesIndex"
+    },
+    {
+      "url": "/motorcycles/$motorcycleId",
+      "path": "src/routes/motorcycles/$motorcycleId.tsx",
+      "jsName": "MotorcycleDetail"
+    },
+    {
+      "url": "/api/motorcycle-chat",
+      "path": "src/routes/api.motorcycle-chat.ts",
+      "jsName": "MotorcycleChatAPI"
+    }
+  ],
+  "integrations": [],
+  "dependsOn": [],
+  "variables": [],
+  "bareBones": {
+    "deleteFiles": [
+      "public/motorcycle-adventure.jpg",
+      "public/motorcycle-cruiser.jpg",
+      "public/motorcycle-sport.jpg",
+      "public/motorcycle-supersport.jpg"
+    ]
+  }
+}

package/examples/marketing/package.json

@@ -0,0 +1,14 @@
+{
+  "dependencies": {
+    "@tanstack/ai": "0.2.2",
+    "@tanstack/ai-anthropic": "0.2.0",
+    "@tanstack/ai-client": "0.2.2",
+    "@tanstack/ai-react": "0.2.2",
+    "@tanstack/react-ai-devtools": "0.2.1",
+    "@tanstack/react-store": "^0.8.0",
+    "@tanstack/store": "^0.8.0",
+    "highlight.js": "^11.11.1",
+    "streamdown": "^2.1.0",
+    "zod": "^4.3.6"
+  }
+}

package/examples/resume/README.md

@@ -0,0 +1,82 @@
+# Resume Example
+
+A professional resume template built with TanStack Start and content-collections for Netlify deployment.
+
+## Features
+
+- **Content Collections**: Work experience and education managed as markdown files
+- **Skills Filter**: Interactive sidebar to filter jobs by skills/technologies
+- **Beautiful UI**: Modern design with shadcn/ui components
+- **SSR Ready**: Full server-side rendering with TanStack Start
+
+## Project Structure
+
+```
+├── content/
+│   ├── jobs/              # Work experience entries
+│   └── education/         # Education entries
+├── src/
+│   ├── components/
+│   │   └── ui/            # Shadcn UI components
+│   │       ├── badge.tsx
+│   │       ├── card.tsx
+│   │       ├── checkbox.tsx
+│   │       ├── hover-card.tsx
+│   │       └── separator.tsx
+│   ├── lib/
+│   │   └── utils.ts       # Utility functions
+│   └── routes/
+│       ├── __root.tsx     # Root layout
+│       └── index.tsx      # Resume page
+└── public/
+    └── headshot-on-white.jpg
+```
+
+## Adding Work Experience
+
+Create a new markdown file in `content/jobs/` with the following frontmatter:
+
+```markdown
+---
+jobTitle: Your Job Title
+company: Company Name
+location: City, State
+startDate: 2024-01-01
+endDate: 2024-12-31  # Optional - omit for current position
+summary: Brief summary of your role
+tags:
+  - React
+  - TypeScript
+  - Web Development
+---
+
+Detailed description of your responsibilities and achievements...
+```
+
+## Adding Education
+
+Create a new markdown file in `content/education/`:
+
+```markdown
+---
+school: School Name
+summary: Degree or Program Name
+startDate: 2020-01-01
+endDate: 2024-01-01
+tags:
+  - Relevant
+  - Skills
+---
+
+Details about your education...
+```
+
+## Development
+
+```bash
+# Start development server
+npm run dev
+
+# Build for production
+npm run build
+```

package/examples/resume/assets/content/education/code-school.md

@@ -0,0 +1,17 @@
+---
+school: Code School
+summary: Full Stack Development
+startDate: 2020-01-01
+endDate: 2020-12-31
+tags:
+  [
+    "Full Stack Development",
+    "JavaScript",
+    "React",
+    "Node.js",
+    "Express",
+    "MongoDB",
+  ]
+---
+
+Completed a comprehensive full stack development course covering JavaScript, React, Node.js, Express, and MongoDB. Gained hands-on experience with modern web development frameworks and databases while building a full stack application.

package/examples/resume/assets/content/jobs/freelance.md.ejs

@@ -0,0 +1,13 @@
+<% if (addOnOption.project?.bareBones) { ignoreFile() } %>---
+jobTitle: Frontend Development Consultant
+company: Freelance
+location: Remote
+startDate: 2020-01-01
+endDate: 2020-12-31
+summary: Independent frontend development consultant working with multiple clients on web applications and sites
+description:
+tags:
+  ["React", "TypeScript", "Frontend Development", "JavaScript", "CSS", "HTML"]
+---
+
+Provided expert frontend development services to various clients, specializing in React, TypeScript, and modern web technologies. Delivered responsive and performant web applications while maintaining high code quality and best practices.

package/examples/resume/assets/content/jobs/initech-junior.md

@@ -0,0 +1,20 @@
+---
+jobTitle: Junior Frontend Developer
+company: IniTech
+location: Remote
+startDate: 2021-01-01
+endDate: 2021-12-31
+summary: Junior frontend developer working on React-based web applications using modern development practices
+description:
+tags:
+  [
+    "React",
+    "TypeScript",
+    "Frontend Development",
+    "JavaScript",
+    "TanStack",
+    "Web Development",
+  ]
+---
+
+Worked as a junior frontend developer at IniTech, contributing to React-based web applications. Collaborated with the development team to implement responsive user interfaces, integrate REST APIs, and maintain code quality. Gained hands-on experience with modern frontend technologies and development workflows while working on production applications.

package/examples/resume/assets/content/jobs/initech-lead.md.ejs

@@ -0,0 +1,29 @@
+<% if (addOnOption.project?.bareBones) { ignoreFile() } %>---
+jobTitle: Frontend Team Lead
+company: IniTech
+location: Remote
+startDate: 2022-01-01
+endDate: 2022-12-31
+summary: Led a cross-functional team of three engineers in developing and maintaining IniTech's marketing platform, driving technical decisions and implementing modern development practices
+description:
+tags:
+  [
+    "React",
+    "TypeScript",
+    "Team Leadership",
+    "Frontend Architecture",
+    "Technical Leadership",
+    "Project Management",
+    "TanStack",
+    "Web Development",
+  ]
+---
+
+Led the development and maintenance of IniTech's marketing platform as Frontend Team Lead, managing a cross-functional team of three engineers including a backend developer and a DevOps engineer. Key achievements and responsibilities included:
+
+- Architected and implemented a modern React-based marketing platform using TypeScript and TanStack, resulting in a 40% improvement in page load times
+- Managed and mentored a team of three engineers, conducting regular code reviews, sprint planning, and technical guidance
+- Collaborated with marketing stakeholders to define and implement new features while maintaining high code quality and performance standards
+- Established CI/CD pipelines and development workflows in partnership with DevOps, reducing deployment time by 60%
+- Coordinated with the backend developer to design and implement RESTful APIs, ensuring seamless integration between frontend and backend systems
+- Introduced modern development practices including automated testing, component documentation, and performance monitoring

package/examples/resume/assets/content/jobs/initrode-senior.md.ejs

@@ -0,0 +1,28 @@
+<% if (addOnOption.project?.bareBones) { ignoreFile() } %>---
+jobTitle: Senior Frontend Developer
+company: Initrode
+location: Remote
+startDate: 2024-01-01
+summary: Developed and architected real-time data visualization features for Initrode's enterprise dashboard platform, implementing a robust WebSocket layer and optimizing performance for large-scale data streams
+description:
+tags:
+  [
+    "React",
+    "TypeScript",
+    "WebSockets",
+    "Real-time Data",
+    "System Architecture",
+    "Performance Optimization",
+    "TanStack",
+    "Web Development",
+  ]
+---
+
+Served as a Senior Frontend Developer on Initrode's Dashboard team, focusing on building high-performance, real-time data visualization features for enterprise clients. Key achievements and responsibilities included:
+
+- Designed and implemented a WebSocket-based real-time data transport layer, enabling live updates for dashboard components with sub-100ms latency
+- Architected and developed a modular dashboard framework using React and TypeScript, supporting dynamic widget composition and real-time data streams
+- Optimized frontend performance for handling large-scale data sets, implementing efficient data structures and virtualization techniques that improved rendering performance by 65%
+- Built reusable charting and visualization components using D3.js and TanStack libraries, supporting real-time updates and complex data transformations
+- Implemented client-side data caching and state management strategies, reducing server load by 40% while maintaining data consistency
+- Developed automated testing suites for WebSocket connections and real-time data flow, achieving 90% test coverage for critical paths

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

@@ -0,0 +1,36 @@
+import { defineCollection, defineConfig } from '@content-collections/core'
+import { z } from 'zod'
+
+const jobs = defineCollection({
+  name: 'jobs',
+  directory: 'content/jobs',
+  include: '**/*.md',
+  schema: z.object({
+    jobTitle: z.string(),
+    summary: z.string(),
+    startDate: z.string(),
+    endDate: z.string().optional(),
+    company: z.string(),
+    location: z.string(),
+    tags: z.array(z.string()),
+    content: z.string(),
+  }),
+})
+
+const education = defineCollection({
+  name: 'education',
+  directory: 'content/education',
+  include: '**/*.md',
+  schema: z.object({
+    school: z.string(),
+    summary: z.string(),
+    startDate: z.string(),
+    endDate: z.string().optional(),
+    tags: z.array(z.string()),
+    content: z.string(),
+  }),
+})
+
+export default defineConfig({
+  collections: [jobs, education],
+})

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

@@ -0,0 +1,33 @@
+import { Link } from '@tanstack/react-router'
+import { Briefcase } from 'lucide-react'
+import HeaderNav from './HeaderNav'
+import { showResumeAssistant } from './ResumeAssistant'
+
+interface HeaderProps {
+  children?: React.ReactNode
+}
+
+export default function Header({ children }: HeaderProps) {
+  const handleToggleAssistant = () => {
+    showResumeAssistant.setState((prev) => !prev)
+  }
+
+  return (
+    <header className="p-4 flex items-center justify-between bg-gray-800 text-white shadow-lg">
+      <nav className="flex items-center gap-4">{children ?? <HeaderNav />}</nav>
+      <div className="flex items-center gap-4">
+        <Link to="/" className="text-xl font-semibold">
+          Netlify TanStack Start
+        </Link>
+        <button
+          onClick={handleToggleAssistant}
+          className="flex items-center gap-2 px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 transition-colors shadow-md hover:shadow-lg"
+          title="Toggle Resume Assistant"
+        >
+          <Briefcase className="w-5 h-5" />
+          <span className="text-sm font-medium">AI Assistant</span>
+        </button>
+      </div>
+    </header>
+  )
+}