/** @jsxImportSource https://esm.sh/react */ import React, { useEffect, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { const [websiteUrl, setWebsiteUrl] = useState(""); const [embedCode, setEmbedCode] = useState(""); const [visitorCount, setVisitorCount] = useState(0); const generateEmbedCode = async () => { if (!websiteUrl) return; const response = await fetch("/generate-embed", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ websiteUrl }), }); if (response.ok) { const { embedCode, visitorCount } = await response.json(); setEmbedCode(embedCode); setVisitorCount(visitorCount); } }; useEffect(() => { const fetchVisitorCount = async () => { if (websiteUrl) { const response = await fetch(`/visitor-count?url=${encodeURIComponent(websiteUrl)}`); if (response.ok) { const { count } = await response.json(); setVisitorCount(count); } } }; fetchVisitorCount(); const interval = setInterval(fetchVisitorCount, 5000); return () => clearInterval(interval); }, [websiteUrl]); return (

Website Visitor Counter

setWebsiteUrl(e.target.value)} placeholder="Enter your website URL" /> {embedCode && (

Embed Code (Copy and paste this into your React component):

          <p>Current Visitor Count: {visitorCount}</p>
        </div>
      )}
    </div>
  );
}

function client() {
  createRoot(document.getElementById("root")).render(<App />);
}

if (typeof document !== "undefined") {
  client();
}

async function server(request: Request): Promise<Response> {
  const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite");
  const SCHEMA_VERSION = 1;

  const KEY = new URL(import.meta.url).pathname.split("/").at(-1);

  await sqlite.execute(`
    CREATE TABLE IF NOT EXISTS ${KEY}_visitor_counts_${SCHEMA_VERSION} (
      id INTEGER PRIMARY KEY AUTOINCREMENT,
      website_url TEXT UNIQUE NOT NULL,
      count INTEGER DEFAULT 0
    )
  `);

  const url = new URL(request.url);

  if (url.pathname === "/generate-embed") {
    if (request.method === "POST") {
      const { websiteUrl } = await request.json();
      const encodedUrl = encodeURIComponent(websiteUrl);
      const embedCode = `
import { useState, useEffect } from 'react';

function VisitorCounter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const fetchCount = async () => {
      const response = await fetch('${url.origin}/count-visitor?url=${encodedUrl}');
      if (response.ok) {
        const { count } = await response.json();
        setCount(count);
      }
    };

    fetchCount();
  }, []);

  return <div>Visitor Count: {count}</div>;
}

export default VisitorCounter;
`;

      await sqlite.execute(
        `
        INSERT OR IGNORE INTO ${KEY}_visitor_counts_${SCHEMA_VERSION} (website_url, count)
        VALUES (?, 1)
      `,
        [websiteUrl],
      );

      const result = await sqlite.execute(
        `
        SELECT count FROM ${KEY}_visitor_counts_${SCHEMA_VERSION}
        WHERE website_url = ?
      `,
        [websiteUrl],
      );

      const visitorCount = result.rows[0]?.count || 1;

      return new Response(JSON.stringify({ embedCode, visitorCount }), {
        headers: { "Content-Type": "application/json" },
      });
    }
  } else if (url.pathname === "/count-visitor") {
    const websiteUrl = decodeURIComponent(url.searchParams.get("url") || "");
    if (websiteUrl) {
      await sqlite.execute(
        `
        UPDATE ${KEY}_visitor_counts_${SCHEMA_VERSION}
        SET count = count + 1
        WHERE website_url = ?
      `,
        [websiteUrl],
      );

      const result = await sqlite.execute(
        `
        SELECT count FROM ${KEY}_visitor_counts_${SCHEMA_VERSION}
        WHERE website_url = ?
      `,
        [websiteUrl],
      );

      const count = result.rows[0]?.count || 1;

      return new Response(JSON.stringify({ count }), {
        headers: {
          "Content-Type": "application/json",
          "Cache-Control": "no-store, no-cache, must-revalidate, max-age=0",
        },
      });
    }
  } else if (url.pathname === "/visitor-count") {
    const websiteUrl = url.searchParams.get("url");
    if (websiteUrl) {
      const result = await sqlite.execute(
        `
        SELECT count FROM ${KEY}_visitor_counts_${SCHEMA_VERSION}
        WHERE website_url = ?
      `,
        [websiteUrl],
      );

      const count = result.rows[0]?.count || 0;
      return new Response(JSON.stringify({ count }), {
        headers: { "Content-Type": "application/json" },
      });
    }
  }

  return new Response(
    `
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Website Visitor Counter</title>
        <style>${css}</style>
      </head>
      <body>
        <div id="root"></div>
        <script src="https://esm.town/v/std/catch"></script>
        <script type="module" src="${import.meta.url}"></script>
        <footer>
          <a href="${import.meta.url.replace("esm.town", "val.town")}" target="_blank">View Source</a>
        </footer>
      </body>
    </html>
  `,
    {
      headers: { "Content-Type": "text/html" },
    },
  );
}

const css = `
  body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
    background-color: #f4f4f4;
  }
  .container {
    max-width: 800px;
    margin: 0 auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
  }
  h1 {
    color: #333;
  }
  input[type="text"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
  }
  button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  button:hover {
    background-color: #45a049;
  }
  .result {
    margin-top: 20px;
  }
  textarea {
    width: 100%;
    height: 100px;
    margin-bottom: 10px;
  }
  footer {
    text-align: center;
    margin-top: 20px;
  }
  footer a {
    color: #666;
    text-decoration: none;
  }
  footer a:hover {
    text-decoration: underline;
  }
`;

export default server;</article></body></html>

count_visits