\n Simple Pixel Tracker\n

\n \n

Creating your tracking pixel...

\n );\n }\n\n return (\n

\n Simple Pixel Tracker\n

\n\n {pixel && (\n

Your Tracking Pixel

\n {refreshing\n ? \n : (\n refreshPixelData(pixel.id)}\n className=\"text-blue-500 hover:text-blue-700\"\n title=\"Refresh data\"\n >\n \n \n )}\n

\n ID: {pixel.id}\n

\n Created:{\" \"}\n {formatDate(pixel.created)}\n

\n Total Views:{\" \"}\n {pixel.views.length}\n

\n\n

Status Page URL

\n Share this URL to check the status of your tracking pixel:\n

\n \n copyToClipboard(pixel.statusUrl, \"status\")}\n className=\"bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-4 rounded-r-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-200\"\n >\n Copy\n \n

\n {copySuccess && copyType === \"status\" && (\n

{copySuccess}

\n )}\n

\n\n

Tracking Pixel

\n Copy this HTML tag to include in your email:\n

\n {copySuccess && copyType === \"html\" && (\n

{copySuccess}

\n )}\n

\n\n

View History

\n {pixel.views.length === 0\n ? (\n

\n No views yet. When someone opens your email, their visit will\n appear here.\n

\n )\n : (\n

\n \n \n \n \n \n \n \n \n {pixel.views.map((view, index) => (\n \n \n \n \n ))}\n \n

\n Time\n	\n Referrer\n
\n {formatDate(view.timestamp)}\n	\n {view.referer}\n

\n )}\n

\n\n

\n \n {loading ? \"Creating...\" : \"Create Another Pixel\"}\n \n

\n )}\n

\n );\n}\n",[],[148,194,201,208],[148,194,201],{"_102":217,"_95":218,"_149":219,"_151":195,"_152":135,"_153":220,"_155":116,"_104":221,"_99":175,"_157":222,"_159":223,"_160":27,"_161":-5,"_162":224,"_98":225},"ccd6bb82-171f-11f0-9e72-569c3dd06744","index.html","5f1f0360-171f-11f0-844a-569c3dd06744",40,["D",1744408579644],"file","\n\n\n\n \n \n Simple Pixel Tracker\n \n\n\n\n

\n \n \n\n\n\n",[],[148,194,218],{"_102":227,"_95":228,"_149":229,"_151":195,"_152":135,"_153":230,"_155":116,"_104":231,"_99":31,"_157":187,"_159":232,"_160":27,"_161":-5,"_162":233,"_98":234},"5f29d880-171f-11f0-aaea-569c3dd06744","index.tsx","5f29d934-171f-11f0-aaea-569c3dd06744",35,["D",1744408395586],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();\n",[],[148,194,228],[148,194],{"_102":237,"_95":238,"_149":239,"_151":150,"_152":135,"_153":240,"_155":116,"_104":241,"_99":31,"_157":187,"_159":242,"_160":27,"_161":-5,"_162":243,"_98":244},"57922b9a-171f-11f0-9ef4-569c3dd06744","types.d.ts","57922c6c-171f-11f0-9ef4-569c3dd06744",30,["D",1744408382807],"export interface PixelData {\n id: string;\n created: string;\n trackingUrl?: string;\n statusUrl?: string;\n views: Array<{\n timestamp: string;\n ip: string;\n userAgent: string;\n referer: string;\n }>;\n}\n",[],[148,238],[148],{"_102":247,"_95":248,"_149":249,"_151":-5,"_152":135,"_153":250,"_155":116,"_104":251,"_99":31,"_157":222,"_159":252,"_160":27,"_161":-5,"_162":253,"_98":254},"cf8ee5cc-16ff-11f0-a30c-569c3dd06744",".vtignore","cf8ee6c6-16ff-11f0-a30c-569c3dd06744",6,["D",1744394840199],".git\n.DS_Store\nnode_modules\nvendor",[],[248],{"_102":256,"_95":257,"_149":258,"_151":-5,"_152":135,"_153":259,"_155":116,"_104":260,"_99":175,"_157":222,"_159":261,"_160":27,"_161":-5,"_162":262,"_98":263},"24cd85ec-1715-11f0-9bcb-569c3dd06744","README.md","8c827a0c-50c9-40ca-9bd9-81ca4d42e47e",17,["D",1744404002757],"# Simple Pixel Tracker\n\nA minimalist pixel tracking application for email open tracking. Create tracking\npixels that can be embedded in emails to monitor when they're opened.\n\n## Features\n\n- **One-Click Pixel Creation**: Generate tracking pixels instantly\n- **Status Page**: Each pixel has its own status page URL to monitor views\n- **PNG Tracking Pixel**: Use a transparent 1x1 PNG image for email tracking\n- **Track Email Opens**: See when your emails are opened and from where\n- **Simple Interface**: Clean, straightforward UI built with Tailwind CSS\n\n## How It Works\n\n1. Visit the homepage and create a new tracking pixel\n2. Copy the provided HTML code for the tracking pixel\n3. Paste it into your email content\n4. When someone opens your email, their visit will be recorded\n5. Check the status page URL to see when your email was opened\n\n## Technical Details\n\nThis application is built using:\n\n- **Frontend**: React with TypeScript and Tailwind CSS\n- **Backend**: Hono.js API server\n- **Storage**: Val Town blob storage\n\n## API Endpoints\n\n- `GET /pixeltracker/create` - Create a new tracking pixel\n- `GET /pixeltracker/status/:id` - View the status page for a specific pixel\n- `GET /pixeltracker/data/:id` - Get JSON data for a specific pixel\n- `GET /pixeltracker/pixel/:id.png` - The actual PNG tracking pixel that records\n views\n- `GET /pixeltracker/list` - List all tracking pixels (admin use)\n\n## Privacy Considerations\n\nThis tool collects visitor data including:\n\n- Timestamp of email opens\n- IP addresses\n- User agents (browser/email client information)\n- Referrer information\n\nMake sure to comply with privacy regulations like GDPR and include appropriate\ndisclosures in your privacy policy when using tracking pixels in emails.\n",[],[257],{"_102":265,"_95":266,"_149":267,"_151":-5,"_152":135,"_153":268,"_155":116,"_104":269,"_99":211,"_157":222,"_159":270,"_160":27,"_161":-5,"_162":271,"_98":272},"24d6cfb2-1715-11f0-a058-569c3dd06744","deno.json","cf942352-16ff-11f0-bf17-569c3dd06744",19,["D",1744404002777],"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/348900b8b79f4a434cab4c74b3bc8d4d2fa8ee74/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"compilerOptions\": {\n \"noImplicitAny\": false,\n \"strict\": false,\n \"types\": [\n \"https://www.val.town/types/valtown.d.ts\"\n ],\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ]\n },\n \"lint\": {\n \"files\": {\n \"include\": [\n \"deno:/https/esm.town/**/*\"\n ]\n },\n \"rules\": {\n \"exclude\": [\n \"no-explicit-any\"\n ]\n }\n },\n \"node_modules_dir\": false,\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true,\n \"unstable-sloppy-imports\": true\n }\n}\n",[],[266],"files",[146,164,171,181,192,199,206,216,226,236,246,255,264],"counts",{"_277":31,"_278":211,"_279":31,"_280":31},"pulls","branches","forks","envVars","contents",[283,286,289,292],{"_102":147,"_95":148,"_149":150,"_151":-5,"_152":135,"_153":154,"_155":116,"_104":284,"_99":31,"_157":158,"_159":-5,"_160":27,"_161":-5,"_98":285},["D",1744408382545],[148],{"_102":247,"_95":248,"_149":249,"_151":-5,"_152":135,"_153":250,"_155":116,"_104":287,"_99":31,"_157":222,"_159":252,"_160":27,"_161":-5,"_98":288},["D",1744394840199],[248],{"_102":256,"_95":257,"_149":258,"_151":-5,"_152":135,"_153":259,"_155":116,"_104":290,"_99":175,"_157":222,"_159":261,"_160":27,"_161":-5,"_98":291},["D",1744404002757],[257],{"_102":265,"_95":266,"_149":267,"_151":-5,"_152":135,"_153":268,"_155":116,"_104":293,"_99":211,"_157":222,"_159":270,"_160":27,"_161":-5,"_98":294},["D",1744404002777],[266],"upstream",{"_102":297,"_95":298,"_110":299,"_111":-5,"_108":109,"_21":300},"96102714-f528-11ef-aa68-569c3dd06744","reactHonoStarter","Starter template with client-side React & Hono server",{"_93":301,"_130":302},"std","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJVaVhpQ1BId3dscVpBbkdZVWlMNjJtcjkxWS5wbmcifQ","emptyEnvVars","isNew","routes/_app.x.$handle.$name.branch.$branch.history",{"_93":94,"_95":96,"_97":41,"_100":307,"_311":312,"_521":31,"_522":116},{"_102":103,"_95":96,"_104":308,"_106":-5,"_107":27,"_108":109,"_110":-5,"_111":-5,"_12":112,"_113":114,"_115":116,"_117":118,"_119":31,"_120":121,"_122":121,"_123":124,"_125":124,"_126":124,"_127":121,"_128":27,"_21":309,"_132":310},["D",1744394617429],{"_93":94,"_130":131},{"_99":134,"_95":41,"_102":135,"_136":103,"_137":138,"_139":140,"_141":109,"_142":143},"history",[313,318,323,328,336,344,352,360,365,373,381,389,396,401,406,416,446,451,456,461,466,473,481,488,493,500,505,513],{"_149":209,"_99":134,"_104":314,"_152":135,"_273":315},["D",1744408693984],[316],{"_102":207,"_152":135,"_149":209,"_95":208,"_159":212,"_157":187,"_99":211,"_151":202,"_104":314,"_153":134,"_161":-5,"_155":116,"_160":27,"_98":317},[148,194,201,208],{"_149":114,"_99":118,"_104":319,"_152":135,"_273":320},["D",1744408620634],[321],{"_102":172,"_152":135,"_149":114,"_95":173,"_159":177,"_157":176,"_99":175,"_151":167,"_104":319,"_153":118,"_161":178,"_155":116,"_160":27,"_98":322},[148,166,173],{"_149":219,"_99":220,"_104":324,"_152":135,"_273":325},["D",1744408579644],[326],{"_102":217,"_152":135,"_149":219,"_95":218,"_159":223,"_157":222,"_99":175,"_151":195,"_104":324,"_153":220,"_161":-5,"_155":116,"_160":27,"_98":327},[148,194,218],{"_149":219,"_99":140,"_104":329,"_152":135,"_273":330},["D",1744408523433],[331],{"_102":332,"_152":135,"_149":219,"_95":218,"_159":333,"_157":222,"_99":334,"_151":195,"_104":329,"_153":140,"_161":-5,"_155":27,"_160":27,"_98":335},"ab561c8c-171f-11f0-90b1-569c3dd06744","\n\n\n\n \n \n Simple Pixel Tracker\n \n\n\n\n

\n \n \n\n\n\n",2,[148,194,218],{"_149":219,"_99":337,"_104":338,"_152":135,"_273":339},38,["D",1744408492204],[340],{"_102":341,"_152":135,"_149":219,"_95":218,"_159":342,"_157":222,"_99":211,"_151":195,"_104":338,"_153":337,"_161":-5,"_155":27,"_160":27,"_98":343},"98b875de-171f-11f0-a14b-569c3dd06744","\n\n \n \n \n Simple Pixel Tracker\n \n \n \n

\n \n \n \n\n",[148,194,218],{"_149":114,"_99":345,"_104":346,"_152":135,"_273":347},37,["D",1744408468800],[348],{"_102":349,"_152":135,"_149":114,"_95":173,"_159":350,"_157":176,"_99":334,"_151":167,"_104":346,"_153":345,"_161":178,"_155":27,"_160":27,"_98":351},"8ac580fc-171f-11f0-8053-569c3dd06744","import { serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { blob } from \"https://esm.town/v/std/blob?v=13\";\nimport { nanoid } from \"npm:nanoid\";\nimport { transparentPng } from \"./pngs.ts\";\nimport type { PixelData } from \"../types.d.ts\";\n\nconst app = new Hono();\n\n// Helper function to get pixel data\nconst getPixelData = async (id: string): Promise => {\n try {\n const data = await blob.getJSON(`pixeltracker/pixel_${id}`);\n return data as PixelData;\n } catch (_error) {\n const newData: PixelData = {\n id,\n created: new Date().toISOString(),\n views: [],\n };\n await blob.setJSON(`pixeltracker/pixel_${id}`, newData);\n return newData;\n }\n};\n\n// Serve frontend files\napp.get(\"/\", (_c) => serveFile(\"/src/frontend/index.html\", import.meta.url));\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path, import.meta.url));\n\n// Create new tracking pixel\napp.get(\"/pixeltracker/create\", async (c) => {\n const id = nanoid(10);\n const newPixel: PixelData = {\n id,\n created: new Date().toISOString(),\n views: [],\n };\n\n await blob.setJSON(`pixeltracker/pixel_${id}`, newPixel);\n\n const baseUrl = new URL(c.req.url).origin;\n return c.json({\n id,\n statusUrl: `${baseUrl}/pixeltracker/status/${id}`,\n trackingUrl: `${baseUrl}/pixeltracker/pixel/${id}.png`,\n });\n});\n\n// Status page for a pixel\napp.get(\"/pixeltracker/status/:id\", async (c) => {\n const id = c.req.param(\"id\");\n try {\n await getPixelData(id);\n return serveFile(\"/src/frontend/index.html\", import.meta.url);\n } catch (_e) {\n return c.json({ error: \"Pixel not found\" }, 404);\n }\n});\n\n// Get JSON data for a pixel\napp.get(\"/pixeltracker/data/:id\", async (c) => {\n const id = c.req.param(\"id\");\n try {\n const data = await getPixelData(id);\n const baseUrl = new URL(c.req.url).origin;\n return c.json({\n ...data,\n statusUrl: `${baseUrl}/pixeltracker/status/${id}`,\n trackingUrl: `${baseUrl}/pixeltracker/pixel/${id}.png`,\n });\n } catch (_e) {\n return c.json({ error: \"Pixel not found\" }, 404);\n }\n});\n\n// Tracking pixel endpoint\napp.get(\"/pixeltracker/pixel/:id.png\", async (c) => {\n const id = c.req.param(\"id\");\n\n try {\n const data = await getPixelData(id);\n\n data.views.push({\n timestamp: new Date().toISOString(),\n ip: c.req.header(\"x-forwarded-for\") || \"unknown\",\n userAgent: c.req.header(\"user-agent\") || \"unknown\",\n referer: c.req.header(\"referer\") || \"unknown\",\n });\n\n await blob.setJSON(`pixeltracker/pixel_${id}`, data);\n } catch (e) {\n console.error(`Error tracking pixel ${id}:`, e);\n }\n\n return new Response(transparentPng, {\n headers: {\n \"Content-Type\": \"image/png\",\n \"Access-Control-Allow-Origin\": \"*\",\n \"Cache-Control\": \"no-store, no-cache, must-revalidate, proxy-revalidate\",\n \"Pragma\": \"no-cache\",\n \"Expires\": \"0\",\n },\n });\n});\n\n// Unwrap and rethrow Hono errors as the original error\napp.onError((err, _c) => {\n throw err;\n});\n\nexport default app.fetch;\n",[148,166,173],{"_149":114,"_99":353,"_104":354,"_152":135,"_273":355},36,["D",1744408435821],[356],{"_102":357,"_152":135,"_149":114,"_95":173,"_159":358,"_157":176,"_99":211,"_151":167,"_104":354,"_153":353,"_161":178,"_155":27,"_160":27,"_98":359},"771d0df4-171f-11f0-9c4b-569c3dd06744","import { serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { blob } from \"https://esm.town/v/std/blob?v=13\";\nimport { nanoid } from \"npm:nanoid\";\nimport { transparentPng } from \"./pngs.ts\";\nimport type { PixelData } from \"../types.d.ts\";\n\nconst app = new Hono();\n\n// Helper function to get pixel data\nconst getPixelData = async (id: string): Promise => {\n try {\n const data = await blob.getJSON(`pixeltracker/pixel_${id}`);\n return data as PixelData;\n } catch (_error) {\n const newData: PixelData = {\n id,\n created: new Date().toISOString(),\n views: [],\n };\n await blob.setJSON(`pixeltracker/pixel_${id}`, newData);\n return newData;\n }\n};\n\n// Serve frontend files\napp.get(\"/\", (_c) => serveFile(\"/frontend/index.html\", import.meta.url));\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path, import.meta.url));\n\n// Create new tracking pixel\napp.get(\"/pixeltracker/create\", async (c) => {\n const id = nanoid(10);\n const newPixel: PixelData = {\n id,\n created: new Date().toISOString(),\n views: [],\n };\n\n await blob.setJSON(`pixeltracker/pixel_${id}`, newPixel);\n\n const baseUrl = new URL(c.req.url).origin;\n return c.json({\n id,\n statusUrl: `${baseUrl}/pixeltracker/status/${id}`,\n trackingUrl: `${baseUrl}/pixeltracker/pixel/${id}.png`,\n });\n});\n\n// Status page for a pixel\napp.get(\"/pixeltracker/status/:id\", async (c) => {\n const id = c.req.param(\"id\");\n try {\n await getPixelData(id);\n return serveFile(\"/frontend/index.html\", import.meta.url);\n } catch (_e) {\n return c.json({ error: \"Pixel not found\" }, 404);\n }\n});\n\n// Get JSON data for a pixel\napp.get(\"/pixeltracker/data/:id\", async (c) => {\n const id = c.req.param(\"id\");\n try {\n const data = await getPixelData(id);\n const baseUrl = new URL(c.req.url).origin;\n return c.json({\n ...data,\n statusUrl: `${baseUrl}/pixeltracker/status/${id}`,\n trackingUrl: `${baseUrl}/pixeltracker/pixel/${id}.png`,\n });\n } catch (_e) {\n return c.json({ error: \"Pixel not found\" }, 404);\n }\n});\n\n// Tracking pixel endpoint\napp.get(\"/pixeltracker/pixel/:id.png\", async (c) => {\n const id = c.req.param(\"id\");\n\n try {\n const data = await getPixelData(id);\n\n data.views.push({\n timestamp: new Date().toISOString(),\n ip: c.req.header(\"x-forwarded-for\") || \"unknown\",\n userAgent: c.req.header(\"user-agent\") || \"unknown\",\n referer: c.req.header(\"referer\") || \"unknown\",\n });\n\n await blob.setJSON(`pixeltracker/pixel_${id}`, data);\n } catch (e) {\n console.error(`Error tracking pixel ${id}:`, e);\n }\n\n return new Response(transparentPng, {\n headers: {\n \"Content-Type\": \"image/png\",\n \"Access-Control-Allow-Origin\": \"*\",\n \"Cache-Control\": \"no-store, no-cache, must-revalidate, proxy-revalidate\",\n \"Pragma\": \"no-cache\",\n \"Expires\": \"0\",\n },\n });\n});\n\n// Unwrap and rethrow Hono errors as the original error\napp.onError((err, _c) => {\n throw err;\n});\n\nexport default app.fetch;\n",[148,166,173],{"_149":229,"_99":230,"_104":361,"_152":135,"_273":362},["D",1744408395586],[363],{"_102":227,"_152":135,"_149":229,"_95":228,"_159":232,"_157":187,"_99":31,"_151":195,"_104":361,"_153":230,"_161":-5,"_155":116,"_160":27,"_98":364},[148,194,228],{"_149":209,"_99":366,"_104":367,"_152":135,"_273":368},34,["D",1744408395576],[369],{"_102":370,"_152":135,"_149":209,"_95":208,"_159":371,"_157":187,"_99":31,"_151":202,"_104":367,"_153":366,"_161":-5,"_155":27,"_160":27,"_98":372},"5f2695d0-171f-11f0-8e32-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { FiLoader, FiRefreshCw } from \"https://esm.sh/react-icons@5.5.0/fi\";\nimport { PixelData } from \"../../types.d.ts\";\n\nexport function App() {\n const [pixel, setPixel] = useState(null);\n const [loading, setLoading] = useState(false);\n const [refreshing, setRefreshing] = useState(false);\n const [copySuccess, setCopySuccess] = useState(\"\");\n const [copyType, setCopyType] = useState(\"\");\n\n // Check if we're on a status page or create a new pixel\n useEffect(() => {\n const path = globalThis.location.pathname;\n const match = path.match(/\\/pixeltracker\\/status\\/([^\\/]+)/);\n\n if (match && match[1]) {\n fetchPixelDetails(match[1]);\n\n // Set up auto-refresh\n const interval = setInterval(() => {\n refreshPixelData(match[1]);\n }, 5000);\n\n return () => clearInterval(interval);\n } else {\n createNewPixel();\n }\n }, []);\n\n const refreshPixelData = async (id: string) => {\n setRefreshing(true);\n try {\n const response = await fetch(`/pixeltracker/data/${id}`);\n if (response.ok) {\n const data = await response.json();\n setPixel(data);\n }\n } catch (error) {\n console.error(\"Error refreshing pixel data:\", error);\n } finally {\n setRefreshing(false);\n }\n };\n\n const createNewPixel = async () => {\n setLoading(true);\n try {\n const response = await fetch(\"/pixeltracker/create\");\n const data = await response.json();\n await fetchPixelDetails(data.id);\n } catch (error) {\n console.error(\"Error creating pixel:\", error);\n } finally {\n setLoading(false);\n }\n };\n\n const fetchPixelDetails = async (id: string) => {\n setLoading(true);\n try {\n const response = await fetch(`/pixeltracker/data/${id}`);\n const data = await response.json();\n setPixel(data);\n } catch (error) {\n console.error(\"Error fetching pixel details:\", error);\n } finally {\n setLoading(false);\n }\n };\n\n const copyToClipboard = (text: string, type: string) => {\n navigator.clipboard.writeText(text)\n .then(() => {\n setCopySuccess(\"Copied!\");\n setCopyType(type);\n setTimeout(() => {\n setCopySuccess(\"\");\n setCopyType(\"\");\n }, 2000);\n })\n .catch(() => {\n setCopySuccess(\"Failed to copy\");\n setCopyType(type);\n });\n };\n\n const formatDate = (dateString: string) => {\n return new Date(dateString).toLocaleString();\n };\n\n if (loading && !pixel) {\n return (\n

\n Simple Pixel Tracker\n

\n \n

Creating your tracking pixel...

\n );\n }\n\n return (\n

\n Simple Pixel Tracker\n

\n\n {pixel && (\n

Your Tracking Pixel

\n {refreshing\n ? \n : (\n refreshPixelData(pixel.id)}\n className=\"text-blue-500 hover:text-blue-700\"\n title=\"Refresh data\"\n >\n \n \n )}\n

\n ID: {pixel.id}\n

\n Created:{\" \"}\n {formatDate(pixel.created)}\n

\n Total Views:{\" \"}\n {pixel.views.length}\n

\n\n

Status Page URL

\n Share this URL to check the status of your tracking pixel:\n

\n {copySuccess && copyType === \"status\" && (\n

{copySuccess}

\n )}\n

\n\n

Tracking Pixel

\n Copy this HTML tag to include in your email:\n

\n {copySuccess && copyType === \"html\" && (\n

{copySuccess}

\n )}\n

\n\n

View History

\n {pixel.views.length === 0\n ? (\n

\n No views yet. When someone opens your email, their visit will\n appear here.\n

\n )\n : (\n

\n \n \n \n \n \n \n \n \n {pixel.views.map((view, index) => (\n \n \n \n \n ))}\n \n

\n Time\n	\n Referrer\n
\n {formatDate(view.timestamp)}\n	\n {view.referer}\n

\n )}\n

\n\n

\n \n {loading ? \"Creating...\" : \"Create Another Pixel\"}\n \n

\n )}\n

\n );\n}\n",[148,194,201,208],{"_149":374,"_99":375,"_104":376,"_152":135,"_273":377},"9bb0838b-16e0-4244-9235-45dd025b9f5c",33,["D",1744408395575],[378],{"_102":379,"_152":135,"_149":374,"_95":166,"_159":-5,"_157":158,"_99":211,"_151":-5,"_104":376,"_153":375,"_161":-5,"_155":116,"_160":116,"_98":380},"5f231108-171f-11f0-8d73-569c3dd06744",[166],{"_149":219,"_99":382,"_104":383,"_152":135,"_273":384},32,["D",1744408395572],[385],{"_102":386,"_152":135,"_149":219,"_95":218,"_159":387,"_157":222,"_99":31,"_151":195,"_104":383,"_153":382,"_161":-5,"_155":27,"_160":27,"_98":388},"5f1f02b6-171f-11f0-844a-569c3dd06744","\n\n \n \n \n Simple Pixel Tracker\n \n \n \n

\n \n \n \n\n",[148,194,218],{"_149":114,"_99":390,"_104":391,"_152":135,"_273":392},31,["D",1744408382809],[393],{"_102":394,"_152":135,"_149":114,"_95":173,"_159":358,"_157":187,"_99":31,"_151":167,"_104":391,"_153":390,"_161":178,"_155":27,"_160":27,"_98":395},"57950112-171f-11f0-928c-569c3dd06744",[148,166,173],{"_149":239,"_99":240,"_104":397,"_152":135,"_273":398},["D",1744408382807],[399],{"_102":237,"_152":135,"_149":239,"_95":238,"_159":242,"_157":187,"_99":31,"_151":150,"_104":397,"_153":240,"_161":-5,"_155":116,"_160":27,"_98":400},[148,238],{"_149":184,"_99":185,"_104":402,"_152":135,"_273":403},["D",1744408382806],[404],{"_102":182,"_152":135,"_149":184,"_95":183,"_159":188,"_157":187,"_99":31,"_151":167,"_104":402,"_153":185,"_161":-5,"_155":116,"_160":27,"_98":405},[148,166,183],{"_149":407,"_99":408,"_104":409,"_152":135,"_273":410},"50ce3412-548d-4072-9250-dcbb7db43a58",28,["D",1744408382794],[411],{"_102":412,"_152":135,"_149":407,"_95":173,"_159":413,"_157":176,"_99":414,"_151":374,"_104":409,"_153":408,"_161":-5,"_155":116,"_160":116,"_98":415},"5785ce4a-171f-11f0-a086-569c3dd06744","import { serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { blob } from \"https://esm.town/v/std/blob\";\nimport { nanoid } from \"npm:nanoid\";\n\nconst app = new Hono();\n\n// Simple in-memory storage for development/testing\nconst pixelStore = new Map();\n\n// Helper function to get pixel data with fallback to in-memory\nconst getPixelData = async (id) => {\n // Try to get from memory first\n if (pixelStore.has(id)) {\n return pixelStore.get(id);\n }\n\n // Try to get from blob storage\n try {\n const data = await blob.getJSON(`pixeltracker/pixel_${id}`);\n // Cache in memory\n pixelStore.set(id, data);\n return data;\n } catch (_error) {\n // Create new data if not found\n const newData = {\n id,\n created: new Date().toISOString(),\n views: [],\n };\n pixelStore.set(id, newData);\n try {\n await blob.setJSON(`pixeltracker/pixel_${id}`, newData);\n } catch (e) {\n console.error(`Failed to save new pixel data to blob: ${e}`);\n }\n return newData;\n }\n};\n\n// Helper function to save pixel data\nconst savePixelData = async (id, data) => {\n // Update in-memory\n pixelStore.set(id, data);\n\n // Try to update blob storage\n try {\n await blob.setJSON(`pixeltracker/pixel_${id}`, data);\n return true;\n } catch (e) {\n console.error(`Error saving pixel data: ${e}`);\n return false;\n }\n};\n\n// Serve index.html at the root /\napp.get(\"/\", (_c) => {\n return serveFile(\"/frontend/index.html\", import.meta.url);\n});\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path, import.meta.url));\n\n// Generate a new tracking pixel ID\napp.get(\"/pixeltracker/create\", async (c) => {\n const id = nanoid(10);\n const newPixel = {\n id,\n created: new Date().toISOString(),\n views: [],\n };\n\n // Save to both in-memory and blob storage\n await savePixelData(id, newPixel);\n\n const baseUrl = new URL(c.req.url).origin;\n return c.json({\n id,\n statusUrl: `${baseUrl}/pixeltracker/status/${id}`,\n trackingUrl: `${baseUrl}/pixeltracker/pixel/${id}.png`,\n });\n});\n\n// Get tracking data for a pixel (status page)\napp.get(\"/pixeltracker/status/:id\", async (c) => {\n const id = c.req.param(\"id\");\n try {\n // Use helper function to get data\n const _data = await getPixelData(id);\n return serveFile(\"/frontend/index.html\", import.meta.url);\n } catch (e) {\n console.error(`Error in /pixeltracker/status/:id: ${e}`);\n return c.json({ error: \"Pixel not found\" }, 404);\n }\n});\n\n// Get JSON data for a pixel\napp.get(\"/pixeltracker/data/:id\", async (c) => {\n const id = c.req.param(\"id\");\n try {\n // Get pixel data with our helper function\n const data = await getPixelData(id);\n\n const baseUrl = new URL(c.req.url).origin;\n return c.json({\n ...data,\n statusUrl: `${baseUrl}/pixeltracker/status/${id}`,\n trackingUrl: `${baseUrl}/pixeltracker/pixel/${id}.png`,\n });\n } catch (e) {\n console.error(`Error in /pixeltracker/data/:id: ${e}`);\n return c.json({ error: \"Pixel not found\" }, 404);\n }\n});\n\n// 1x1 transparent tracking pixel endpoint (PNG version)\napp.get(\"/pixeltracker/pixel/:id.png\", async (c) => {\n const id = c.req.param(\"id\");\n\n try {\n // Get the current data using our helper\n const data = await getPixelData(id);\n\n // Add a new view\n const viewData = {\n timestamp: new Date().toISOString(),\n ip: c.req.header(\"x-forwarded-for\") || \"unknown\",\n userAgent: c.req.header(\"user-agent\") || \"unknown\",\n referer: c.req.header(\"referer\") || \"unknown\",\n };\n\n data.views.push(viewData);\n\n // Update the data in both stores\n await savePixelData(id, data);\n\n console.log(\n `Recorded view for pixel ${id}. Total views: ${data.views.length}`,\n );\n\n // 1x1 transparent PNG\n const transparentPng = new Uint8Array([\n 0x89,\n 0x50,\n 0x4E,\n 0x47,\n 0x0D,\n 0x0A,\n 0x1A,\n 0x0A,\n 0x00,\n 0x00,\n 0x00,\n 0x0D,\n 0x49,\n 0x48,\n 0x44,\n 0x52,\n 0x00,\n 0x00,\n 0x00,\n 0x01,\n 0x00,\n 0x00,\n 0x00,\n 0x01,\n 0x08,\n 0x06,\n 0x00,\n 0x00,\n 0x00,\n 0x1F,\n 0x15,\n 0xC4,\n 0x89,\n 0x00,\n 0x00,\n 0x00,\n 0x0B,\n 0x49,\n 0x44,\n 0x41,\n 0x54,\n 0x08,\n 0xD7,\n 0x63,\n 0x60,\n 0x00,\n 0x02,\n 0x00,\n 0x00,\n 0x05,\n 0x00,\n 0x01,\n 0xE2,\n 0x26,\n 0x05,\n 0x9B,\n 0x00,\n 0x00,\n 0x00,\n 0x00,\n 0x49,\n 0x45,\n 0x4E,\n 0x44,\n 0xAE,\n 0x42,\n 0x60,\n 0x82,\n ]);\n\n return new Response(transparentPng, {\n headers: {\n \"Content-Type\": \"image/png\",\n \"Access-Control-Allow-Origin\": \"*\",\n \"Cache-Control\":\n \"no-store, no-cache, must-revalidate, proxy-revalidate\",\n \"Pragma\": \"no-cache\",\n \"Expires\": \"0\",\n },\n });\n } catch (e) {\n console.error(`Error tracking pixel ${id}:`, e);\n\n // Return a default 1x1 transparent PNG even if there's an error\n const transparentPng = new Uint8Array([\n 0x89,\n 0x50,\n 0x4E,\n 0x47,\n 0x0D,\n 0x0A,\n 0x1A,\n 0x0A,\n 0x00,\n 0x00,\n 0x00,\n 0x0D,\n 0x49,\n 0x48,\n 0x44,\n 0x52,\n 0x00,\n 0x00,\n 0x00,\n 0x01,\n 0x00,\n 0x00,\n 0x00,\n 0x01,\n 0x08,\n 0x06,\n 0x00,\n 0x00,\n 0x00,\n 0x1F,\n 0x15,\n 0xC4,\n 0x89,\n 0x00,\n 0x00,\n 0x00,\n 0x0B,\n 0x49,\n 0x44,\n 0x41,\n 0x54,\n 0x08,\n 0xD7,\n 0x63,\n 0x60,\n 0x00,\n 0x02,\n 0x00,\n 0x00,\n 0x05,\n 0x00,\n 0x01,\n 0xE2,\n 0x26,\n 0x05,\n 0x9B,\n 0x00,\n 0x00,\n 0x00,\n 0x00,\n 0x49,\n 0x45,\n 0x4E,\n 0x44,\n 0xAE,\n 0x42,\n 0x60,\n 0x82,\n ]);\n\n return new Response(transparentPng, {\n headers: {\n \"Content-Type\": \"image/png\",\n \"Access-Control-Allow-Origin\": \"*\",\n \"Cache-Control\":\n \"no-store, no-cache, must-revalidate, proxy-revalidate\",\n \"Pragma\": \"no-cache\",\n \"Expires\": \"0\",\n },\n });\n }\n});\n\n// List all pixels\napp.get(\"/pixeltracker/list\", async (c) => {\n const pixels = [];\n const baseUrl = new URL(c.req.url).origin;\n\n // First get from in-memory store\n for (const [_id, data] of pixelStore.entries()) {\n pixels.push({\n id: data.id,\n created: data.created,\n viewCount: data.views.length,\n statusUrl: `${baseUrl}/pixeltracker/status/${data.id}`,\n trackingUrl: `${baseUrl}/pixeltracker/pixel/${data.id}.png`,\n });\n }\n\n // Also try to get from blob storage\n try {\n const keys = await blob.list(\"pixeltracker/pixel_\");\n\n for (const key of keys) {\n try {\n // Skip if we already have this from in-memory\n const keyString = typeof key === \"string\" ? key : key.key;\n const id = keyString.replace(\"pixeltracker/pixel_\", \"\");\n if (pixelStore.has(id)) continue;\n\n const data = await blob.getJSON(keyString);\n const typedData = data as {\n id: string;\n created: string;\n views: Array;\n };\n\n pixels.push({\n id: typedData.id,\n created: typedData.created,\n viewCount: typedData.views.length,\n statusUrl: `${baseUrl}/pixeltracker/status/${typedData.id}`,\n trackingUrl: `${baseUrl}/pixeltracker/pixel/${typedData.id}.png`,\n });\n\n // Add to in-memory store for future\n pixelStore.set(id, typedData);\n } catch (_e) {\n // Skip if there's an error\n }\n }\n } catch (e) {\n console.error(`Error listing pixels from blob storage: ${e}`);\n }\n\n return c.json(pixels);\n});\n\n// Unwrap and rethrow Hono errors as the original error\napp.onError((err, _c) => {\n throw err;\n});\n\n// HTTP vals expect an exported \"fetch handler\"\nexport default app.fetch;\n",7,[166,173],{"_149":417,"_99":418,"_104":419,"_152":135,"_273":420},"122d2f69-89f1-486e-bea5-b64751f71368",27,["D",1744408382794],[421,426,431,435,441],{"_102":422,"_152":135,"_149":417,"_95":208,"_159":423,"_157":187,"_99":250,"_151":424,"_104":419,"_153":418,"_161":-5,"_155":116,"_160":116,"_98":425},"57822f9c-171f-11f0-9a2a-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\n\ntype PixelDetail = {\n id: string;\n created: string;\n statusUrl: string;\n trackingUrl: string;\n views: Array<{\n timestamp: string;\n ip: string;\n userAgent: string;\n referer: string;\n }>;\n};\n\nexport function App() {\n const [pixel, setPixel] = useState(null);\n const [loading, setLoading] = useState(false);\n const [refreshing, setRefreshing] = useState(false);\n const [copySuccess, setCopySuccess] = useState(\"\");\n const [copyType, setCopyType] = useState(\"\");\n const [refreshInterval, setRefreshInterval] = useState(null);\n\n // Auto-create a pixel on first load if not on a status page\n useEffect(() => {\n const path = globalThis.location.pathname;\n const match = path.match(/\\/pixeltracker\\/status\\/([^\\/]+)/);\n\n if (match && match[1]) {\n fetchPixelDetails(match[1]);\n\n // Set up auto-refresh for view count every 3 seconds for more responsive updates\n const interval = setInterval(() => {\n refreshPixelData(match[1]);\n }, 3000);\n\n setRefreshInterval(interval);\n } else {\n // Auto-create a pixel if we're on the homepage\n createNewPixel();\n }\n\n return () => {\n if (refreshInterval) {\n clearInterval(refreshInterval);\n }\n };\n }, []);\n\n const refreshPixelData = async (id: string) => {\n setRefreshing(true);\n try {\n const response = await fetch(`/pixeltracker/data/${id}`);\n if (response.ok) {\n const data = await response.json();\n setPixel(data);\n }\n } catch (error) {\n console.error(\"Error refreshing pixel data:\", error);\n } finally {\n setRefreshing(false);\n }\n };\n\n const createNewPixel = async () => {\n setLoading(true);\n try {\n const response = await fetch(\"/pixeltracker/create\");\n const data = await response.json();\n await fetchPixelDetails(data.id);\n\n // Set up auto-refresh for view count with faster refresh rate\n if (refreshInterval) {\n clearInterval(refreshInterval);\n }\n\n const interval = setInterval(() => {\n refreshPixelData(data.id);\n }, 3000);\n\n setRefreshInterval(interval);\n } catch (error) {\n console.error(\"Error creating pixel:\", error);\n } finally {\n setLoading(false);\n }\n };\n\n const fetchPixelDetails = async (id: string) => {\n setLoading(true);\n try {\n const response = await fetch(`/pixeltracker/data/${id}`);\n const data = await response.json();\n setPixel(data);\n } catch (error) {\n console.error(\"Error fetching pixel details:\", error);\n } finally {\n setLoading(false);\n }\n };\n\n const copyToClipboard = (text: string, type: string) => {\n navigator.clipboard.writeText(text)\n .then(() => {\n setCopySuccess(\"Copied!\");\n setCopyType(type);\n setTimeout(() => {\n setCopySuccess(\"\");\n setCopyType(\"\");\n }, 2000);\n })\n .catch(() => {\n setCopySuccess(\"Failed to copy\");\n setCopyType(type);\n });\n };\n\n const copyImage = async () => {\n if (!pixel) return;\n\n try {\n const response = await fetch(pixel.trackingUrl);\n const blob = await response.blob();\n\n // Create a ClipboardItem\n const item = new ClipboardItem({ [blob.type]: blob });\n\n // Copy to clipboard\n await navigator.clipboard.write([item]);\n\n setCopySuccess(\"Image copied!\");\n setCopyType(\"image\");\n setTimeout(() => {\n setCopySuccess(\"\");\n setCopyType(\"\");\n }, 2000);\n } catch (error) {\n console.error(\"Error copying image:\", error);\n setCopySuccess(\"Failed to copy image\");\n setCopyType(\"image\");\n }\n };\n\n const formatDate = (dateString: string) => {\n return new Date(dateString).toLocaleString();\n };\n\n if (loading && !pixel) {\n return (\n

\n Simple Pixel Tracker\n

\n \n \n \n \n \n \n

Creating your tracking pixel...

\n );\n }\n\n return (\n

\n Simple Pixel Tracker\n

\n\n {pixel && (\n

Your Tracking Pixel

\n {refreshing\n ? (\n \n \n \n \n \n \n )\n : (\n refreshPixelData(pixel.id)}\n className=\"text-blue-500 hover:text-blue-700\"\n title=\"Refresh data\"\n >\n \n \n \n \n )}\n

\n ID: {pixel.id}\n

\n Created:{\" \"}\n {formatDate(pixel.created)}\n

\n Total Views:{\" \"}\n {pixel.views.length}\n

\n\n

Status Page URL

\n Share this URL to check the status of your tracking pixel:\n

\n {copySuccess && copyType === \"status\" && (\n

{copySuccess}

\n )}\n

\n\n

Tracking Pixel

\n\n

\n 1. Copy this HTML tag to include in your email:\n

\n {copySuccess && copyType === \"html\" && (\n

{copySuccess}

\n )}\n

\n\n

\n 2. Or copy the tracking pixel image directly:\n

\n \n 1x1 transparent PNG image\n \n \n \n

\n \n Copy Image\n \n

\n {copySuccess && copyType === \"image\" && (\n

{copySuccess}

\n )}\n

\n\n

\n When someone opens an email with this tracking pixel, their visit\n will be recorded.\n

\n\n

View History

\n {pixel.views.length === 0\n ? (\n

\n No views yet. When someone opens your email, their visit will\n appear here.\n

\n )\n : (\n

\n \n \n \n \n \n \n \n \n {pixel.views.map((view, index) => (\n \n \n \n \n ))}\n \n

\n Time\n	\n Referrer\n
\n {formatDate(view.timestamp)}\n	\n {view.referer}\n

\n )}\n

\n\n

\n \n {loading ? \"Creating...\" : \"Create Another Pixel\"}\n \n

\n )}\n \n );\n}\n","75818d5a-6455-4c9f-9477-43c0ede92c17",[194,201,208],{"_102":427,"_152":135,"_149":424,"_95":201,"_159":-5,"_157":158,"_99":211,"_151":428,"_104":429,"_153":418,"_161":-5,"_155":116,"_160":116,"_98":430},"57822dc6-171f-11f0-9a2a-569c3dd06744","3fbae7c2-a3c0-4f08-b6f5-4efc105c892b",["D",1744408382794],[194,201],{"_102":432,"_152":135,"_149":428,"_95":194,"_159":-5,"_157":158,"_99":211,"_151":-5,"_104":433,"_153":418,"_161":-5,"_155":116,"_160":116,"_98":434},"57822b14-171f-11f0-9a2a-569c3dd06744",["D",1744408382794],[194],{"_102":436,"_152":135,"_149":437,"_95":218,"_159":387,"_157":222,"_99":438,"_151":428,"_104":439,"_153":418,"_161":-5,"_155":116,"_160":116,"_98":440},"5782756a-171f-11f0-9a2a-569c3dd06744","5e39c790-43ab-4683-b695-4a01592bd210",4,["D",1744408382794],[194,218],{"_102":442,"_152":135,"_149":443,"_95":228,"_159":232,"_157":187,"_99":334,"_151":428,"_104":444,"_153":418,"_161":-5,"_155":116,"_160":116,"_98":445},"5782775e-171f-11f0-9a2a-569c3dd06744","1f98089b-243b-4b3f-92cb-a89bd8dac1bd",["D",1744408382794],[194,228],{"_149":202,"_99":203,"_104":447,"_152":135,"_273":448},["D",1744408382728],[449],{"_102":200,"_152":135,"_149":202,"_95":201,"_159":-5,"_157":158,"_99":31,"_151":195,"_104":447,"_153":203,"_161":-5,"_155":116,"_160":27,"_98":450},[148,194,201],{"_149":167,"_99":168,"_104":452,"_152":135,"_273":453},["D",1744408382667],[454],{"_102":165,"_152":135,"_149":167,"_95":166,"_159":-5,"_157":158,"_99":31,"_151":150,"_104":452,"_153":168,"_161":-5,"_155":116,"_160":27,"_98":455},[148,166],{"_149":195,"_99":196,"_104":457,"_152":135,"_273":458},["D",1744408382607],[459],{"_102":193,"_152":135,"_149":195,"_95":194,"_159":-5,"_157":158,"_99":31,"_151":150,"_104":457,"_153":196,"_161":-5,"_155":116,"_160":27,"_98":460},[148,194],{"_149":150,"_99":154,"_104":462,"_152":135,"_273":463},["D",1744408382545],[464],{"_102":147,"_152":135,"_149":150,"_95":148,"_159":-5,"_157":158,"_99":31,"_151":-5,"_104":462,"_153":154,"_161":-5,"_155":116,"_160":27,"_98":465},[148],{"_149":407,"_99":467,"_104":468,"_152":135,"_273":469},22,["D",1744404002768],[470],{"_102":471,"_152":135,"_149":407,"_95":173,"_159":413,"_157":176,"_99":250,"_151":374,"_104":468,"_153":467,"_161":-5,"_155":27,"_160":27,"_98":472},"24e3a688-1715-11f0-af3d-569c3dd06744",[166,173],{"_149":417,"_99":474,"_104":475,"_152":135,"_273":476},21,["D",1744404002763],[477],{"_102":478,"_152":135,"_149":417,"_95":208,"_159":423,"_157":187,"_99":479,"_151":424,"_104":475,"_153":474,"_161":-5,"_155":27,"_160":27,"_98":480},"24df4b6a-1715-11f0-a168-569c3dd06744",5,[194,201,208],{"_149":443,"_99":482,"_104":483,"_152":135,"_273":484},20,["D",1744404002760],[485],{"_102":486,"_152":135,"_149":443,"_95":228,"_159":232,"_157":187,"_99":211,"_151":428,"_104":483,"_153":482,"_161":-5,"_155":27,"_160":27,"_98":487},"24dadc38-1715-11f0-9095-569c3dd06744",[194,228],{"_149":267,"_99":268,"_104":489,"_152":135,"_273":490},["D",1744404002777],[491],{"_102":265,"_152":135,"_149":267,"_95":266,"_159":270,"_157":222,"_99":211,"_151":-5,"_104":489,"_153":268,"_161":-5,"_155":116,"_160":27,"_98":492},[266],{"_149":437,"_99":494,"_104":495,"_152":135,"_273":496},18,["D",1744404002757],[497],{"_102":498,"_152":135,"_149":437,"_95":218,"_159":387,"_157":222,"_99":175,"_151":428,"_104":495,"_153":494,"_161":-5,"_155":27,"_160":27,"_98":499},"24d11158-1715-11f0-8707-569c3dd06744",[194,218],{"_149":258,"_99":259,"_104":501,"_152":135,"_273":502},["D",1744404002757],[503],{"_102":256,"_152":135,"_149":258,"_95":257,"_159":261,"_157":222,"_99":175,"_151":-5,"_104":501,"_153":259,"_161":-5,"_155":116,"_160":27,"_98":504},[257],{"_149":407,"_99":506,"_104":507,"_152":135,"_273":508},16,["D",1744395846519],[509],{"_102":510,"_152":135,"_149":407,"_95":173,"_159":511,"_157":176,"_99":479,"_151":374,"_104":507,"_153":506,"_161":-5,"_155":27,"_160":27,"_98":512},"274f377e-1702-11f0-a207-569c3dd06744","import { serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { blob } from \"https://esm.town/v/std/blob\";\nimport { nanoid } from \"npm:nanoid\";\n\nconst app = new Hono();\n\n// Simple in-memory storage for development/testing\nconst pixelStore = new Map();\n\n// Helper function to get pixel data with fallback to in-memory\nconst getPixelData = async (id) => {\n // Try to get from memory first\n if (pixelStore.has(id)) {\n return pixelStore.get(id);\n }\n \n // Try to get from blob storage\n try {\n const data = await blob.getJSON(`pixel_${id}`);\n // Cache in memory\n pixelStore.set(id, data);\n return data;\n } catch (error) {\n // Create new data if not found\n const newData = { \n id, \n created: new Date().toISOString(),\n views: []\n };\n pixelStore.set(id, newData);\n try {\n await blob.setJSON(`pixel_${id}`, newData);\n } catch (e) {\n console.error(`Failed to save new pixel data to blob: ${e}`);\n }\n return newData;\n }\n};\n\n// Helper function to save pixel data\nconst savePixelData = async (id, data) => {\n // Update in-memory\n pixelStore.set(id, data);\n \n // Try to update blob storage\n try {\n await blob.setJSON(`pixel_${id}`, data);\n return true;\n } catch (e) {\n console.error(`Error saving pixel data: ${e}`);\n return false;\n }\n};\n\n// Serve index.html at the root /\napp.get(\"/\", async c => {\n return serveFile(\"/frontend/index.html\", import.meta.url);\n});\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Generate a new tracking pixel ID\napp.get(\"/pixeltracker/create\", async c => {\n const id = nanoid(10);\n const newPixel = { \n id, \n created: new Date().toISOString(),\n views: [],\n };\n \n // Save to both in-memory and blob storage\n await savePixelData(id, newPixel);\n \n const baseUrl = new URL(c.req.url).origin;\n return c.json({\n id,\n statusUrl: `${baseUrl}/pixeltracker/status/${id}`,\n trackingUrl: `${baseUrl}/pixeltracker/pixel/${id}.png`\n });\n});\n\n// Get tracking data for a pixel (status page)\napp.get(\"/pixeltracker/status/:id\", async c => {\n const id = c.req.param(\"id\");\n try {\n // Use helper function to get data\n const data = await getPixelData(id);\n return serveFile(\"/frontend/index.html\", import.meta.url);\n } catch (e) {\n console.error(`Error in /pixeltracker/status/:id: ${e}`);\n return c.json({ error: \"Pixel not found\" }, 404);\n }\n});\n\n// Get JSON data for a pixel\napp.get(\"/pixeltracker/data/:id\", async c => {\n const id = c.req.param(\"id\");\n try {\n // Get pixel data with our helper function\n const data = await getPixelData(id);\n \n const baseUrl = new URL(c.req.url).origin;\n return c.json({\n ...data,\n statusUrl: `${baseUrl}/pixeltracker/status/${id}`,\n trackingUrl: `${baseUrl}/pixeltracker/pixel/${id}.png`\n });\n } catch (e) {\n console.error(`Error in /pixeltracker/data/:id: ${e}`);\n return c.json({ error: \"Pixel not found\" }, 404);\n }\n});\n\n// 1x1 transparent tracking pixel endpoint (PNG version)\napp.get(\"/pixeltracker/pixel/:id.png\", async c => {\n const id = c.req.param(\"id\");\n \n try {\n // Get the current data using our helper\n const data = await getPixelData(id);\n \n // Add a new view\n const viewData = {\n timestamp: new Date().toISOString(),\n ip: c.req.header(\"x-forwarded-for\") || \"unknown\",\n userAgent: c.req.header(\"user-agent\") || \"unknown\",\n referer: c.req.header(\"referer\") || \"unknown\"\n };\n \n data.views.push(viewData);\n \n // Update the data in both stores\n await savePixelData(id, data);\n \n console.log(`Recorded view for pixel ${id}. Total views: ${data.views.length}`);\n \n // 1x1 transparent PNG\n const transparentPng = new Uint8Array([\n 0x89, 0x50, 0x4E, 0x47, 0x0D, 0x0A, 0x1A, 0x0A, 0x00, 0x00, 0x00, 0x0D, \n 0x49, 0x48, 0x44, 0x52, 0x00, 0x00, 0x00, 0x01, 0x00, 0x00, 0x00, 0x01, \n 0x08, 0x06, 0x00, 0x00, 0x00, 0x1F, 0x15, 0xC4, 0x89, 0x00, 0x00, 0x00, \n 0x0B, 0x49, 0x44, 0x41, 0x54, 0x08, 0xD7, 0x63, 0x60, 0x00, 0x02, 0x00, \n 0x00, 0x05, 0x00, 0x01, 0xE2, 0x26, 0x05, 0x9B, 0x00, 0x00, 0x00, 0x00, \n 0x49, 0x45, 0x4E, 0x44, 0xAE, 0x42, 0x60, 0x82\n ]);\n \n return new Response(transparentPng, {\n headers: {\n \"Content-Type\": \"image/png\",\n \"Access-Control-Allow-Origin\": \"*\",\n \"Cache-Control\": \"no-store, no-cache, must-revalidate, proxy-revalidate\",\n \"Pragma\": \"no-cache\",\n \"Expires\": \"0\"\n }\n });\n } catch (e) {\n console.error(`Error tracking pixel ${id}:`, e);\n \n // Return a default 1x1 transparent PNG even if there's an error\n const transparentPng = new Uint8Array([\n 0x89, 0x50, 0x4E, 0x47, 0x0D, 0x0A, 0x1A, 0x0A, 0x00, 0x00, 0x00, 0x0D, \n 0x49, 0x48, 0x44, 0x52, 0x00, 0x00, 0x00, 0x01, 0x00, 0x00, 0x00, 0x01, \n 0x08, 0x06, 0x00, 0x00, 0x00, 0x1F, 0x15, 0xC4, 0x89, 0x00, 0x00, 0x00, \n 0x0B, 0x49, 0x44, 0x41, 0x54, 0x08, 0xD7, 0x63, 0x60, 0x00, 0x02, 0x00, \n 0x00, 0x05, 0x00, 0x01, 0xE2, 0x26, 0x05, 0x9B, 0x00, 0x00, 0x00, 0x00, \n 0x49, 0x45, 0x4E, 0x44, 0xAE, 0x42, 0x60, 0x82\n ]);\n \n return new Response(transparentPng, {\n headers: {\n \"Content-Type\": \"image/png\",\n \"Access-Control-Allow-Origin\": \"*\",\n \"Cache-Control\": \"no-store, no-cache, must-revalidate, proxy-revalidate\",\n \"Pragma\": \"no-cache\",\n \"Expires\": \"0\"\n }\n });\n }\n});\n\n// List all pixels\napp.get(\"/pixeltracker/list\", async c => {\n let pixels = [];\n const baseUrl = new URL(c.req.url).origin;\n \n // First get from in-memory store\n for (const [id, data] of pixelStore.entries()) {\n pixels.push({\n id: data.id,\n created: data.created,\n viewCount: data.views.length,\n statusUrl: `${baseUrl}/pixeltracker/status/${data.id}`,\n trackingUrl: `${baseUrl}/pixeltracker/pixel/${data.id}.png`\n });\n }\n \n // Also try to get from blob storage\n try {\n const keys = await blob.list(\"pixel_\");\n \n for (const key of keys) {\n try {\n // Skip if we already have this from in-memory\n const id = key.replace(\"pixel_\", \"\");\n if (pixelStore.has(id)) continue;\n \n const data = await blob.getJSON(key);\n pixels.push({\n id: data.id,\n created: data.created,\n viewCount: data.views.length,\n statusUrl: `${baseUrl}/pixeltracker/status/${data.id}`,\n trackingUrl: `${baseUrl}/pixeltracker/pixel/${data.id}.png`\n });\n \n // Add to in-memory store for future\n pixelStore.set(id, data);\n } catch (e) {\n // Skip if there's an error\n }\n }\n } catch (e) {\n console.error(`Error listing pixels from blob storage: ${e}`);\n }\n \n return c.json(pixels);\n});\n\n// Unwrap and rethrow Hono errors as the original error\napp.onError((err, c) => {\n throw err;\n});\n\n// HTTP vals expect an exported \"fetch handler\"\nexport default app.fetch;",[166,173],{"_149":417,"_99":514,"_104":515,"_152":135,"_273":516},15,["D",1744395846505],[517],{"_102":518,"_152":135,"_149":417,"_95":208,"_159":519,"_157":187,"_99":438,"_151":424,"_104":515,"_153":514,"_161":-5,"_155":27,"_160":27,"_98":520},"274bef10-1702-11f0-9dc3-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\n\ntype PixelDetail = {\n id: string;\n created: string;\n statusUrl: string;\n trackingUrl: string;\n views: Array<{\n timestamp: string;\n ip: string;\n userAgent: string;\n referer: string;\n }>;\n};\n\nexport function App() {\n const [pixel, setPixel] = useState(null);\n const [loading, setLoading] = useState(false);\n const [refreshing, setRefreshing] = useState(false);\n const [copySuccess, setCopySuccess] = useState(\"\");\n const [copyType, setCopyType] = useState(\"\");\n const [refreshInterval, setRefreshInterval] = useState(null);\n\n // Auto-create a pixel on first load if not on a status page\n useEffect(() => {\n const path = window.location.pathname;\n const match = path.match(/\\/pixeltracker\\/status\\/([^\\/]+)/);\n \n if (match && match[1]) {\n fetchPixelDetails(match[1]);\n \n // Set up auto-refresh for view count every 3 seconds for more responsive updates\n const interval = window.setInterval(() => {\n refreshPixelData(match[1]);\n }, 3000);\n \n setRefreshInterval(interval);\n } else {\n // Auto-create a pixel if we're on the homepage\n createNewPixel();\n }\n \n return () => {\n if (refreshInterval) {\n window.clearInterval(refreshInterval);\n }\n };\n }, []);\n\n const refreshPixelData = async (id: string) => {\n setRefreshing(true);\n try {\n const response = await fetch(`/pixeltracker/data/${id}`);\n if (response.ok) {\n const data = await response.json();\n setPixel(data);\n }\n } catch (error) {\n console.error(\"Error refreshing pixel data:\", error);\n } finally {\n setRefreshing(false);\n }\n };\n\n const createNewPixel = async () => {\n setLoading(true);\n try {\n const response = await fetch(\"/pixeltracker/create\");\n const data = await response.json();\n await fetchPixelDetails(data.id);\n \n // Set up auto-refresh for view count with faster refresh rate\n if (refreshInterval) {\n window.clearInterval(refreshInterval);\n }\n \n const interval = window.setInterval(() => {\n refreshPixelData(data.id);\n }, 3000);\n \n setRefreshInterval(interval);\n } catch (error) {\n console.error(\"Error creating pixel:\", error);\n } finally {\n setLoading(false);\n }\n };\n\n const fetchPixelDetails = async (id: string) => {\n setLoading(true);\n try {\n const response = await fetch(`/pixeltracker/data/${id}`);\n const data = await response.json();\n setPixel(data);\n } catch (error) {\n console.error(\"Error fetching pixel details:\", error);\n } finally {\n setLoading(false);\n }\n };\n\n const copyToClipboard = (text: string, type: string) => {\n navigator.clipboard.writeText(text)\n .then(() => {\n setCopySuccess(\"Copied!\");\n setCopyType(type);\n setTimeout(() => {\n setCopySuccess(\"\");\n setCopyType(\"\");\n }, 2000);\n })\n .catch(() => {\n setCopySuccess(\"Failed to copy\");\n setCopyType(type);\n });\n };\n \n const copyImage = async () => {\n if (!pixel) return;\n \n try {\n const response = await fetch(pixel.trackingUrl);\n const blob = await response.blob();\n \n // Create a ClipboardItem\n const item = new ClipboardItem({ [blob.type]: blob });\n \n // Copy to clipboard\n await navigator.clipboard.write([item]);\n \n setCopySuccess(\"Image copied!\");\n setCopyType(\"image\");\n setTimeout(() => {\n setCopySuccess(\"\");\n setCopyType(\"\");\n }, 2000);\n } catch (error) {\n console.error(\"Error copying image:\", error);\n setCopySuccess(\"Failed to copy image\");\n setCopyType(\"image\");\n }\n };\n\n const formatDate = (dateString: string) => {\n return new Date(dateString).toLocaleString();\n };\n\n if (loading && !pixel) {\n return (\n

Simple Pixel Tracker

\n \n

Creating your tracking pixel...

\n );\n }\n\n return (\n

Simple Pixel Tracker

\n \n {pixel && (\n

Your Tracking Pixel

\n {refreshing ? (\n \n ) : (\n \n )}\n

\n ID: {pixel.id}\n

\n Created: {formatDate(pixel.created)}\n

\n Total Views: {pixel.views.length}\n

\n \n

Status Page URL

Share this URL to check the status of your tracking pixel:

\n \n \n

\n {copySuccess && copyType === \"status\" && (\n

{copySuccess}

\n )}\n

\n \n

Tracking Pixel

\n \n

1. Copy this HTML tag to include in your email:

\n `}\n readOnly\n className=\"flex-1 p-3 border border-gray-300 rounded-l-md focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500\"\n />\n \n

\n {copySuccess && copyType === \"html\" && (\n

{copySuccess}

\n )}\n

\n \n

2. Or copy the tracking pixel image directly:

\n 1x1 transparent PNG image\n

\n $\"\"$ \n

\n \n

\n {copySuccess && copyType === \"image\" && (\n

{copySuccess}

\n )}\n

\n \n

When someone opens an email with this tracking pixel, their visit will be recorded.

\n \n

View History

\n {pixel.views.length === 0 ? (\n

No views yet. When someone opens your email, their visit will appear here.

\n ) : (\n

\n \n \n \n \n \n \n \n \n {pixel.views.map((view, index) => (\n \n \n \n \n ))}\n \n

Time	Referrer
{formatDate(view.timestamp)}	{view.referer}

\n )}\n

\n \n

\n )}\n

\n );\n}",[194,201,208],"page","hasNext","routes/_app","actionData","errors"]