npm

.gitignore

@@ -1,15 +1,11 @@
 dist/
 .DS_Store
 bun.lockb
-yarn.lock
 
-# Logs
 
 logs
 _.log
 npm-debug.log_
-yarn-debug.log*
-yarn-error.log*
 lerna-debug.log*
 .pnpm-debug.log*
 
@@ -95,7 +91,6 @@ web_modules/
 
 # Yarn Integrity file
 
-.yarn-integrity
 
 # dotenv environment variable files
 
@@ -163,14 +158,6 @@ dist
 
 .vscode-test
 
-# yarn v2
-
-.yarn/cache
-.yarn/unplugged
-.yarn/build-state.yml
-.yarn/install-state.gz
-.pnp.\*
-
 .wrangler/
 
 # Vercel
@@ -191,3 +178,5 @@ dist
 
 # Keep example file
 !.env.example
+
+package-lock.json

.npmrc

@@ -0,0 +1,3 @@
+legacy-peer-deps=true
+strict-peer-dependencies=false
+auto-install-peers=true 

README.md

@@ -1,3 +1,3 @@
 A website.
 
-Do `bun i` and `bun dev`
+Do `npm i` and `npm run dev`

canvas-website.code-workspace

@@ -1,12 +0,0 @@
-{
-	"folders": [
-		{
-			"path": "."
-		},
-		{
-			"name": "jeffemmett.com",
-			"path": "../jeffemmett.com"
-		}
-	],
-	"settings": {}
-}

package.json

