Neocities hit counter

\n \n

$\"Hit$

\n\n

\n Neocities has more restrictive Content Security Policies for new accounts to prevent abuse.\n This prevents scripts from accessing data on another website, and thus,\n prevents fetch/ JavaScript based hit counters from functioning.\n

\n\n

This hit counter is a serverside rendered hit counter that does not require cross-origin data access or JavaScript.

\n \n

How to use

\n \n

Use the sitename parameter to fetch the official hit count from the Neocities API:

<img src=\"https://mbo-neocities_hit_counter.web.val.run?sitename=maxbo\" alt=\"Hit count\" />

\n \n

Current counters

\n \n \n \n \n \n ${\n countersResult.length > 0\n ? countersResult.map(counter => {\n const url = counter[0];\n const count = counter[1];\n // Create a proper hyperlink for the URL\n const fullUrl = url.startsWith(\"http\") ? url : `https://${url}`;\n\n return `\n \n \n \n \n `;\n }).join(\"\")\n : \"\"\n }\n

URL	Count
${url}	${count}
No counters recorded yet

\n \n \n `;\n\n return new Response(html, {\n headers: {\n \"Content-Type\": \"text/html\",\n \"Cache-Control\": \"public, max-age=0\",\n },\n });\n}\n\n// Extract domain and path from URL\nfunction extractUrlInfo(urlPath: string): { domain: string; path: string } | null {\n // Remove the .png or .svg extension if present\n const cleanPath = urlPath.replace(/\\.(png|svg)$/, \"\");\n\n // Split the path into parts\n const parts = cleanPath.split(\"/\").filter(part => part);\n\n if (parts.length < 1) {\n return null;\n }\n\n const domain = parts[0];\n const path = parts.slice(1).join(\"/\");\n\n return { domain, path };\n}\n\n// Main handler function\nexport default async function(req: Request): Promise {\n await initializeDB();\n\n const url = new URL(req.url);\n const path = url.pathname.slice(1); // Remove leading slash\n\n // Check for sitename parameter for Neocities API integration\n const sitename = url.searchParams.get(\"sitename\");\n\n // Debug info\n console.log(`Request path: ${path}`);\n console.log(`Sitename parameter: ${sitename || \"none\"}`);\n\n // If using sitename parameter, fetch from Neocities API\n if (sitename) {\n // Create the database key using sitename.neocities.org format\n const dbKey = `${sitename}.neocities.org`;\n\n // Fetch stats from Neocities API\n const neocitiesData = await fetchNeocitiesStats(sitename);\n\n // Get the current count from database (either fresh or cached)\n const count = await getCount(dbKey);\n\n // If API fetch successful, update the database\n if (neocitiesData && neocitiesData.result === \"success\") {\n // Extract the hits value\n const hits = neocitiesData.info.hits || 0;\n\n // Store the value in our database for tracking\n await setCount(dbKey, hits);\n } else {\n console.log(`Failed to fetch data for site: ${sitename}`);\n }\n\n // Return the counter image with the hits count\n return renderCounterImage(count);\n }\n\n // If root path, show HTML documentation\n if (!path) {\n return renderHtmlPage();\n }\n\n const urlInfo = extractUrlInfo(path);\n if (!urlInfo) {\n console.log(\"Invalid URL format\");\n return renderErrorImage(\"INVALID URL FORMAT\");\n }\n\n console.log(`URL info:`, urlInfo);\n const { domain, path: pagePath } = urlInfo;\n const fullUrl = `${domain}/${pagePath}`;\n console.log(`Full URL for counter: ${fullUrl}`);\n\n // Get the Origin header\n const origin = req.headers.get(\"Origin\");\n console.log(`Origin header: ${origin || \"none\"}`);\n\n // If Origin is present, check if it matches the domain\n if (origin) {\n const originUrl = new URL(origin);\n const originDomain = originUrl.hostname;\n\n // Check if the origin domain matches the requested domain\n if (originDomain !== domain) {\n console.log(`Origin mismatch: ${originDomain} vs ${domain}`);\n return renderErrorImage(\"MISMATCHED ORIGIN\");\n }\n }\n\n // Increment the counter and get the new count\n const count = await incrementCount(fullUrl);\n console.log(`Counter for ${fullUrl}: ${count}`);\n\n // Return the counter image\n return renderCounterImage(count);\n}","createdAt",["D",1740549942950],"version",78,"currentUserHasLiked","likeCount",1,"forkCount","referenceCount","dependencyCount","commentCount","prCount","mergedPr",{"_131":132,"_133":134},"handle","mbo","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yZkoyM2t0ajBwOGpkSWt1aDBrd1FyWlV1d1EifQ","forkedVal","interval","slug","mbo/neocities_hit_counter","description","https://mbo-neocities_hit_counter.web.val.run","versions",[143,146,150,154,158,162,166,170,174,178,182,186,190,194,198,202,206,210,214,218,222,226,230,234,238,242,246,250,254,258,262,266,270,274,278,282,286,290,294,298,302,306,310,314,318,322,326,330,334,338,342,346,350,354,358,362,366,370,374,378,382,386,390,394,398,402,406,410,414,418,422,426,430,434,438,442,446,449,452],{"_119":120,"_144":-5,"_117":145,"_114":112},"prId",["D",1740549942950],{"_119":147,"_144":-5,"_117":148,"_114":149},77,["D",1740549885942],"942b3172-f407-11ef-9c20-569c3dd06744",{"_119":151,"_144":-5,"_117":152,"_114":153},76,["D",1740549527573],"be90637a-f406-11ef-83ce-569c3dd06744",{"_119":155,"_144":-5,"_117":156,"_114":157},75,["D",1740549499467],"adcf4722-f406-11ef-9bf3-569c3dd06744",{"_119":159,"_144":-5,"_117":160,"_114":161},74,["D",1740549499198],"ada6f402-f406-11ef-9bf3-569c3dd06744",{"_119":163,"_144":-5,"_117":164,"_114":165},73,["D",1740549289861],"30e13de2-f406-11ef-98aa-569c3dd06744",{"_119":167,"_144":-5,"_117":168,"_114":169},72,["D",1740549255340],"1c4d7ef4-f406-11ef-af5a-569c3dd06744",{"_119":171,"_144":-5,"_117":172,"_114":173},71,["D",1740549232101],"0e737176-f406-11ef-b7b6-569c3dd06744",{"_119":175,"_144":-5,"_117":176,"_114":177},70,["D",1740549231484],"0e150424-f406-11ef-b5bf-569c3dd06744",{"_119":179,"_144":-5,"_117":180,"_114":181},69,["D",1740549189615],"f5207af2-f405-11ef-aee6-569c3dd06744",{"_119":183,"_144":-5,"_117":184,"_114":185},68,["D",1740548931318],"5b2b409e-f405-11ef-ba75-569c3dd06744",{"_119":187,"_144":-5,"_117":188,"_114":189},67,["D",1740548903535],"4a9cdcd8-f405-11ef-bfd4-569c3dd06744",{"_119":191,"_144":-5,"_117":192,"_114":193},66,["D",1740546254822],"1fdb1bdc-f3ff-11ef-b84d-569c3dd06744",{"_119":195,"_144":-5,"_117":196,"_114":197},65,["D",1740546240380],"173ea5a2-f3ff-11ef-babd-569c3dd06744",{"_119":199,"_144":-5,"_117":200,"_114":201},64,["D",1740546214259],"07ad01ce-f3ff-11ef-8df5-569c3dd06744",{"_119":203,"_144":-5,"_117":204,"_114":205},63,["D",1740546047440],"a43f0f10-f3fe-11ef-b835-569c3dd06744",{"_119":207,"_144":-5,"_117":208,"_114":209},62,["D",1740546030494],"9a252a14-f3fe-11ef-a685-569c3dd06744",{"_119":211,"_144":-5,"_117":212,"_114":213},61,["D",1740546030209],"99f986e8-f3fe-11ef-841b-569c3dd06744",{"_119":215,"_144":-5,"_117":216,"_114":217},60,["D",1740545672191],"c49494b6-f3fd-11ef-b3f9-569c3dd06744",{"_119":219,"_144":-5,"_117":220,"_114":221},59,["D",1740545671480],"c4281c46-f3fd-11ef-b3fd-569c3dd06744",{"_119":223,"_144":-5,"_117":224,"_114":225},58,["D",1740545642851],"b317cf3c-f3fd-11ef-97ee-569c3dd06744",{"_119":227,"_144":-5,"_117":228,"_114":229},57,["D",1740545325830],"f62216f8-f3fc-11ef-8568-569c3dd06744",{"_119":231,"_144":-5,"_117":232,"_114":233},56,["D",1740544455355],"ef4943b2-f3fa-11ef-b3b9-569c3dd06744",{"_119":235,"_144":-5,"_117":236,"_114":237},55,["D",1740544432441],"e1a1b870-f3fa-11ef-8bd0-569c3dd06744",{"_119":239,"_144":-5,"_117":240,"_114":241},54,["D",1740544431461],"e10c4bfa-f3fa-11ef-9c68-569c3dd06744",{"_119":243,"_144":-5,"_117":244,"_114":245},53,["D",1740544424721],"dd07b0d0-f3fa-11ef-8265-569c3dd06744",{"_119":247,"_144":-5,"_117":248,"_114":249},52,["D",1740544424472],"dce164ac-f3fa-11ef-b54b-569c3dd06744",{"_119":251,"_144":-5,"_117":252,"_114":253},51,["D",1740544277377],"85355524-f3fa-11ef-b8c4-569c3dd06744",{"_119":255,"_144":-5,"_117":256,"_114":257},50,["D",1740544261066],"7b7bdf26-f3fa-11ef-b999-569c3dd06744",{"_119":259,"_144":-5,"_117":260,"_114":261},49,["D",1740543845295],"83aa7f3c-f3f9-11ef-83b9-569c3dd06744",{"_119":263,"_144":-5,"_117":264,"_114":265},48,["D",1740543431133],"8ccf1f38-f3f8-11ef-8256-569c3dd06744",{"_119":267,"_144":-5,"_117":268,"_114":269},47,["D",1740543382354],"6fbb3de6-f3f8-11ef-8f1a-569c3dd06744",{"_119":271,"_144":-5,"_117":272,"_114":273},46,["D",1740543329731],"505d96ec-f3f8-11ef-a021-569c3dd06744",{"_119":275,"_144":-5,"_117":276,"_114":277},45,["D",1740543321527],"4b7a373e-f3f8-11ef-98a7-569c3dd06744",{"_119":279,"_144":-5,"_117":280,"_114":281},44,["D",1740543313612],"46c24cf4-f3f8-11ef-b58c-569c3dd06744",{"_119":283,"_144":-5,"_117":284,"_114":285},43,["D",1740543313191],"4681de30-f3f8-11ef-8d87-569c3dd06744",{"_119":287,"_144":-5,"_117":288,"_114":289},42,["D",1740543313064],"466f2416-f3f8-11ef-b2a8-569c3dd06744",{"_119":291,"_144":-5,"_117":292,"_114":293},41,["D",1740543304120],"41197070-f3f8-11ef-a656-569c3dd06744",{"_119":295,"_144":-5,"_117":296,"_114":297},40,["D",1740543303852],"40f0be00-f3f8-11ef-9e1a-569c3dd06744",{"_119":299,"_144":-5,"_117":300,"_114":301},39,["D",1740542555342],"82cae424-f3f6-11ef-ba59-569c3dd06744",{"_119":303,"_144":-5,"_117":304,"_114":305},38,["D",1740542317200],"f4d90fce-f3f5-11ef-b12f-569c3dd06744",{"_119":307,"_144":-5,"_117":308,"_114":309},37,["D",1740542300323],"eac99ad0-f3f5-11ef-bbc5-569c3dd06744",{"_119":311,"_144":-5,"_117":312,"_114":313},36,["D",1740542300214],"eab92bf0-f3f5-11ef-ab97-569c3dd06744",{"_119":315,"_144":-5,"_117":316,"_114":317},35,["D",1740542283543],"e0c9eecc-f3f5-11ef-838f-569c3dd06744",{"_119":319,"_144":-5,"_117":320,"_114":321},34,["D",1740542282778],"e05558d2-f3f5-11ef-ab54-569c3dd06744",{"_119":323,"_144":-5,"_117":324,"_114":325},33,["D",1740542255929],"d0546766-f3f5-11ef-a017-569c3dd06744",{"_119":327,"_144":-5,"_117":328,"_114":329},32,["D",1740542190285],"a93384b4-f3f5-11ef-9a4d-569c3dd06744",{"_119":331,"_144":-5,"_117":332,"_114":333},31,["D",1740541790122],"bab0202c-f3f4-11ef-b482-569c3dd06744",{"_119":335,"_144":-5,"_117":336,"_114":337},30,["D",1740541789835],"ba8413ce-f3f4-11ef-9474-569c3dd06744",{"_119":339,"_144":-5,"_117":340,"_114":341},29,["D",1740541607450],"4dce6e00-f3f4-11ef-99f0-569c3dd06744",{"_119":343,"_144":-5,"_117":344,"_114":345},28,["D",1740541411013],"d8b88c0e-f3f3-11ef-850e-569c3dd06744",{"_119":347,"_144":-5,"_117":348,"_114":349},27,["D",1740540985265],"daf41250-f3f2-11ef-bb82-569c3dd06744",{"_119":351,"_144":-5,"_117":352,"_114":353},26,["D",1740540821468],"7953bc6c-f3f2-11ef-9c31-569c3dd06744",{"_119":355,"_144":-5,"_117":356,"_114":357},25,["D",1740540728596],"41f82de8-f3f2-11ef-a291-569c3dd06744",{"_119":359,"_144":-5,"_117":360,"_114":361},24,["D",1740540608568],"fa6d034a-f3f1-11ef-8cc4-569c3dd06744",{"_119":363,"_144":-5,"_117":364,"_114":365},23,["D",1740540576306],"e7311b68-f3f1-11ef-abf1-569c3dd06744",{"_119":367,"_144":-5,"_117":368,"_114":369},22,["D",1740540417308],"886d0a06-f3f1-11ef-8229-569c3dd06744",{"_119":371,"_144":-5,"_117":372,"_114":373},21,["D",1740539942731],"6d8e5b1e-f3f0-11ef-be99-569c3dd06744",{"_119":375,"_144":-5,"_117":376,"_114":377},20,["D",1740539839962],"304d0f34-f3f0-11ef-adff-569c3dd06744",{"_119":379,"_144":-5,"_117":380,"_114":381},19,["D",1740539552806],"8524ccaa-f3ef-11ef-99d5-569c3dd06744",{"_119":383,"_144":-5,"_117":384,"_114":385},18,["D",1740539541545],"7e6da08a-f3ef-11ef-890f-569c3dd06744",{"_119":387,"_144":-5,"_117":388,"_114":389},17,["D",1740539393673],"264aa81c-f3ef-11ef-8e9c-569c3dd06744",{"_119":391,"_144":-5,"_117":392,"_114":393},16,["D",1740539378176],"1d0e0d5c-f3ef-11ef-9855-569c3dd06744",{"_119":395,"_144":-5,"_117":396,"_114":397},15,["D",1740539365175],"154e5c5c-f3ef-11ef-ab4c-569c3dd06744",{"_119":399,"_144":-5,"_117":400,"_114":401},14,["D",1740539333180],"02443730-f3ef-11ef-b6f8-569c3dd06744",{"_119":403,"_144":-5,"_117":404,"_114":405},13,["D",1740539250492],"d0f28790-f3ee-11ef-95eb-569c3dd06744",{"_119":407,"_144":-5,"_117":408,"_114":409},12,["D",1740539204173],"b556da54-f3ee-11ef-8db4-569c3dd06744",{"_119":411,"_144":-5,"_117":412,"_114":413},11,["D",1740539165715],"9e6c8294-f3ee-11ef-a111-569c3dd06744",{"_119":415,"_144":-5,"_117":416,"_114":417},10,["D",1740539149211],"94944018-f3ee-11ef-ae2d-569c3dd06744",{"_119":419,"_144":-5,"_117":420,"_114":421},9,["D",1740539023416],"499a1984-f3ee-11ef-859c-569c3dd06744",{"_119":423,"_144":-5,"_117":424,"_114":425},8,["D",1740538979068],"2f2b0478-f3ee-11ef-8586-569c3dd06744",{"_119":427,"_144":-5,"_117":428,"_114":429},7,["D",1740538894758],"fce983fe-f3ed-11ef-bb2f-569c3dd06744",{"_119":431,"_144":-5,"_117":432,"_114":433},6,["D",1740538880238],"f443d380-f3ed-11ef-b0b1-569c3dd06744",{"_119":435,"_144":-5,"_117":436,"_114":437},5,["D",1740538879351],"f3bc54c8-f3ed-11ef-bd2a-569c3dd06744",{"_119":439,"_144":-5,"_117":440,"_114":441},4,["D",1740538863769],"ea7114d0-f3ed-11ef-bb2f-569c3dd06744",{"_119":443,"_144":-5,"_117":444,"_114":445},3,["D",1740538844626],"df093852-f3ed-11ef-be55-569c3dd06744",{"_119":91,"_144":-5,"_117":447,"_114":448},["D",1740538803998],"c6d17de4-f3ed-11ef-8328-569c3dd06744",{"_119":123,"_144":-5,"_117":450,"_114":451},["D",1740538803887],"c6c12732-f3ed-11ef-8cd9-569c3dd06744",{"_119":32,"_144":-5,"_117":453,"_114":454},["D",1740537166539],"f6d2468a-f3e9-11ef-908d-569c3dd06744","recentThread","breadcrumbs","comments",[],"isOwner","routes/_app.v.$handle.$name.versions.$(version)",{"_94":462,"_463":464,"_95":465},"single","redirect","/v/mbo/neocities_hit_counter/versions",{"_114":433,"_115":466,"_119":431,"_117":467,"_468":100,"_101":102,"_109":110,"_131":132,"_11":97,"_469":-5,"_470":-5,"_471":-5,"_459":26,"_137":138},"import { sqlite } from \"https://esm.town/v/std/sqlite\";\n\n// Create table if it doesn't exist\nasync function initializeDB() {\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS hit_counter (\n url TEXT PRIMARY KEY,\n count INTEGER DEFAULT 0\n )\n `);\n}\n\n// Get the current count for a URL\nasync function getCount(url: string): Promise {\n const result = await sqlite.execute({\n sql: `SELECT count FROM hit_counter WHERE url = :url`,\n args: { url },\n });\n\n if (result.rows.length === 0) {\n return 0;\n }\n\n return result.rows[0].count;\n}\n\n// Increment the counter for a URL\nasync function incrementCount(url: string): Promise {\n await sqlite.execute({\n sql: `\n INSERT INTO hit_counter (url, count) \n VALUES (:url, 1)\n ON CONFLICT (url) \n DO UPDATE SET count = count + 1\n `,\n args: { url },\n });\n\n return await getCount(url);\n}\n\n// Get all counters\nasync function getAllCounters(): Promise> {\n const result = await sqlite.execute(`\n SELECT url, count FROM hit_counter \n ORDER BY count DESC\n `);\n\n return result.rows;\n}\n\n// Render a counter image with the given count\nfunction renderCounterImage(count: number): Response {\n // Create a canvas and draw the counter\n const canvas = new OffscreenCanvas(200, 80);\n const ctx = canvas.getContext(\"2d\");\n\n // Draw background\n ctx.fillStyle = \"#2c3e50\";\n ctx.fillRect(0, 0, 200, 80);\n\n // Draw border\n ctx.strokeStyle = \"#ecf0f1\";\n ctx.lineWidth = 3;\n ctx.strokeRect(3, 3, 194, 74);\n\n // Draw text\n ctx.fillStyle = \"#ecf0f1\";\n ctx.font = \"bold 36px Arial\";\n ctx.textAlign = \"center\";\n ctx.textBaseline = \"middle\";\n ctx.fillText(count.toString(), 100, 40);\n\n // Convert canvas to PNG\n const imageData = canvas.transferToImageBitmap();\n const blob = new Blob([imageData], { type: \"image/png\" });\n\n return new Response(blob, {\n headers: {\n \"Content-Type\": \"image/png\",\n \"Cache-Control\": \"no-store, max-age=0\",\n },\n });\n}\n\n// Render an error image\nfunction renderErrorImage(message: string): Response {\n // Create a canvas and draw the error message\n const canvas = new OffscreenCanvas(300, 80);\n const ctx = canvas.getContext(\"2d\");\n\n // Draw background\n ctx.fillStyle = \"#c0392b\";\n ctx.fillRect(0, 0, 300, 80);\n\n // Draw text\n ctx.fillStyle = \"#ecf0f1\";\n ctx.font = \"bold 24px Arial\";\n ctx.textAlign = \"center\";\n ctx.textBaseline = \"middle\";\n ctx.fillText(message, 150, 40);\n\n // Convert canvas to PNG\n const imageData = canvas.transferToImageBitmap();\n const blob = new Blob([imageData], { type: \"image/png\" });\n\n return new Response(blob, {\n headers: {\n \"Content-Type\": \"image/png\",\n \"Cache-Control\": \"no-store, max-age=0\",\n },\n });\n}\n\n// Render the HTML page with all counters\nasync function renderHtmlPage(): Promise {\n const counters = await getAllCounters();\n\n const html = `\n \n \n \n \n \n Neocities hit counter\n \n \n \n

Website Hit Counter

\n \n

How to use

Add this image tag to your website to track and display page views:

<img src=\"https://mbo-neocities_hit_counter.web.val.run/your-domain.com/your-page.png\" alt=\"Visit Counter\" />

\n \n

Important: The counter only works when the Origin header matches the URL being tracked. This prevents misuse.

\n \n

Example

For a page at https://example.com/page1, use:

<img src=\"https://mbo-neocities_hit_counter.web.val.run/example.com/page1.png\" alt=\"Visit Counter\" />

\n \n

Current Counters

\n \n \n \n \n \n ${\n counters.map(counter => `\n \n \n \n \n `).join(\"\")\n }\n ${counters.length === 0 ? \"\" : \"\"}\n

URL	Count
${counter.url}	${counter.count}
No counters recorded yet

\n \n \n `;\n\n return new Response(html, {\n headers: {\n \"Content-Type\": \"text/html\",\n \"Cache-Control\": \"no-store, max-age=0\",\n },\n });\n}\n\n// Extract domain and path from URL\nfunction extractUrlInfo(urlPath: string): { domain: string; path: string } | null {\n // Remove the .png extension if present\n const cleanPath = urlPath.replace(/\\.png$/, \"\");\n\n // Split the path into parts\n const parts = cleanPath.split(\"/\").filter(part => part);\n\n if (parts.length < 1) {\n return null;\n }\n\n const domain = parts[0];\n const path = parts.slice(1).join(\"/\") || \"index\";\n\n return { domain, path };\n}\n\n// Main handler function\nexport default async function(req: Request): Promise {\n await initializeDB();\n\n const url = new URL(req.url);\n const path = url.pathname.slice(1); // Remove leading slash\n\n // If root path, show HTML documentation\n if (!path) {\n return renderHtmlPage();\n }\n\n const urlInfo = extractUrlInfo(path);\n if (!urlInfo) {\n return renderErrorImage(\"INVALID URL FORMAT\");\n }\n\n const { domain, path: pagePath } = urlInfo;\n const fullUrl = `${domain}/${pagePath}`;\n\n // Get the Origin header\n const origin = req.headers.get(\"Origin\");\n\n // If Origin is present, check if it matches the domain\n if (origin) {\n const originUrl = new URL(origin);\n const originDomain = originUrl.hostname;\n\n // Check if the origin domain matches the requested domain\n if (originDomain !== domain) {\n return renderErrorImage(\"MISMATCHED ORIGIN\");\n }\n }\n\n // Increment the counter and get the new count\n const count = await incrementCount(fullUrl);\n\n // Return the counter image\n return renderCounterImage(count);\n}",["D",1740538880238],"valName","deletedAt","messageId","threadId","routes/_app","actionData","errors"]

neocities_hit_counter

Version 6