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`;","keyboardntfy",[],[99],"files",[152,172],"counts",{"_185":32,"_186":187,"_188":32,"_189":32},"pulls","branches",1,"forks","envVars","contents",[],{"_103":173,"_158":140,"_155":117,"_95":99,"_165":177,"_163":176,"_100":175,"_157":-5,"_105":193,"_159":120,"_168":178,"_98":194},["D",1745788190868],[99],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.code.$",{"_93":94,"_95":96,"_97":43,"_100":-7,"_98":99,"_101":203,"_150":208,"_181":215,"_164":216,"_190":219,"_220":-5,"_221":22,"_222":-5,"_223":-5,"_224":-5,"_225":226},{"_103":104,"_95":96,"_105":204,"_107":-5,"_108":109,"_110":111,"_112":113,"_114":-5,"_14":115,"_116":117,"_118":109,"_119":120,"_121":32,"_16":122,"_123":124,"_125":124,"_126":127,"_128":127,"_129":127,"_130":124,"_131":124,"_23":205,"_135":206,"_138":207,"_149":22},["D",1745785038795],{"_93":94,"_133":134},{"_93":94,"_137":134},{"_100":120,"_95":43,"_103":140,"_141":104,"_142":-5,"_143":-5,"_144":-5,"_145":-5,"_146":-5,"_147":96,"_148":94},[209,212],{"_103":153,"_95":154,"_155":156,"_157":-5,"_158":140,"_159":160,"_161":109,"_105":162,"_100":32,"_163":164,"_165":166,"_167":22,"_168":-5,"_169":210,"_98":211},[],[154],{"_103":173,"_95":99,"_155":117,"_157":-5,"_158":140,"_159":120,"_161":109,"_105":174,"_100":175,"_163":176,"_165":177,"_167":22,"_168":178,"_169":213,"_98":214},[],[99],[209,212],{"_103":173,"_158":140,"_155":117,"_95":99,"_165":177,"_163":176,"_100":175,"_157":-5,"_105":217,"_159":120,"_168":178,"_98":218},["D",1745788190868],[99],[],"upstream","showCompareCallout","pull","ahead","behind","templates",[],"actionData","errors"]