npm - @tanstack/create - Versions diffs - 0.61.6 → 0.62.0 - Mend

@tanstack/create 0.61.6 → 0.62.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.

Files changed (101) hide show

package/dist/frameworks/react/project/base/src/routes/__root.tsx.ejs CHANGED Viewed

@@ -33,9 +33,9 @@ import {
   HeadContent, Scripts, <% if (hasContext) { %>createRootRouteWithContext<% } else { %>createRootRoute<% } %> } from '@tanstack/react-router'
 import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools';
 import { TanStackDevtools } from '@tanstack/react-devtools'
-<% if (addOns.length) { %>
+import Footer from '../components/Footer'
 import Header from '../components/Header'
-<% } %><% for(const integration of integrations.filter(i => i.type === 'layout' || i.type === 'provider' || i.type === 'devtools')) { %>
+<% for(const integration of integrations.filter(i => i.type === 'layout' || i.type === 'provider' || i.type === 'devtools')) { %>
 import <%= integration.jsName %> from '<%= relativePath(integration.path, true) %>'
 <% } %><% if (addOnEnabled.paraglide) { %>
 import { getLocale } from '#/paraglide/runtime'
@@ -61,6 +61,8 @@ interface MyRouterContext <% if (addOnEnabled["apollo-client"]) {%> extends Apol
 <% } %>
 }<% } %>
