\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,"_459":211,"_460":27},{"_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,324,334,342,351,361,369,377,385,390,398,405,412,419],{"_149":314,"_99":315,"_104":316,"_152":135,"_273":317},"50ce3412-548d-4072-9250-dcbb7db43a58",14,["D",1744395638337],[318],{"_102":319,"_152":135,"_149":314,"_95":173,"_159":320,"_157":176,"_99":321,"_151":322,"_104":316,"_153":315,"_161":-5,"_155":27,"_160":27,"_98":323},"ab3b2792-1701-11f0-b2f6-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// 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 await blob.setJSON(`pixel_${id}`, { \n id, \n created: new Date().toISOString(),\n views: [],\n });\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 const data = await blob.getJSON(`pixel_${id}`);\n const pixelUrl = `${new URL(c.req.url).origin}/pixeltracker/pixel/${id}.png`;\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 blob.getJSON(`pixel_${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// 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 or create if not found\n let data;\n try {\n data = await blob.getJSON(`pixel_${id}`);\n } catch (error) {\n // Create a new pixel entry if it doesn't exist\n data = { \n id, \n created: new Date().toISOString(),\n views: []\n };\n }\n \n // Ensure views array exists\n if (!data.views) {\n data.views = [];\n }\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\n await blob.setJSON(`pixel_${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 const keys = await blob.list(\"pixel_\");\n const pixels = [];\n const baseUrl = new URL(c.req.url).origin;\n \n for (const key of keys) {\n try {\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 } catch (e) {\n // Skip if there's an error\n }\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;",4,"9bb0838b-16e0-4244-9235-45dd025b9f5c",[166,173],{"_149":325,"_99":326,"_104":327,"_152":135,"_273":328},"122d2f69-89f1-486e-bea5-b64751f71368",13,["D",1744395638305],[329],{"_102":330,"_152":135,"_149":325,"_95":208,"_159":331,"_157":187,"_99":175,"_151":332,"_104":327,"_153":326,"_161":-5,"_155":27,"_160":27,"_98":333},"ab37f266-1701-11f0-a952-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 10 seconds\n const interval = window.setInterval(() => {\n refreshPixelData(match[1]);\n }, 10000);\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\n if (refreshInterval) {\n window.clearInterval(refreshInterval);\n }\n \n const interval = window.setInterval(() => {\n refreshPixelData(data.id);\n }, 10000);\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}","75818d5a-6455-4c9f-9477-43c0ede92c17",[194,201,208],{"_149":314,"_99":335,"_104":336,"_152":135,"_273":337},12,["D",1744395420956],[338],{"_102":339,"_152":135,"_149":314,"_95":173,"_159":340,"_157":176,"_99":175,"_151":322,"_104":336,"_153":335,"_161":-5,"_155":27,"_160":27,"_98":341},"29b46fc6-1701-11f0-af2b-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// 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 await blob.setJSON(`pixel_${id}`, { \n id, \n created: new Date().toISOString(),\n views: [],\n });\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 const data = await blob.getJSON(`pixel_${id}`);\n const pixelUrl = `${new URL(c.req.url).origin}/pixeltracker/pixel/${id}.png`;\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 blob.getJSON(`pixel_${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// 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\n const data = await blob.getJSON(`pixel_${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\n await blob.setJSON(`pixel_${id}`, data);\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 \"Cache-Control\": \"no-store, no-cache, must-revalidate, proxy-revalidate\",\n \"Pragma\": \"no-cache\",\n \"Expires\": \"0\"\n }\n });\n } catch (e) {\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 \"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 const keys = await blob.list(\"pixel_\");\n const pixels = [];\n const baseUrl = new URL(c.req.url).origin;\n \n for (const key of keys) {\n try {\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 } catch (e) {\n // Skip if there's an error\n }\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":325,"_99":343,"_104":344,"_152":135,"_273":345},11,["D",1744395420947],[346],{"_102":347,"_152":135,"_149":325,"_95":208,"_159":348,"_157":187,"_99":349,"_151":332,"_104":344,"_153":343,"_161":-5,"_155":27,"_160":27,"_98":350},"29acb9fc-1701-11f0-a105-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\n\ntype Pixel = {\n id: string;\n created: string;\n viewCount: number;\n statusUrl: string;\n trackingUrl: string;\n};\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 [copySuccess, setCopySuccess] = useState(\"\");\n const [showInstructions, setShowInstructions] = useState(true);\n\n // Check if we're 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 setShowInstructions(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 setShowInstructions(false);\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) => {\n navigator.clipboard.writeText(text)\n .then(() => {\n setCopySuccess(\"Copied!\");\n setTimeout(() => setCopySuccess(\"\"), 2000);\n })\n .catch(() => {\n setCopySuccess(\"Failed to copy\");\n });\n };\n\n const formatDate = (dateString: string) => {\n return new Date(dateString).toLocaleString();\n };\n\n return (\n

Simple Pixel Tracker

\n \n {showInstructions && (\n

Create a tracking pixel for your emails to track when they're opened.

\n \n

\n )}\n \n {pixel && (\n

Your Tracking Pixel

\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 \n

Tracking Pixel

Copy this image tag to track email opens:

\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 &&

{copySuccess}

}\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}",2,[194,201,208],{"_149":352,"_99":353,"_104":354,"_152":135,"_273":355},"5e39c790-43ab-4683-b695-4a01592bd210",10,["D",1744395420946],[356],{"_102":357,"_152":135,"_149":352,"_95":218,"_159":358,"_157":222,"_99":349,"_151":359,"_104":354,"_153":353,"_161":-5,"_155":27,"_160":27,"_98":360},"29a80524-1701-11f0-8765-569c3dd06744","\n\n \n \n \n Simple Pixel Tracker\n \n \n \n

\n \n \n \n","3fbae7c2-a3c0-4f08-b6f5-4efc105c892b",[194,218],{"_149":258,"_99":362,"_104":363,"_152":135,"_273":364},9,["D",1744395420941],[365],{"_102":366,"_152":135,"_149":258,"_95":257,"_159":367,"_157":222,"_99":349,"_151":-5,"_104":363,"_153":362,"_161":-5,"_155":27,"_160":27,"_98":368},"29a42c2e-1701-11f0-8577-569c3dd06744","# Simple Pixel Tracker\n\nA minimalist pixel tracking application for email open tracking. Create tracking pixels 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 views\n- `GET /pixeltracker/list` - List all tracking pixels (admin use)\n\n## Privacy Considerations\n\nThis tool collects visitor data including:\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 disclosures in your privacy policy when using tracking pixels in emails.",[257],{"_149":314,"_99":370,"_104":371,"_152":135,"_273":372},8,["D",1744394940204],[373],{"_102":374,"_152":135,"_149":314,"_95":173,"_159":375,"_157":176,"_99":349,"_151":322,"_104":371,"_153":370,"_161":-5,"_155":27,"_160":27,"_98":376},"0b1993da-1700-11f0-b6b8-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// 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(\"/api/create\", async c => {\n const id = nanoid(10);\n await blob.setJSON(`pixel_${id}`, { \n id, \n created: new Date().toISOString(),\n views: [],\n });\n return c.json({ id, trackingUrl: `/t/${id}.gif` });\n});\n\n// Get tracking data for a pixel\napp.get(\"/api/data/:id\", async c => {\n const id = c.req.param(\"id\");\n try {\n const data = await blob.getJSON(`pixel_${id}`);\n return c.json(data);\n } catch (e) {\n return c.json({ error: \"Pixel not found\" }, 404);\n }\n});\n\n// 1x1 transparent tracking pixel endpoint\napp.get(\"/t/:id.gif\", async c => {\n const paramId = c.req.param(\"id\");\n const id = paramId ? paramId.replace(\".gif\", \"\") : \"\";\n \n try {\n // Get the current data\n const data = await blob.getJSON(`pixel_${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\n await blob.setJSON(`pixel_${id}`, data);\n \n // Return a 1x1 transparent GIF\n const transparentGif = new Uint8Array([\n 0x47, 0x49, 0x46, 0x38, 0x39, 0x61, 0x01, 0x00, \n 0x01, 0x00, 0x80, 0x00, 0x00, 0xff, 0xff, 0xff, \n 0x00, 0x00, 0x00, 0x21, 0xf9, 0x04, 0x01, 0x00, \n 0x00, 0x00, 0x00, 0x2c, 0x00, 0x00, 0x00, 0x00, \n 0x01, 0x00, 0x01, 0x00, 0x00, 0x02, 0x02, 0x44, \n 0x01, 0x00, 0x3b\n ]);\n \n return new Response(transparentGif, {\n headers: {\n \"Content-Type\": \"image/gif\",\n \"Cache-Control\": \"no-store, no-cache, must-revalidate, proxy-revalidate\",\n \"Pragma\": \"no-cache\",\n \"Expires\": \"0\"\n }\n });\n } catch (e) {\n // Return a default 1x1 transparent GIF even if there's an error\n const transparentGif = new Uint8Array([\n 0x47, 0x49, 0x46, 0x38, 0x39, 0x61, 0x01, 0x00, \n 0x01, 0x00, 0x80, 0x00, 0x00, 0xff, 0xff, 0xff, \n 0x00, 0x00, 0x00, 0x21, 0xf9, 0x04, 0x01, 0x00, \n 0x00, 0x00, 0x00, 0x2c, 0x00, 0x00, 0x00, 0x00, \n 0x01, 0x00, 0x01, 0x00, 0x00, 0x02, 0x02, 0x44, \n 0x01, 0x00, 0x3b\n ]);\n \n return new Response(transparentGif, {\n headers: {\n \"Content-Type\": \"image/gif\",\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(\"/api/list\", async c => {\n const keys = await blob.list(\"pixel_\");\n const pixels = [];\n \n for (const key of keys) {\n try {\n const data = await blob.getJSON(key);\n pixels.push({\n id: data.id,\n created: data.created,\n viewCount: data.views.length\n });\n } catch (e) {\n // Skip if there's an error\n }\n }\n \n return c.json(pixels);\n});\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err, c) => {\n throw err;\n});\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;",[166,173],{"_149":267,"_99":378,"_104":379,"_152":135,"_273":380},7,["D",1744394840206],[381],{"_102":382,"_152":135,"_149":267,"_95":266,"_159":383,"_157":222,"_99":31,"_151":-5,"_104":379,"_153":378,"_161":-5,"_155":27,"_160":27,"_98":384},"cf94229e-16ff-11f0-bf17-569c3dd06744","{\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}",[266],{"_149":249,"_99":250,"_104":386,"_152":135,"_273":387},["D",1744394840199],[388],{"_102":247,"_152":135,"_149":249,"_95":248,"_159":252,"_157":222,"_99":31,"_151":-5,"_104":386,"_153":250,"_161":-5,"_155":116,"_160":27,"_98":389},[248],{"_149":258,"_99":391,"_104":392,"_152":135,"_273":393},5,["D",1744394840187],[394],{"_102":395,"_152":135,"_149":258,"_95":257,"_159":396,"_157":222,"_99":211,"_151":-5,"_104":392,"_153":391,"_161":-5,"_155":27,"_160":27,"_98":397},"cf897fba-16ff-11f0-b87c-569c3dd06744","# Pixel Tracker\n\nA simple and effective pixel tracking application for monitoring website visits. Create unique tracking pixels and monitor their usage across the web.\n\n## Features\n\n- **Create Tracking Pixels**: Generate unique tracking URLs for different websites, campaigns, or emails\n- **Track Visitors**: Capture visitor information including timestamp, IP address, user agent, and referrer\n- **Analytics Dashboard**: View visit history and statistics for each tracking pixel\n- **Copy Integration Code**: Easily copy pixel URLs or HTML code snippets for integration\n\n## How It Works\n\n1. Create a new tracking pixel from the dashboard\n2. Copy the tracking URL or HTML code\n3. Add the pixel to your website, email, or any other online content\n4. When someone views your content, the pixel will record their visit\n5. View the tracking data on your dashboard\n\n## Technical Details\n\nThis application is built using:\n\n- **Frontend**: React with TypeScript\n- **Backend**: Hono.js API server\n- **Storage**: Val Town blob storage\n\n## Getting Started\n\n- The application can be deployed directly on Val Town\n- The **backend entrypoint** is `/backend/index.ts`, which handles API endpoints and serves the frontend\n- The **frontend entrypoint** is `/frontend/index.html`, which loads the React application\n\n## API Endpoints\n\n- `GET /api/create` - Create a new tracking pixel and return its ID and URL\n- `GET /api/list` - List all tracking pixels and their view counts\n- `GET /api/data/:id` - Get detailed data for a specific tracking pixel\n- `GET /t/:id.gif` - The actual tracking pixel endpoint that records visits\n\n## Privacy Considerations\n\nThis tool collects visitor data including:\n- Timestamp of visits\n- IP addresses\n- User agents (browser information)\n- Referrer URLs\n\nMake sure to comply with privacy regulations like GDPR and include appropriate disclosures in your privacy policy when using tracking pixels.",[257],{"_149":325,"_99":321,"_104":399,"_152":135,"_273":400},["D",1744394840186],[401],{"_102":402,"_152":135,"_149":325,"_95":208,"_159":403,"_157":187,"_99":211,"_151":332,"_104":399,"_153":321,"_161":-5,"_155":27,"_160":27,"_98":404},"cf8357d4-16ff-11f0-9187-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\n\ntype Pixel = {\n id: string;\n created: string;\n viewCount: number;\n};\n\ntype PixelDetail = {\n id: string;\n created: string;\n views: Array<{\n timestamp: string;\n ip: string;\n userAgent: string;\n referer: string;\n }>;\n};\n\nexport function App() {\n const [pixels, setPixels] = useState([]);\n const [loading, setLoading] = useState(true);\n const [selectedPixel, setSelectedPixel] = useState(null);\n const [copySuccess, setCopySuccess] = useState(\"\");\n\n useEffect(() => {\n fetchPixels();\n }, []);\n\n const fetchPixels = async () => {\n setLoading(true);\n try {\n const response = await fetch(\"/api/list\");\n const data = await response.json();\n setPixels(data);\n } catch (error) {\n console.error(\"Error fetching pixels:\", error);\n } finally {\n setLoading(false);\n }\n };\n\n const createNewPixel = async () => {\n try {\n const response = await fetch(\"/api/create\");\n const data = await response.json();\n await fetchPixels();\n await fetchPixelDetails(data.id);\n } catch (error) {\n console.error(\"Error creating pixel:\", error);\n }\n };\n\n const fetchPixelDetails = async (id: string) => {\n try {\n const response = await fetch(`/api/data/${id}`);\n const data = await response.json();\n setSelectedPixel(data);\n } catch (error) {\n console.error(\"Error fetching pixel details:\", error);\n }\n };\n\n const copyToClipboard = (text: string) => {\n navigator.clipboard.writeText(text)\n .then(() => {\n setCopySuccess(\"Copied!\");\n setTimeout(() => setCopySuccess(\"\"), 2000);\n })\n .catch(() => {\n setCopySuccess(\"Failed to copy\");\n });\n };\n\n const getFullTrackingUrl = (path: string) => {\n const baseUrl = window.location.origin;\n return `${baseUrl}${path}`;\n };\n\n const formatDate = (dateString: string) => {\n return new Date(dateString).toLocaleString();\n };\n\n return (\n

Pixel Tracker

Create and track unique tracking pixels across the web.

\n \n

Your Tracking Pixels

\n {loading ? (\n

\n ) : pixels.length === 0 ? (\n

No tracking pixels yet. Create one to get started!

\n ) : (\n

fetchPixelDetails(pixel.id)}\n >\n
ID: {pixel.id}
\n
Created: {formatDate(pixel.created)}
\n
Views: {pixel.viewCount}
\n

\n )}\n

