kaddidlehopper 0.1.0

package/project/base/src/components/HeaderNav.tsx.ejs

@@ -0,0 +1,179 @@
+import { Link } from '@tanstack/react-router'
+<% for(const integration of integrations.filter(i => i.type === 'header-user')) { %>
+import <%= integration.jsName %> from "<%= relativePath(integration.path) %>";
+<% } %><% if (tailwind) {
+const icons = new Set([
+  "Menu",
+  "X",
+  "Home",
+])
+
+const hasRoutesWithChildren = addOns.some(a => a.routes?.some(r => r.children));
+
+if (hasRoutesWithChildren) {
+  icons.add("ChevronDown");
+  icons.add("ChevronRight");
+}
+
+for(const addOn of addOns) {
+  for(const route of (addOn?.routes||[])?.filter(r => r.url && r.name)) {
+    icons.add( route.icon || "Globe");
+  }
+}
+%>
+import { useState } from 'react';
+import {
+  <%= Array.from(icons).sort().join(", ") %>
+} from "lucide-react";
+<% } %>
+
+export default function HeaderNav() {
+<% if (tailwind) {
+const menusWithChildren = addOns.filter(a => a.routes?.some(r => r.children));
+const userHeaders = integrations.filter(i => i.type === 'header-user');
+%>
+  const [isOpen, setIsOpen] = useState(false);
+  <% if (menusWithChildren.length > 0) { %>const [groupedExpanded, setGroupedExpanded] = useState<Record<string, boolean>>({});
+  <% } %>
+
+  return (
+    <>
+      <header className="p-4 flex items-center bg-gray-800 text-white shadow-lg">
+        <button
+          onClick={() => setIsOpen(true)}
+          className="p-2 hover:bg-gray-700 rounded-lg transition-colors"
+          aria-label="Open menu"
+        >
+          <Menu size={24} />
+        </button>
+        <h1 className="ml-4 text-xl font-semibold">
+          <Link to="/">
+            <img
+              src="/tanstack-word-logo-white.svg"
+              alt="TanStack Logo"
+              className="h-10"
+            />
+          </Link>
+        </h1>
+      </header>
+
+      <aside
+        className={`fixed top-0 left-0 h-full w-80 bg-gray-900 text-white shadow-2xl z-50 transform transition-transform duration-300 ease-in-out flex flex-col ${
+          isOpen ? "translate-x-0" : "-translate-x-full"
+        }`}
+      >
+        <div className="flex items-center justify-between p-4 border-b border-gray-700">
+          <h2 className="text-xl font-bold">Navigation</h2>
+          <button
+            onClick={() => setIsOpen(false)}
+            className="p-2 hover:bg-gray-800 rounded-lg transition-colors"
+            aria-label="Close menu"
+          >
+            <X size={24} />
+          </button>
+        </div>
+
+        <nav className="flex-1 p-4 overflow-y-auto">
+          <Link
+            to="/"
+            onClick={() => setIsOpen(false)}
+            className="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2"
+            activeProps={{
+              className:
+                "flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2",
+            }}
+          >
+            <Home size={20} />
+            <span className="font-medium">Home</span>
+          </Link>
+
+          {/* Demo Links Start */}
+          <% for(const addOn of addOns) {
+            for(const route of (addOn?.routes||[])?.filter(r => r.url && r.name)) {
+              if (route.children) { %>
+                <div className="flex flex-row justify-between">
+                  <Link to="<%= route.url %>"
+                    onClick={() => setIsOpen(false)}
+                    className="flex-1 flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2"
+                    activeProps={{
+                      className:
+                        "flex-1 flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2",
+                    }}
+                  >
+                    <<%= route.icon || "Globe" %> size={20} />
+                    <span className="font-medium"><%= route.name %></span>  
+                  </Link>
+                  <button
+                    className="p-2 hover:bg-gray-800 rounded-lg transition-colors"
+                    onClick={() => setGroupedExpanded(prev => ({ ...prev, <%= route.jsName %>: !prev.<%= route.jsName %> }))}>
+                    {groupedExpanded.<%= route.jsName %> ? <ChevronDown size={20} /> : <ChevronRight size={20} />}
+                  </button>
+                </div>
+                {groupedExpanded.<%= route.jsName %> && (
+                  <div className="flex flex-col ml-4">
+                    <% for(const child of route.children) { %>
+                      <Link
+                        to="<%= child.url %>"
+                        onClick={() => setIsOpen(false)}
+                        className="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2"
+                        activeProps={{
+                          className:
+                            "flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2",
+                        }}
+                      >
+                        <<%= child.icon || "Globe" %> size={20} />
+                        <span className="font-medium"><%= child.name %></span>
+                      </Link>
+                    <% } %>
+                </div>
+                )}
+            <% } else { %>
+              <Link
+                to="<%= route.url %>"
+                onClick={() => setIsOpen(false)}
+                className="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2"
+                activeProps={{
+                  className:
+                    "flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2",
+                }}
+              >
+                <<%= route.icon || "Globe" %> size={20} />
+                <span className="font-medium"><%= route.name %></span>
+              </Link>
+          <% } } } %>
+          {/* Demo Links End */}
+        </nav>
+
+        <% if (userHeaders.length > 0) { %>
+        <div className="p-4 border-t border-gray-700 bg-gray-800 flex flex-col gap-2">
+          <% for(const integration of userHeaders) { %>
+            <<%= integration.jsName %> />
+          <% } %>
+        </div>
+        <% } %>
+      </aside>
+    </>
+  );
+<% } else { %>
+  return (
+    <header className="p-2 flex gap-2 bg-white text-black justify-between">
+      <nav className="flex flex-row">
+        <div className="px-2 font-bold">
+          <Link to="/">Home</Link>
+        </div>
+<% for(const addOn of addOns) {
+  for(const route of (addOn?.routes||[])?.filter(r => r.url && r.name)) { %>
+<div className="px-2 font-bold"><Link to="<%= route.url %>"><%= route.name %></Link></div>
+<% } } %>
+      </nav>
+<% if (integrations.filter(i => i.type === 'header-user').length > 0) { %>
+      <div>
+<% for(const integration of integrations.filter(i => i.type === 'header-user')) { %>
+  <<%= integration.jsName %> />
+<% } %>
+      </div>
+<% } %>
+    </header>
+  )
+<% } %>
+}

