Chore: update Tanstack Start SPA template

.changeset/neat-clubs-know.md

@@ -0,0 +1,6 @@
+---
+'fumadocs-twoslash': patch
+'fumadocs-core': patch
+---
+
+Improve experience with Shiki Twoslash

apps/docs/content/docs/(framework)/markdown/twoslash.mdx

@@ -39,7 +39,7 @@ export default defineConfig({
 
       // important: Shiki doesn't support lazy loading languages for codeblocks in Twoslash popups
       // make sure to define them first (e.g. the common ones)
-      langs: ['js', 'jsx', 'ts', 'tsx']
+      langs: ['js', 'jsx', 'ts', 'tsx'],
     },
   },
 });
@@ -89,7 +89,6 @@ transformerTwoslash({
 });
 ```
 
-
 ### Example
 
 Learn more about [Twoslash notations](https://twoslash.netlify.app/refs/notations).

examples/tanstack-start-spa/package.json

@@ -18,7 +18,7 @@
     "fumadocs-core": "workspace:*",
     "fumadocs-mdx": "workspace:*",
     "fumadocs-ui": "workspace:*",
-    "lucide-static": "^0.562.0",
+    "lucide-react": "^0.562.0",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
     "tailwind-merge": "^3.4.0",

examples/tanstack-start-spa/src/lib/source.ts

@@ -1,15 +1,9 @@
 import { loader } from 'fumadocs-core/source';
-import * as icons from 'lucide-static';
+import { lucideIconsPlugin } from 'fumadocs-core/source/lucide-icons';
 import { docs } from 'fumadocs-mdx:collections/server';
 
 export const source = loader({
   source: docs.toFumadocsSource(),
   baseUrl: '/docs',
-  icon(icon) {
-    if (!icon) {
-      return;
-    }
-
-    if (icon in icons) return icons[icon as keyof typeof icons];
-  },
+  plugins: [lucideIconsPlugin()],
 });

examples/tanstack-start-spa/src/routeTree.gen.ts

@@ -8,80 +8,80 @@
 // You should NOT make any changes in this file as it will be overwritten.
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
 
-import { Route as rootRouteImport } from "./routes/__root";
-import { Route as IndexRouteImport } from "./routes/index";
-import { Route as DocsSplatRouteImport } from "./routes/docs/$";
-import { Route as ApiSearchRouteImport } from "./routes/api/search";
+import { Route as rootRouteImport } from './routes/__root'
+import { Route as IndexRouteImport } from './routes/index'
+import { Route as DocsSplatRouteImport } from './routes/docs/$'
+import { Route as ApiSearchRouteImport } from './routes/api/search'
 
 const IndexRoute = IndexRouteImport.update({
-  id: "/",
-  path: "/",
+  id: '/',
+  path: '/',
   getParentRoute: () => rootRouteImport,
-} as any);
+} as any)
 const DocsSplatRoute = DocsSplatRouteImport.update({
-  id: "/docs/$",
-  path: "/docs/$",
+  id: '/docs/$',
+  path: '/docs/$',
   getParentRoute: () => rootRouteImport,
-} as any);
+} as any)
 const ApiSearchRoute = ApiSearchRouteImport.update({
-  id: "/api/search",
-  path: "/api/search",
+  id: '/api/search',
+  path: '/api/search',
   getParentRoute: () => rootRouteImport,
-} as any);
+} as any)
 
 export interface FileRoutesByFullPath {
-  "/": typeof IndexRoute;
-  "/api/search": typeof ApiSearchRoute;
-  "/docs/$": typeof DocsSplatRoute;
+  '/': typeof IndexRoute
+  '/api/search': typeof ApiSearchRoute
+  '/docs/$': typeof DocsSplatRoute
 }
 export interface FileRoutesByTo {
-  "/": typeof IndexRoute;
-  "/api/search": typeof ApiSearchRoute;
-  "/docs/$": typeof DocsSplatRoute;
+  '/': typeof IndexRoute
+  '/api/search': typeof ApiSearchRoute
+  '/docs/$': typeof DocsSplatRoute
 }
 export interface FileRoutesById {
-  __root__: typeof rootRouteImport;
-  "/": typeof IndexRoute;
-  "/api/search": typeof ApiSearchRoute;
-  "/docs/$": typeof DocsSplatRoute;
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+  '/api/search': typeof ApiSearchRoute
+  '/docs/$': typeof DocsSplatRoute
 }
 export interface FileRouteTypes {
-  fileRoutesByFullPath: FileRoutesByFullPath;
-  fullPaths: "/" | "/api/search" | "/docs/$";
-  fileRoutesByTo: FileRoutesByTo;
-  to: "/" | "/api/search" | "/docs/$";
-  id: "__root__" | "/" | "/api/search" | "/docs/$";
-  fileRoutesById: FileRoutesById;
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: '/' | '/api/search' | '/docs/$'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/' | '/api/search' | '/docs/$'
+  id: '__root__' | '/' | '/api/search' | '/docs/$'
+  fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
-  IndexRoute: typeof IndexRoute;
-  ApiSearchRoute: typeof ApiSearchRoute;
-  DocsSplatRoute: typeof DocsSplatRoute;
+  IndexRoute: typeof IndexRoute
+  ApiSearchRoute: typeof ApiSearchRoute
+  DocsSplatRoute: typeof DocsSplatRoute
 }
 
-declare module "@tanstack/react-router" {
+declare module '@tanstack/react-router' {
   interface FileRoutesByPath {
-    "/": {
-      id: "/";
-      path: "/";
-      fullPath: "/";
-      preLoaderRoute: typeof IndexRouteImport;
-      parentRoute: typeof rootRouteImport;
-    };
-    "/docs/$": {
-      id: "/docs/$";
-      path: "/docs/$";
-      fullPath: "/docs/$";
-      preLoaderRoute: typeof DocsSplatRouteImport;
-      parentRoute: typeof rootRouteImport;
-    };
-    "/api/search": {
-      id: "/api/search";
-      path: "/api/search";
-      fullPath: "/api/search";
-      preLoaderRoute: typeof ApiSearchRouteImport;
-      parentRoute: typeof rootRouteImport;
-    };
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/docs/$': {
+      id: '/docs/$'
+      path: '/docs/$'
+      fullPath: '/docs/$'
+      preLoaderRoute: typeof DocsSplatRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/api/search': {
+      id: '/api/search'
+      path: '/api/search'
+      fullPath: '/api/search'
+      preLoaderRoute: typeof ApiSearchRouteImport
+      parentRoute: typeof rootRouteImport
+    }
   }
 }
 
@@ -89,16 +89,16 @@ const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   ApiSearchRoute: ApiSearchRoute,
   DocsSplatRoute: DocsSplatRoute,
-};
+}
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)
-  ._addFileTypes<FileRouteTypes>();
+  ._addFileTypes<FileRouteTypes>()
 
-import type { getRouter } from "./router.tsx";
-import type { createStart } from "@tanstack/react-start";
-declare module "@tanstack/react-start" {
+import type { getRouter } from './router.tsx'
+import type { createStart } from '@tanstack/react-start'
+declare module '@tanstack/react-start' {
   interface Register {
-    ssr: true;
-    router: Awaited<ReturnType<typeof getRouter>>;
+    ssr: true
+    router: Awaited<ReturnType<typeof getRouter>>
   }
 }

examples/tanstack-start-spa/src/routes/index.tsx

@@ -8,17 +8,19 @@ export const Route = createFileRoute('/')({
 
 function Home() {
   return (
-    <HomeLayout {...baseOptions()} className="text-center py-32 justify-center">
-      <h1 className="font-medium text-xl mb-4">Fumadocs on Tanstack Start.</h1>
-      <Link
-        to="/docs/$"
-        params={{
-          _splat: '',
-        }}
-        className="px-3 py-2 rounded-lg bg-fd-primary text-fd-primary-foreground font-medium text-sm mx-auto"
-      >
-        Open Docs
-      </Link>
+    <HomeLayout {...baseOptions()}>
+      <div className="flex flex-col items-center justify-center text-center flex-1">
+        <h1 className="font-medium text-xl mb-4">Fumadocs on Tanstack Start.</h1>
+        <Link
+          to="/docs/$"
+          params={{
+            _splat: '',
+          }}
+          className="px-3 py-2 rounded-lg bg-fd-primary text-fd-primary-foreground font-medium text-sm mx-auto"
+        >
+          Open Docs
+        </Link>
+      </div>
     </HomeLayout>
   );
 }