@tanstack/create 0.67.0 → 0.68.1

package/src/frameworks/solid/add-ons/strapi/assets/src/routes/demo/strapi.tsx

@@ -14,18 +14,14 @@ function RouteComponent() {
   const strapiArticles = Route.useLoaderData()
 
   return (
-    <div class="min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900 p-8">
-      <div class="max-w-7xl mx-auto">
-        <h1 class="text-4xl font-bold mb-8 text-white">
-          <span class="bg-gradient-to-r from-cyan-400 to-blue-400 bg-clip-text text-transparent">
-            Strapi
-          </span>{' '}
-          <span class="text-gray-300">Articles</span>
-        </h1>
+    <main class="demo-page demo-page-wide">
+      <div>
+        <p class="island-kicker mb-2">CMS</p>
+        <h1 class="demo-title mb-8">Strapi Articles</h1>
 
         <Show
           when={strapiArticles() && strapiArticles().length > 0}
-          fallback={<p class="text-gray-400">No articles found.</p>}
+          fallback={<p class="demo-muted">No articles found.</p>}
         >
           <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
             <For each={strapiArticles()}>
@@ -35,25 +31,25 @@ function RouteComponent() {
                   params={{ articleId: article.documentId }}
                   class="block"
                 >
-                  <article 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 cursor-pointer h-full">
-                    <h2 class="text-xl font-semibold text-white mb-3">
+                  <article class="demo-card h-full cursor-pointer transition hover:-translate-y-0.5">
+                    <h2 class="mb-3 text-xl font-semibold">
                       {article.title || 'Untitled'}
                     </h2>
 
                     {article.description && (
-                      <p class="text-gray-400 mb-4 leading-relaxed">
+                      <p class="demo-muted mb-4 leading-relaxed">
                         {article.description}
                       </p>
                     )}
 
                     {article.content && (
-                      <p class="text-gray-400 line-clamp-3 leading-relaxed">
+                      <p class="demo-muted line-clamp-3 leading-relaxed">
                         {article.content}
                       </p>
                     )}
 
                     {article.createdAt && (
-                      <p class="text-sm text-cyan-400/70 mt-4">
+                      <p class="demo-muted mt-4 text-sm">
                         {new Date(article.createdAt).toLocaleDateString()}
                       </p>
                     )}
@@ -64,6 +60,6 @@ function RouteComponent() {
           </div>
         </Show>
       </div>
-    </div>
+    </main>
   )
 }

package/src/frameworks/solid/add-ons/strapi/assets/src/routes/demo/strapi_.$articleId.tsx

@@ -13,12 +13,9 @@ function RouteComponent() {
   const article = Route.useLoaderData()
 
   return (
-    <div class="min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900 p-8">
-      <div class="max-w-4xl mx-auto">
-        <Link
-          to="/demo/strapi"
-          class="inline-flex items-center text-cyan-400 hover:text-cyan-300 mb-6 transition-colors"
-        >
+    <main class="demo-page">
+      <div class="mx-auto max-w-4xl">
+        <Link to="/demo/strapi" class="mb-6 inline-flex items-center">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             class="h-5 w-5 mr-2"
@@ -34,13 +31,11 @@ function RouteComponent() {
           Back to Articles
         </Link>
 
-        <article class="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-xl p-8">
-          <h1 class="text-4xl font-bold text-white mb-4">
-            {article()?.title || 'Untitled'}
-          </h1>
+        <article class="demo-panel">
+          <h1 class="demo-title mb-4">{article()?.title || 'Untitled'}</h1>
 
           {article()?.createdAt && (
-            <p class="text-sm text-cyan-400/70 mb-6">
+            <p class="demo-muted mb-6 text-sm">
               Published on{' '}
               {new Date(
                 article()?.createdAt || article()?.attributes?.createdAt,
@@ -54,10 +49,8 @@ function RouteComponent() {
 
           {article()?.description && (
             <div class="mb-6">
-              <h2 class="text-xl font-semibold text-gray-300 mb-3">
-                Description
-              </h2>
-              <p class="text-gray-400 leading-relaxed">
+              <h2 class="demo-section-title mb-3">Description</h2>
+              <p class="demo-muted leading-relaxed">
                 {article()?.description || article()?.attributes?.description}
               </p>
             </div>
@@ -65,14 +58,14 @@ function RouteComponent() {
 
           {article()?.content && (
             <div>
-              <h2 class="text-xl font-semibold text-gray-300 mb-3">Content</h2>
-              <div class="text-gray-400 leading-relaxed whitespace-pre-wrap">
+              <h2 class="demo-section-title mb-3">Content</h2>
+              <div class="demo-muted whitespace-pre-wrap leading-relaxed">
                 {article()?.content}
               </div>
             </div>
           )}
         </article>
       </div>
-    </div>
+    </main>
   )
 }

package/src/frameworks/solid/project/base/_dot_gitignore

@@ -6,6 +6,7 @@ dist-ssr
 .env
 .nitro
 .tanstack
+src/routeTree.gen.ts
 .wrangler
 .output
 .vinxi

package/src/frameworks/solid/project/base/src/styles.css.ejs

@@ -120,6 +120,209 @@ code {
     0 4px 14px rgba(23, 58, 64, 0.06);
 }
 
+.demo-page {
+  width: min(1080px, calc(100% - 2rem));
+  margin-inline: auto;
+  padding-block: clamp(2.25rem, 6vw, 4.5rem);
+  color: var(--sea-ink);
+}
+
+.demo-page-wide {
+  width: min(1280px, calc(100% - 2rem));
+}
+
+.demo-center {
+  min-height: calc(100vh - 13rem);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.demo-panel,
+.demo-card {
+  border: 1px solid var(--line);
+  background: linear-gradient(165deg, var(--surface-strong), var(--surface));
+  box-shadow:
+    0 1px 0 var(--inset-glint) inset,
+    0 18px 34px rgba(30, 90, 72, 0.1),
+    0 4px 14px rgba(23, 58, 64, 0.06);
+  backdrop-filter: blur(4px);
+}
+
+.demo-panel {
+  border-radius: 1.25rem;
+  padding: clamp(1.25rem, 4vw, 2rem);
+}
+
+.demo-card {
+  border-radius: 1rem;
+  padding: 1rem;
+}
+
+.demo-title {
+  margin: 0;
+  color: var(--sea-ink);
+  font-size: clamp(1.75rem, 4vw, 2.75rem);
+  line-height: 1.05;
+  font-weight: 800;
+  letter-spacing: 0;
+}
+
+.demo-section-title {
+  margin: 0;
+  color: var(--sea-ink);
+  font-size: 1rem;
+  font-weight: 700;
+}
+
+.demo-muted {
+  color: var(--sea-ink-soft);
+}
+
+.demo-input,
+.demo-select,
+.demo-textarea {
+  width: 100%;
+  border: 1px solid var(--line);
+  border-radius: 0.75rem;
+  background: color-mix(in oklab, var(--surface-strong) 88%, white 12%);
+  color: var(--sea-ink);
+  outline: none;
+  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
+}
+
+.demo-input,
+.demo-select {
+  padding: 0.7rem 0.9rem;
+}
+
+.demo-input-fit {
+  width: auto;
+}
+
+.demo-textarea {
+  min-height: 7rem;
+  padding: 0.8rem 0.9rem;
+  resize: vertical;
+}
+
+.demo-input:focus,
+.demo-select:focus,
+.demo-textarea:focus {
+  border-color: color-mix(in oklab, var(--lagoon-deep) 58%, var(--line));
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--lagoon) 24%, transparent);
+}
+
+.demo-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  border: 1px solid color-mix(in oklab, var(--lagoon-deep) 34%, var(--line));
+  border-radius: 0.85rem;
+  background: color-mix(in oklab, var(--lagoon) 22%, var(--surface-strong));
+  color: var(--sea-ink);
+  padding: 0.72rem 1rem;
+  font-size: 0.9rem;
+  font-weight: 700;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.demo-button:hover {
+  transform: translateY(-1px);
+  background: color-mix(in oklab, var(--lagoon) 30%, var(--surface-strong));
+}
+
+.demo-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+  transform: none;
+}
+
+.demo-button-secondary {
+  border-color: var(--line);
+  background: color-mix(in oklab, var(--surface-strong) 74%, transparent);
+  color: var(--sea-ink-soft);
+}
+
+.demo-button-danger {
+  border-color: rgba(196, 71, 71, 0.28);
+  background: rgba(196, 71, 71, 0.1);
+  color: #9f3030;
+}
+
+.demo-list-item {
+  border: 1px solid var(--line);
+  border-radius: 0.9rem;
+  background: color-mix(in oklab, var(--chip-bg) 82%, transparent);
+  padding: 0.9rem 1rem;
+}
+
+.demo-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  border: 1px solid var(--chip-line);
+  border-radius: 999px;
+  background: var(--chip-bg);
+  color: var(--sea-ink-soft);
+  padding: 0.35rem 0.65rem;
+  font-size: 0.75rem;
+  font-weight: 700;
+}
+
+.demo-alert {
+  border: 1px solid rgba(193, 126, 42, 0.3);
+  border-radius: 1rem;
+  background: rgba(193, 126, 42, 0.1);
+  color: var(--sea-ink);
+  padding: 1rem;
+}
+
+.demo-alert-danger {
+  border-color: rgba(196, 71, 71, 0.3);
+  background: rgba(196, 71, 71, 0.1);
+}
+
+.demo-code-block {
+  border: 1px solid var(--line);
+  border-radius: 1rem;
+  background: color-mix(in oklab, var(--chip-bg) 88%, transparent);
+  color: var(--sea-ink);
+  padding: 1rem;
+}
+
+.demo-table-shell {
+  overflow-x: auto;
+  border: 1px solid var(--line);
+  border-radius: 1rem;
+  background: color-mix(in oklab, var(--surface-strong) 78%, transparent);
+}
+
+.demo-table {
+  width: 100%;
+  border-collapse: collapse;
+  color: var(--sea-ink);
+}
+
+.demo-table th,
+.demo-table td {
+  border-bottom: 1px solid var(--line);
+  padding: 0.75rem 1rem;
+  text-align: left;
+}
+
+.demo-table th {
+  background: color-mix(in oklab, var(--chip-bg) 88%, transparent);
+  color: var(--sea-ink);
+  font-weight: 700;
+}
+
+.demo-table tr:hover td {
+  background: color-mix(in oklab, var(--lagoon) 8%, transparent);
+}
+
 .site-header {
   position: sticky;
   top: 0;

package/tests/framework-template.test.ts

@@ -0,0 +1,15 @@
+import { describe, expect, it } from 'vitest'
+
+import { createFrameworkDefinition as createReactFrameworkDefinition } from '../src/frameworks/react/index.js'
+import { createFrameworkDefinition as createSolidFrameworkDefinition } from '../src/frameworks/solid/index.js'
+
+describe('framework templates', () => {
+  it.each([
+    ['React', createReactFrameworkDefinition],
+    ['Solid', createSolidFrameworkDefinition],
+  ])('%s gitignore excludes the generated route tree', (_, createDefinition) => {
+    const framework = createDefinition()
+
+    expect(framework.base._dot_gitignore).toContain('src/routeTree.gen.ts')
+  })
+})