package/project/base/src/router.tsx

@@ -0,0 +1,15 @@
+import { createRouter } from '@tanstack/react-router'
+
+// Import the generated route tree
+import { routeTree } from './routeTree.gen'
+
+// Create a new router instance
+export const getRouter = () => {
+  const router = createRouter({
+    routeTree,
+    scrollRestoration: true,
+    defaultPreloadStaleTime: 0,
+  })
+
+  return router
+}

package/project/base/src/routes/__root.tsx

@@ -0,0 +1,57 @@
+import { HeadContent, Scripts, createRootRoute } from '@tanstack/react-router'
+import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
+import { TanStackDevtools } from '@tanstack/react-devtools'
+
+import Header from '../components/Header'
+
+import appCss from '../styles.css?url'
+
+export const Route = createRootRoute({
+  head: () => ({
+    meta: [
+      {
+        charSet: 'utf-8',
+      },
+      {
+        name: 'viewport',
+        content: 'width=device-width, initial-scale=1',
+      },
+      {
+        title: 'Netlify TanStack Start',
+      },
+    ],
+    links: [
+      {
+        rel: 'stylesheet',
+        href: appCss,
+      },
+    ],
+  }),
+  shellComponent: RootDocument,
+})
+
+function RootDocument({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <HeadContent />
+      </head>
+      <body>
+        <Header />
+        {children}
+        <TanStackDevtools
+          config={{
+            position: 'bottom-right',
+          }}
+          plugins={[
+            {
+              name: 'Tanstack Router',
+              render: <TanStackRouterDevtoolsPanel />,
+            },
+          ]}
+        />
+        <Scripts />
+      </body>
+    </html>
+  )
+}

