Lide demo of single cloudflare worker file

site.org

Cloudflare API Demo

#!/usr/bin/env orgp

{
  "outDir": "./dist"
}

Hello from Org-Press on Cloudflare Workers

This page and its API endpoints live in a single org file and deploy as one Cloudflare Worker.

Try the API

Click the button to call /api/hello:

const btn = document.createElement("button");
btn.textContent = "Call /api/hello";
btn.style.cssText = "padding: 0.75rem 1.5rem; font-size: 1rem; cursor: pointer; border-radius: 6px; border: 2px solid #f38020; background: white; color: #f38020; font-weight: 600;";

const output = document.createElement("pre");
output.style.cssText = "margin-top: 1rem; padding: 1rem; background: #f5f5f5; border-radius: 6px; min-height: 2rem;";
output.textContent = "(click the button)";

btn.addEventListener("click", async () => {
  btn.disabled = true;
  output.textContent = "Loading...";
  try {
    const res = await fetch("/api/hello");
    const data = await res.json();
    output.textContent = JSON.stringify(data, null, 2);
  } catch (err) {
    output.textContent = "Error: " + err.message;
  } finally {
    btn.disabled = false;
  }
});

const container = document.createElement("div");
container.appendChild(btn);
container.appendChild(output);
export default container;

Greeting endpoint

Enter a name and call /api/greet/:name:

const wrapper = document.createElement("div");

const input = document.createElement("input");
input.type = "text";
input.placeholder = "Enter your name";
input.value = "World";
input.style.cssText = "padding: 0.5rem; font-size: 1rem; border: 2px solid #ccc; border-radius: 6px; margin-right: 0.5rem;";

const btn = document.createElement("button");
btn.textContent = "Greet me";
btn.style.cssText = "padding: 0.5rem 1.25rem; font-size: 1rem; cursor: pointer; border-radius: 6px; border: 2px solid #f38020; background: #f38020; color: white; font-weight: 600;";

const output = document.createElement("pre");
output.style.cssText = "margin-top: 1rem; padding: 1rem; background: #f5f5f5; border-radius: 6px;";
output.textContent = "(enter a name and click)";

btn.addEventListener("click", async () => {
  const name = input.value || "World";
  btn.disabled = true;
  output.textContent = "Loading...";
  try {
    const res = await fetch("/api/greet/" + encodeURIComponent(name));
    const data = await res.json();
    output.textContent = JSON.stringify(data, null, 2);
  } catch (err) {
    output.textContent = "Error: " + err.message;
  } finally {
    btn.disabled = false;
  }
});

const row = document.createElement("div");
row.style.cssText = "display: flex; align-items: center;";
row.appendChild(input);
row.appendChild(btn);
wrapper.appendChild(row);
wrapper.appendChild(output);
export default wrapper;

API Endpoints

These blocks define the serverless API endpoints.

GET /api/hello

export default async (req, res) => {
  res.json({
    message: "Hello from org-press on Cloudflare Workers!",
    timestamp: new Date().toISOString(),
  });
};

GET api/greet:name

export default async (req, res) => {
  const name = req.params.name;
  res.json({
    greeting: "Hello, " + name + "!",
    method: req.method,
    path: req.path,
  });
};

POST /api/echo

export default async (req, res) => {
  res.status(200).json({
    received: req.body,
    headers: {
      contentType: req.headers["content-type"],
    },
  });
};

Styling

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  line-height: 1.6;
  color: #333;
}
h1 { color: #f38020; border-bottom: 3px solid #fbad41; padding-bottom: 0.5rem; }
h2 { color: #555; }
pre { overflow-x: auto; }
button:hover { opacity: 0.85; }
button:disabled { opacity: 0.5; cursor: not-allowed; }