1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
/** @jsxImportSource https://esm.sh/react */
import hljs from "npm:highlight.js";
import { renderToString } from "npm:react-dom/server";
// Example code snippet
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")
`;
// Component to render the code with syntax highlighting
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" } },
);
}
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
Comments
Nobody has commented on this val yet: be the first!
v40
June 27, 2024