Website Visitor Counter

\n setWebsiteUrl(e.target.value)}\n placeholder=\"Enter your website URL\"\n />\n \n {embedCode && (\n
Embed Code (Copy and paste this into your React component):

\n          <p>Current Visitor Count: {visitorCount}</p>\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render(<App />);\n}\n\nif (typeof document !== \"undefined\") {\n  client();\n}\n\nasync function server(request: Request): Promise<Response> {\n  const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n  const SCHEMA_VERSION = 1;\n\n  const KEY = \"count_visits\";\n\n  await sqlite.execute(`\n    CREATE TABLE IF NOT EXISTS ${KEY}_visitor_counts_${SCHEMA_VERSION} (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      website_url TEXT UNIQUE NOT NULL,\n      count INTEGER DEFAULT 0\n    )\n  `);\n\n  const url = new URL(request.url);\n\n  if (url.pathname === \"/generate-embed\") {\n    if (request.method === \"POST\") {\n      const { websiteUrl } = await request.json();\n      const encodedUrl = encodeURIComponent(websiteUrl);\n      const embedCode = `\nimport { useState, useEffect } from 'react';\n\nfunction VisitorCounter() {\n  const [count, setCount] = useState(0);\n\n  useEffect(() => {\n    const fetchCount = async () => {\n      const response = await fetch('${url.origin}/count-visitor?url=${encodedUrl}');\n      if (response.ok) {\n        const { count } = await response.json();\n        setCount(count);\n      }\n    };\n\n    fetchCount();\n  }, []);\n\n  return <div>Visitor Count: {count}</div>;\n}\n\nexport default VisitorCounter;\n`;\n\n      await sqlite.execute(\n        `\n        INSERT OR IGNORE INTO ${KEY}_visitor_counts_${SCHEMA_VERSION} (website_url, count)\n        VALUES (?, 1)\n      `,\n        [websiteUrl],\n      );\n\n      const result = await sqlite.execute(\n        `\n        SELECT count FROM ${KEY}_visitor_counts_${SCHEMA_VERSION}\n        WHERE website_url = ?\n      `,\n        [websiteUrl],\n      );\n\n      const visitorCount = result.rows[0]?.count || 1;\n\n      return new Response(JSON.stringify({ embedCode, visitorCount }), {\n        headers: { \"Content-Type\": \"application/json\" },\n      });\n    }\n  } else if (url.pathname === \"/count-visitor\") {\n    const websiteUrl = decodeURIComponent(url.searchParams.get(\"url\") || \"\");\n    if (websiteUrl) {\n      await sqlite.execute(\n        `\n        UPDATE ${KEY}_visitor_counts_${SCHEMA_VERSION}\n        SET count = count + 1\n        WHERE website_url = ?\n      `,\n        [websiteUrl],\n      );\n\n      const result = await sqlite.execute(\n        `\n        SELECT count FROM ${KEY}_visitor_counts_${SCHEMA_VERSION}\n        WHERE website_url = ?\n      `,\n        [websiteUrl],\n      );\n\n      const count = result.rows[0]?.count || 1;\n\n      return new Response(JSON.stringify({ count }), {\n        headers: {\n          \"Content-Type\": \"application/json\",\n          \"Cache-Control\": \"no-store, no-cache, must-revalidate, max-age=0\",\n        },\n      });\n    }\n  } else if (url.pathname === \"/visitor-count\") {\n    const websiteUrl = url.searchParams.get(\"url\");\n    if (websiteUrl) {\n      const result = await sqlite.execute(\n        `\n        SELECT count FROM ${KEY}_visitor_counts_${SCHEMA_VERSION}\n        WHERE website_url = ?\n      `,\n        [websiteUrl],\n      );\n\n      const count = result.rows[0]?.count || 0;\n      return new Response(JSON.stringify({ count }), {\n        headers: { \"Content-Type\": \"application/json\" },\n      });\n    }\n  }\n\n  return new Response(\n    `\n    <!DOCTYPE html>\n    <html lang=\"en\">\n      <head>\n        <meta charset=\"UTF-8\">\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n        <title>Website Visitor Counter</title>\n        <style>${css}</style>\n      </head>\n      <body>\n        <div id=\"root\"></div>\n        <script src=\"https://esm.town/v/std/catch\"></script>\n        <script type=\"module\" src=\"${import.meta.url}\"></script>\n        <footer>\n          <a href=\"${import.meta.url.replace(\"esm.town\", \"val.town\")}\" target=\"_blank\">View Source</a>\n        </footer>\n      </body>\n    </html>\n  `,\n    {\n      headers: { \"Content-Type\": \"text/html\" },\n    },\n  );\n}\n\nconst css = `\n  body {\n    font-family: Arial, sans-serif;\n    line-height: 1.6;\n    margin: 0;\n    padding: 20px;\n    background-color: #f4f4f4;\n  }\n  .container {\n    max-width: 800px;\n    margin: 0 auto;\n    background-color: #fff;\n    padding: 20px;\n    border-radius: 5px;\n    box-shadow: 0 0 10px rgba(0,0,0,0.1);\n  }\n  h1 {\n    color: #333;\n  }\n  input[type=\"text\"] {\n    width: 100%;\n    padding: 10px;\n    margin-bottom: 10px;\n  }\n  button {\n    background-color: #4CAF50;\n    color: white;\n    padding: 10px 15px;\n    border: none;\n    border-radius: 4px;\n    cursor: pointer;\n  }\n  button:hover {\n    background-color: #45a049;\n  }\n  .result {\n    margin-top: 20px;\n  }\n  textarea {\n    width: 100%;\n    height: 100px;\n    margin-bottom: 10px;\n  }\n  footer {\n    text-align: center;\n    margin-top: 20px;\n  }\n  footer a {\n    color: #666;\n    text-decoration: none;\n  }\n  footer a:hover {\n    text-decoration: underline;\n  }\n`;\n\nexport default server;","deleted","label",[127],"2b9c79fa-2791-11f0-9d52-569c3dd06744","README.md","2b9c7a7c-2791-11f0-9d52-569c3dd06744",["D",1727672177237],"# Count Visits\n\nGet code and embed it on your website to count the number of visitors.",[142],"pulls","forks","envVars",{"_153":34,"_155":34},"connections",{"_153":34,"_154":34},"count","unfilledCount","emptyCount",{"_20":141,"_13":142,"_128":143,"_129":-5,"_130":21,"_131":30,"_132":51,"_22":162,"_29":34,"_134":104,"_136":145,"_138":40,"_139":-5,"_159":163,"_92":164},{"_20":126,"_13":127,"_128":49,"_129":-5,"_130":21,"_131":30,"_132":51,"_22":158,"_29":34,"_134":135,"_136":137,"_138":40,"_139":-5,"_159":160,"_92":161},["D",1727672177237],"children",[],[127],["D",1727672177237],[],[142],["D",1746216490368],{"_11":12,"_90":86},{"_11":12,"_84":-5,"_85":86,"_46":47,"_87":88,"_89":40},{"_29":30,"_13":26,"_20":21,"_27":28,"_31":32,"_33":34,"_77":42,"_78":79,"_80":81,"_82":14,"_83":12},"ctx",{"_70":-5,"_114":202,"_203":204,"_205":206,"_207":40,"_208":40,"_209":40,"_210":51,"_211":-5,"_212":-7,"_213":-7,"_214":34,"_215":40,"_216":40,"_217":-5,"_218":40,"_219":40,"_220":40,"_221":-5},"ENV",{"_173":174,"_175":176,"_177":26,"_178":179,"_180":181,"_182":183,"_184":185,"_186":187,"_188":189,"_190":191,"_192":193,"_194":195,"_196":197,"_198":199,"_200":201},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","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"]
</article></body></html>
Branches1

Branches
1
