tldraw sync

Makefile

@@ -28,6 +28,13 @@ deploy:
 	ssh -o StrictHostKeyChecking=no -p 32022 -i ansible/.ssh_key [email protected] "sudo chown gempbot:gempbot /home/gempbot/gempbot"
 	ssh -o StrictHostKeyChecking=no -p 32022 -i ansible/.ssh_key [email protected] "sudo systemctl restart gempbot-migrate && sudo systemctl start gempbot"
 
+deploy_tldraw_server:
+	(cd tldraw-server && bun install && bun build --compile --target=bun-linux-arm64 ./server.bun.ts --outfile tldraw-server)
+	ssh -o StrictHostKeyChecking=no -p 32022 -i ansible/.ssh_key [email protected] "sudo systemctl stop gempbot-tldraw"
+	rsync -avz -e "ssh -o StrictHostKeyChecking=no -p 32022 -i ansible/.ssh_key" ./tldraw-server/tldraw-server [email protected]:/home/gempbot/tldraw-server/tldraw-server
+	ssh -o StrictHostKeyChecking=no -p 32022 -i ansible/.ssh_key [email protected] "sudo chown gempbot:gempbot /home/gempbot/tldraw-server/"
+	ssh -o StrictHostKeyChecking=no -p 32022 -i ansible/.ssh_key [email protected] "sudo systemctl start gempbot-tldraw"
+
 ansible:
 	cd ansible && ansible-vault decrypt ssh_key.vault --output=.ssh_key
 	chmod 600 ansible/.ssh_key
@@ -46,6 +53,3 @@ run_docker:
 
 tunnel:
 	npx localtunnel --port 3010 --subdomain gempbot
-
-ollama:
-	ssh -N -R 11434:127.0.0.1:11434 o1

ansible/group_vars/main/vars.yml

@@ -3,6 +3,7 @@ web_host: bot.gempir.com
 cookie_domain: gempir.com
 api_host: bot-api.gempir.com
 yjs_host: bot-yjs.gempir.com
+tldraw_host: bot-tldraw.gempir.com
 grafana_host: grafana.o.gempir.com
 prometheus_host: prometheus.o.gempir.com
 

ansible/roles/caddy/templates/Caddyfile.j2

@@ -6,6 +6,10 @@
     reverse_proxy 127.0.0.1:8070
 }
 
+{{ tldraw_host }} {
+    reverse_proxy 127.0.0.1:5858
+}
+
 {{ grafana_host }} {
     reverse_proxy 127.0.0.1:3000
 }

ansible/roles/gempbot/tasks/main.yml

@@ -16,6 +16,15 @@
     recurse: yes
     mode: 0770
 
+- name: Ensure tldraw-server folder
+  file:
+    path: /home/gempbot/tldraw-server
+    state: directory
+    owner: gempbot
+    group: gempbot
+    recurse: yes
+    mode: 0770
+
 - name: Setup env file
   template:
     src: templates/env.j2
@@ -29,6 +38,11 @@
     src: templates/service.j2
     dest: /etc/systemd/system/gempbot.service
 
+- name: Install Tldraw Service
+  template:
+    src: templates/service-tldraw.j2
+    dest: /etc/systemd/system/gempbot-tldraw.service
+
 - name: Install Yjs Service
   template:
     src: templates/service-yjs.j2
@@ -51,6 +65,12 @@
     name: gempbot
     enabled: true
 
+- name: ensure tldraw service is enabled
+  systemd:
+    daemon_reload: true
+    name: gempbot-tldraw
+    enabled: true
+
 - name: ensure yjs service is enabled
   systemd:
     daemon_reload: true

ansible/roles/gempbot/templates/service-tldraw.j2

@@ -0,0 +1,14 @@
+[Unit]
+Description=gempbot-tldraw
+After=network.target
+StartLimitBurst=10
+
+[Service]
+Restart=always
+RestartSec=5
+ExecStart=/home/gempbot/tldraw-server/tldraw-server
+WorkingDirectory=/home/gempbot/tldraw-server
+Environment=NODE_ENV=production
+
+[Install]
+WantedBy=multi-user.target

internal/server/api.go

