Inital
This commit is contained in:
58
src/routes/__root.tsx
Normal file
58
src/routes/__root.tsx
Normal file
@@ -0,0 +1,58 @@
|
||||
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: 'TanStack Start Starter',
|
||||
},
|
||||
],
|
||||
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>
|
||||
)
|
||||
}
|
||||
10
src/routes/demo/api.names.ts
Normal file
10
src/routes/demo/api.names.ts
Normal file
@@ -0,0 +1,10 @@
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
import { json } from '@tanstack/react-start'
|
||||
|
||||
export const Route = createFileRoute('/demo/api/names')({
|
||||
server: {
|
||||
handlers: {
|
||||
GET: () => json(['Alice', 'Bob', 'Charlie']),
|
||||
},
|
||||
},
|
||||
})
|
||||
44
src/routes/demo/start.api-request.tsx
Normal file
44
src/routes/demo/start.api-request.tsx
Normal file
@@ -0,0 +1,44 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
|
||||
function getNames() {
|
||||
return fetch('/demo/api/names').then((res) => res.json() as Promise<string[]>)
|
||||
}
|
||||
|
||||
export const Route = createFileRoute('/demo/start/api-request')({
|
||||
component: Home,
|
||||
})
|
||||
|
||||
function Home() {
|
||||
const [names, setNames] = useState<Array<string>>([])
|
||||
|
||||
useEffect(() => {
|
||||
getNames().then(setNames)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex items-center justify-center min-h-screen p-4 text-white"
|
||||
style={{
|
||||
backgroundColor: '#000',
|
||||
backgroundImage:
|
||||
'radial-gradient(ellipse 60% 60% at 0% 100%, #444 0%, #222 60%, #000 100%)',
|
||||
}}
|
||||
>
|
||||
<div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
|
||||
<h1 className="text-2xl mb-4">Start API Request Demo - Names List</h1>
|
||||
<ul className="mb-4 space-y-2">
|
||||
{names.map((name) => (
|
||||
<li
|
||||
key={name}
|
||||
className="bg-white/10 border border-white/20 rounded-lg p-3 backdrop-blur-sm shadow-md"
|
||||
>
|
||||
<span className="text-lg text-white">{name}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
109
src/routes/demo/start.server-funcs.tsx
Normal file
109
src/routes/demo/start.server-funcs.tsx
Normal file
@@ -0,0 +1,109 @@
|
||||
import fs from 'node:fs'
|
||||
import { useCallback, useState } from 'react'
|
||||
import { createFileRoute, useRouter } from '@tanstack/react-router'
|
||||
import { createServerFn } from '@tanstack/react-start'
|
||||
|
||||
/*
|
||||
const loggingMiddleware = createMiddleware().server(
|
||||
async ({ next, request }) => {
|
||||
console.log("Request:", request.url);
|
||||
return next();
|
||||
}
|
||||
);
|
||||
const loggedServerFunction = createServerFn({ method: "GET" }).middleware([
|
||||
loggingMiddleware,
|
||||
]);
|
||||
*/
|
||||
|
||||
const TODOS_FILE = 'todos.json'
|
||||
|
||||
async function readTodos() {
|
||||
return JSON.parse(
|
||||
await fs.promises.readFile(TODOS_FILE, 'utf-8').catch(() =>
|
||||
JSON.stringify(
|
||||
[
|
||||
{ id: 1, name: 'Get groceries' },
|
||||
{ id: 2, name: 'Buy a new phone' },
|
||||
],
|
||||
null,
|
||||
2,
|
||||
),
|
||||
),
|
||||
)
|
||||
}
|
||||
|
||||
const getTodos = createServerFn({
|
||||
method: 'GET',
|
||||
}).handler(async () => await readTodos())
|
||||
|
||||
const addTodo = createServerFn({ method: 'POST' })
|
||||
.inputValidator((d: string) => d)
|
||||
.handler(async ({ data }) => {
|
||||
const todos = await readTodos()
|
||||
todos.push({ id: todos.length + 1, name: data })
|
||||
await fs.promises.writeFile(TODOS_FILE, JSON.stringify(todos, null, 2))
|
||||
return todos
|
||||
})
|
||||
|
||||
export const Route = createFileRoute('/demo/start/server-funcs')({
|
||||
component: Home,
|
||||
loader: async () => await getTodos(),
|
||||
})
|
||||
|
||||
function Home() {
|
||||
const router = useRouter()
|
||||
let todos = Route.useLoaderData()
|
||||
|
||||
const [todo, setTodo] = useState('')
|
||||
|
||||
const submitTodo = useCallback(async () => {
|
||||
todos = await addTodo({ data: todo })
|
||||
setTodo('')
|
||||
router.invalidate()
|
||||
}, [addTodo, todo])
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex items-center justify-center min-h-screen bg-gradient-to-br from-zinc-800 to-black p-4 text-white"
|
||||
style={{
|
||||
backgroundImage:
|
||||
'radial-gradient(50% 50% at 20% 60%, #23272a 0%, #18181b 50%, #000000 100%)',
|
||||
}}
|
||||
>
|
||||
<div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
|
||||
<h1 className="text-2xl mb-4">Start Server Functions - Todo Example</h1>
|
||||
<ul className="mb-4 space-y-2">
|
||||
{todos?.map((t) => (
|
||||
<li
|
||||
key={t.id}
|
||||
className="bg-white/10 border border-white/20 rounded-lg p-3 backdrop-blur-sm shadow-md"
|
||||
>
|
||||
<span className="text-lg text-white">{t.name}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="flex flex-col gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={todo}
|
||||
onChange={(e) => setTodo(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
submitTodo()
|
||||
}
|
||||
}}
|
||||
placeholder="Enter a new todo..."
|
||||
className="w-full px-4 py-3 rounded-lg border border-white/20 bg-white/10 backdrop-blur-sm text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent"
|
||||
/>
|
||||
<button
|
||||
disabled={todo.trim().length === 0}
|
||||
onClick={submitTodo}
|
||||
className="bg-blue-500 hover:bg-blue-600 disabled:bg-blue-500/50 disabled:cursor-not-allowed text-white font-bold py-3 px-4 rounded-lg transition-colors"
|
||||
>
|
||||
Add todo
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
41
src/routes/demo/start.ssr.data-only.tsx
Normal file
41
src/routes/demo/start.ssr.data-only.tsx
Normal file
@@ -0,0 +1,41 @@
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
import { getPunkSongs } from '@/data/demo.punk-songs'
|
||||
|
||||
export const Route = createFileRoute('/demo/start/ssr/data-only')({
|
||||
ssr: 'data-only',
|
||||
component: RouteComponent,
|
||||
loader: async () => await getPunkSongs(),
|
||||
})
|
||||
|
||||
function RouteComponent() {
|
||||
const punkSongs = Route.useLoaderData()
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex items-center justify-center min-h-screen bg-gradient-to-br from-zinc-800 to-black p-4 text-white"
|
||||
style={{
|
||||
backgroundImage:
|
||||
'radial-gradient(50% 50% at 20% 60%, #1a1a1a 0%, #0a0a0a 50%, #000000 100%)',
|
||||
}}
|
||||
>
|
||||
<div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
|
||||
<h1 className="text-3xl font-bold mb-6 text-pink-400">
|
||||
Data Only SSR - Punk Songs
|
||||
</h1>
|
||||
<ul className="space-y-3">
|
||||
{punkSongs.map((song) => (
|
||||
<li
|
||||
key={song.id}
|
||||
className="bg-white/10 border border-white/20 rounded-lg p-4 backdrop-blur-sm shadow-md"
|
||||
>
|
||||
<span className="text-lg text-white font-medium">
|
||||
{song.name}
|
||||
</span>
|
||||
<span className="text-white/60"> - {song.artist}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
40
src/routes/demo/start.ssr.full-ssr.tsx
Normal file
40
src/routes/demo/start.ssr.full-ssr.tsx
Normal file
@@ -0,0 +1,40 @@
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
import { getPunkSongs } from '@/data/demo.punk-songs'
|
||||
|
||||
export const Route = createFileRoute('/demo/start/ssr/full-ssr')({
|
||||
component: RouteComponent,
|
||||
loader: async () => await getPunkSongs(),
|
||||
})
|
||||
|
||||
function RouteComponent() {
|
||||
const punkSongs = Route.useLoaderData()
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex items-center justify-center min-h-screen bg-gradient-to-br from-zinc-800 to-black p-4 text-white"
|
||||
style={{
|
||||
backgroundImage:
|
||||
'radial-gradient(50% 50% at 20% 60%, #1a1a1a 0%, #0a0a0a 50%, #000000 100%)',
|
||||
}}
|
||||
>
|
||||
<div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
|
||||
<h1 className="text-3xl font-bold mb-6 text-purple-400">
|
||||
Full SSR - Punk Songs
|
||||
</h1>
|
||||
<ul className="space-y-3">
|
||||
{punkSongs.map((song) => (
|
||||
<li
|
||||
key={song.id}
|
||||
className="bg-white/10 border border-white/20 rounded-lg p-4 backdrop-blur-sm shadow-md"
|
||||
>
|
||||
<span className="text-lg text-white font-medium">
|
||||
{song.name}
|
||||
</span>
|
||||
<span className="text-white/60"> - {song.artist}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
43
src/routes/demo/start.ssr.index.tsx
Normal file
43
src/routes/demo/start.ssr.index.tsx
Normal file
@@ -0,0 +1,43 @@
|
||||
import { createFileRoute, Link } from '@tanstack/react-router'
|
||||
|
||||
export const Route = createFileRoute('/demo/start/ssr/')({
|
||||
component: RouteComponent,
|
||||
})
|
||||
|
||||
function RouteComponent() {
|
||||
return (
|
||||
<div
|
||||
className="flex items-center justify-center min-h-screen bg-gradient-to-br from-zinc-900 to-black p-4 text-white"
|
||||
style={{
|
||||
backgroundImage:
|
||||
'radial-gradient(50% 50% at 20% 60%, #1a1a1a 0%, #0a0a0a 50%, #000000 100%)',
|
||||
}}
|
||||
>
|
||||
<div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
|
||||
<h1 className="text-4xl font-bold mb-8 text-center bg-gradient-to-r from-pink-500 via-purple-500 to-green-400 bg-clip-text text-transparent">
|
||||
SSR Demos
|
||||
</h1>
|
||||
<div className="flex flex-col gap-4">
|
||||
<Link
|
||||
to="/demo/start/ssr/spa-mode"
|
||||
className="text-2xl font-bold py-6 px-8 rounded-lg bg-gradient-to-r from-pink-600 to-pink-500 hover:from-pink-700 hover:to-pink-600 text-white text-center shadow-lg transform transition-all hover:scale-105 hover:shadow-pink-500/50 border-2 border-pink-400"
|
||||
>
|
||||
SPA Mode
|
||||
</Link>
|
||||
<Link
|
||||
to="/demo/start/ssr/full-ssr"
|
||||
className="text-2xl font-bold py-6 px-8 rounded-lg bg-gradient-to-r from-purple-600 to-purple-500 hover:from-purple-700 hover:to-purple-600 text-white text-center shadow-lg transform transition-all hover:scale-105 hover:shadow-purple-500/50 border-2 border-purple-400"
|
||||
>
|
||||
Full SSR
|
||||
</Link>
|
||||
<Link
|
||||
to="/demo/start/ssr/data-only"
|
||||
className="text-2xl font-bold py-6 px-8 rounded-lg bg-gradient-to-r from-green-500 to-emerald-500 hover:from-green-600 hover:to-emerald-600 text-white text-center shadow-lg transform transition-all hover:scale-105 hover:shadow-green-500/50 border-2 border-green-400"
|
||||
>
|
||||
Data Only
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
47
src/routes/demo/start.ssr.spa-mode.tsx
Normal file
47
src/routes/demo/start.ssr.spa-mode.tsx
Normal file
@@ -0,0 +1,47 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
import { getPunkSongs } from '@/data/demo.punk-songs'
|
||||
|
||||
export const Route = createFileRoute('/demo/start/ssr/spa-mode')({
|
||||
ssr: false,
|
||||
component: RouteComponent,
|
||||
})
|
||||
|
||||
function RouteComponent() {
|
||||
const [punkSongs, setPunkSongs] = useState<
|
||||
Awaited<ReturnType<typeof getPunkSongs>>
|
||||
>([])
|
||||
|
||||
useEffect(() => {
|
||||
getPunkSongs().then(setPunkSongs)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex items-center justify-center min-h-screen bg-gradient-to-br from-zinc-800 to-black p-4 text-white"
|
||||
style={{
|
||||
backgroundImage:
|
||||
'radial-gradient(50% 50% at 20% 60%, #1a1a1a 0%, #0a0a0a 50%, #000000 100%)',
|
||||
}}
|
||||
>
|
||||
<div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
|
||||
<h1 className="text-3xl font-bold mb-6 text-green-400">
|
||||
SPA Mode - Punk Songs
|
||||
</h1>
|
||||
<ul className="space-y-3">
|
||||
{punkSongs.map((song) => (
|
||||
<li
|
||||
key={song.id}
|
||||
className="bg-white/10 border border-white/20 rounded-lg p-4 backdrop-blur-sm shadow-md"
|
||||
>
|
||||
<span className="text-lg text-white font-medium">
|
||||
{song.name}
|
||||
</span>
|
||||
<span className="text-white/60"> - {song.artist}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
118
src/routes/index.tsx
Normal file
118
src/routes/index.tsx
Normal file
@@ -0,0 +1,118 @@
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
import {
|
||||
Zap,
|
||||
Server,
|
||||
Route as RouteIcon,
|
||||
Shield,
|
||||
Waves,
|
||||
Sparkles,
|
||||
} from 'lucide-react'
|
||||
|
||||
export const Route = createFileRoute('/')({ component: App })
|
||||
|
||||
function App() {
|
||||
const features = [
|
||||
{
|
||||
icon: <Zap className="w-12 h-12 text-cyan-400" />,
|
||||
title: 'Powerful Server Functions',
|
||||
description:
|
||||
'Write server-side code that seamlessly integrates with your client components. Type-safe, secure, and simple.',
|
||||
},
|
||||
{
|
||||
icon: <Server className="w-12 h-12 text-cyan-400" />,
|
||||
title: 'Flexible Server Side Rendering',
|
||||
description:
|
||||
'Full-document SSR, streaming, and progressive enhancement out of the box. Control exactly what renders where.',
|
||||
},
|
||||
{
|
||||
icon: <RouteIcon className="w-12 h-12 text-cyan-400" />,
|
||||
title: 'API Routes',
|
||||
description:
|
||||
'Build type-safe API endpoints alongside your application. No separate backend needed.',
|
||||
},
|
||||
{
|
||||
icon: <Shield className="w-12 h-12 text-cyan-400" />,
|
||||
title: 'Strongly Typed Everything',
|
||||
description:
|
||||
'End-to-end type safety from server to client. Catch errors before they reach production.',
|
||||
},
|
||||
{
|
||||
icon: <Waves className="w-12 h-12 text-cyan-400" />,
|
||||
title: 'Full Streaming Support',
|
||||
description:
|
||||
'Stream data from server to client progressively. Perfect for AI applications and real-time updates.',
|
||||
},
|
||||
{
|
||||
icon: <Sparkles className="w-12 h-12 text-cyan-400" />,
|
||||
title: 'Next Generation Ready',
|
||||
description:
|
||||
'Built from the ground up for modern web applications. Deploy anywhere JavaScript runs.',
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900">
|
||||
<section className="relative py-20 px-6 text-center overflow-hidden">
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-cyan-500/10 via-blue-500/10 to-purple-500/10"></div>
|
||||
<div className="relative max-w-5xl mx-auto">
|
||||
<div className="flex items-center justify-center gap-6 mb-6">
|
||||
<img
|
||||
src="/tanstack-circle-logo.png"
|
||||
alt="TanStack Logo"
|
||||
className="w-24 h-24 md:w-32 md:h-32"
|
||||
/>
|
||||
<h1 className="text-6xl md:text-7xl font-black text-white [letter-spacing:-0.08em]">
|
||||
<span className="text-gray-300">TANSTACK</span>{' '}
|
||||
<span className="bg-gradient-to-r from-cyan-400 to-blue-400 bg-clip-text text-transparent">
|
||||
START
|
||||
</span>
|
||||
</h1>
|
||||
</div>
|
||||
<p className="text-2xl md:text-3xl text-gray-300 mb-4 font-light">
|
||||
The framework for next generation AI applications
|
||||
</p>
|
||||
<p className="text-lg text-gray-400 max-w-3xl mx-auto mb-8">
|
||||
Full-stack framework powered by TanStack Router for React and Solid.
|
||||
Build modern applications with server functions, streaming, and type
|
||||
safety.
|
||||
</p>
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<a
|
||||
href="https://tanstack.com/start"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="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"
|
||||
>
|
||||
Documentation
|
||||
</a>
|
||||
<p className="text-gray-400 text-sm mt-2">
|
||||
Begin your TanStack Start journey by editing{' '}
|
||||
<code className="px-2 py-1 bg-slate-700 rounded text-cyan-400">
|
||||
/src/routes/index.tsx
|
||||
</code>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="py-16 px-6 max-w-7xl mx-auto">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{features.map((feature, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="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"
|
||||
>
|
||||
<div className="mb-4">{feature.icon}</div>
|
||||
<h3 className="text-xl font-semibold text-white mb-3">
|
||||
{feature.title}
|
||||
</h3>
|
||||
<p className="text-gray-400 leading-relaxed">
|
||||
{feature.description}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user