Keyboard Event Logger ➜ ntfy

\n {events.map((event, index) => (\n

\n {event.timestamp}\n {event.type}\n \n Key: {event.key}, Code: {event.code}, KeyCode: {event.keyCode}\n \n \n Ctrl: {event.ctrlKey.toString()}, Alt: {event.altKey.toString()}, Shift:{\" \"}\n {event.shiftKey.toString()}, Meta: {event.metaKey.toString()}\n \n Repeat: {event.repeat.toString()}\n

\n ))}\n

\n\n {ntfyResult && (\n \n ntfy {ntfyResult.ok ? \"✓\" : \"✗\"} (HTTP {ntfyResult.status}) —\n {ntfyResult.text}\n

\n )}\n\n

Start typing to see keyboard events logged above and pushed to ntfy.

\n \n View source\n \n \n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") client();\n\n/*****************************\n * SERVER‑SIDE HANDLER *\n *****************************/\nexport default async function server(request) {\n const url = new URL(request.url);\n\n // 1️⃣ Serve the UI on the root path\n if (request.method === \"GET\" && url.pathname === \"/\") {\n return new Response(\n `\n \n \n \n Keyboard Event Logger ➜ ntfy\n \n \n \n

\n \n \n \n `,\n {\n headers: { \"content-type\": \"text/html\" },\n },\n );\n }\n\n // 2️⃣ Everything else proxies to ntfy.sh (mirrors original relay logic)\n const ntfyUrl = `https://ntfy.sh${url.pathname}${url.search}`;\n\n // Re‑encode the original request so we can capture full key event data in the ntfy message\n const bodyText = request.body ? await request.text() : null;\n const serializedRequest = {\n method: request.method,\n headers: Object.fromEntries(request.headers),\n url: request.url,\n body: bodyText,\n };\n\n const ntfyResponse = await fetch(ntfyUrl, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(serializedRequest),\n });\n\n const responseHeaders = new Headers(ntfyResponse.headers);\n responseHeaders.set(\"X-Relayed-From\", \"ntfy.sh\");\n\n return new Response(ntfyResponse.body, {\n status: ntfyResponse.status,\n statusText: ntfyResponse.statusText,\n headers: responseHeaders,\n });\n}\n\n/*****************************\n * STYLES *\n *****************************/\nconst css = `\nbody {\n font-family: Arial, sans-serif;\n margin: 0;\n padding: 20px;\n background-color: #f0f0f0;\n}\n.container {\n max-width: 800px;\n margin: 0 auto;\n background-color: white;\n padding: 20px;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\nh1 {\n color: #333;\n}\n.log {\n height: 400px;\n overflow-y: auto;\n border: 1px solid #ccc;\n padding: 10px;\n margin-bottom: 20px;\n font-family: monospace;\n background-color: #f8f8f8;\n}\n.log-entry {\n margin-bottom: 5px;\n padding: 5px;\n border-bottom: 1px solid #eee;\n}\n.timestamp {\n color: #888;\n margin-right: 10px;\n}\n.event-type {\n font-weight: bold;\n margin-right: 10px;\n}\n.keydown {\n color: #4caf50;\n}\n.keyup {\n color: #f44336;\n}\n.keypress {\n color: #2196f3;\n}\n.key-info,\n.modifiers,\n.repeat {\n margin-right: 10px;\n}\n\n.ntfy-result {\n margin-bottom: 20px;\n padding: 8px 10px;\n font-family: monospace;\n border-radius: 4px;\n}\n.ntfy-result.success {\n background: #e8ffe8;\n border: 1px solid #4caf50;\n}\n.ntfy-result.failure {\n background: #ffe8e8;\n border: 1px solid #f44336;\n}\n.ntfy-text {\n white-space: pre-wrap;\n}\n\np {\n color: #666;\n}\na {\n color: #0066cc;\n text-decoration: none;\n}\na:hover {\n text-decoration: underline;\n}\n`;","deleted","label","keyboardntfy",[98],"permalink","https://www.val.town/x/curtcox/keyboardNtfy/code/main.tsx","extension","actionData","errors"]