import hljs from "npm:highlight.js";
import { renderToString } from "npm:react-dom/server";
const codeExample = `import mootex from "https://esm.sh/mootex"
// Acquire a lock from anywhere.
await mootex.lock("cow")
// Lock acquired. It's cow time.
// Release the lock
await mootex.unlock("cow")
`;
const CodeBlock = ({ code }) => {
const highlightedCode = hljs.highlight(code, { language: "javascript" }).value;
return (
<pre className="bg-gray-100 p-4 rounded-lg border border-gray-300 overflow-auto">
<code dangerouslySetInnerHTML={{ __html: highlightedCode }} />
</pre>
);
};
export default async function(req: Request): Promise<Response> {
const pageContent = renderToString(
<html>
<head>
<title>Mootex - Distributed locks for all.</title>
<link rel="icon" href="https://maxm-ivoryunicornz.web.val.run/" />
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" />
<link href="https://esm.sh/highlight.js@11.9.0/styles/github.css" rel="stylesheet" />
<style>{`body { font-family: Arial, sans-serif; }`}</style>
</head>
<body className="bg-gray-50 flex flex-col items-center justify-center min-h-screen">
<header className="text-center mb-10">
<img src="https://maxm-ivoryunicornz.web.val.run/" alt="Mootex Logo" className="h-16 mx-auto mb-4" />
<h1 className="text-4xl font-bold text-gray-800">Mootex</h1>
<p className="text-gray-600">Distributed locks for all.</p>
</header>
<main className="w-full max-w-4xl px-4">
<CodeBlock code={codeExample} />
</main>
<footer className="text-center mt-10 text-gray-500">
<div className="flex justify-center mt-4">
<a
href="https://github.com/maxmcd/mootex"
className="mx-2"
>
<img
src="https://cdn.jsdelivr.net/npm/simple-icons@v5/icons/github.svg"
alt="GitHub"
className="h-6 w-6"
/>
</a>
<a
href="https://www.val.town/v/maxm/mootex"
className="mx-2"
>
<img
src="https://maxm-valtowniconlogo.web.val.run"
alt="GitHub"
className="h-6 w-6"
/>
</a>
</div>
</footer>
</body>
</html>,
);
return new Response(
pageContent,
{ headers: { "Content-Type": "text/html" } },
);
}