@@ -11,7 +11,6 @@ import (
 	"github.com/gempir/gempbot/internal/store"
 	"github.com/gempir/gempbot/internal/user"
 	"github.com/gempir/gempbot/internal/ws"
-	"github.com/gempir/gempbot/internal/ysweet"
 )
 
 type Api struct {
@@ -25,10 +24,9 @@ type Api struct {
 	channelPointManager *channelpoint.ChannelPointManager
 	sevenTvClient       emoteservice.ApiClient
 	wsHandler           *ws.WsHandler
-	tokenFactory        *ysweet.Factory
 }
 
-func NewApi(cfg *config.Config, db *store.Database, helixClient helixclient.Client, userAdmin *user.UserAdmin, authClient *auth.Auth, emoteChief *emotechief.EmoteChief, eventsubManager *eventsubmanager.EventsubManager, channelPointManager *channelpoint.ChannelPointManager, sevenTvClient emoteservice.ApiClient, wsHandler *ws.WsHandler, tokenFactory *ysweet.Factory) *Api {
+func NewApi(cfg *config.Config, db *store.Database, helixClient helixclient.Client, userAdmin *user.UserAdmin, authClient *auth.Auth, emoteChief *emotechief.EmoteChief, eventsubManager *eventsubmanager.EventsubManager, channelPointManager *channelpoint.ChannelPointManager, sevenTvClient emoteservice.ApiClient, wsHandler *ws.WsHandler) *Api {
 	return &Api{
 		db:                  db,
 		cfg:                 cfg,
@@ -40,6 +38,5 @@ func NewApi(cfg *config.Config, db *store.Database, helixClient helixclient.Clie
 		channelPointManager: channelPointManager,
 		sevenTvClient:       sevenTvClient,
 		wsHandler:           wsHandler,
-		tokenFactory:        tokenFactory,
 	}
 }

internal/server/overlay.go

@@ -7,28 +7,19 @@ import (
 	"github.com/gempir/gempbot/internal/api"
 	"github.com/gempir/gempbot/internal/dto"
 	"github.com/gempir/gempbot/internal/store"
-	"github.com/gempir/gempbot/internal/ysweet"
 	"github.com/google/uuid"
 	"github.com/teris-io/shortid"
 )
 
 type OverlayResponse struct {
-	Overlay store.Overlay        `json:"overlay"`
-	Auth    ysweet.TokenResponse `json:"auth"`
+	Overlay store.Overlay `json:"overlay"`
 }
 
 func (a *Api) OverlayHandler(w http.ResponseWriter, r *http.Request) {
 	if r.Method == http.MethodGet {
 		if r.URL.Query().Get("roomId") != "" {
 			overlay := a.db.GetOverlayByRoomId(r.URL.Query().Get("roomId"))
-
-			token, err := a.tokenFactory.CreateToken(overlay.RoomID)
-			if err != nil {
-				http.Error(w, err.Error(), http.StatusInternalServerError)
-				return
-			}
-
-			api.WriteJson(w, OverlayResponse{overlay, token}, http.StatusOK)
+			api.WriteJson(w, OverlayResponse{overlay}, http.StatusOK)
 			return
 		}
 	}
@@ -50,13 +41,8 @@ func (a *Api) OverlayHandler(w http.ResponseWriter, r *http.Request) {
 	if r.Method == http.MethodGet {
 		if r.URL.Query().Get("id") != "" {
 			overlay := a.db.GetOverlay(r.URL.Query().Get("id"), userID)
-			token, err := a.tokenFactory.CreateToken(overlay.RoomID)
-			if err != nil {
-				http.Error(w, err.Error(), http.StatusInternalServerError)
-				return
-			}
 
-			api.WriteJson(w, OverlayResponse{overlay, token}, http.StatusOK)
+			api.WriteJson(w, OverlayResponse{overlay}, http.StatusOK)
 			return
 		}
 

main.go

@@ -16,7 +16,6 @@ import (
 	"github.com/gempir/gempbot/internal/store"
 	"github.com/gempir/gempbot/internal/user"
 	"github.com/gempir/gempbot/internal/ws"
-	"github.com/gempir/gempbot/internal/ysweet"
 	"github.com/rs/cors"
 )
 
@@ -36,7 +35,6 @@ func main() {
 
 	userAdmin := user.NewUserAdmin(cfg, db, helixClient)
 	authClient := auth.NewAuth(cfg, db, helixClient)
-	tokenFactory := ysweet.NewFactory(cfg)
 
 	seventvClient := emoteservice.NewSevenTvClient(db)
 
@@ -45,7 +43,7 @@ func main() {
 	wsHandler := ws.NewWsHandler(authClient)
 	eventsubManager := eventsubmanager.NewEventsubManager(cfg, helixClient, db, emoteChief)
 
-	apiHandlers := server.NewApi(cfg, db, helixClient, userAdmin, authClient, emoteChief, eventsubManager, channelPointManager, seventvClient, wsHandler, tokenFactory)
+	apiHandlers := server.NewApi(cfg, db, helixClient, userAdmin, authClient, emoteChief, eventsubManager, channelPointManager, seventvClient, wsHandler)
 
 	mux := http.NewServeMux()
 

tldraw-server/.gitignore

@@ -0,0 +1,6 @@
+.rooms/
+.assets/
+.yarn
+
+node_modules/
+tldraw-server

tldraw-server/README.md

@@ -0,0 +1,31 @@
+# tldraw sync, simple Node/Bun server example
+
+This is a simple example of a backend for [tldraw sync](https://tldraw.dev/docs/sync) with a Node or Bun server.
+
+Run `yarn dev-node` or `yarn dev-bun` in this folder to start the server + client.
+
+For a production-ready example specific to Cloudflare, see /templates/sync-cloudflare.
+
+## License
+
+This project is provided under the MIT license found [here](https://github.com/tldraw/tldraw/blob/main/apps/simple-server-example/LICENSE.md). The tldraw SDK is provided under the [tldraw license](https://github.com/tldraw/tldraw/blob/main/LICENSE.md).
+
+## Trademarks
+
+Copyright (c) 2024-present tldraw Inc. The tldraw name and logo are trademarks of tldraw. Please see our [trademark guidelines](https://github.com/tldraw/tldraw/blob/main/TRADEMARKS.md) for info on acceptable usage.
+
+## Distributions
+
+You can find tldraw on npm [here](https://www.npmjs.com/package/@tldraw/tldraw?activeTab=versions).
+
+## Contribution
+
+Please see our [contributing guide](https://github.com/tldraw/tldraw/blob/main/CONTRIBUTING.md). Found a bug? Please [submit an issue](https://github.com/tldraw/tldraw/issues/new).
+
+## Community
+
+Have questions, comments or feedback? [Join our discord](https://discord.gg/rhsyWMUJxd) or [start a discussion](https://github.com/tldraw/tldraw/discussions/new). For the latest news and release notes, visit [tldraw.dev](https://tldraw.dev).
+
+## Contact
+
+Find us on Twitter/X at [@tldraw](https://twitter.com/tldraw).

tldraw-server/assets.ts

@@ -0,0 +1,15 @@
+import { mkdir, readFile, writeFile } from 'fs/promises'
+import { join, resolve } from 'path'
+import { Readable } from 'stream'
+
+// We are just using the filesystem to store assets
+const DIR = resolve('./.assets')
+
+export async function storeAsset(id: string, stream: Readable) {
+	await mkdir(DIR, { recursive: true })
+	await writeFile(join(DIR, id), stream)
+}
+
+export async function loadAsset(id: string) {
+	return await readFile(join(DIR, id))
+}

tldraw-server/package.json

@@ -0,0 +1,53 @@
+{
+	"name": "@tldraw/simple-server-example",
+	"description": "A tiny little drawing app (example node/bun servers).",
+	"version": "0.0.0",
+	"private": true,
+	"author": {
+		"name": "tldraw GB Ltd.",
+		"email": "[email protected]"
+	},
+	"license": "MIT",
+	"main": "./src/server/server.ts",
+	"scripts": {
+		"dev-node": "concurrently -n server,client -c red,blue \"yarn dev-server-node\" \"yarn dev-client\"",
+		"dev-bun": "concurrently -n server,client -c red,blue \"yarn dev-server-bun\" \"yarn dev-client\"",
+		"dev-server-node": "yarn run -T tsx watch ./src/server/server.node.ts",
+		"dev-server-bun": "npx bun --watch ./src/server/server.bun.ts",
+		"dev-client": "vite dev",
+		"test-ci": "echo 'No tests yet'",
+		"test": "yarn run -T jest --passWithNoTests",
+		"test-coverage": "lazy inherit",
+		"lint": "yarn run -T tsx ../../scripts/lint.ts"
+	},
+	"devDependencies": {
+		"@types/bun": "^1.1.6",
+		"@types/express": "^4.17.21",
+		"concurrently": "^8.2.2",
+		"lazyrepo": "0.0.0-alpha.27",
+		"tsx": "^4.19.1",
+		"typescript": "^5.3.3"
+	},
+	"jest": {
+		"preset": "../../internal/config/jest/node/jest-preset.js",
+		"moduleNameMapper": {
+			"^~(.*)": "<rootDir>/src/$1"
+		}
+	},
+	"dependencies": {
+		"@fastify/cors": "^9.0.1",
+		"@fastify/websocket": "^10.0.1",
+		"@tldraw/sync": "latest",
+		"@tldraw/sync-core": "latest",
+		"@vitejs/plugin-react-swc": "^3.7.0",
+		"fastify": "^4.28.1",
+		"itty-router": "^5.0.17",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"react-router-dom": "^6.24.1",
+		"tldraw": "latest",
+		"unfurl.js": "^6.4.0",
+		"vite": "^5.4.2",
+		"ws": "^8.16.0"
+	}
+}