npm
This commit is contained in:
Jeff Emmett
parent
7ac6882088
commit
d63ff44c03
|
|
@ -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
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
legacy-peer-deps=true
|
||||
strict-peer-dependencies=false
|
||||
auto-install-peers=true
|
||||
|
|
@ -1,3 +1,3 @@
|
|||
A website.
|
||||
|
||||
Do `bun i` and `bun dev`
|
||||
Do `npm i` and `npm run dev`
|
||||
|
|
|
|||
|
|
@ -1,12 +0,0 @@
|
|||
{
|
||||
"folders": [
|
||||
{
|
||||
"path": "."
|
||||
},
|
||||
{
|
||||
"name": "jeffemmett.com",
|
||||
"path": "../jeffemmett.com"
|
||||
}
|
||||
],
|
||||
"settings": {}
|
||||
}
|
||||
13
package.json
13
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",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
"vercel": "^39.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@cloudflare/types": "^6.0.0",
|
||||
"@cloudflare/workers-types": "^4.20240821.1",
|
||||
"@types/lodash.throttle": "^4",
|
||||
"@types/react": "^18.2.0",
|
||||
"@types/react-dom": "^18.2.0",
|
||||
"@types/react": "^19.0.1",
|
||||
"@types/react-dom": "^19.0.1",
|
||||
"@vitejs/plugin-react": "^4.0.3",
|
||||
"@vitejs/plugin-react-swc": "^3.6.0",
|
||||
"concurrently": "^9.1.0",
|
||||
|
|
|
|||
158
src/App.tsx
158
src/App.tsx
|
|
@ -1,95 +1,91 @@
|
|||
import { inject } from '@vercel/analytics';
|
||||
import "tldraw/tldraw.css";
|
||||
import { inject } from "@vercel/analytics"
|
||||
import "tldraw/tldraw.css"
|
||||
import "@/css/style.css"
|
||||
import ReactDOM from "react-dom/client";
|
||||
import { Default } from "@/routes/Default";
|
||||
import { BrowserRouter, Route, Routes } from 'react-router-dom';
|
||||
import { Contact } from "@/routes/Contact";
|
||||
import { Board } from './routes/Board';
|
||||
import { Inbox } from './routes/Inbox';
|
||||
import {
|
||||
Editor,
|
||||
Tldraw,
|
||||
TLShapeId,
|
||||
} from 'tldraw';
|
||||
import { components, overrides } from './ui-overrides'
|
||||
import { ChatBoxShape } from './shapes/ChatBoxShapeUtil';
|
||||
import { VideoChatShape } from './shapes/VideoChatShapeUtil';
|
||||
import { ChatBoxTool } from './tools/ChatBoxTool';
|
||||
import { VideoChatTool } from './tools/VideoChatTool';
|
||||
import { EmbedTool } from './tools/EmbedTool';
|
||||
import { EmbedShape } from './shapes/EmbedShapeUtil';
|
||||
import { Default } from "@/routes/Default"
|
||||
import { BrowserRouter, Route, Routes } from "react-router-dom"
|
||||
import { Contact } from "@/routes/Contact"
|
||||
import { Board } from "./routes/Board"
|
||||
import { Inbox } from "./routes/Inbox"
|
||||
import { Editor, Tldraw, TLShapeId } from "tldraw"
|
||||
import { components, overrides } from "./ui-overrides"
|
||||
import { ChatBoxShape } from "./shapes/ChatBoxShapeUtil"
|
||||
import { VideoChatShape } from "./shapes/VideoChatShapeUtil"
|
||||
import { ChatBoxTool } from "./tools/ChatBoxTool"
|
||||
import { VideoChatTool } from "./tools/VideoChatTool"
|
||||
import { EmbedTool } from "./tools/EmbedTool"
|
||||
import { EmbedShape } from "./shapes/EmbedShapeUtil"
|
||||
import { createRoot } from "react-dom/client"
|
||||
|
||||
inject();
|
||||
inject()
|
||||
|
||||
const customShapeUtils = [ChatBoxShape, VideoChatShape, EmbedShape];
|
||||
const customTools = [ChatBoxTool, VideoChatTool, EmbedTool];
|
||||
const customShapeUtils = [ChatBoxShape, VideoChatShape, EmbedShape]
|
||||
const customTools = [ChatBoxTool, VideoChatTool, EmbedTool]
|
||||
|
||||
export default function InteractiveShapeExample() {
|
||||
return (
|
||||
<div className="tldraw__editor">
|
||||
<Tldraw
|
||||
shapeUtils={customShapeUtils}
|
||||
tools={customTools}
|
||||
overrides={overrides}
|
||||
components={components}
|
||||
onMount={(editor) => {
|
||||
handleInitialShapeLoad(editor);
|
||||
editor.createShape({ type: 'my-interactive-shape', x: 100, y: 100 });
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className="tldraw__editor">
|
||||
<Tldraw
|
||||
shapeUtils={customShapeUtils}
|
||||
tools={customTools}
|
||||
overrides={overrides}
|
||||
components={components}
|
||||
onMount={(editor) => {
|
||||
handleInitialShapeLoad(editor)
|
||||
editor.createShape({ type: "my-interactive-shape", x: 100, y: 100 })
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const handleInitialShapeLoad = (editor: Editor) => {
|
||||
const url = new URL(window.location.href);
|
||||
const shapeId = url.searchParams.get('shapeId') || url.searchParams.get('frameId');
|
||||
const x = url.searchParams.get('x');
|
||||
const y = url.searchParams.get('y');
|
||||
const zoom = url.searchParams.get('zoom');
|
||||
const url = new URL(window.location.href)
|
||||
const shapeId =
|
||||
url.searchParams.get("shapeId") || url.searchParams.get("frameId")
|
||||
const x = url.searchParams.get("x")
|
||||
const y = url.searchParams.get("y")
|
||||
const zoom = url.searchParams.get("zoom")
|
||||
|
||||
if (shapeId) {
|
||||
console.log('Found shapeId in URL:', shapeId);
|
||||
const shape = editor.getShape(shapeId as TLShapeId);
|
||||
if (shapeId) {
|
||||
console.log("Found shapeId in URL:", shapeId)
|
||||
const shape = editor.getShape(shapeId as TLShapeId)
|
||||
|
||||
if (shape) {
|
||||
console.log('Found shape:', shape);
|
||||
if (x && y && zoom) {
|
||||
console.log('Setting camera to:', { x, y, zoom });
|
||||
editor.setCamera({
|
||||
x: parseFloat(x),
|
||||
y: parseFloat(y),
|
||||
z: parseFloat(zoom)
|
||||
});
|
||||
} else {
|
||||
console.log('Zooming to shape bounds');
|
||||
editor.zoomToBounds(editor.getShapeGeometry(shape).bounds, {
|
||||
targetZoom: 1,
|
||||
});
|
||||
}
|
||||
} else {
|
||||
console.warn('Shape not found in the editor');
|
||||
}
|
||||
} else {
|
||||
console.warn('No shapeId found in the URL');
|
||||
}
|
||||
if (shape) {
|
||||
console.log("Found shape:", shape)
|
||||
if (x && y && zoom) {
|
||||
console.log("Setting camera to:", { x, y, zoom })
|
||||
editor.setCamera({
|
||||
x: parseFloat(x),
|
||||
y: parseFloat(y),
|
||||
z: parseFloat(zoom),
|
||||
})
|
||||
} else {
|
||||
console.log("Zooming to shape bounds")
|
||||
editor.zoomToBounds(editor.getShapeGeometry(shape).bounds, {
|
||||
targetZoom: 1,
|
||||
})
|
||||
}
|
||||
} else {
|
||||
console.warn("Shape not found in the editor")
|
||||
}
|
||||
} else {
|
||||
console.warn("No shapeId found in the URL")
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.createRoot(document.getElementById("root")!).render(<App />);
|
||||
createRoot(document.getElementById("root")!).render(<App />)
|
||||
|
||||
function App() {
|
||||
|
||||
return (
|
||||
// <React.StrictMode>
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/" element={<Default />} />
|
||||
<Route path="/contact" element={<Contact />} />
|
||||
<Route path="/board/:slug" element={<Board />} />
|
||||
<Route path="/inbox" element={<Inbox />} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
// </React.StrictMode>
|
||||
);
|
||||
};
|
||||
return (
|
||||
// <React.StrictMode>
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/" element={<Default />} />
|
||||
<Route path="/contact" element={<Contact />} />
|
||||
<Route path="/board/:slug" element={<Board />} />
|
||||
<Route path="/inbox" element={<Inbox />} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
// </React.StrictMode>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"buildCommand": "yarn build",
|
||||
"installCommand": "yarn install",
|
||||
"buildCommand": "npm run build",
|
||||
"installCommand": "npm install",
|
||||
"framework": "vite",
|
||||
"outputDirectory": "dist",
|
||||
"rewrites": [
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue