fix sanity studio url (#1550)

Tanstack Start is a little weird when it comes to catch-all routes? 🤔 

/studio/ does not work because the catch-all/splat route checks if there
is anything AFTER studio/ and not including studio/, so it works when
going to /studio/structure but not /studio/

So we create a new route that specifically targets /studio/ as well

Author: aulonm

apps/docs/src/routeTree.gen.ts

@@ -10,6 +10,7 @@
 
 import { Route as rootRouteImport } from './routes/__root'
 import { Route as DocsRouteImport } from './routes/_docs'
+import { Route as StudioIndexRouteImport } from './routes/studio/index'
 import { Route as DocsIndexRouteImport } from './routes/_docs/index'
 import { Route as StudioSplatRouteImport } from './routes/studio/$'
 import { Route as ApiHealthRouteImport } from './routes/api/health'
@@ -24,6 +25,11 @@ const DocsRoute = DocsRouteImport.update({
   id: '/_docs',
   getParentRoute: () => rootRouteImport,
 } as any)
+const StudioIndexRoute = StudioIndexRouteImport.update({
+  id: '/studio/',
+  path: '/studio/',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const DocsIndexRoute = DocsIndexRouteImport.update({
   id: '/',
   path: '/',
@@ -75,6 +81,7 @@ export interface FileRoutesByFullPath {
   '/api/health': typeof ApiHealthRoute
   '/studio/$': typeof StudioSplatRoute
   '/': typeof DocsIndexRoute
+  '/studio': typeof StudioIndexRoute
   '/komponenter/$slug': typeof DocsKomponenterSlugRoute
   '/profil/farger': typeof DocsProfilFargerRoute
   '/profil/ikoner': typeof DocsProfilIkonerRoute
@@ -86,6 +93,7 @@ export interface FileRoutesByTo {
   '/api/health': typeof ApiHealthRoute
   '/studio/$': typeof StudioSplatRoute
   '/': typeof DocsIndexRoute
+  '/studio': typeof StudioIndexRoute
   '/komponenter/$slug': typeof DocsKomponenterSlugRoute
   '/profil/farger': typeof DocsProfilFargerRoute
   '/profil/ikoner': typeof DocsProfilIkonerRoute
@@ -99,6 +107,7 @@ export interface FileRoutesById {
   '/api/health': typeof ApiHealthRoute
   '/studio/$': typeof StudioSplatRoute
   '/_docs/': typeof DocsIndexRoute
+  '/studio/': typeof StudioIndexRoute
   '/_docs/komponenter/$slug': typeof DocsKomponenterSlugRoute
   '/_docs/profil/farger': typeof DocsProfilFargerRoute
   '/_docs/profil/ikoner': typeof DocsProfilIkonerRoute
@@ -112,6 +121,7 @@ export interface FileRouteTypes {
     | '/api/health'
     | '/studio/$'
     | '/'
+    | '/studio'
     | '/komponenter/$slug'
     | '/profil/farger'
     | '/profil/ikoner'
@@ -123,6 +133,7 @@ export interface FileRouteTypes {
     | '/api/health'
     | '/studio/$'
     | '/'
+    | '/studio'
     | '/komponenter/$slug'
     | '/profil/farger'
     | '/profil/ikoner'
@@ -135,6 +146,7 @@ export interface FileRouteTypes {
     | '/api/health'
     | '/studio/$'
     | '/_docs/'
+    | '/studio/'
     | '/_docs/komponenter/$slug'
     | '/_docs/profil/farger'
     | '/_docs/profil/ikoner'
@@ -146,6 +158,7 @@ export interface RootRouteChildren {
   DocsRoute: typeof DocsRouteWithChildren
   ApiHealthRoute: typeof ApiHealthRoute
   StudioSplatRoute: typeof StudioSplatRoute
+  StudioIndexRoute: typeof StudioIndexRoute
 }
 
 declare module '@tanstack/react-router' {
@@ -157,6 +170,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof DocsRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/studio/': {
+      id: '/studio/'
+      path: '/studio'
+      fullPath: '/studio'
+      preLoaderRoute: typeof StudioIndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/_docs/': {
       id: '/_docs/'
       path: '/'
@@ -249,6 +269,7 @@ const rootRouteChildren: RootRouteChildren = {
   DocsRoute: DocsRouteWithChildren,
   ApiHealthRoute: ApiHealthRoute,
   StudioSplatRoute: StudioSplatRoute,
+  StudioIndexRoute: StudioIndexRoute,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)

apps/docs/src/routes/studio/index.tsx

@@ -0,0 +1,15 @@
+// See https://www.sanity.io/docs/embedding-sanity-studio
+
+import { createFileRoute } from '@tanstack/react-router';
+import { Studio } from 'sanity';
+import sanityConfig from 'sanity.config';
+import cssLink from '@/styles/sanity.css?url';
+
+export const Route = createFileRoute('/studio/')({
+  head: () => ({
+    links: [{ rel: 'stylesheet', href: cssLink }],
+  }),
+  component: () => <Studio config={sanityConfig} />,
+  // Disable SSR for this route, as the studio is not meant to be rendered on the server
+  ssr: false,
+});

package.json

@@ -30,8 +30,8 @@
     "@storybook/test-runner": "0.24.1",
     "@tailwindcss/vite": "4.1.17",
     "@types/bun": "1.3.2",
-    "@types/react": "19.2.2",
-    "@types/react-dom": "19.2.2",
+    "@types/react": "19.2.7",
+    "@types/react-dom": "19.2.3",
     "bunchee": "6.6.2",
     "fontaine": "0.7.0",
     "http-server": "14.1.1",