Add back /new route.

apps/dotcom/src/pages/new.tsx

@@ -0,0 +1,41 @@
+import { Snapshot } from '@tldraw/dotcom-shared'
+import { schema } from '@tldraw/tlsync'
+import { Navigate } from 'react-router-dom'
+import '../../styles/globals.css'
+import { ErrorPage } from '../components/ErrorPage/ErrorPage'
+import { defineLoader } from '../utils/defineLoader'
+import { isInIframe } from '../utils/iFrame'
+import { getNewRoomResponse } from '../utils/sharing'
+
+const { loader, useData } = defineLoader(async (_args) => {
+	if (isInIframe()) return null
+
+	const res = await getNewRoomResponse({
+		schema: schema.serialize(),
+		snapshot: {},
+	} satisfies Snapshot)
+
+	const response = (await res.json()) as { error: boolean; slug?: string }
+	if (!res.ok || response.error) {
+		return null
+	}
+	return { slug: response.slug }
+})
+
+export { loader }
+
+export function Component() {
+	const data = useData()
+	if (!data || !data.slug)
+		return (
+			<ErrorPage
+				icon
+				messages={{
+					header: 'Page not found',
+					para1: 'The page you are looking does not exist or has been moved.',
+				}}
+				redirectTo="/"
+			/>
+		)
+	return <Navigate to={`/r/${data.slug}`} />
+}

apps/dotcom/src/routes.tsx

@@ -30,7 +30,7 @@ export const router = createRoutesFromElements(
 		<Route errorElement={<DefaultErrorFallback />}>
 			<Route path="/" lazy={() => import('./pages/root')} />
 			<Route path="/r" element={<Navigate to="/" />} />
-			<Route path="/new" element={<Navigate to="/" />} />
+			<Route path="/new" lazy={() => import('./pages/new')} />
 			<Route path="/r/:roomId" lazy={() => import('./pages/public-multiplayer')} />
 			<Route path="/r/:boardId/history" lazy={() => import('./pages/history')} />
 			<Route

apps/dotcom/src/utils/sharing.ts

@@ -2,7 +2,6 @@ import {
 	CreateRoomRequestBody,
 	CreateSnapshotRequestBody,
 	CreateSnapshotResponseBody,
-	Snapshot,
 } from '@tldraw/dotcom-shared'
 import { useMemo } from 'react'
 import { useNavigate, useSearchParams } from 'react-router-dom'
@@ -35,7 +34,7 @@ export const LEAVE_SHARED_PROJECT_ACTION = 'leave-shared-project' as const
 export const FORK_PROJECT_ACTION = 'fork-project' as const
 
 const CREATE_SNAPSHOT_ENDPOINT = `/api/snapshots`
-const SNAPSHOT_UPLOAD_URL = `/api/new-room`
+const SNAPSHOT_UPLOAD_URLOAD_URL = `/api/new-room`
 
 async function getSnapshotLink(
 	source: string,
@@ -74,6 +73,19 @@ async function getSnapshotLink(
 	})
 }
 
+export async function getNewRoomResponse(snapshot: CreateRoomRequestBody['snapshot']) {
+	return await fetch(SNAPSHOT_UPLOAD_URLOAD_URL, {
+		method: 'POST',
+		headers: {
+			'Content-Type': 'application/json',
+		},
+		body: JSON.stringify({
+			origin: getParentOrigin(),
+			snapshot,
+		} satisfies CreateRoomRequestBody),
+	})
+}
+
 export function useSharing(): TLUiOverrides {
 	const navigate = useNavigate()
 	const id = useSearchParams()[0].get('id') ?? undefined
@@ -107,20 +119,10 @@ export function useSharing(): TLUiOverrides {
 							const data = await getRoomData(editor, addToast, msg, uploadFileToAsset)
 							if (!data) return
 
-							const res = await fetch(SNAPSHOT_UPLOAD_URL, {
-								method: 'POST',
-								headers: {
-									'Content-Type': 'application/json',
-								},
-								body: JSON.stringify({
-									origin: getParentOrigin(),
-									snapshot: {
-										schema: editor.store.schema.serialize(),
-										snapshot: data,
-									} satisfies Snapshot,
-								} satisfies CreateRoomRequestBody),
+							const res = await getNewRoomResponse({
+								schema: editor.store.schema.serialize(),
+								snapshot: data,
 							})
-
 							const response = (await res.json()) as { error: boolean; slug?: string }
 							if (!res.ok || response.error) {
 								console.error(await res.text())