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.\n filter(counter => {\n const url = counter[0]\n return url.endsWith(\"neocities.org\")\n }).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}","deleted","label",[98],"permalink","https://www.val.town/x/thegreekgeek/neocities_hit_counter/code/main.tsx","extension","actionData","errors"]