@tanstack/create 0.62.1 → 0.63.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +24 -0
- package/dist/create-app.js +3 -1
- package/dist/frameworks/react/add-ons/ai/package.json +3 -3
- package/dist/frameworks/react/add-ons/apollo-client/package.json +2 -2
- package/dist/frameworks/react/add-ons/better-auth/package.json +1 -1
- package/dist/frameworks/react/add-ons/clerk/package.json +1 -1
- package/dist/frameworks/react/add-ons/convex/package.json +2 -2
- package/dist/frameworks/react/add-ons/db/package.json +3 -3
- package/dist/frameworks/react/add-ons/drizzle/package.json.ejs +5 -5
- package/dist/frameworks/react/add-ons/form/package.json +2 -2
- package/dist/frameworks/react/add-ons/mcp/package.json +2 -2
- package/dist/frameworks/react/add-ons/neon/package.json +2 -2
- package/dist/frameworks/react/add-ons/oRPC/package.json +7 -7
- package/dist/frameworks/react/add-ons/paraglide/package.json +1 -1
- package/dist/frameworks/react/add-ons/posthog/package.json +2 -2
- package/dist/frameworks/react/add-ons/prisma/package.json.ejs +7 -7
- package/dist/frameworks/react/add-ons/sentry/package.json +1 -1
- package/dist/frameworks/react/add-ons/shadcn/package.json +1 -1
- package/dist/frameworks/react/add-ons/store/package.json +3 -3
- package/dist/frameworks/react/add-ons/storybook/package.json +2 -2
- package/dist/frameworks/react/add-ons/strapi/package.json +2 -2
- package/dist/frameworks/react/add-ons/t3env/package.json +2 -2
- package/dist/frameworks/react/add-ons/tRPC/package.json +4 -4
- package/dist/frameworks/react/add-ons/table/package.json +3 -3
- package/dist/frameworks/react/add-ons/tanstack-query/package.json +2 -2
- package/dist/frameworks/react/add-ons/workos/package.json +2 -2
- package/dist/frameworks/react/examples/events/package.json +3 -3
- package/dist/frameworks/react/examples/resume/package.json +2 -2
- package/dist/frameworks/react/hosts/cloudflare/package.json.ejs +2 -2
- package/dist/frameworks/react/hosts/netlify/package.json +1 -1
- package/dist/frameworks/react/project/base/package.json +17 -20
- package/dist/frameworks/react/project/base/src/components/Header.tsx.ejs +0 -7
- package/dist/frameworks/react/project/base/src/routes/about.tsx.ejs +3 -8
- package/dist/frameworks/react/project/base/src/routes/index.tsx.ejs +7 -7
- package/dist/frameworks/react/project/base/src/styles.css.ejs +0 -18
- package/dist/frameworks/react/project/base/tsconfig.json.ejs +0 -1
- package/dist/frameworks/react/project/base/vite.config.ts.ejs +0 -2
- package/dist/frameworks/react/toolchains/biome/package.json +1 -1
- package/dist/frameworks/react/toolchains/eslint/package.json +2 -2
- package/dist/frameworks/solid/add-ons/better-auth/package.json +1 -1
- package/dist/frameworks/solid/add-ons/convex/package.json +3 -3
- package/dist/frameworks/solid/add-ons/form/package.json +1 -1
- package/dist/frameworks/solid/add-ons/sentry/package.json +1 -1
- package/dist/frameworks/solid/add-ons/store/package.json +2 -2
- package/dist/frameworks/solid/add-ons/strapi/package.json +2 -2
- package/dist/frameworks/solid/add-ons/t3env/package.json +2 -2
- package/dist/frameworks/solid/add-ons/tanstack-query/package.json +2 -2
- package/dist/frameworks/solid/examples/tanchat/assets/ai-streaming-server/package.json +3 -3
- package/dist/frameworks/solid/examples/tanchat/package.json +2 -2
- package/dist/frameworks/solid/hosts/cloudflare/package.json.ejs +2 -2
- package/dist/frameworks/solid/hosts/netlify/package.json +1 -1
- package/dist/frameworks/solid/project/base/package.json +11 -10
- package/dist/frameworks/solid/project/base/src/components/Header.tsx.ejs +51 -138
- package/dist/frameworks/solid/project/base/src/routes/__root.tsx.ejs +2 -5
- package/dist/frameworks/solid/project/base/src/routes/about.tsx.ejs +22 -0
- package/dist/frameworks/solid/project/base/src/routes/index.tsx.ejs +59 -94
- package/dist/frameworks/solid/project/base/src/styles.css.ejs +187 -7
- package/dist/frameworks/solid/project/base/vite.config.ts.ejs +1 -2
- package/dist/frameworks/solid/toolchains/biome/package.json +1 -1
- package/dist/frameworks/solid/toolchains/eslint/package.json +2 -2
- package/dist/npm-resolver.js +56 -0
- package/dist/package-json.js +25 -3
- package/dist/types/npm-resolver.d.ts +18 -0
- package/dist/types/package-json.d.ts +1 -5
- package/package.json +1 -1
- package/src/create-app.ts +3 -1
- package/src/frameworks/react/add-ons/ai/package.json +3 -3
- package/src/frameworks/react/add-ons/apollo-client/package.json +2 -2
- package/src/frameworks/react/add-ons/better-auth/package.json +1 -1
- package/src/frameworks/react/add-ons/clerk/package.json +1 -1
- package/src/frameworks/react/add-ons/convex/package.json +2 -2
- package/src/frameworks/react/add-ons/db/package.json +3 -3
- package/src/frameworks/react/add-ons/drizzle/package.json.ejs +5 -5
- package/src/frameworks/react/add-ons/form/package.json +2 -2
- package/src/frameworks/react/add-ons/mcp/package.json +2 -2
- package/src/frameworks/react/add-ons/neon/package.json +2 -2
- package/src/frameworks/react/add-ons/oRPC/package.json +7 -7
- package/src/frameworks/react/add-ons/paraglide/package.json +1 -1
- package/src/frameworks/react/add-ons/posthog/package.json +2 -2
- package/src/frameworks/react/add-ons/prisma/package.json.ejs +7 -7
- package/src/frameworks/react/add-ons/sentry/package.json +1 -1
- package/src/frameworks/react/add-ons/shadcn/package.json +1 -1
- package/src/frameworks/react/add-ons/store/package.json +3 -3
- package/src/frameworks/react/add-ons/storybook/package.json +2 -2
- package/src/frameworks/react/add-ons/strapi/package.json +2 -2
- package/src/frameworks/react/add-ons/t3env/package.json +2 -2
- package/src/frameworks/react/add-ons/tRPC/package.json +4 -4
- package/src/frameworks/react/add-ons/table/package.json +3 -3
- package/src/frameworks/react/add-ons/tanstack-query/package.json +2 -2
- package/src/frameworks/react/add-ons/workos/package.json +2 -2
- package/src/frameworks/react/examples/events/package.json +3 -3
- package/src/frameworks/react/examples/resume/package.json +2 -2
- package/src/frameworks/react/hosts/cloudflare/package.json.ejs +2 -2
- package/src/frameworks/react/hosts/netlify/package.json +1 -1
- package/src/frameworks/react/project/base/package.json +17 -20
- package/src/frameworks/react/project/base/src/components/Header.tsx.ejs +0 -7
- package/src/frameworks/react/project/base/src/routes/about.tsx.ejs +3 -8
- package/src/frameworks/react/project/base/src/routes/index.tsx.ejs +7 -7
- package/src/frameworks/react/project/base/src/styles.css.ejs +0 -18
- package/src/frameworks/react/project/base/tsconfig.json.ejs +0 -1
- package/src/frameworks/react/project/base/vite.config.ts.ejs +0 -2
- package/src/frameworks/react/toolchains/biome/package.json +1 -1
- package/src/frameworks/react/toolchains/eslint/package.json +2 -2
- package/src/frameworks/solid/add-ons/better-auth/package.json +1 -1
- package/src/frameworks/solid/add-ons/convex/package.json +3 -3
- package/src/frameworks/solid/add-ons/form/package.json +1 -1
- package/src/frameworks/solid/add-ons/sentry/package.json +1 -1
- package/src/frameworks/solid/add-ons/store/package.json +2 -2
- package/src/frameworks/solid/add-ons/strapi/package.json +2 -2
- package/src/frameworks/solid/add-ons/t3env/package.json +2 -2
- package/src/frameworks/solid/add-ons/tanstack-query/package.json +2 -2
- package/src/frameworks/solid/examples/tanchat/assets/ai-streaming-server/package.json +3 -3
- package/src/frameworks/solid/examples/tanchat/package.json +2 -2
- package/src/frameworks/solid/hosts/cloudflare/package.json.ejs +2 -2
- package/src/frameworks/solid/hosts/netlify/package.json +1 -1
- package/src/frameworks/solid/project/base/package.json +11 -10
- package/src/frameworks/solid/project/base/src/components/Header.tsx.ejs +51 -138
- package/src/frameworks/solid/project/base/src/routes/__root.tsx.ejs +2 -5
- package/src/frameworks/solid/project/base/src/routes/about.tsx.ejs +22 -0
- package/src/frameworks/solid/project/base/src/routes/index.tsx.ejs +59 -94
- package/src/frameworks/solid/project/base/src/styles.css.ejs +187 -7
- package/src/frameworks/solid/project/base/vite.config.ts.ejs +1 -2
- package/src/frameworks/solid/toolchains/biome/package.json +1 -1
- package/src/frameworks/solid/toolchains/eslint/package.json +2 -2
- package/src/npm-resolver.ts +65 -0
- package/src/package-json.ts +34 -3
- package/tests/package-json.test.ts +32 -0
- package/dist/frameworks/react/project/base/content/blog/fifth-post.mdx.ejs +0 -54
- package/dist/frameworks/react/project/base/content/blog/first-post.md.ejs +0 -47
- package/dist/frameworks/react/project/base/content/blog/fourth-post.md.ejs +0 -42
- package/dist/frameworks/react/project/base/content/blog/second-post.mdx.ejs +0 -46
- package/dist/frameworks/react/project/base/content/blog/third-post.md.ejs +0 -49
- package/dist/frameworks/react/project/base/content-collections.ts.ejs +0 -37
- package/dist/frameworks/react/project/base/public/images/lagoon-1.svg +0 -13
- package/dist/frameworks/react/project/base/public/images/lagoon-2.svg +0 -12
- package/dist/frameworks/react/project/base/public/images/lagoon-3.svg +0 -12
- package/dist/frameworks/react/project/base/public/images/lagoon-4.svg +0 -12
- package/dist/frameworks/react/project/base/public/images/lagoon-5.svg +0 -12
- package/dist/frameworks/react/project/base/public/images/lagoon-about.svg +0 -14
- package/dist/frameworks/react/project/base/public/tanstack-circle-logo.png +0 -0
- package/dist/frameworks/react/project/base/public/tanstack-word-logo-white.svg +0 -1
- package/dist/frameworks/react/project/base/src/components/MdxCallout.tsx.ejs +0 -16
- package/dist/frameworks/react/project/base/src/components/MdxMetrics.tsx.ejs +0 -23
- package/dist/frameworks/react/project/base/src/lib/site.ts.ejs +0 -4
- package/dist/frameworks/react/project/base/src/routes/blog.$slug.tsx.ejs +0 -71
- package/dist/frameworks/react/project/base/src/routes/blog.index.tsx.ejs +0 -93
- package/dist/frameworks/react/project/base/src/routes/rss[.]xml.ts.ejs +0 -35
- package/src/frameworks/react/project/base/content/blog/fifth-post.mdx.ejs +0 -54
- package/src/frameworks/react/project/base/content/blog/first-post.md.ejs +0 -47
- package/src/frameworks/react/project/base/content/blog/fourth-post.md.ejs +0 -42
- package/src/frameworks/react/project/base/content/blog/second-post.mdx.ejs +0 -46
- package/src/frameworks/react/project/base/content/blog/third-post.md.ejs +0 -49
- package/src/frameworks/react/project/base/content-collections.ts.ejs +0 -37
- package/src/frameworks/react/project/base/public/images/lagoon-1.svg +0 -13
- package/src/frameworks/react/project/base/public/images/lagoon-2.svg +0 -12
- package/src/frameworks/react/project/base/public/images/lagoon-3.svg +0 -12
- package/src/frameworks/react/project/base/public/images/lagoon-4.svg +0 -12
- package/src/frameworks/react/project/base/public/images/lagoon-5.svg +0 -12
- package/src/frameworks/react/project/base/public/images/lagoon-about.svg +0 -14
- package/src/frameworks/react/project/base/public/tanstack-circle-logo.png +0 -0
- package/src/frameworks/react/project/base/public/tanstack-word-logo-white.svg +0 -1
- package/src/frameworks/react/project/base/src/components/MdxCallout.tsx.ejs +0 -16
- package/src/frameworks/react/project/base/src/components/MdxMetrics.tsx.ejs +0 -23
- package/src/frameworks/react/project/base/src/lib/site.ts.ejs +0 -4
- package/src/frameworks/react/project/base/src/routes/blog.$slug.tsx.ejs +0 -71
- package/src/frameworks/react/project/base/src/routes/blog.index.tsx.ejs +0 -93
- package/src/frameworks/react/project/base/src/routes/rss[.]xml.ts.ejs +0 -35
|
@@ -1,155 +1,68 @@
|
|
|
1
|
-
|
|
1
|
+
import { Link } from '@tanstack/solid-router'
|
|
2
2
|
<% for(const integration of integrations.filter(i => i.type === 'header-user')) { %>
|
|
3
|
-
import <%= integration.jsName %> from
|
|
4
|
-
<% }
|
|
5
|
-
const icons = new Set([
|
|
6
|
-
"Menu",
|
|
7
|
-
"X",
|
|
8
|
-
"Home",
|
|
9
|
-
"Globe",
|
|
10
|
-
])
|
|
3
|
+
import <%= integration.jsName %> from '<%= relativePath(integration.path) %>'
|
|
4
|
+
<% } %>
|
|
11
5
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
6
|
+
<%
|
|
7
|
+
const demoRoutes = [];
|
|
8
|
+
for (const addOn of addOns) {
|
|
9
|
+
for (const route of (addOn?.routes || []).filter((r) => r.url && r.name)) {
|
|
10
|
+
demoRoutes.push({ url: route.url, name: route.name });
|
|
11
|
+
for (const child of route.children || []) {
|
|
12
|
+
if (child?.url && child?.name) {
|
|
13
|
+
demoRoutes.push({ url: child.url, name: child.name });
|
|
14
|
+
}
|
|
18
15
|
}
|
|
19
16
|
}
|
|
20
17
|
}
|
|
18
|
+
const userHeaders = integrations.filter((i) => i.type === 'header-user');
|
|
21
19
|
%>
|
|
22
|
-
import { createSignal } from 'solid-js';
|
|
23
|
-
import {
|
|
24
|
-
<%= Array.from(icons).sort().join(", ") %>
|
|
25
|
-
} from "lucide-solid";
|
|
26
20
|
|
|
27
21
|
export default function Header() {
|
|
28
|
-
<%
|
|
29
|
-
const hasNestedRouteGroups = addOns.some(a => a.routes?.some(r => r.children?.length));
|
|
30
|
-
const userHeaders = integrations.filter(i => i.type === 'header-user');
|
|
31
|
-
%>
|
|
32
|
-
const [isOpen, setIsOpen] = createSignal(false);
|
|
33
|
-
<% if (hasNestedRouteGroups) { %>
|
|
34
|
-
const [groupedExpanded, setGroupedExpanded] = createSignal<Record<string, boolean>>({});
|
|
35
|
-
<% } %>
|
|
36
|
-
|
|
37
22
|
return (
|
|
38
|
-
|
|
39
|
-
<
|
|
40
|
-
<
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
>
|
|
45
|
-
<Menu size={24} />
|
|
46
|
-
</button>
|
|
47
|
-
<h1 class="ml-4 text-xl font-semibold">
|
|
48
|
-
<Link to="/">
|
|
49
|
-
<img
|
|
50
|
-
src="/logo192.png"
|
|
51
|
-
alt="TanStack Logo"
|
|
52
|
-
class="h-10"
|
|
53
|
-
/>
|
|
23
|
+
<header class="site-header px-4">
|
|
24
|
+
<nav class="page-wrap nav-shell">
|
|
25
|
+
<h2 class="m-0 flex-shrink-0 text-base font-semibold tracking-tight">
|
|
26
|
+
<Link to="/" class="brand-pill">
|
|
27
|
+
<span class="brand-dot" />
|
|
28
|
+
TanStack Start
|
|
54
29
|
</Link>
|
|
55
|
-
</
|
|
56
|
-
</header>
|
|
30
|
+
</h2>
|
|
57
31
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
}`}
|
|
62
|
-
>
|
|
63
|
-
<div class="flex items-center justify-between p-4 border-b border-gray-700">
|
|
64
|
-
<h2 class="text-xl font-bold">Navigation</h2>
|
|
65
|
-
<button
|
|
66
|
-
onClick={() => setIsOpen(false)}
|
|
67
|
-
class="p-2 hover:bg-gray-800 rounded-lg transition-colors"
|
|
68
|
-
aria-label="Close menu"
|
|
69
|
-
>
|
|
70
|
-
<X size={24} />
|
|
71
|
-
</button>
|
|
32
|
+
<div class="ml-auto flex items-center gap-2">
|
|
33
|
+
<% for (const integration of userHeaders) { %><<%= integration.jsName %> />
|
|
34
|
+
<% } %>
|
|
72
35
|
</div>
|
|
73
36
|
|
|
74
|
-
<
|
|
75
|
-
<Link
|
|
76
|
-
|
|
77
|
-
onClick={() => setIsOpen(false)}
|
|
78
|
-
class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2"
|
|
79
|
-
activeProps={{
|
|
80
|
-
class:
|
|
81
|
-
"flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2",
|
|
82
|
-
}}
|
|
83
|
-
>
|
|
84
|
-
<Home size={20} />
|
|
85
|
-
<span class="font-medium">Home</span>
|
|
37
|
+
<div class="order-3 flex w-full flex-wrap items-center gap-x-4 gap-y-1 pb-1 text-sm font-semibold sm:order-2 sm:w-auto sm:flex-nowrap sm:pb-0">
|
|
38
|
+
<Link to="/" class="nav-link" activeProps={{ class: 'nav-link is-active' }}>
|
|
39
|
+
Home
|
|
86
40
|
</Link>
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
<button
|
|
105
|
-
class="p-2 hover:bg-gray-800 rounded-lg transition-colors"
|
|
106
|
-
onClick={() => setGroupedExpanded(prev => ({ ...prev, <%= route.jsName %>: !prev.<%= route.jsName %> }))}>
|
|
107
|
-
{groupedExpanded().<%= route.jsName %> ? <ChevronDown size={20} /> : <ChevronRight size={20} />}
|
|
108
|
-
</button>
|
|
109
|
-
</div>
|
|
110
|
-
{groupedExpanded().<%= route.jsName %> && (
|
|
111
|
-
<div class="flex flex-col ml-4">
|
|
112
|
-
<% for(const child of route.children) { %>
|
|
113
|
-
<Link
|
|
114
|
-
to="<%= child.url %>"
|
|
115
|
-
onClick={() => setIsOpen(false)}
|
|
116
|
-
class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2"
|
|
117
|
-
activeProps={{
|
|
118
|
-
class:
|
|
119
|
-
"flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2",
|
|
120
|
-
}}
|
|
121
|
-
>
|
|
122
|
-
<<%= child.icon || "Globe" %> size={20} />
|
|
123
|
-
<span class="font-medium"><%= child.name %></span>
|
|
124
|
-
</Link>
|
|
125
|
-
<% } %>
|
|
126
|
-
</div>
|
|
127
|
-
)}
|
|
128
|
-
<% } else { %>
|
|
129
|
-
<Link
|
|
130
|
-
to="<%= route.url %>"
|
|
131
|
-
onClick={() => setIsOpen(false)}
|
|
132
|
-
class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2"
|
|
133
|
-
activeProps={{
|
|
134
|
-
class:
|
|
135
|
-
"flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2",
|
|
136
|
-
}}
|
|
41
|
+
<Link to="/about" class="nav-link" activeProps={{ class: 'nav-link is-active' }}>
|
|
42
|
+
About
|
|
43
|
+
</Link>
|
|
44
|
+
<a
|
|
45
|
+
href="https://tanstack.com/start/latest/docs/framework/solid/overview"
|
|
46
|
+
target="_blank"
|
|
47
|
+
rel="noreferrer"
|
|
48
|
+
class="nav-link"
|
|
49
|
+
>
|
|
50
|
+
Docs
|
|
51
|
+
</a>
|
|
52
|
+
<% if (demoRoutes.length > 0) { %><details class="relative w-full sm:w-auto">
|
|
53
|
+
<summary class="nav-link list-none cursor-pointer">Demos</summary>
|
|
54
|
+
<div class="mt-2 min-w-56 rounded-xl border border-[var(--line)] bg-[var(--header-bg)] p-2 shadow-lg sm:absolute sm:right-0">
|
|
55
|
+
<% for (const route of demoRoutes) { %><a
|
|
56
|
+
href="<%= route.url %>"
|
|
57
|
+
class="block rounded-lg px-3 py-2 text-sm text-[var(--sea-ink-soft)] no-underline transition hover:bg-[var(--link-bg-hover)] hover:text-[var(--sea-ink)]"
|
|
137
58
|
>
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
</nav>
|
|
144
|
-
|
|
145
|
-
<% if (userHeaders.length > 0) { %>
|
|
146
|
-
<div class="p-4 border-t border-gray-700 bg-gray-800 flex flex-col gap-2">
|
|
147
|
-
<% for(const integration of userHeaders) { %>
|
|
148
|
-
<<%= integration.jsName %> />
|
|
149
|
-
<% } %>
|
|
59
|
+
<%= route.name %>
|
|
60
|
+
</a>
|
|
61
|
+
<% } %>
|
|
62
|
+
</div>
|
|
63
|
+
</details><% } %>
|
|
150
64
|
</div>
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
);
|
|
65
|
+
</nav>
|
|
66
|
+
</header>
|
|
67
|
+
)
|
|
155
68
|
}
|
|
@@ -27,8 +27,7 @@ import "@fontsource/inter/400.css"
|
|
|
27
27
|
import { HydrationScript } from 'solid-js/web'
|
|
28
28
|
import { Suspense } from 'solid-js'
|
|
29
29
|
|
|
30
|
-
|
|
31
|
-
<% } %>
|
|
30
|
+
import Header from '../components/Header'
|
|
32
31
|
<% for(const addOn of addOns) {
|
|
33
32
|
for(const init of addOn.main?.initialize || []) { %>
|
|
34
33
|
<%- init %>
|
|
@@ -52,9 +51,7 @@ function RootComponent() {
|
|
|
52
51
|
<body>
|
|
53
52
|
<HeadContent />
|
|
54
53
|
<Suspense>
|
|
55
|
-
|
|
56
|
-
<Header />
|
|
57
|
-
<% } %>
|
|
54
|
+
<Header />
|
|
58
55
|
<Outlet />
|
|
59
56
|
<TanStackRouterDevtools />
|
|
60
57
|
<% for(const integration of integrations.filter(i => i.type === 'layout')) { %>
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { createFileRoute } from '@tanstack/solid-router'
|
|
2
|
+
|
|
3
|
+
export const Route = createFileRoute('/about')({
|
|
4
|
+
component: About,
|
|
5
|
+
})
|
|
6
|
+
|
|
7
|
+
function About() {
|
|
8
|
+
return (
|
|
9
|
+
<main class="page-wrap px-4 py-12">
|
|
10
|
+
<section class="island-shell rounded-2xl p-6 sm:p-8">
|
|
11
|
+
<p class="island-kicker mb-2">About</p>
|
|
12
|
+
<h1 class="display-title mb-3 text-4xl font-bold text-[var(--sea-ink)] sm:text-5xl">
|
|
13
|
+
A small starter with room to grow.
|
|
14
|
+
</h1>
|
|
15
|
+
<p class="m-0 max-w-3xl text-base leading-8 text-[var(--sea-ink-soft)]">
|
|
16
|
+
TanStack Start gives you type-safe routing, server functions, and modern SSR defaults.
|
|
17
|
+
Use this as a clean foundation, then layer in your own routes, styling, and add-ons.
|
|
18
|
+
</p>
|
|
19
|
+
</section>
|
|
20
|
+
</main>
|
|
21
|
+
)
|
|
22
|
+
}
|
|
@@ -1,103 +1,68 @@
|
|
|
1
|
-
import { createFileRoute } from
|
|
2
|
-
import { For } from "solid-js"
|
|
3
|
-
import {
|
|
4
|
-
Zap, Server, Route as RouteIcon, Shield, Waves, Sparkles,
|
|
5
|
-
} from "lucide-solid";
|
|
1
|
+
import { createFileRoute } from '@tanstack/solid-router'
|
|
6
2
|
|
|
7
|
-
export const Route = createFileRoute(
|
|
3
|
+
export const Route = createFileRoute('/')({ component: App })
|
|
8
4
|
|
|
9
5
|
function App() {
|
|
10
|
-
const features = [
|
|
11
|
-
{
|
|
12
|
-
icon: <Zap class="w-12 h-12 text-cyan-400" />,
|
|
13
|
-
title: "Powerful Server Functions",
|
|
14
|
-
description: "Write server-side code that seamlessly integrates with your client components. Type-safe, secure, and simple.",
|
|
15
|
-
},
|
|
16
|
-
{
|
|
17
|
-
icon: <Server class="w-12 h-12 text-cyan-400" />,
|
|
18
|
-
title: "Flexible Server Side Rendering",
|
|
19
|
-
description: "Full-document SSR, streaming, and progressive enhancement out of the box. Control exactly what renders where.",
|
|
20
|
-
},
|
|
21
|
-
{
|
|
22
|
-
icon: <RouteIcon class="w-12 h-12 text-cyan-400" />,
|
|
23
|
-
title: "API Routes",
|
|
24
|
-
description: "Build type-safe API endpoints alongside your application. No separate backend needed.",
|
|
25
|
-
},
|
|
26
|
-
{
|
|
27
|
-
icon: <Shield class="w-12 h-12 text-cyan-400" />,
|
|
28
|
-
title: "Strongly Typed Everything",
|
|
29
|
-
description: "End-to-end type safety from server to client. Catch errors before they reach production.",
|
|
30
|
-
},
|
|
31
|
-
{
|
|
32
|
-
icon: <Waves class="w-12 h-12 text-cyan-400" />,
|
|
33
|
-
title: "Full Streaming Support",
|
|
34
|
-
description: "Stream data from server to client progressively. Perfect for AI applications and real-time updates.",
|
|
35
|
-
},
|
|
36
|
-
{
|
|
37
|
-
icon: <Sparkles class="w-12 h-12 text-cyan-400" />,
|
|
38
|
-
title: "Next Generation Ready",
|
|
39
|
-
description: "Built from the ground up for modern web applications. Deploy anywhere JavaScript runs.",
|
|
40
|
-
},
|
|
41
|
-
];
|
|
42
|
-
|
|
43
6
|
return (
|
|
44
|
-
<
|
|
45
|
-
<section class="relative
|
|
46
|
-
<div class="absolute
|
|
47
|
-
<div class="
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
href="https://tanstack.com/start"
|
|
72
|
-
target="_blank"
|
|
73
|
-
rel="noopener noreferrer"
|
|
74
|
-
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"
|
|
75
|
-
>
|
|
76
|
-
Documentation
|
|
77
|
-
</a>
|
|
78
|
-
<p class="text-gray-400 text-sm mt-2">
|
|
79
|
-
Begin your TanStack Start journey by editing{" "}
|
|
80
|
-
<code class="px-2 py-1 bg-slate-700 rounded text-cyan-400">
|
|
81
|
-
/src/routes/index.tsx
|
|
82
|
-
</code>
|
|
83
|
-
</p>
|
|
84
|
-
</div>
|
|
7
|
+
<main class="page-wrap px-4 pb-8 pt-14">
|
|
8
|
+
<section class="island-shell rise-in relative overflow-hidden rounded-[2rem] px-6 py-10 sm:px-10 sm:py-14">
|
|
9
|
+
<div class="pointer-events-none absolute -left-20 -top-24 h-56 w-56 rounded-full bg-[radial-gradient(circle,rgba(79,184,178,0.32),transparent_66%)]" />
|
|
10
|
+
<div class="pointer-events-none absolute -bottom-20 -right-20 h-56 w-56 rounded-full bg-[radial-gradient(circle,rgba(47,106,74,0.18),transparent_66%)]" />
|
|
11
|
+
<p class="island-kicker mb-3">TanStack Start Base Template</p>
|
|
12
|
+
<h1 class="display-title mb-5 max-w-3xl text-4xl leading-[1.02] font-bold tracking-tight text-[var(--sea-ink)] sm:text-6xl">
|
|
13
|
+
Start simple, ship quickly.
|
|
14
|
+
</h1>
|
|
15
|
+
<p class="mb-8 max-w-2xl text-base text-[var(--sea-ink-soft)] sm:text-lg">
|
|
16
|
+
This base starter intentionally keeps things light: two routes, clean structure,
|
|
17
|
+
and the essentials you need to build from scratch.
|
|
18
|
+
</p>
|
|
19
|
+
<div class="flex flex-wrap gap-3">
|
|
20
|
+
<a
|
|
21
|
+
href="/about"
|
|
22
|
+
class="rounded-full border border-[rgba(50,143,151,0.3)] bg-[rgba(79,184,178,0.14)] px-5 py-2.5 text-sm font-semibold text-[var(--lagoon-deep)] no-underline transition hover:-translate-y-0.5 hover:bg-[rgba(79,184,178,0.24)]"
|
|
23
|
+
>
|
|
24
|
+
About This Starter
|
|
25
|
+
</a>
|
|
26
|
+
<a
|
|
27
|
+
href="https://tanstack.com/router"
|
|
28
|
+
target="_blank"
|
|
29
|
+
rel="noopener noreferrer"
|
|
30
|
+
class="rounded-full border border-[rgba(23,58,64,0.2)] bg-white/50 px-5 py-2.5 text-sm font-semibold text-[var(--sea-ink)] no-underline transition hover:-translate-y-0.5 hover:border-[rgba(23,58,64,0.35)]"
|
|
31
|
+
>
|
|
32
|
+
Router Guide
|
|
33
|
+
</a>
|
|
85
34
|
</div>
|
|
86
35
|
</section>
|
|
87
36
|
|
|
88
|
-
<section class="
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
37
|
+
<section class="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
|
38
|
+
{[
|
|
39
|
+
['Type-Safe Routing', 'Routes and links stay in sync across every page.'],
|
|
40
|
+
['Server Functions', 'Call server code from your UI without creating API boilerplate.'],
|
|
41
|
+
['Streaming by Default', 'Ship progressively rendered responses for faster experiences.'],
|
|
42
|
+
['Tailwind Native', 'Design quickly with utility-first styling and reusable tokens.'],
|
|
43
|
+
].map(([title, desc], index) => (
|
|
44
|
+
<article
|
|
45
|
+
class="island-shell feature-card rise-in rounded-2xl p-5"
|
|
46
|
+
style={{ 'animation-delay': `${index * 90 + 80}ms` }}
|
|
47
|
+
>
|
|
48
|
+
<h2 class="mb-2 text-base font-semibold text-[var(--sea-ink)]">{title}</h2>
|
|
49
|
+
<p class="m-0 text-sm text-[var(--sea-ink-soft)]">{desc}</p>
|
|
50
|
+
</article>
|
|
51
|
+
))}
|
|
52
|
+
</section>
|
|
53
|
+
|
|
54
|
+
<section class="island-shell mt-8 rounded-2xl p-6">
|
|
55
|
+
<p class="island-kicker mb-2">Quick Start</p>
|
|
56
|
+
<ul class="m-0 list-disc space-y-2 pl-5 text-sm text-[var(--sea-ink-soft)]">
|
|
57
|
+
<li>Edit <code>src/routes/index.tsx</code> to customize the home page.</li>
|
|
58
|
+
<li>
|
|
59
|
+
Update <code>src/components/Header.tsx</code> for navigation and product links.
|
|
60
|
+
</li>
|
|
61
|
+
<li>
|
|
62
|
+
Add routes in <code>src/routes</code> and tweak visual tokens in <code>src/styles.css</code>.
|
|
63
|
+
</li>
|
|
64
|
+
</ul>
|
|
100
65
|
</section>
|
|
101
|
-
</
|
|
102
|
-
)
|
|
66
|
+
</main>
|
|
67
|
+
)
|
|
103
68
|
}
|
|
@@ -1,15 +1,195 @@
|
|
|
1
|
-
@import
|
|
1
|
+
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,700&family=Manrope:wght@400;500;600;700;800&display=swap');
|
|
2
|
+
@import 'tailwindcss';
|
|
3
|
+
|
|
4
|
+
:root {
|
|
5
|
+
--sea-ink: #173a40;
|
|
6
|
+
--sea-ink-soft: #416166;
|
|
7
|
+
--lagoon: #4fb8b2;
|
|
8
|
+
--lagoon-deep: #328f97;
|
|
9
|
+
--palm: #2f6a4a;
|
|
10
|
+
--sand: #e7f0e8;
|
|
11
|
+
--foam: #f3faf5;
|
|
12
|
+
--surface: rgba(255, 255, 255, 0.74);
|
|
13
|
+
--surface-strong: rgba(255, 255, 255, 0.9);
|
|
14
|
+
--line: rgba(23, 58, 64, 0.14);
|
|
15
|
+
--inset-glint: rgba(255, 255, 255, 0.82);
|
|
16
|
+
--kicker: rgba(47, 106, 74, 0.9);
|
|
17
|
+
--bg-base: #e7f3ec;
|
|
18
|
+
--header-bg: rgba(251, 255, 248, 0.84);
|
|
19
|
+
--chip-bg: rgba(255, 255, 255, 0.8);
|
|
20
|
+
--chip-line: rgba(47, 106, 74, 0.18);
|
|
21
|
+
--link-bg-hover: rgba(255, 255, 255, 0.9);
|
|
22
|
+
--hero-a: rgba(79, 184, 178, 0.36);
|
|
23
|
+
--hero-b: rgba(47, 106, 74, 0.2);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
* {
|
|
27
|
+
box-sizing: border-box;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
html,
|
|
31
|
+
body,
|
|
32
|
+
#app {
|
|
33
|
+
min-height: 100%;
|
|
34
|
+
}
|
|
2
35
|
|
|
3
36
|
body {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
37
|
+
margin: 0;
|
|
38
|
+
color: var(--sea-ink);
|
|
39
|
+
font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
|
|
40
|
+
background-color: var(--bg-base);
|
|
41
|
+
background:
|
|
42
|
+
radial-gradient(1100px 620px at -8% -10%, var(--hero-a), transparent 58%),
|
|
43
|
+
radial-gradient(1050px 620px at 112% -12%, var(--hero-b), transparent 62%),
|
|
44
|
+
radial-gradient(720px 380px at 50% 115%, rgba(79, 184, 178, 0.1), transparent 68%),
|
|
45
|
+
linear-gradient(
|
|
46
|
+
180deg,
|
|
47
|
+
color-mix(in oklab, var(--sand) 68%, white) 0%,
|
|
48
|
+
var(--foam) 44%,
|
|
49
|
+
var(--bg-base) 100%
|
|
50
|
+
);
|
|
51
|
+
overflow-x: hidden;
|
|
8
52
|
-webkit-font-smoothing: antialiased;
|
|
9
53
|
-moz-osx-font-smoothing: grayscale;
|
|
10
54
|
}
|
|
11
55
|
|
|
56
|
+
a {
|
|
57
|
+
color: var(--lagoon-deep);
|
|
58
|
+
text-decoration-color: rgba(50, 143, 151, 0.4);
|
|
59
|
+
text-decoration-thickness: 1px;
|
|
60
|
+
text-underline-offset: 2px;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
a:hover {
|
|
64
|
+
color: #246f76;
|
|
65
|
+
}
|
|
66
|
+
|
|
12
67
|
code {
|
|
13
|
-
font-
|
|
14
|
-
|
|
68
|
+
font-size: 0.9em;
|
|
69
|
+
border: 1px solid var(--line);
|
|
70
|
+
background: color-mix(in oklab, var(--surface-strong) 82%, white 18%);
|
|
71
|
+
border-radius: 7px;
|
|
72
|
+
padding: 2px 7px;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.page-wrap {
|
|
76
|
+
width: min(1080px, calc(100% - 2rem));
|
|
77
|
+
margin-inline: auto;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.display-title {
|
|
81
|
+
font-family: 'Fraunces', Georgia, serif;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.island-shell {
|
|
85
|
+
border: 1px solid var(--line);
|
|
86
|
+
background: linear-gradient(165deg, var(--surface-strong), var(--surface));
|
|
87
|
+
box-shadow:
|
|
88
|
+
0 1px 0 var(--inset-glint) inset,
|
|
89
|
+
0 22px 44px rgba(30, 90, 72, 0.1),
|
|
90
|
+
0 6px 18px rgba(23, 58, 64, 0.08);
|
|
91
|
+
backdrop-filter: blur(4px);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.feature-card {
|
|
95
|
+
background: linear-gradient(
|
|
96
|
+
165deg,
|
|
97
|
+
color-mix(in oklab, var(--surface-strong) 93%, white 7%),
|
|
98
|
+
var(--surface)
|
|
99
|
+
);
|
|
100
|
+
box-shadow:
|
|
101
|
+
0 1px 0 var(--inset-glint) inset,
|
|
102
|
+
0 18px 34px rgba(30, 90, 72, 0.1),
|
|
103
|
+
0 4px 14px rgba(23, 58, 64, 0.06);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.site-header {
|
|
107
|
+
position: sticky;
|
|
108
|
+
top: 0;
|
|
109
|
+
z-index: 50;
|
|
110
|
+
border-bottom: 1px solid var(--line);
|
|
111
|
+
background: var(--header-bg);
|
|
112
|
+
backdrop-filter: blur(10px);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.nav-shell {
|
|
116
|
+
display: flex;
|
|
117
|
+
flex-wrap: wrap;
|
|
118
|
+
align-items: center;
|
|
119
|
+
gap: 0.5rem 0.75rem;
|
|
120
|
+
padding: 0.75rem 0;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.brand-pill {
|
|
124
|
+
display: inline-flex;
|
|
125
|
+
align-items: center;
|
|
126
|
+
gap: 0.5rem;
|
|
127
|
+
border-radius: 999px;
|
|
128
|
+
border: 1px solid var(--chip-line);
|
|
129
|
+
background: var(--chip-bg);
|
|
130
|
+
padding: 0.5rem 0.875rem;
|
|
131
|
+
color: var(--sea-ink);
|
|
132
|
+
text-decoration: none;
|
|
133
|
+
box-shadow: 0 8px 24px rgba(30, 90, 72, 0.08);
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.brand-dot {
|
|
137
|
+
height: 0.5rem;
|
|
138
|
+
width: 0.5rem;
|
|
139
|
+
border-radius: 999px;
|
|
140
|
+
background: linear-gradient(90deg, #56c6be, #7ed3bf);
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.island-kicker {
|
|
144
|
+
letter-spacing: 0.16em;
|
|
145
|
+
text-transform: uppercase;
|
|
146
|
+
font-weight: 700;
|
|
147
|
+
font-size: 0.69rem;
|
|
148
|
+
color: var(--kicker);
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.nav-link {
|
|
152
|
+
position: relative;
|
|
153
|
+
display: inline-flex;
|
|
154
|
+
align-items: center;
|
|
155
|
+
color: var(--sea-ink-soft);
|
|
156
|
+
text-decoration: none;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.nav-link::after {
|
|
160
|
+
content: '';
|
|
161
|
+
position: absolute;
|
|
162
|
+
left: 0;
|
|
163
|
+
bottom: -6px;
|
|
164
|
+
width: 100%;
|
|
165
|
+
height: 2px;
|
|
166
|
+
transform: scaleX(0);
|
|
167
|
+
transform-origin: left;
|
|
168
|
+
background: linear-gradient(90deg, var(--lagoon), #7ed3bf);
|
|
169
|
+
transition: transform 170ms ease;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.nav-link:hover,
|
|
173
|
+
.nav-link.is-active {
|
|
174
|
+
color: var(--sea-ink);
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.nav-link:hover::after,
|
|
178
|
+
.nav-link.is-active::after {
|
|
179
|
+
transform: scaleX(1);
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
.rise-in {
|
|
183
|
+
animation: rise-in 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
@keyframes rise-in {
|
|
187
|
+
from {
|
|
188
|
+
opacity: 0;
|
|
189
|
+
transform: translateY(12px);
|
|
190
|
+
}
|
|
191
|
+
to {
|
|
192
|
+
opacity: 1;
|
|
193
|
+
transform: translateY(0);
|
|
194
|
+
}
|
|
15
195
|
}
|
|
@@ -10,10 +10,9 @@ import { tanstackStart } from "@tanstack/solid-start/plugin/vite";
|
|
|
10
10
|
import solidPlugin from 'vite-plugin-solid';
|
|
11
11
|
<% for(const integration of integrations.filter(i => i.type === 'vite-plugin')) { %><%- integrationImportContent(integration) %>
|
|
12
12
|
<% } %>
|
|
13
|
-
import lucidePreprocess from "vite-plugin-lucide-preprocess";
|
|
14
13
|
|
|
15
14
|
export default defineConfig({
|
|
16
|
-
plugins: [
|
|
15
|
+
plugins: [devtools(), <% for(const integration of integrations.filter(i => i.type === 'vite-plugin')) { %><%- integrationImportCode(integration) %>,<% } %>
|
|
17
16
|
// this is the plugin that enables path aliases
|
|
18
17
|
viteTsConfigPaths({
|
|
19
18
|
projects: ['./tsconfig.json'],
|