|
6 | 6 | "/.vscode/settings.json": "{\n \"files.watcherExclude\": {\n \"**/routeTree.gen.ts\": true\n },\n \"search.exclude\": {\n \"**/routeTree.gen.ts\": true\n },\n \"files.readonlyInclude\": {\n \"**/routeTree.gen.ts\": true\n }\n}\n", |
7 | 7 | "/public/manifest.json": "{\n \"short_name\": \"TanStack App\",\n \"name\": \"Create TanStack App Sample\",\n \"icons\": [\n {\n \"src\": \"favicon.ico\",\n \"sizes\": \"64x64 32x32 24x24 16x16\",\n \"type\": \"image/x-icon\"\n },\n {\n \"src\": \"logo192.png\",\n \"type\": \"image/png\",\n \"sizes\": \"192x192\"\n },\n {\n \"src\": \"logo512.png\",\n \"type\": \"image/png\",\n \"sizes\": \"512x512\"\n }\n ],\n \"start_url\": \".\",\n \"display\": \"standalone\",\n \"theme_color\": \"#000000\",\n \"background_color\": \"#ffffff\"\n}\n", |
8 | 8 | "/public/robots.txt": "# https://www.robotstxt.org/robotstxt.html\nUser-agent: *\nDisallow:\n", |
9 | | - "/src/components/Header.tsx": "import { Link } from '@tanstack/solid-router'\n\nimport { createSignal } from 'solid-js'\nimport {\n ChevronDown,\n ChevronRight,\n Globe,\n Home,\n Layers,\n Menu,\n X,\n} from 'lucide-solid'\n\nexport default function Header() {\n const [isOpen, setIsOpen] = createSignal(false)\n const [groupedExpanded, setGroupedExpanded] = createSignal<\n Record<string, boolean>\n >({})\n\n return (\n <>\n <header class=\"p-4 flex items-center bg-gray-800 text-white shadow-lg\">\n <button\n onClick={() => setIsOpen(true)}\n class=\"p-2 hover:bg-gray-700 rounded-lg transition-colors\"\n aria-label=\"Open menu\"\n >\n <Menu size={24} />\n </button>\n <h1 class=\"ml-4 text-xl font-semibold\">\n <Link to=\"/\">\n <img\n src=\"/tanstack-word-logo-white.svg\"\n alt=\"TanStack Logo\"\n class=\"h-10\"\n />\n </Link>\n </h1>\n </header>\n\n <aside\n class={`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 ${\n isOpen() ? 'translate-x-0' : '-translate-x-full'\n }`}\n >\n <div class=\"flex items-center justify-between p-4 border-b border-gray-700\">\n <h2 class=\"text-xl font-bold\">Navigation</h2>\n <button\n onClick={() => setIsOpen(false)}\n class=\"p-2 hover:bg-gray-800 rounded-lg transition-colors\"\n aria-label=\"Close menu\"\n >\n <X size={24} />\n </button>\n </div>\n\n <nav class=\"flex-1 p-4 overflow-y-auto\">\n <Link\n to=\"/\"\n onClick={() => setIsOpen(false)}\n class=\"flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2\"\n activeProps={{\n class:\n 'flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2',\n }}\n >\n <Home size={20} />\n <span class=\"font-medium\">Home</span>\n </Link>\n\n {/* Demo Links Start */}\n\n <Link\n to=\"/demo/start/server-funcs\"\n onClick={() => setIsOpen(false)}\n class=\"flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2\"\n activeProps={{\n class:\n 'flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2',\n }}\n >\n <Globe size={20} />\n <span class=\"font-medium\">Start - Server Functions</span>\n </Link>\n\n {/* Demo Links End */}\n </nav>\n </aside>\n </>\n )\n}\n", |
| 9 | + "/src/components/Header.tsx": "import { Link } from '@tanstack/solid-router'\n\nimport { createSignal } from 'solid-js'\nimport {\n ChevronDown,\n ChevronRight,\n Globe,\n House,\n Layers,\n Menu,\n X,\n} from 'lucide-solid'\n\nexport default function Header() {\n const [isOpen, setIsOpen] = createSignal(false)\n const [groupedExpanded, setGroupedExpanded] = createSignal<\n Record<string, boolean>\n >({})\n\n return (\n <>\n <header class=\"p-4 flex items-center bg-gray-800 text-white shadow-lg\">\n <button\n onClick={() => setIsOpen(true)}\n class=\"p-2 hover:bg-gray-700 rounded-lg transition-colors\"\n aria-label=\"Open menu\"\n >\n <Menu size={24} />\n </button>\n <h1 class=\"ml-4 text-xl font-semibold\">\n <Link to=\"/\">\n <img\n src=\"/tanstack-word-logo-white.svg\"\n alt=\"TanStack Logo\"\n class=\"h-10\"\n />\n </Link>\n </h1>\n </header>\n\n <aside\n class={`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 ${\n isOpen() ? 'translate-x-0' : '-translate-x-full'\n }`}\n >\n <div class=\"flex items-center justify-between p-4 border-b border-gray-700\">\n <h2 class=\"text-xl font-bold\">Navigation</h2>\n <button\n onClick={() => setIsOpen(false)}\n class=\"p-2 hover:bg-gray-800 rounded-lg transition-colors\"\n aria-label=\"Close menu\"\n >\n <X size={24} />\n </button>\n </div>\n\n <nav class=\"flex-1 p-4 overflow-y-auto\">\n <Link\n to=\"/\"\n onClick={() => setIsOpen(false)}\n class=\"flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2\"\n activeProps={{\n class:\n 'flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2',\n }}\n >\n <Home size={20} />\n <span class=\"font-medium\">Home</span>\n </Link>\n\n {/* Demo Links Start */}\n\n <Link\n to=\"/demo/start/server-funcs\"\n onClick={() => setIsOpen(false)}\n class=\"flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2\"\n activeProps={{\n class:\n 'flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2',\n }}\n >\n <Globe size={20} />\n <span class=\"font-medium\">Start - Server Functions</span>\n </Link>\n\n {/* Demo Links End */}\n </nav>\n </aside>\n </>\n )\n}\n", |
10 | 10 | "/src/router.tsx": "import { createRouter } from '@tanstack/solid-router'\n\n// Import the generated route tree\nimport { routeTree } from './routeTree.gen'\n\n// Create a new router instance\nexport const getRouter = () => {\n const router = createRouter({\n routeTree,\n scrollRestoration: true,\n })\n return router\n}\n", |
11 | | - "/src/routes/__root.tsx": "import {\n HeadContent,\n Outlet,\n Scripts,\n createRootRouteWithContext,\n} from '@tanstack/solid-router'\nimport { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'\n\nimport Header from '../components/Header'\n\nimport { HydrationScript } from 'solid-js/web'\n\nimport styleCss from '../styles.css?url'\n\nexport const Route = createRootRouteWithContext()({\n head: () => ({\n links: [{ rel: 'stylesheet', href: styleCss }],\n }),\n shellComponent: RootComponent,\n})\n\nfunction RootComponent() {\n return (\n <html>\n <head>\n <HydrationScript />\n <HeadContent />\n </head>\n <body>\n <Suspense>\n <Header />\n\n <Outlet />\n <TanStackRouterDevtools />\n </Suspense>\n <Scripts />\n </body>\n </html>\n )\n}\n", |
| 11 | + "/src/routes/__root.tsx": "import {\n HeadContent,\n Outlet,\n Scripts,\n createRootRouteWithContext,\n} from '@tanstack/solid-router'\nimport { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'\n\nimport Header from '../components/Header'\n\nimport styleCss from '../styles.css?url'\n\nexport const Route = createRootRouteWithContext()({\n head: () => ({\n links: [{ rel: 'stylesheet', href: styleCss }],\n }),\n shellComponent: RootComponent,\n})\n\nfunction RootComponent() {\n return (\n <>\n <HeadContent />\n\n <Header />\n\n <Outlet />\n <TanStackRouterDevtools />\n\n <Scripts />\n </>\n )\n}\n", |
12 | 12 | "/src/routes/demo.start.server-funcs.tsx": "import * as fs from 'fs'\nimport { createFileRoute, useRouter } from '@tanstack/solid-router'\nimport { createServerFn } from '@tanstack/solid-start'\n\nconst filePath = 'count.txt'\n\nasync function readCount() {\n return parseInt(\n await fs.promises.readFile(filePath, 'utf-8').catch(() => '0'),\n )\n}\n\nconst getCount = createServerFn({\n method: 'GET',\n}).handler(() => {\n return readCount()\n})\n\nconst updateCount = createServerFn({ method: 'POST' })\n .inputValidator((d: number) => d)\n .handler(async ({ data }) => {\n const count = await readCount()\n await fs.promises.writeFile(filePath, `${count + data}`)\n })\n\nexport const Route = createFileRoute('/demo/start/server-funcs')({\n component: Home,\n loader: async () => await getCount(),\n})\n\nfunction Home() {\n const router = useRouter()\n const state = Route.useLoaderData()\n\n return (\n <div class=\"p-4\">\n <button\n onClick={() => {\n updateCount({ data: 1 }).then(() => {\n router.invalidate()\n })\n }}\n class=\"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded\"\n >\n Add 1 to {state()}?\n </button>\n </div>\n )\n}\n", |
13 | 13 | "/src/routes/index.tsx": "import { createFileRoute } from '@tanstack/solid-router'\nimport { For } from 'solid-js'\nimport {\n Zap,\n Server,\n Route as RouteIcon,\n Shield,\n Waves,\n Sparkles,\n} from 'lucide-solid'\n\nexport const Route = createFileRoute('/')({ component: App })\n\nfunction App() {\n const features = [\n {\n icon: <Zap class=\"w-12 h-12 text-cyan-400\" />,\n title: 'Powerful Server Functions',\n description:\n 'Write server-side code that seamlessly integrates with your client components. Type-safe, secure, and simple.',\n },\n {\n icon: <Server class=\"w-12 h-12 text-cyan-400\" />,\n title: 'Flexible Server Side Rendering',\n description:\n 'Full-document SSR, streaming, and progressive enhancement out of the box. Control exactly what renders where.',\n },\n {\n icon: <RouteIcon class=\"w-12 h-12 text-cyan-400\" />,\n title: 'API Routes',\n description:\n 'Build type-safe API endpoints alongside your application. No separate backend needed.',\n },\n {\n icon: <Shield class=\"w-12 h-12 text-cyan-400\" />,\n title: 'Strongly Typed Everything',\n description:\n 'End-to-end type safety from server to client. Catch errors before they reach production.',\n },\n {\n icon: <Waves class=\"w-12 h-12 text-cyan-400\" />,\n title: 'Full Streaming Support',\n description:\n 'Stream data from server to client progressively. Perfect for AI applications and real-time updates.',\n },\n {\n icon: <Sparkles class=\"w-12 h-12 text-cyan-400\" />,\n title: 'Next Generation Ready',\n description:\n 'Built from the ground up for modern web applications. Deploy anywhere JavaScript runs.',\n },\n ]\n\n return (\n <div class=\"min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900\">\n <section class=\"relative py-20 px-6 text-center overflow-hidden\">\n <div class=\"absolute inset-0 bg-gradient-to-r from-cyan-500/10 via-blue-500/10 to-purple-500/10\"></div>\n <div class=\"relative max-w-5xl mx-auto\">\n <div class=\"flex items-center justify-center gap-6 mb-6\">\n <img\n src=\"/tanstack-circle-logo.png\"\n alt=\"TanStack Logo\"\n class=\"w-24 h-24 md:w-32 md:h-32\"\n />\n <h1 class=\"text-6xl md:text-7xl font-black text-white [letter-spacing:-0.08em]\">\n <span class=\"text-gray-300\">TANSTACK</span>{' '}\n <span class=\"bg-gradient-to-r from-cyan-400 to-blue-400 bg-clip-text text-transparent\">\n START\n </span>\n </h1>\n </div>\n <p class=\"text-2xl md:text-3xl text-gray-300 mb-4 font-light\">\n The framework for next generation AI applications\n </p>\n <p class=\"text-lg text-gray-400 max-w-3xl mx-auto mb-8\">\n Full-stack framework powered by TanStack Router for React and Solid.\n Build modern applications with server functions, streaming, and type\n safety.\n </p>\n <div class=\"flex flex-col items-center gap-4\">\n <a\n href=\"https://tanstack.com/start\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n class=\"px-8 py-3 bg-cyan-500 hover:bg-cyan-600 text-white font-semibold rounded-lg transition-colors shadow-lg shadow-cyan-500/50\"\n >\n Documentation\n </a>\n <p class=\"text-gray-400 text-sm mt-2\">\n Begin your TanStack Start journey by editing{' '}\n <code class=\"px-2 py-1 bg-slate-700 rounded text-cyan-400\">\n /src/routes/index.tsx\n </code>\n </p>\n </div>\n </div>\n </section>\n\n <section class=\"py-16 px-6 max-w-7xl mx-auto\">\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n <For each={features}>\n {(feature) => (\n <div class=\"bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-xl p-6 hover:border-cyan-500/50 transition-all duration-300 hover:shadow-lg hover:shadow-cyan-500/10\">\n <div class=\"mb-4\">{feature.icon}</div>\n <h3 class=\"text-xl font-semibold text-white mb-3\">\n {feature.title}\n </h3>\n <p class=\"text-gray-400 leading-relaxed\">\n {feature.description}\n </p>\n </div>\n )}\n </For>\n </div>\n </section>\n </div>\n )\n}\n", |
14 | 14 | "/src/styles.css": "@import \"tailwindcss\";\n\nbody {\n @apply m-0;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\",\n \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, \"Courier New\",\n monospace;\n}\n", |
|
0 commit comments