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",[98],"permalink","https://www.val.town/x/nicosql/count_visits/code/main.tsx","extension","actionData","errors"]
</article></body></html>