+const THEME_INIT_SCRIPT = `(function(){try{var stored=window.localStorage.getItem('theme');var mode=(stored==='light'||stored==='dark'||stored==='auto')?stored:'auto';var prefersDark=window.matchMedia('(prefers-color-scheme: dark)').matches;var resolved=mode==='auto'?(prefersDark?'dark':'light'):mode;var root=document.documentElement;root.classList.remove('light','dark');root.classList.add(resolved);if(mode==='auto'){root.removeAttribute('data-theme')}else{root.setAttribute('data-theme',mode)}root.style.colorScheme=resolved;}catch(e){}})();`
 export const Route = <% if (hasContext) { %>createRootRouteWithContext<MyRouterContext>()<% } else { %>createRootRoute<% } %>({
 <% if (addOnEnabled.paraglide) { %>
   beforeLoad: async () => {
@@ -96,14 +98,16 @@ export const Route = <% if (hasContext) { %>createRootRouteWithContext<MyRouterC
 function RootDocument({ children }: { children: React.ReactNode }) {
   return (
-    <% if (addOnEnabled.paraglide) { %><html lang={getLocale()}><% } else { %><html lang="en"><% } %>
+      <% if (addOnEnabled.paraglide) { %><html lang={getLocale()} suppressHydrationWarning><% } else { %><html lang="en" suppressHydrationWarning><% } %>
       <head>
+        <script dangerouslySetInnerHTML={{ __html: THEME_INIT_SCRIPT }} />
         <HeadContent />
       </head>
-      <body>
+      <body className="font-sans antialiased [overflow-wrap:anywhere] selection:bg-[rgba(79,184,178,0.24)]">
         <% for(const integration of integrations.filter(i => i.type === 'provider')) { %><<%= integration.jsName %>>
-        <% } %><% if (addOns.length) { %><Header />
-        <% } %>{children}
+        <% } %><Header />
+        {children}
+        <Footer />
           <TanStackDevtools
             config={{
               position: 'bottom-right',

package/dist/frameworks/react/project/base/src/routes/about.tsx.ejs ADDED Viewed

@@ -0,0 +1,27 @@
+import { createFileRoute } from '@tanstack/react-router'
+export const Route = createFileRoute('/about')({
+  component: About,
+})
+function About() {
+  return (
+    <main className="page-wrap px-4 py-12">
+      <section className="island-shell rounded-2xl p-6 sm:p-8">
+        <img
+          src="/images/lagoon-about.svg"
+          alt=""
+          className="mb-6 h-56 w-full rounded-2xl object-cover"
+        />
+        <p className="island-kicker mb-2">About</p>
+        <h1 className="display-title mb-3 text-4xl font-bold text-[var(--sea-ink)] sm:text-5xl">
+          Built for shipping fast.
+        </h1>
+        <p className="m-0 max-w-3xl text-base leading-8 text-[var(--sea-ink-soft)]">
+          TanStack Start gives you type-safe routing, server functions, and modern SSR
+          defaults so you can focus on product work instead of framework glue.
+        </p>
+      </section>
+    </main>
+  )
+}

package/dist/frameworks/react/project/base/src/routes/blog.$slug.tsx.ejs ADDED Viewed

@@ -0,0 +1,71 @@
+import { createFileRoute, notFound } from '@tanstack/react-router'
+import { MDXContent } from '@content-collections/mdx/react'
+import { allBlogs } from 'content-collections'
+import { SITE_URL } from '#/lib/site'
+import { MdxCallout } from '#/components/MdxCallout'
+import { MdxMetrics } from '#/components/MdxMetrics'
+export const Route = createFileRoute('/blog/$slug')({
+  loader: ({ params }) => {
+    const post = Array.from(
+      new Map(
+        [...allBlogs]
+          .sort((a, b) => new Date(b.pubDate).valueOf() - new Date(a.pubDate).valueOf())
+          .map((entry) => [entry.slug, entry]),
+      ).values(),
+    ).find((entry) => entry.slug === params.slug)
+    if (!post) throw notFound()
+    return post
+  },
+  head: ({ loaderData, params }) => {
+    const title = loaderData?.title ?? 'Post'
+    const description = loaderData?.description ?? ''
+    const image = loaderData?.heroImage ?? '/images/lagoon-1.svg'
+    return {
+      links: [{ rel: 'canonical', href: `${SITE_URL}/blog/${params.slug}` }],
+      meta: [
+        { title },
+        { name: 'description', content: description },
+        {
+          property: 'og:image',
+          content: image.startsWith('http') ? image : `${SITE_URL}${image}`,
+        },
+      ],
+    }
+  },
+  component: BlogPost,
+})
+function BlogPost() {
+  const post = Route.useLoaderData()
+  return (
+    <main className="page-wrap px-4 pb-12 pt-16">
+      <article className="island-shell rounded-2xl p-6 sm:p-8">
+        {post.heroImage ? (
+          <img
+            src={post.heroImage}
+            alt=""
+            className="mb-6 h-64 w-full rounded-2xl object-cover"
+          />
+        ) : null}
+        <p className="island-kicker mb-2">Post</p>
+        <h1 className="display-title mb-3 text-4xl font-bold text-[var(--sea-ink)] sm:text-5xl">
+          {post.title}
+        </h1>
+        <p className="mb-6 text-sm text-[var(--sea-ink-soft)]">
+          {new Date(post.pubDate).toLocaleDateString()}
+        </p>
+        <div
+          className="prose prose-slate prose-headings:text-[var(--sea-ink)] prose-p:text-[var(--sea-ink-soft)] prose-li:text-[var(--sea-ink-soft)] prose-ul:text-[var(--sea-ink-soft)] prose-ol:text-[var(--sea-ink-soft)] prose-strong:text-[var(--sea-ink)] prose-a:text-[var(--lagoon-deep)] max-w-none"
+        >
+          {post.mdx ? (
+            <MDXContent code={post.mdx} components={{ MdxCallout, MdxMetrics }} />
+          ) : (
+            <div dangerouslySetInnerHTML={{ __html: post.html ?? '' }} />
+          )}
+        </div>
+      </article>
+    </main>
+  )
+}

package/dist/frameworks/react/project/base/src/routes/blog.index.tsx.ejs ADDED Viewed

@@ -0,0 +1,93 @@
+import { Link, createFileRoute } from '@tanstack/react-router'
+import { allBlogs } from 'content-collections'
+import { SITE_DESCRIPTION, SITE_TITLE, SITE_URL } from '#/lib/site'
+const canonical = `${SITE_URL}/blog`
+const pageTitle = `Blog | ${SITE_TITLE}`
+export const Route = createFileRoute('/blog/')({
+  head: () => ({
+    links: [{ rel: 'canonical', href: canonical }],
+    meta: [
+      { title: pageTitle },
+      { name: 'description', content: SITE_DESCRIPTION },
+      { property: 'og:image', content: `${SITE_URL}/images/lagoon-1.svg` },
+    ],
+  }),
+  component: BlogIndex,
+})
+function BlogIndex() {
+  const postsByDate = Array.from(
+    new Map(
+      [...allBlogs]
+        .sort((a, b) => new Date(b.pubDate).valueOf() - new Date(a.pubDate).valueOf())
+        .map((post) => [post.slug, post]),
+    ).values(),
+  )
+  const featured = postsByDate[0]
+  const posts = postsByDate.slice(1)
+  return (
+    <main className="page-wrap px-4 pb-8 pt-14">
+      <section className="mb-4">
+        <p className="island-kicker mb-2">Latest Dispatches</p>
+        <h1 className="display-title m-0 text-4xl font-bold tracking-tight text-[var(--sea-ink)] sm:text-5xl">
+          Blog
+        </h1>
+      </section>
+      <section className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        <article className="island-shell rise-in rounded-2xl p-5 sm:p-6 lg:col-span-2">
+          {featured.heroImage ? (
+            <img
+              src={featured.heroImage}
+              alt=""
+              className="mb-4 h-44 w-full rounded-xl object-cover xl:h-60"
+            />
+          ) : null}
+          <h2 className="m-0 text-2xl font-semibold text-[var(--sea-ink)]">
+            <Link
+              to="/blog/$slug"
+              params={{ slug: featured.slug }}
+              className="no-underline"
+            >
+              {featured.title}
+            </Link>
+          </h2>
+          <p className="mb-2 mt-3 text-base text-[var(--sea-ink-soft)]">
+            {featured.description}
+          </p>
+          <p className="m-0 text-xs text-[var(--sea-ink-soft)]">
+            {new Date(featured.pubDate).toLocaleDateString()}
+          </p>
+        </article>
+        {posts.map((post, index) => (
+          <article
+            key={post.slug}
+            className="island-shell rise-in rounded-2xl p-5 sm:last:col-span-2 lg:last:col-span-1"
+            style={{ animationDelay: `${index * 80 + 120}ms` }}
+          >
+            {post.heroImage ? (
+              <img
+                src={post.heroImage}
+                alt=""
+                className="mb-4 h-44 w-full rounded-xl object-cover"
+              />
+            ) : null}
+            <h2 className="m-0 text-2xl font-semibold text-[var(--sea-ink)]">
+              <Link to="/blog/$slug" params={{ slug: post.slug }} className="no-underline">
+                {post.title}
+              </Link>
+            </h2>
+            <p className="mb-2 mt-2 text-sm text-[var(--sea-ink-soft)]">{post.description}</p>
+            <p className="m-0 text-xs text-[var(--sea-ink-soft)]">
+              {new Date(post.pubDate).toLocaleDateString()}
+            </p>
+          </article>
+        ))}
+      </section>
+    </main>
+  )
+}

package/dist/frameworks/react/project/base/src/routes/index.tsx.ejs CHANGED Viewed

@@ -1,105 +1,72 @@
 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>
+    <main className="page-wrap px-4 pb-8 pt-14">
+      <section className="island-shell rise-in relative overflow-hidden rounded-[2rem] px-6 py-10 sm:px-10 sm:py-14">
+        <div className="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%)]" />
+        <div className="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%)]" />
+        <p className="island-kicker mb-3">TanStack Start Base Template</p>
+        <h1 className="display-title mb-5 max-w-3xl text-4xl leading-[1.02] font-bold tracking-tight text-[var(--sea-ink)] sm:text-6xl">
+          Island hours, but for product teams.
+        </h1>
+        <p className="mb-8 max-w-2xl text-base text-[var(--sea-ink-soft)] sm:text-lg">
+          A tropical, breathable app starter with full-document SSR, server functions,
+          streaming, and type-safe routing. Calm on the eyes. Fast in production.
+        </p>
+        <div className="flex flex-wrap gap-3">
+          <a
+            href="/blog"
+            className="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)]"
+          >
+            Explore Posts
+          </a>
+          <a
+            href="https://tanstack.com/router"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="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)]"
+          >
+            Router Guide
+          </a>
         </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"
+      <section className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+          {[
+            ['Type-Safe Routing', 'Routes and links stay in sync across every page.'],
+            ['Server Functions', 'Call server code from your UI without creating API boilerplate.'],
+            ['Streaming by Default', 'Ship progressively rendered responses for faster experiences.'],
+            ['Tailwind Native', 'Design quickly with utility-first styling and custom tokens.'],
+          ].map(([title, desc], index) => (
+            <article
+              key={title}
+              className="island-shell feature-card rise-in rounded-2xl p-5"
+              style={{ animationDelay: `${index * 90 + 80}ms` }}
             >
-              <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>
+              <h2 className="mb-2 text-base font-semibold text-[var(--sea-ink)]">{title}</h2>
+              <p className="m-0 text-sm text-[var(--sea-ink-soft)]">{desc}</p>
+            </article>
           ))}
-        </div>
       </section>
-    </div>
+      <section className="island-shell mt-8 rounded-2xl p-6">
+        <p className="island-kicker mb-2">Quick Start</p>
+        <ul className="m-0 list-disc space-y-2 pl-5 text-sm text-[var(--sea-ink-soft)]">
+          <li>
+            Edit <code>src/routes/index.tsx</code> to customize the hero and product narrative.
+          </li>
+          <li>
+            Update <code>src/components/Header.tsx</code> and <code>src/components/Footer.tsx</code>{' '}
+            for brand links.
+          </li>
+          <li>
+            Add routes in <code>src/routes</code> and tweak visual tokens in <code>src/styles.css</code>.
+          </li>
+        </ul>
+      </section>
+    </main>
   );
 }

package/dist/frameworks/react/project/base/src/routes/rss[.]xml.ts.ejs ADDED Viewed

@@ -0,0 +1,35 @@
+<% if (routerOnly) { ignoreFile() } %>
+import { createFileRoute } from '@tanstack/react-router'
+import { allBlogs } from 'content-collections'
+import { SITE_DESCRIPTION, SITE_TITLE, SITE_URL } from '#/lib/site'
+export const Route = createFileRoute('/rss.xml')({
+  server: {
+    handlers: {
+      GET: () => {
+        const posts = Array.from(
+          new Map(
+            [...allBlogs]
+              .sort((a, b) => new Date(b.pubDate).valueOf() - new Date(a.pubDate).valueOf())
+              .map((post) => [post.slug, post]),
+          ).values(),
+        )
+        const items = posts
+          .map((post) => {
+            const url = `${SITE_URL}/blog/${post.slug}`
+            return `<item><title><![CDATA[${post.title}]]></title><description><![CDATA[${post.description}]]></description><link>${url}</link><guid>${url}</guid><pubDate>${new Date(post.pubDate).toUTCString()}</pubDate></item>`
+          })
+          .join('')
+        const xml = `<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"><channel><title><![CDATA[${SITE_TITLE}]]></title><description><![CDATA[${SITE_DESCRIPTION}]]></description><link>${SITE_URL}</link>${items}</channel></rss>`
+        return new Response(xml, {
+          headers: {
+            'Content-Type': 'application/rss+xml; charset=utf-8',
+          },
+        })
+      },
+    },
+  },
+})