package/project/base/src/routes/index.tsx

@@ -0,0 +1,48 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/')({
+  component: Home,
+})
+
+function Home() {
+  return (
+    <div className="min-h-screen bg-linear-to-br from-teal-900 via-emerald-800 to-cyan-900 flex items-center justify-center">
+      <div className="text-center">
+        <h1 className="text-6xl md:text-8xl font-black text-white mb-6 tracking-tight">
+          Hello from{' '}
+          <span className="bg-linear-to-r from-teal-400 to-cyan-300 bg-clip-text text-transparent">
+            Netlify
+          </span>
+        </h1>
+        <p className="text-xl md:text-2xl text-teal-100/80 mb-8 max-w-2xl mx-auto px-4">
+          Your TanStack Start application is ready to deploy
+        </p>
+        <div className="flex flex-col sm:flex-row gap-4 justify-center px-4">
+          <a
+            href="https://tanstack.com/start"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="px-8 py-3 bg-teal-500 hover:bg-teal-600 text-white font-semibold rounded-lg transition-colors shadow-lg shadow-teal-500/30"
+          >
+            TanStack Start Docs
+          </a>
+          <a
+            href="https://docs.netlify.com"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="px-8 py-3 bg-white/10 hover:bg-white/20 text-white font-semibold rounded-lg transition-colors border border-white/20"
+          >
+            Netlify Docs
+          </a>
+        </div>
+        <p className="mt-12 text-teal-200/60 text-sm">
+          Edit{' '}
+          <code className="px-2 py-1 bg-black/30 rounded text-teal-300">
+            src/routes/index.tsx
+          </code>{' '}
+          to get started
+        </p>
+      </div>
+    </div>
+  )
+}

package/project/base/src/styles.css

@@ -0,0 +1,15 @@
+@import "tailwindcss";
+
+body {
+  @apply m-0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
+}

package/project/base/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "include": ["**/*.ts", "**/*.tsx"],
+  "compilerOptions": {
+    "target": "ES2022",
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": ["vite/client"],
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": false,
+    "noEmit": true,
+
+    /* Linting */
+    "skipLibCheck": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

package/project/base/vite.config.ts.ejs

@@ -0,0 +1,25 @@
+import { defineConfig } from 'vite'
+import { devtools } from '@tanstack/devtools-vite'
+import { tanstackStart } from '@tanstack/react-start/plugin/vite'
+import viteReact from '@vitejs/plugin-react'
+import viteTsConfigPaths from 'vite-tsconfig-paths'
+import tailwindcss from '@tailwindcss/vite'
+import netlify from '@netlify/vite-plugin-tanstack-start'
+<% for(const integration of integrations.filter(i => i.type === 'vite-plugin')) { %><%- integrationImportContent(integration) %>
+<% } %>  
+
+const config = defineConfig({
+  plugins: [
+    devtools(),
+    <% for(const integration of integrations.filter(i => i.type === 'vite-plugin')) { %><%- integrationImportCode(integration) %>,<% } %> ,
+    viteTsConfigPaths({
+      projects: ['./tsconfig.json'],
+    }),
+    tailwindcss(),
+    netlify(),
+    tanstackStart(),
+    viteReact(),
+  ],
+})
+
+export default config

package/project/packages.json

@@ -0,0 +1,22 @@
+{
+  "typescript": {
+    "devDependencies": {
+      "@types/react": "^19.2.0",
+      "@types/node": "^22.10.2",
+      "@types/react-dom": "^19.2.0",
+      "typescript": "^5.7.2"
+    }
+  },
+  "tailwindcss": {
+    "dependencies": {
+      "@tailwindcss/vite": "^4.0.6",
+      "tailwindcss": "^4.0.6",
+      "lucide-react": "^0.545.0"
+    }
+  },
+  "file-router": {
+    "dependencies": {
+      "@tanstack/router-plugin": "^1.132.0"
+    }
+  }
+}