commit Books

src/App.tsx

@@ -12,6 +12,8 @@ import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import { Contact } from "@/components/Contact";
 import { Post } from '@/components/Post';
 import { Board } from './components/Board';
+import { Inbox } from './components/Inbox';
+import { Books } from './components/Books';
 inject();
 
 ReactDOM.createRoot(document.getElementById("root")!).render(<App />);
@@ -19,16 +21,18 @@ ReactDOM.createRoot(document.getElementById("root")!).render(<App />);
 function App() {
 
 	return (
-		<React.StrictMode>
+		// <React.StrictMode>
 			<BrowserRouter>
 				<Routes>
 					<Route path="/" element={<Home />} />
 					<Route path="/card/contact" element={<Contact />} />
 					<Route path="/posts/:slug" element={<Post />} />
 					<Route path="/board/:slug" element={<Board />} />
+					<Route path="/inbox" element={<Inbox />} />
+					<Route path="/books" element={<Books />} />
 				</Routes>
 			</BrowserRouter>
-		</React.StrictMode>
+		// </React.StrictMode>
 	);
 };
 

src/components/Books.tsx

@@ -0,0 +1,15 @@
+
+import { Editor, Tldraw } from "@tldraw/tldraw";
+import { canvas } from "@/canvas01";
+
+export function Books() {
+  return (
+    <div className="tldraw__editor">
+      <Tldraw
+        onMount={(editor: Editor) => {
+          editor.putContentOntoCurrentPage(canvas as any)
+        }}
+      />
+    </div>
+  );
+}

src/components/Inbox.tsx

@@ -0,0 +1,45 @@
+import { createShapeId, Editor, Tldraw, TLGeoShape, TLShapePartial } from "@tldraw/tldraw";
+
+export function Inbox() {
+  return (
+    <div className="tldraw__editor">
+      <Tldraw
+        onMount={(editor: Editor) => {
+          (async () => {
+            try {
+              const response = await fetch('https://jeffemmett-canvas.web.val.run', {
+                method: 'GET',
+              });
+              const messages = await response.json();
+
+              for (let i = 0; i < messages.length; i++) { 
+                const message = messages[i];
+                const parsedEmailName = message.from.match(/^([^<]+)/)?.[1]?.trim() || message.from.match(/[^<@]+(?=@)/)?.[0] || message.from;
+                const messageText = `from: ${parsedEmailName}\nsubject: ${message.subject}\n\n${message.text}`
+                const shapeWidth = 500
+                const shapeHeight = 300
+                const spacing = 50
+                const shape: TLShapePartial<TLGeoShape> = {
+                  id: createShapeId(),
+                  type: 'geo',
+                  x: shapeWidth * (i % 5) + spacing * (i % 5),
+                  y: shapeHeight * Math.floor(i / 5) + spacing * Math.floor(i / 5),
+                  props: {
+                    w: shapeWidth,
+                    h: shapeHeight,
+                    text: messageText,
+                    align:'start',
+                    verticalAlign:'start'
+                  }
+                }
+                editor.createShape(shape)
+              }
+            } catch (error) {
+              console.error('Error fetching data:', error);
+            }
+          })();
+        }}
+      />
+    </div>
+  );
+}

vercel.json

@@ -10,6 +10,14 @@
     {
       "source": "/board/(.*)",
       "destination": "/"
+    },
+    {
+      "source": "/inbox",
+      "destination": "/"
+    },
+    {
+      "source": "/books",
+      "destination": "/"
     }
   ]
 }