/** @jsxImportSource https://esm.sh/react */ import React from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; import { renderToString } from "https://esm.sh/react-dom/server"; function Badge({ username, title }) { return (

); } function App() { const [username, setUsername] = React.useState(""); const [title, setTitle] = React.useState(""); const [embedCode, setEmbedCode] = React.useState(""); const generateEmbedCode = () => { if (username) { const badgeHTML = renderToString(); setEmbedCode(`

${badgeHTML}

`); } }; return (

Val Town Badge Generator

setUsername(e.target.value)} placeholder="val.town username" required style={{ flex: 1, padding: "10px", fontSize: "16px", border: "2px solid #e5e7eb", borderRadius: "5px", outline: "none", }} /> setTitle(e.target.value)} placeholder="Enter Title" style={{ flex: 1, padding: "10px", fontSize: "16px", border: "2px solid #e5e7eb", borderRadius: "5px", outline: "none", }} />

{embedCode && (

Embed Code:

          <h3 style={{ color: "#1e40af", marginTop: "20px", marginBottom: "10px" }}>Preview:</h3>
          <div dangerouslySetInnerHTML={{ __html: embedCode }} />
        </div>
      )}
    </div>
  );
}

export default async function server(request: Request): Promise<Response> {
  return new Response(
    `
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
        <title>Val Town Badge Generator</title>
        <style>${css}</style>
      </head>
      <body>
        <div id="root"></div>
        <script type="module" src="${import.meta.url}"></script>
      </body>
    </html>
  `,
    {
      headers: { "Content-Type": "text/html" },
    },
  );
}

const css = `
  body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
  }
  h1, h3 {
    font-weight: 600;
  }
  input:focus, textarea:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  }
  button:hover {
    background-color: #2563eb;
  }
  a {
    color: #3b82f6;
    text-decoration: none;
  }
  a:hover {
    text-decoration: underline;
  }
`;

if (typeof document !== "undefined") {
  createRoot(document.getElementById("root")).render(<App />);
}</article></body></html>

Badge_Generator

Version 1