@@ -4,7 +4,7 @@
 	"description": "Jeff Emmett's personal website",
 	"type": "module",
 	"scripts": {
-		"dev": "concurrently --kill-others --names client,worker --prefix-colors blue,red \"yarn dev:client\" \"yarn dev:worker\"",
+		"dev": "concurrently --kill-others --names client,worker --prefix-colors blue,red \"bun dev:client\" \"bun dev:worker\"",
 		"dev:client": "vite --host --port 5173",
 		"dev:worker": "wrangler dev --local --port 5172 --ip 0.0.0.0",
 		"build": "tsc && vite build",
@@ -26,19 +26,18 @@
 		"gray-matter": "^4.0.3",
 		"itty-router": "^5.0.17",
 		"lodash.throttle": "^4.1.1",
-		"react-error-boundary": "^4.1.2",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
 		"react-router-dom": "^7.0.2",
 		"tldraw": "^3.6.0",
-		"vercel": "^39.1.1",
+		"vercel": "^39.1.1"
-		"react": "^18.2.0",
-		"react-dom": "^18.2.0"
 	},
 	"devDependencies": {
 		"@cloudflare/types": "^6.0.0",
 		"@cloudflare/workers-types": "^4.20240821.1",
 		"@types/lodash.throttle": "^4",
-		"@types/react": "^18.2.0",
+		"@types/react": "^19.0.1",
-		"@types/react-dom": "^18.2.0",
+		"@types/react-dom": "^19.0.1",
 		"@vitejs/plugin-react": "^4.0.3",
 		"@vitejs/plugin-react-swc": "^3.6.0",
 		"concurrently": "^9.1.0",

src/App.tsx

@@ -1,95 +1,91 @@
-import { inject } from '@vercel/analytics';
+import { inject } from "@vercel/analytics"
-import "tldraw/tldraw.css";
+import "tldraw/tldraw.css"
 import "@/css/style.css"
-import ReactDOM from "react-dom/client";
+import { Default } from "@/routes/Default"
-import { Default } from "@/routes/Default";
+import { BrowserRouter, Route, Routes } from "react-router-dom"
-import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import { Contact } from "@/routes/Contact"
-import { Contact } from "@/routes/Contact";
+import { Board } from "./routes/Board"
-import { Board } from './routes/Board';
+import { Inbox } from "./routes/Inbox"
-import { Inbox } from './routes/Inbox';
+import { Editor, Tldraw, TLShapeId } from "tldraw"
-import {
+import { components, overrides } from "./ui-overrides"
-	Editor,
+import { ChatBoxShape } from "./shapes/ChatBoxShapeUtil"
-	Tldraw,
+import { VideoChatShape } from "./shapes/VideoChatShapeUtil"
-	TLShapeId,
+import { ChatBoxTool } from "./tools/ChatBoxTool"
-} from 'tldraw';
+import { VideoChatTool } from "./tools/VideoChatTool"
-import { components, overrides } from './ui-overrides'
+import { EmbedTool } from "./tools/EmbedTool"
-import { ChatBoxShape } from './shapes/ChatBoxShapeUtil';
+import { EmbedShape } from "./shapes/EmbedShapeUtil"
-import { VideoChatShape } from './shapes/VideoChatShapeUtil';
+import { createRoot } from "react-dom/client"
-import { ChatBoxTool } from './tools/ChatBoxTool';
-import { VideoChatTool } from './tools/VideoChatTool';
-import { EmbedTool } from './tools/EmbedTool';
-import { EmbedShape } from './shapes/EmbedShapeUtil';
 
-inject();
+inject()
 
-const customShapeUtils = [ChatBoxShape, VideoChatShape, EmbedShape];
+const customShapeUtils = [ChatBoxShape, VideoChatShape, EmbedShape]
-const customTools = [ChatBoxTool, VideoChatTool, EmbedTool];
+const customTools = [ChatBoxTool, VideoChatTool, EmbedTool]
 
 export default function InteractiveShapeExample() {
-	return (
+  return (
-		<div className="tldraw__editor">
+    <div className="tldraw__editor">
-			<Tldraw
+      <Tldraw
-				shapeUtils={customShapeUtils}
+        shapeUtils={customShapeUtils}
-				tools={customTools}
+        tools={customTools}
-				overrides={overrides}
+        overrides={overrides}
-				components={components}
+        components={components}
-				onMount={(editor) => {
+        onMount={(editor) => {
-					handleInitialShapeLoad(editor);
+          handleInitialShapeLoad(editor)
-					editor.createShape({ type: 'my-interactive-shape', x: 100, y: 100 });
+          editor.createShape({ type: "my-interactive-shape", x: 100, y: 100 })
-				}}
+        }}
-			/>
+      />
-		</div>
+    </div>
-	);
+  )
 }
 
 const handleInitialShapeLoad = (editor: Editor) => {
-	const url = new URL(window.location.href);
+  const url = new URL(window.location.href)
-	const shapeId = url.searchParams.get('shapeId') || url.searchParams.get('frameId');
+  const shapeId =
-	const x = url.searchParams.get('x');
+    url.searchParams.get("shapeId") || url.searchParams.get("frameId")
-	const y = url.searchParams.get('y');
+  const x = url.searchParams.get("x")
-	const zoom = url.searchParams.get('zoom');
+  const y = url.searchParams.get("y")
+  const zoom = url.searchParams.get("zoom")
 
-	if (shapeId) {
+  if (shapeId) {
-		console.log('Found shapeId in URL:', shapeId);
+    console.log("Found shapeId in URL:", shapeId)
-		const shape = editor.getShape(shapeId as TLShapeId);
+    const shape = editor.getShape(shapeId as TLShapeId)
 
-		if (shape) {
+    if (shape) {
-			console.log('Found shape:', shape);
+      console.log("Found shape:", shape)
-			if (x && y && zoom) {
+      if (x && y && zoom) {
-				console.log('Setting camera to:', { x, y, zoom });
+        console.log("Setting camera to:", { x, y, zoom })
-				editor.setCamera({
+        editor.setCamera({
-					x: parseFloat(x),
+          x: parseFloat(x),
-					y: parseFloat(y),
+          y: parseFloat(y),
-					z: parseFloat(zoom)
+          z: parseFloat(zoom),
-				});
+        })
-			} else {
+      } else {
-				console.log('Zooming to shape bounds');
+        console.log("Zooming to shape bounds")
-				editor.zoomToBounds(editor.getShapeGeometry(shape).bounds, {
+        editor.zoomToBounds(editor.getShapeGeometry(shape).bounds, {
-					targetZoom: 1,
+          targetZoom: 1,
-				});
+        })
-			}
+      }
-		} else {
+    } else {
-			console.warn('Shape not found in the editor');
+      console.warn("Shape not found in the editor")
-		}
+    }
-	} else {
+  } else {
-		console.warn('No shapeId found in the URL');
+    console.warn("No shapeId found in the URL")
-	}
+  }
 }
 
-ReactDOM.createRoot(document.getElementById("root")!).render(<App />);
+createRoot(document.getElementById("root")!).render(<App />)
 
 function App() {
-
+  return (
-	return (
+    // <React.StrictMode>
-		// <React.StrictMode>
+    <BrowserRouter>
-		<BrowserRouter>
+      <Routes>
-			<Routes>
+        <Route path="/" element={<Default />} />
-				<Route path="/" element={<Default />} />
+        <Route path="/contact" element={<Contact />} />
-				<Route path="/contact" element={<Contact />} />
+        <Route path="/board/:slug" element={<Board />} />
-				<Route path="/board/:slug" element={<Board />} />
+        <Route path="/inbox" element={<Inbox />} />
-				<Route path="/inbox" element={<Inbox />} />
+      </Routes>
-			</Routes>
+    </BrowserRouter>
-		</BrowserRouter>
+    // </React.StrictMode>
-		// </React.StrictMode>
+  )
-	);
+}
-};

vercel.json

@@ -1,6 +1,6 @@
 {
-  "buildCommand": "yarn build",
+  "buildCommand": "npm run build",
-  "installCommand": "yarn install",
+  "installCommand": "npm install",
   "framework": "vite",
   "outputDirectory": "dist",
   "rewrites": [

wrangler.toml

@@ -2,7 +2,6 @@ main = "worker/worker.ts"
 compatibility_date = "2024-07-01"
 name = "jeffemmett-canvas"
 account_id = "0e7b3338d5278ed1b148e6456b940913"
-zone_id = "45c200f8dc2a01852e41b9bb09eb7359"
 
 [vars]
 # Environment variables are managed in Cloudflare Dashboard