Test Embeddable Likes Script

\n \n

New Glassmorphism Style (Auto-generated)

These components are automatically created by the script with the new glassmorphism styling:

\n \n

Tech Article

This is a sample blog post about the latest technology trends.

\n \n

Cooking Recipe

Learn how to make the perfect pasta with this simple recipe.

\n \n

Legacy Support (Old Structure)

The script automatically converts old structure to new styling:

\n \n

Product Review

This product is amazing! Here's my detailed review...

\n \n

Multiple Components

Test multiple like buttons on the same page:

\n \n

\n\n \n \n\n","deleted","label",[139],"d4b55268-9024-11f0-a46d-0224a6c84d84","script.js","6fd0d788-7615-11f0-a5ba-0224a6c84d84",["D",1757714831017],8,"script","(function() {\n 'use strict';\n \n // Get the current script's src to determine API base URL\n const currentScript = document.currentScript;\n const API_BASE_URL = currentScript ? currentScript.src.replace('/script.js', '') : '';\n \n // Inject CSS styles into the document\n function injectStyles() {\n if (document.getElementById('likes-tracker-styles')) return;\n \n const style = document.createElement('style');\n style.id = 'likes-tracker-styles';\n style.textContent = `\n /* Like Component Styles */\n .like-component {\n margin: 20px 0;\n display: flex;\n justify-content: center;\n opacity: 0;\n animation: fadeInButton 0.3s ease-out 0.8s forwards;\n }\n\n .like-button {\n background: rgba(255, 255, 255, 0.95);\n border: 1px solid rgba(0, 0, 0, 0.1);\n border-radius: 40px;\n padding: 8px 12px;\n display: flex;\n align-items: center;\n gap: 6px;\n cursor: pointer;\n transition: all 0.2s ease;\n font-family: 'Arial', sans-serif;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n backdrop-filter: blur(8px);\n }\n\n .like-button:hover {\n background: rgba(255, 255, 255, 1);\n border-color: rgba(0, 0, 0, 0.15);\n transform: translateY(-1px);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);\n }\n\n .like-button:active {\n transform: translateY(0);\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);\n }\n\n .like-button.liked {\n animation: buttonPulse 0.6s ease;\n }\n\n .likes-count {\n color: rgba(55, 65, 81, 0.9);\n font-size: 14px;\n font-weight: 600;\n min-width: 18px;\n text-align: center;\n }\n\n @keyframes buttonPulse {\n 0% { transform: opacity(1); }\n 50% { transform: opacity(0.8); }\n 100% { transform: scale(1); }\n }\n \n @keyframes fadeInButton {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n `;\n \n document.head.appendChild(style);\n }\n \n // Initialize likes tracking when DOM is ready\n function initLikesTracking() {\n // Inject styles first\n injectStyles();\n \n // Find all like containers\n const likeContainers = document.querySelectorAll('[data-likes-id]');\n \n likeContainers.forEach(container => {\n const id = container.getAttribute('data-likes-id');\n if (!id) return;\n \n // Get existing elements\n const likeButton = container.querySelector('.likes-button');\n const countDisplay = container.querySelector('.likes-count');\n \n if (!likeButton || !countDisplay) {\n console.warn('Missing required elements in likes container:', container);\n return;\n }\n \n // Add like-component class to container\n container.classList.add('like-component');\n \n // Add like-button class to the button for styling\n likeButton.classList.add('like-button');\n \n // Load initial like count\n loadLikeCount(id, countDisplay);\n \n // Add click handler to like button\n likeButton.addEventListener('click', function(e) {\n e.preventDefault();\n recordLike(id, countDisplay, likeButton);\n });\n });\n }\n \n // Load like count for a specific ID\n async function loadLikeCount(id, countDisplay) {\n try {\n const response = await fetch(`${API_BASE_URL}/api/likes/${encodeURIComponent(id)}`);\n const data = await response.json();\n \n if (response.ok) {\n countDisplay.textContent = data.likeCount;\n } else {\n console.error('Failed to load likes:', data.error);\n countDisplay.textContent = '0';\n }\n } catch (error) {\n console.error('Error loading likes:', error);\n countDisplay.textContent = '0';\n }\n }\n \n // Record a like for a specific ID\n async function recordLike(id, countDisplay, button) {\n // Disable button temporarily\n button.disabled = true;\n \n // Add liked class for pulse animation\n button.classList.add('liked');\n \n try {\n const response = await fetch(`${API_BASE_URL}/api/like`, {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ id: id })\n });\n \n const data = await response.json();\n \n if (response.ok && data.success) {\n countDisplay.textContent = data.likeCount;\n } else {\n console.error('Failed to record like:', data.error);\n }\n } catch (error) {\n console.error('Error recording like:', error);\n } finally {\n // Re-enable button after animation\n setTimeout(() => {\n button.disabled = false;\n button.classList.remove('liked');\n }, 600);\n }\n }\n \n \n // Initialize when DOM is ready\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', initLikesTracking);\n } else {\n initLikesTracking();\n }\n \n // Export for manual initialization if needed\n globalThis.LikesTracker = {\n init: initLikesTracking,\n loadCount: loadLikeCount,\n recordLike: recordLike\n };\n})();",[156],"e44119a2-7b01-11f0-9575-0224a6c84d84","index.ts",52,["D",1755390850307],"http","import { Hono } from \"https://esm.sh/hono@3.12.6\";\nimport { cors } from \"https://esm.sh/hono@3.12.6/cors\";\nimport { readFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport {\n getAllLikes,\n getLikeCount,\n getTotalLikes,\n initDatabase,\n recordLike,\n} from \"./backend/database.ts\";\n\nconst app = new Hono();\n\n// Enable CORS for cross-origin requests from websites\napp.use(\n \"*\",\n cors({\n origin: \"*\", // Allow requests from any origin\n allowMethods: [\"GET\", \"POST\", \"OPTIONS\"],\n allowHeaders: [\"Content-Type\"],\n }),\n);\n\n// Unwrap Hono errors to see original error details\napp.onError((err, _c) => {\n throw err;\n});\n\nawait initDatabase();\n\n// Add a like\napp.post(\"/api/like\", async (c) => {\n try {\n const body = await c.req.json();\n const { id } = body;\n\n if (!id) {\n return c.json({ error: \"ID is required\" }, 400);\n }\n\n // Record the like and get the updated count\n const likeCount = await recordLike(id);\n\n return c.json({\n success: true,\n id,\n likeCount,\n });\n } catch (error) {\n console.error(\"Error recording like:\", error);\n return c.json({ error: \"Failed to record like\" }, 500);\n }\n});\n\n// Get like count for a specific ID\napp.get(\"/api/likes/:id\", async (c) => {\n const id = c.req.param(\"id\");\n\n const likeCount = await getLikeCount(id);\n\n return c.json({\n id,\n likeCount,\n });\n});\n\n// Get total likes across all IDs (for fun)\napp.get(\"/api/likes\", async (c) => {\n const likes = await getAllLikes();\n const totalLikes = await getTotalLikes();\n\n return c.json({\n likes,\n totalLikes,\n });\n});\n\n// Serve the embeddable JavaScript script\napp.get(\"/script.js\", async (c) => {\n try {\n const script = await readFile(\"/script.js\", import.meta.url);\n c.header(\"Content-Type\", \"application/javascript\");\n c.header(\"Cache-Control\", \"public, max-age=3600\"); // Cache for 1 hour\n return c.text(script);\n } catch (error) {\n console.error(\"Error reading script file:\", error);\n return c.json({ error: \"Script not available\" }, 500);\n }\n});\n\n// Serve the frontend HTML\napp.get(\"/\", async (c) => {\n try {\n const html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n } catch (error) {\n console.error(\"Error reading frontend file:\", error);\n return c.json({ error: \"Frontend not available\" }, 500);\n }\n});\n\n// This is the entry point for HTTP vals\nexport default app.fetch;\n",[164],"8e077adc-7605-11f0-9b82-0224a6c84d84","deno.json","63a00cec-7604-11f0-abe9-0224a6c84d84",11,["D",1754842667790],"{\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",[171],"e444905a-7b01-11f0-8a65-0224a6c84d84","README.md","019894a5-14b4-7659-ac14-2cf36cf66d99",53,["D",1755390850313],6,"# Likes Tracking API\n\nA cross-origin API service that tracks likes using unique IDs.\n\n## Features\n\n- **Simple ID-based tracking** - Use any unique identifier (blog posts, products, comments, etc.)\n- **Embeddable widget** - Drop-in script that creates beautiful like buttons\n- **Real-time updates** - Like counts update instantly across all websites\n- **CORS enabled** - Works from any website or domain\n- **SQLite storage** - Reliable, persistent data storage\n\n## Quick Start\n\n### 1. Add the script to your page\n```html\n\n```\n\n### 2. Add a likes widget anywhere on your page\n```html\n

\n \n

\n```\n\n**💡 Customize the emoji:** Change ❤️ to any emoji you want: 👍 🎉 🚀 ⭐ 🎯 🏆 🎊 🎈 🎁\n\n### 3. Done!\n- Loads current like count automatically\n- Handles button clicks to record likes\n- Updates count in real-time\n- Supports multiple IDs on one page\n\n## API Endpoints\n\n### POST /api/like\n\nRecord a like for a specific ID:\n\n```json\n{\n \"id\": \"life-universe-everything\"\n}\n```\n\nReturns:\n```json\n{ \n \"success\": true, \n \"id\": \"life-universe-everything\", \n \"likeCount\": 42 \n}\n```\n\n### GET /api/likes/:id\n\nGet like count for a specific ID:\n\n```\nGET /api/likes/post-123\n```\n\nReturns:\n```json\n{ \n \"id\": \"post-123\", \n \"likeCount\": 42 \n}\n```\n\n### GET /api/likes\n\nGet total likes across all IDs (for fun)\n\n## Use Cases\n\n- **Blog posts**: Use post IDs like \"post-123\" or \"2024-01-15-intro\"\n- **Products**: Use product IDs like \"product-abc\" or \"laptop-xps-13\"\n- **Comments**: Use comment IDs like \"comment-456\" or \"reply-789\"\n- **Custom**: Any unique identifier you want to track likes for!\n\n## Example Usage\n\n### Basic like tracking\n```javascript\n// Get current likes for a post\nfetch('https://jamesllllllllll--019894a514b47659ac14319f8b619533.web.val.run/api/likes/post-123')\n .then(res => res.json())\n .then(data => {\n document.querySelector('.likes-count').textContent = data.likeCount;\n });\n\n// Record a like\nfetch('https://jamesllllllllll--019894a514b47659ac14319f8b619533.web.val.run/api/like', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ id: 'post-123' })\n})\n.then(res => res.json())\n.then(data => {\n // Update the likes count\n});\n```\n\n## Project Structure\n\n```\n├── backend/\n│ └── database.ts # SQLite database setup and queries\n├── frontend/\n│ └── index.html # Documentation & demo\n├── script.js # Embeddable likes widget script\n├── index.ts # Main HTTP handler using Hono\n└── README.md # This file\n```",[178],"8e0bfc88-7605-11f0-b500-0224a6c84d84","PAGE_LIKES_DOCUMENTATION.md","8e0bfd5a-7605-11f0-b500-0224a6c84d84",12,["D",1754842667810],"# Getting Page Likes on Page Load\n\nThis documentation covers how to retrieve and display like counts when pages\nload, supporting both website-wide and page-specific likes.\n\n## API Endpoint\n\n```\nGET /api/likes/:website[?pageUrl=path]\n```\n\n### Parameters\n\n- `:website` (required) - The website domain (e.g., `mysite.com`)\n- `pageUrl` (optional query parameter) - Specific page path (e.g.,\n `/blog/article-1`)\n\n## Usage Examples\n\n### Website-Wide Likes\n\nGet the total number of likes for an entire website:\n\n```javascript\n// Basic implementation\nfetch(\"https://your-val-url.val.run/api/likes/mysite.com\")\n .then((response) => response.json())\n .then((data) => {\n console.log(`Website likes: ${data.likeCount}`);\n document.getElementById(\"site-likes\").textContent = data.likeCount;\n })\n .catch((error) => console.error(\"Error fetching likes:\", error));\n```\n\n### Page-Specific Likes\n\nGet likes for the current page:\n\n```javascript\n// Get likes for current page using window.location.pathname\nconst website = \"mysite.com\";\nconst currentPage = window.location.pathname;\n\nfetch(\n `https://your-val-url.val.run/api/likes/${website}?pageUrl=${currentPage}`,\n)\n .then((response) => response.json())\n .then((data) => {\n console.log(`Page likes: ${data.likeCount}`);\n document.getElementById(\"page-likes\").textContent = data.likeCount;\n })\n .catch((error) => console.error(\"Error fetching page likes:\", error));\n```\n\n### Complete Page Implementation\n\nHere's a complete example that loads and displays page likes:\n\n```html\n\n\n \n My Article\n \n \n \n

My Article

Article content here...

\n\n

\n \n 0\n

\n\n \n \n\n```\n\n## Response Format\n\n### Successful Response\n\n```json\n{\n \"website\": \"mysite.com\",\n \"pageUrl\": \"/blog/article-1\",\n \"likeCount\": 42\n}\n```\n\n- `website`: The website domain\n- `pageUrl`: The specific page path (null if requesting website-wide likes)\n- `likeCount`: Current number of likes (0 if no likes yet)\n\n## Advanced Usage\n\n### Multiple Pages with Different Counters\n\n```javascript\n// Load likes for multiple pages\nconst pages = [\"/home\", \"/about\", \"/blog/post-1\"];\nconst website = \"mysite.com\";\n\npages.forEach(async (page) => {\n const response = await fetch(\n `${API_BASE}/api/likes/${website}?pageUrl=${page}`,\n );\n const data = await response.json();\n\n // Update specific counter for each page\n const counter = document.querySelector(`[data-page=\"${page}\"] .like-count`);\n if (counter) counter.textContent = data.likeCount;\n});\n```\n\n### Combining Website and Page Likes\n\n```javascript\nasync function loadAllLikes() {\n const website = \"mysite.com\";\n const currentPage = window.location.pathname;\n\n // Load both website-wide and page-specific likes\n const [websiteResponse, pageResponse] = await Promise.all([\n fetch(`${API_BASE}/api/likes/${website}`),\n fetch(`${API_BASE}/api/likes/${website}?pageUrl=${currentPage}`),\n ]);\n\n const websiteData = await websiteResponse.json();\n const pageData = await pageResponse.json();\n\n document.getElementById(\"website-likes\").textContent = websiteData.likeCount;\n document.getElementById(\"page-likes\").textContent = pageData.likeCount;\n}\n```\n\n## Error Handling\n\nAlways include proper error handling:\n\n```javascript\nasync function getLikes(website, pageUrl = null) {\n try {\n const url = pageUrl\n ? `${API_BASE}/api/likes/${website}?pageUrl=${pageUrl}`\n : `${API_BASE}/api/likes/${website}`;\n\n const response = await fetch(url);\n\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n\n const data = await response.json();\n return data.likeCount;\n } catch (error) {\n console.error(\"Error fetching likes:\", error);\n return 0; // Return 0 as fallback\n }\n}\n```\n\n## CORS Support\n\nThe API includes CORS headers allowing requests from any origin, so you can call\nit directly from your website's JavaScript without proxy servers or additional\nconfiguration.\n",[186],"6fece59a-7615-11f0-8f53-0224a6c84d84","CLAUDE.md","639a997e-7604-11f0-ac58-0224a6c84d84",29,["D",1754849489082],2,"# CLAUDE.md\n\nThis file provides guidance to Claude Code (claude.ai/code) when working with\ncode in this repository.\n\n## Architecture Overview\n\nThis is a Val Town project that implements a likes tracking API using unique IDs\nwith the following structure:\n\n- **Val Town Platform**: Built for Val Town's serverless environment using Deno runtime\n- **Backend**: Hono web framework with SQLite database for ID-based likes tracking\n- **API Service**: RESTful endpoints with CORS support for cross-origin requests\n- **Entry Point**: `index.ts` exports `app.fetch` as the HTTP handler\n\n## Key Components\n\n### Backend (`backend/database.ts`)\n\n- Uses Val Town's hosted SQLite service (`stevekrouse/sqlite`)\n- Table name: `likes_by_id_v1` (increment version when changing schema)\n- Core functions: `initDatabase()`, `recordLike()`, `getAllLikes()`, \n `getLikeCount()`, `getTotalLikes()`\n- Database tracks likes by unique ID (string identifier)\n- Schema: `id` (TEXT PRIMARY KEY), `likes` (INTEGER), `created_at`, `updated_at`\n- Database initializes automatically on startup\n\n### Frontend (`frontend/index.html`)\n\n- Self-contained HTML documentation and demo page\n- Interactive testing interface for all API endpoints\n- Code examples for integration\n- Styled with custom CSS for professional appearance\n\n### Main Application (`index.ts`)\n\n- Hono app with error unwrapping for debugging and CORS support\n- Routes: `/` (documentation page), `POST /api/like` (record like),\n `GET /api/likes/:id` (get count for specific ID), `GET /api/likes` (all data)\n- Accepts JSON payloads with `id` field (string)\n- Returns updated like counts for real-time UI updates\n\n## Common Development Commands\n\n```bash\n# Run/test the application locally\ndeno run --allow-net --allow-read index.ts\n\n# Lint code\ndeno lint\n\n# Format code \ndeno fmt\n\n# Type checking\ndeno check index.ts\n```\n\n## Val Town Specific Patterns\n\n### Database Schema Changes\n\nWhen modifying the database schema, increment the table name (e.g.,\n`likes_by_id_v1` → `likes_by_id_v2`) rather than using ALTER TABLE\noperations.\n\n### API Usage\n\nThe API is designed for cross-origin requests. Example usage from any website:\n\n```javascript\n// Record a like for a specific content ID\nfetch(\"https://your-val-url.val.run/api/like\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n id: \"post-123\", // Any unique identifier\n }),\n})\n .then((res) => res.json())\n .then((data) => console.log(\"New like count:\", data.likeCount));\n\n// Get like count for a specific ID\nfetch(\"https://your-val-url.val.run/api/likes/post-123\")\n .then((res) => res.json())\n .then((data) => console.log(\"Like count:\", data.likeCount));\n```\n\n### File Serving\n\nUses Val Town utility functions for proper file serving:\n\n```typescript\nimport {\n readFile,\n serveFile,\n} from \"https://esm.town/v/std/utils@85-main/index.ts\";\n```\n\n### Error Handling\n\nInclude this pattern in Hono apps for better error visibility:\n\n```typescript\napp.onError((err, c) => {\n throw err;\n});\n```\n\n### CORS Configuration\n\nThe API includes CORS headers to allow requests from any origin:\n\n```typescript\napp.use(\n \"*\",\n cors({\n origin: \"*\",\n allowMethods: [\"GET\", \"POST\", \"OPTIONS\"],\n allowHeaders: [\"Content-Type\"],\n }),\n);\n```\n\n## Configuration Notes\n\n- **TypeScript**: Configured with relaxed settings (`noImplicitAny: false`,\n `strict: false`)\n- **Imports**: Uses `https://esm.sh` for npm packages and `https://esm.town/v/`\n for Val Town utilities\n- **Styling**: TailwindCSS via CDN script tag\n- **Error Debugging**: Includes\n `` for client-side error\n capture\n",[193],"63bbefa2-7604-11f0-9558-0224a6c84d84",".vtignore","63bbf088-7604-11f0-9558-0224a6c84d84",9,["D",1754842167155],".git\n.vscode\n.cursorrules\n.DS_Store\nnode_modules\nvendor",[201],"83fb99e2-7600-11f0-9174-0224a6c84d84","frontend","019894a5-14b4-7659-ac14-28098765fdc7",["D",1754840503393],"directory",[208],"83fb87ae-7600-11f0-9174-0224a6c84d84","backend","019894a5-14b4-7659-ac14-23adaa79473b",["D",1754840503393],[214],"638ced74-7604-11f0-ac58-0224a6c84d84",".claude","638cee28-7604-11f0-ac58-0224a6c84d84",["D",1754842167057],[219],"pulls","forks","envVars",{"_229":148,"_231":56},"connections",{"_229":56,"_230":56},"count","unfilledCount","emptyCount",{"_20":218,"_13":219,"_140":220,"_142":-5,"_143":21,"_144":197,"_146":52,"_22":303,"_29":56,"_149":211,"_150":-5,"_152":40,"_153":-5,"_247":304,"_95":305},{"_20":295,"_13":296,"_140":297,"_142":220,"_143":21,"_144":298,"_146":52,"_22":299,"_29":197,"_149":107,"_150":300,"_152":40,"_153":-5,"_247":301,"_95":302},{"_20":213,"_13":214,"_140":215,"_142":-5,"_143":21,"_144":148,"_146":52,"_22":292,"_29":56,"_149":211,"_150":-5,"_152":40,"_153":-5,"_247":293,"_95":294},{"_20":283,"_13":284,"_140":285,"_142":215,"_143":21,"_144":286,"_146":52,"_22":287,"_29":288,"_149":160,"_150":289,"_152":40,"_153":-5,"_247":290,"_95":291},{"_20":207,"_13":208,"_140":209,"_142":-5,"_143":21,"_144":148,"_146":52,"_22":280,"_29":56,"_149":211,"_150":-5,"_152":40,"_153":-5,"_247":281,"_95":282},{"_20":271,"_13":272,"_140":273,"_142":209,"_143":21,"_144":274,"_146":52,"_22":275,"_29":276,"_149":107,"_150":277,"_152":40,"_153":-5,"_247":278,"_95":279},{"_20":200,"_13":201,"_140":202,"_142":-5,"_143":21,"_144":203,"_146":52,"_22":268,"_29":56,"_149":107,"_150":205,"_152":40,"_153":-5,"_247":269,"_95":270},{"_20":192,"_13":193,"_140":194,"_142":-5,"_143":21,"_144":195,"_146":52,"_22":265,"_29":197,"_149":107,"_150":198,"_152":40,"_153":-5,"_247":266,"_95":267},{"_20":185,"_13":186,"_140":187,"_142":-5,"_143":21,"_144":188,"_146":52,"_22":262,"_29":56,"_149":107,"_150":190,"_152":40,"_153":-5,"_247":263,"_95":264},{"_20":177,"_13":178,"_140":179,"_142":-5,"_143":21,"_144":180,"_146":52,"_22":259,"_29":182,"_149":107,"_150":183,"_152":40,"_153":-5,"_247":260,"_95":261},{"_20":170,"_13":171,"_140":172,"_142":-5,"_143":21,"_144":173,"_146":52,"_22":256,"_29":148,"_149":107,"_150":175,"_152":40,"_153":-5,"_247":257,"_95":258},{"_20":163,"_13":164,"_140":50,"_142":-5,"_143":21,"_144":165,"_146":52,"_22":253,"_29":159,"_149":167,"_150":168,"_152":40,"_153":-5,"_247":254,"_95":255},{"_20":155,"_13":156,"_140":157,"_142":-5,"_143":21,"_144":30,"_146":52,"_22":250,"_29":159,"_149":160,"_150":161,"_152":40,"_153":-5,"_247":251,"_95":252},{"_20":138,"_13":139,"_140":141,"_142":-5,"_143":21,"_144":145,"_146":52,"_22":246,"_29":148,"_149":107,"_150":151,"_152":40,"_153":-5,"_247":248,"_95":249},["D",1755015790557],"children",[],[139],["D",1757714831017],[],[156],["D",1755390850307],[],[164],["D",1754842667790],[],[171],["D",1755390850313],[],[178],["D",1754842667810],[],[186],["D",1754849489082],[],[193],["D",1754842167155],[],[201],"e44ab714-7b01-11f0-82f5-0224a6c84d84","index.html","019894a5-14b4-7659-ac14-26aef6996237",54,["D",1755390850330],15,"\n\n\n\n Likes Tracking API\n \n \n \n \n \n\n\n\n

Likes Tracking API

A cross-origin API service that tracks likes using unique IDs.

\n\n \n

Features

Simple ID-based tracking – Use any unique identifier (blog posts, products, comments, etc.)
Embeddable widget – Drop-in script that creates beautiful like buttons
Real-time updates – Like counts update instantly across all websites
CORS enabled – Works from any website or domain
SQLite storage – Reliable, persistent data storage

\n\n \n

Quick Start

1. Add the script to your page

<script src=\"https://jamesllllllllll--019894a514b47659ac14319f8b619533.web.val.run/script.js\"></script>

2. Add a likes widget anywhere on your page

<div data-likes-id=\"your-unique-id\">\n  <button class=\"likes-button\">❤️ <span class=\"likes-count\">0</span></button>\n</div>

💡 Customize the emoji: Change ❤️ to any emoji you want: 👍 🎉 🚀 ⭐ 🎯 🏆 🎊 🎈 🎁

3. Done!

Loads current like count automatically
Handles button clicks to record likes
Updates count in real-time
Supports multiple IDs on one page

\n\n \n

API Endpoints

POST /api/like

Record a like for a specific ID:

{\n  \"id\": \"life-universe-everything\"\n}

Returns:

{\n  \"success\": true,\n  \"id\": \"life-universe-everything\",\n  \"likeCount\": 42\n}

GET /api/likes/:id

Get like count for a specific ID:

GET /api/likes/post-123

Returns:

{\n  \"id\": \"post-123\",\n  \"likeCount\": 42\n}

GET /api/likes

Get total likes across all IDs (for fun)

\n\n \n

Use Cases

Blog posts: Use post IDs like \"post-123\" or \"2024-01-15-intro\"
Products: Use product IDs like \"product-abc\" or \"laptop-xps-13\"
Comments: Use comment IDs like \"comment-456\" or \"reply-789\"
Custom: Any unique identifier you want to track likes for!

\n\n \n

Example Usage

Basic like tracking

// Get current likes for a post\nfetch('https://jamesllllllllll--019894a514b47659ac14319f8b619533.web.val.run/api/likes/post-123')\n  .then(res => res.json())\n  .then(data => {\n    document.querySelector('.likes-count').textContent = data.likeCount;\n  });\n\n// Record a like\nfetch('https://jamesllllllllll--019894a514b47659ac14319f8b619533.web.val.run/api/like', {\n  method: 'POST',\n  headers: { 'Content-Type': 'application/json' },\n  body: JSON.stringify({ id: 'post-123' })\n})\n.then(res => res.json())\n.then(data => {\n  // Update the likes count\n});

\n\n

Demo

Test the API endpoints with your own ID:

\n\n

\n Content ID:\n \n

\n\n

\n \n \n

\n\n

Live Examples

These use the exact same code you'll embed on your site:

\n \n \n

Default heart emoji:

\n \n

Custom emoji:

\n \n

Click any button to test! Each uses the emoji you specify in your HTML.

\n\n

Implement it yourself

\n\n

Basic like tracking

// Get current likes for a post\nfetch('https://jamesllllllllll--019894a514b47659ac14319f8b619533.web.val.run/api/likes/post-123')\n  .then(res => res.json())\n  .then(data => {\n    document.querySelector('.likes-count').textContent = data.likeCount;\n  });\n\n// Record a like\nfetch('https://jamesllllllllll--019894a514b47659ac14319f8b619533.web.val.run/api/like', {\n  method: 'POST',\n  headers: { 'Content-Type': 'application/json' },\n  body: JSON.stringify({ id: 'post-123' })\n})\n.then(res => res.json())\n.then(data => {\n  document.querySelector('.likes-count').textContent = data.likeCount;\n});

\n \n

Dynamic ID from page content

// Get the post ID from your page (could be from URL, data attribute, etc.)\nconst postId = document.querySelector('[data-post-id]').dataset.postId;\n// or const postId = window.location.pathname.split('/').pop();\n\n// Get likes for this specific post\nfetch(\\`https://jamesllllllllll--019894a514b47659ac14319f8b619533.web.val.run/api/likes/\\${postId}\\`)\n  .then(res => res.json())\n  .then(data => {\n    document.querySelector('.likes-count').textContent = data.likeCount;\n  });\n\n// Record a like for this post\nfetch('https://jamesllllllllll--019894a514b47659ac14319f8b619533.web.val.run/api/like', {\n  method: 'POST',\n  headers: { 'Content-Type': 'application/json' },\n  body: JSON.stringify({ id: postId })\n})\n.then(res => res.json())\n.then(data => {\n  document.querySelector('.likes-count').textContent = data.likeCount;\n});

\n\n \n\n\n",[],[208,272],["D",1754840503393],[237],[208],"ac9a018a-7610-11f0-b680-0224a6c84d84","database.ts","019894a5-14b4-7659-ac14-1f5468c70e55",25,["D",1754847443558],3,"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\n\n// Table name - change this if you need to modify the schema\nconst TABLE_NAME = \"likes_by_id_v1\";\n\n// Define the structure of our like records\nexport interface LikeRecord {\n id: string;\n likes: number;\n created_at: string;\n updated_at: string;\n}\n\n/**\n * Initialize the database with our table\n */\nexport async function initDatabase() {\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${TABLE_NAME} (\n id TEXT PRIMARY KEY,\n likes INTEGER NOT NULL DEFAULT 0,\n created_at TEXT NOT NULL,\n updated_at TEXT NOT NULL\n )\n `);\n}\n\n/**\n * Record a like for a specific ID\n * If the ID exists, increment the counter\n * If not, create a new record with 1 like\n */\nexport async function recordLike(id: string): Promise {\n const now = new Date().toISOString();\n await sqlite.execute(\n `INSERT INTO ${TABLE_NAME} (id, likes, created_at, updated_at) \n VALUES (?, 1, ?, ?)\n ON CONFLICT(id) DO UPDATE SET \n likes = likes + 1, \n updated_at = ?`,\n [id, now, now, now],\n );\n\n // Return the updated like count\n const result = await sqlite.execute(\n `SELECT likes FROM ${TABLE_NAME} WHERE id = ?`,\n [id],\n );\n\n return Number(result.rows[0]?.likes) || 1;\n}\n\n/**\n * Get all like records\n */\nexport async function getAllLikes(): Promise {\n const result = await sqlite.execute(\n `SELECT * FROM ${TABLE_NAME} ORDER BY likes DESC`,\n );\n\n return result.rows as unknown as LikeRecord[];\n}\n\n/**\n * Get like count for a specific ID\n */\nexport async function getLikeCount(id: string): Promise {\n const result = await sqlite.execute(\n `SELECT likes FROM ${TABLE_NAME} WHERE id = ?`,\n [id],\n );\n\n return Number(result.rows[0]?.likes) || 0;\n}\n\n/**\n * Get total like count across all IDs\n */\nexport async function getTotalLikes(): Promise {\n const result = await sqlite.execute(\n `SELECT SUM(likes) as total FROM ${TABLE_NAME}`,\n );\n\n return Number(result.rows[0]?.total) || 0;\n}\n",[],[214,284],["D",1754840503393],[235],[214],"24aec8fc-7609-11f0-aae8-0224a6c84d84","settings.local.json","639cf6d8-7604-11f0-930d-0224a6c84d84",20,["D",1754844209056],"{\n \"permissions\": {\n \"allow\": [\n \"Bash(deno check:*)\",\n \"Bash(deno run:*)\",\n \"Bash(deno lint:*)\",\n \"Bash(vt push:*)\"\n ],\n \"deny\": []\n }\n}",[],[219,296],["D",1754842167057],[233],[219],["D",1754840503393],{"_11":12,"_93":89},{"_11":12,"_86":87,"_88":89,"_47":48,"_90":91,"_92":40},{"_29":30,"_13":26,"_20":21,"_27":28,"_31":32,"_33":34,"_79":42,"_80":81,"_82":83,"_84":14,"_85":12},"ctx",{"_72":-5,"_117":343,"_344":345,"_346":347,"_348":40,"_349":40,"_350":40,"_351":52,"_352":-5,"_353":-7,"_354":-7,"_355":56,"_356":40,"_357":40,"_358":-5,"_359":40,"_360":40,"_361":40,"_362":-5},"ENV",{"_314":315,"_316":317,"_318":26,"_319":320,"_321":322,"_323":324,"_325":326,"_327":328,"_329":330,"_331":332,"_333":334,"_335":336,"_337":338,"_339":340,"_341":342},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Branches1

Branches
1