ENG-2035 - Build collaborative canvas prototype

apps/tldraw-sync-worker/worker/worker.ts

@@ -6,13 +6,26 @@ import { Environment } from "./types";
 export { TldrawDurableObject } from "./TldrawDurableObject";
 
 const ALLOWED_ORIGINS = [
+  "https://discoursegraphs.com",
+  "https://www.discoursegraphs.com",
   "https://roamresearch.com",
   "http://localhost:3000",
   "app://obsidian.md",
 ];
 
-const isVercelPreviewUrl = (origin: string): boolean =>
-  /^https:\/\/.*-discourse-graph-[a-z0-9]+\.vercel\.app$/.test(origin);
+const isVercelPreviewUrl = (origin: string): boolean => {
+  try {
+    const url = new URL(origin);
+    return (
+      url.protocol === "https:" &&
+      /^discourse-graph(?:-[a-z0-9-]+)?-discourse-graphs\.vercel\.app$/.test(
+        url.hostname,
+      )
+    );
+  } catch {
+    return false;
+  }
+};
 
 const isAllowedOrigin = (origin: string): boolean =>
   ALLOWED_ORIGINS.some((allowedOrigin) => origin === allowedOrigin) ||

apps/website/app/(canvas)/canvas/[roomId]/page.tsx

@@ -0,0 +1,20 @@
+import type { ReactElement } from "react";
+import { notFound } from "next/navigation";
+import { CanvasRoomLoader } from "../components/CanvasRoomLoader";
+
+type CanvasPageProps = {
+  params: Promise<{ roomId: string }>;
+};
+
+const ROOM_ID_PATTERN = /^[0-9a-f-]{36}$/i;
+
+const CanvasPage = async ({
+  params,
+}: CanvasPageProps): Promise<ReactElement> => {
+  const { roomId } = await params;
+  if (!ROOM_ID_PATTERN.test(roomId)) notFound();
+
+  return <CanvasRoomLoader roomId={roomId} />;
+};
+
+export default CanvasPage;