\n \n

Pixel Details

\n {selectedPixel ? (\n

Tracking Pixel: {selectedPixel.id}

Created: {formatDate(selectedPixel.created)}

Total Views: {selectedPixel.views.length}

\n \n

Tracking URL:

\n \n \n {copySuccess && {copySuccess}}\n

\n \n

HTML Code:

\n `}\n readOnly\n style={{ \n padding: \"8px\",\n width: \"100%\",\n border: \"1px solid #ddd\",\n borderRadius: \"4px\"\n }}\n />\n \n

\n \n

View History:

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

No views yet.

\n ) : (\n

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

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

\n )}\n

\n ) : (\n

Select a pixel from the list to view details.

\n )}\n

\n );\n}",[194,201,208],{"_149":314,"_99":175,"_104":406,"_152":135,"_273":407},["D",1744394840185],[408],{"_102":409,"_152":135,"_149":314,"_95":173,"_159":410,"_157":176,"_99":211,"_151":322,"_104":406,"_153":175,"_161":-5,"_155":27,"_160":27,"_98":411},"cf7e5202-16ff-11f0-b734-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// 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(\"/api/create\", async c => {\n const id = nanoid(10);\n await blob.setJSON(`pixel_${id}`, { \n id, \n created: new Date().toISOString(),\n views: [],\n });\n return c.json({ id, trackingUrl: `/t/${id}.gif` });\n});\n\n// Get tracking data for a pixel\napp.get(\"/api/data/:id\", async c => {\n const id = c.req.param(\"id\");\n try {\n const data = await blob.getJSON(`pixel_${id}`);\n return c.json(data);\n } catch (e) {\n return c.json({ error: \"Pixel not found\" }, 404);\n }\n});\n\n// 1x1 transparent tracking pixel endpoint\napp.get(\"/t/:id.gif\", async c => {\n const id = c.req.param(\"id\").replace(\".gif\", \"\");\n \n try {\n // Get the current data\n const data = await blob.getJSON(`pixel_${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\n await blob.setJSON(`pixel_${id}`, data);\n \n // Return a 1x1 transparent GIF\n const transparentGif = new Uint8Array([\n 0x47, 0x49, 0x46, 0x38, 0x39, 0x61, 0x01, 0x00, \n 0x01, 0x00, 0x80, 0x00, 0x00, 0xff, 0xff, 0xff, \n 0x00, 0x00, 0x00, 0x21, 0xf9, 0x04, 0x01, 0x00, \n 0x00, 0x00, 0x00, 0x2c, 0x00, 0x00, 0x00, 0x00, \n 0x01, 0x00, 0x01, 0x00, 0x00, 0x02, 0x02, 0x44, \n 0x01, 0x00, 0x3b\n ]);\n \n return new Response(transparentGif, {\n headers: {\n \"Content-Type\": \"image/gif\",\n \"Cache-Control\": \"no-store, no-cache, must-revalidate, proxy-revalidate\",\n \"Pragma\": \"no-cache\",\n \"Expires\": \"0\"\n }\n });\n } catch (e) {\n // Return a default 1x1 transparent GIF even if there's an error\n const transparentGif = new Uint8Array([\n 0x47, 0x49, 0x46, 0x38, 0x39, 0x61, 0x01, 0x00, \n 0x01, 0x00, 0x80, 0x00, 0x00, 0xff, 0xff, 0xff, \n 0x00, 0x00, 0x00, 0x21, 0xf9, 0x04, 0x01, 0x00, \n 0x00, 0x00, 0x00, 0x2c, 0x00, 0x00, 0x00, 0x00, \n 0x01, 0x00, 0x01, 0x00, 0x00, 0x02, 0x02, 0x44, \n 0x01, 0x00, 0x3b\n ]);\n \n return new Response(transparentGif, {\n headers: {\n \"Content-Type\": \"image/gif\",\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(\"/api/list\", async c => {\n const keys = await blob.list(\"pixel_\");\n const pixels = [];\n \n for (const key of keys) {\n try {\n const data = await blob.getJSON(key);\n pixels.push({\n id: data.id,\n created: data.created,\n viewCount: data.views.length\n });\n } catch (e) {\n // Skip if there's an error\n }\n }\n \n return c.json(pixels);\n});\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err, c) => {\n throw err;\n});\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;",[166,173],{"_149":352,"_99":349,"_104":413,"_152":135,"_273":414},["D",1744394840181],[415],{"_102":416,"_152":135,"_149":352,"_95":218,"_159":417,"_157":222,"_99":211,"_151":359,"_104":413,"_153":349,"_161":-5,"_155":27,"_160":27,"_98":418},"cf7ae6a8-16ff-11f0-88f7-569c3dd06744","\n\n \n \n \n Pixel Tracker - Track Web Analytics\n \n \n \n

\n \n \n \n",[194,218],{"_149":359,"_99":211,"_104":420,"_152":135,"_273":421},["D",1744394617429],[422,425,429,433,439,444,449,454],{"_102":423,"_152":135,"_149":359,"_95":194,"_159":-5,"_157":158,"_99":31,"_151":-5,"_104":420,"_153":211,"_161":-5,"_155":27,"_160":27,"_98":424},"4aba688a-16ff-11f0-8a46-569c3dd06744",[194],{"_102":426,"_152":135,"_149":332,"_95":201,"_159":-5,"_157":158,"_99":31,"_151":359,"_104":427,"_153":211,"_161":-5,"_155":27,"_160":27,"_98":428},"4aba61c8-16ff-11f0-8a46-569c3dd06744",["D",1744394617429],[194,201],{"_102":430,"_152":135,"_149":322,"_95":166,"_159":-5,"_157":158,"_99":31,"_151":-5,"_104":431,"_153":211,"_161":-5,"_155":27,"_160":27,"_98":432},"4aba5e1c-16ff-11f0-8a46-569c3dd06744",["D",1744394617429],[166],{"_102":434,"_152":135,"_149":435,"_95":228,"_159":436,"_157":187,"_99":31,"_151":359,"_104":437,"_153":211,"_161":-5,"_155":27,"_160":27,"_98":438},"4aba66d2-16ff-11f0-8a46-569c3dd06744","1f98089b-243b-4b3f-92cb-a89bd8dac1bd","/** @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();",["D",1744394617429],[194,228],{"_102":440,"_152":135,"_149":325,"_95":208,"_159":441,"_157":187,"_99":31,"_151":332,"_104":442,"_153":211,"_161":-5,"_155":27,"_160":27,"_98":443},"4aba601a-16ff-11f0-8a46-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function App() {\n const [clicked, setClicked] = useState(0);\n return (\n

Val Town React + Hono Starter

\n I've been clicked times\n

\n );\n}",["D",1744394617429],[194,201,208],{"_102":445,"_152":135,"_149":314,"_95":173,"_159":446,"_157":176,"_99":31,"_151":322,"_104":447,"_153":211,"_161":-5,"_155":27,"_160":27,"_98":448},"4aba57c8-16ff-11f0-8a46-569c3dd06744","import { serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\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// Add your API routes here\n// app.get(\"/api/data\", c => c.json({ hello: \"world\" }));\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err, c) => {\n throw err;\n});\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;",["D",1744394617429],[166,173],{"_102":450,"_152":135,"_149":352,"_95":218,"_159":451,"_157":222,"_99":31,"_151":359,"_104":452,"_153":211,"_161":-5,"_155":27,"_160":27,"_98":453},"4aba6362-16ff-11f0-8a46-569c3dd06744","\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n \n",["D",1744394617429],[194,218],{"_102":455,"_152":135,"_149":258,"_95":257,"_159":456,"_157":222,"_99":31,"_151":-5,"_104":457,"_153":211,"_161":-5,"_155":27,"_160":27,"_98":458},"4aba6a10-16ff-11f0-8a46-569c3dd06744","# React Hono Starter\n\nThis app is a starter template for client-side React and server-side Hono.\n\n- **Remix** this starter template on the top right to get started.\n\n- The **entrypoint** is `/backend/index.ts`. That's the backend HTTP server, which also serves the all the frontend assets.\n\n- The **client-side entrypoint** is `/frontend/index.html`, which in turn imports `/frontend/index.tsx`, which in turn imports the React app from `/frontend/components/App.tsx`.\n\n[React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) is a fuller featured example project, with a SQLite database table, queries, client-side CSS and a favicon, and some shared code that runs on both client and server.",["D",1744394617429],[257],"page","hasNext","routes/_app","actionData","errors"]