/** @jsxImportSource https://esm.sh/react */ import { BskyAgent } from "https://esm.sh/@atproto/api"; import React, { useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { const [message, setMessage] = useState(""); const [status, setStatus] = useState(""); const postToBluesky = async () => { try { const response = await fetch("/post-bluesky", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ message }), }); const result = await response.text(); setStatus(result); } catch (error) { setStatus("Failed to post"); } }; return (

🚀 Bluesky Poster

setMessage(e.target.value)}
        placeholder="What's on your mind?"
        style={{
          width: "100%",
          minHeight: "100px",
          marginBottom: "10px",
          padding: "10px",
          borderRadius: "5px",
          border: "1px solid #ccc",
        }}
      />
      <button
        onClick={postToBluesky}
        disabled={!message}
        style={{
          padding: "10px 20px",
          fontSize: "16px",
          backgroundColor: message ? "#1DA1F2" : "#cccccc",
          color: "white",
          border: "none",
          borderRadius: "5px",
          cursor: message ? "pointer" : "not-allowed",
          width: "100%",
        }}
      >
        Post to Bluesky
      </button>
      {status && <p>{status}</p>}
      <a
        href={import.meta.url.replace("esm.town", "val.town")}
        target="_top"
        style={{
          marginTop: "20px",
          color: "#666",
          textDecoration: "none",
        }}
      >
        View Source
      </a>
    </div>
  );
}

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

export default async function server(request: Request): Promise<Response> {
  if (request.method === "POST" && new URL(request.url).pathname === "/post-bluesky") {
    try {
      // Parse the incoming JSON body
      const body = await request.json();
      const userMessage = body.message || "Posted from Val Town! 🚀";

const agent = new BskyAgent({ service: "https://bsky.social" });

// You must set these environment variables in Val Town's UI
      await agent.login({
        identifier: Deno.env.get("BLUESKY_USERNAME")!,
        password: Deno.env.get("BLUESKY_APP_PASSWORD")!,
      });

const post = await agent.post({
        text: userMessage,
      });

return new Response("Successfully posted to Bluesky!", { status: 200 });
    } catch (error) {
      return new Response(`Failed to post: ${error.message}`, { status: 500 });
    }
  }

return new Response(
    `
    <html>
      <head>
        <title>Bluesky Poster</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
      </head>
      <body>
        <div id="root"></div>
        <script src="https://esm.town/v/std/catch"></script>
        <script type="module" src="${import.meta.url}"></script>
      </body>
    </html>
  `,
    {
      headers: { "content-type": "text/html" },
    },
  );
}</article></body></html>

blueskyPostButton