Unlisted
HTTP
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
// This val creates a Lorem Ipsum generator that outputs in markdown format with a copy to clipboard button.
// It uses the 'lorem-ipsum' npm package for text generation and React for the UI.
/** @jsxImportSource https://esm.sh/react */
import React, { useState } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
import { LoremIpsum } from "https://esm.sh/lorem-ipsum";
function App() {
const [markdown, setMarkdown] = useState("");
const [copied, setCopied] = useState(false);
const generateLoremIpsum = () => {
const lorem = new LoremIpsum({
sentencesPerParagraph: {
max: 8,
min: 4
},
wordsPerSentence: {
max: 16,
min: 4
}
});
const paragraphs = lorem.generateParagraphs(3);
const markdownText = paragraphs.split('\n').map(p => `## ${lorem.generateWords(3)}\n\n${p}`).join('\n\n');
setMarkdown(markdownText);
setCopied(false);
};
const copyToClipboard = () => {
navigator.clipboard.writeText(markdown).then(() => {
setCopied(true);
setTimeout(() => setCopied(false), 2000);
});
};
return (
<div className="container">
<h1>Lorem Ipsum Markdown Generator</h1>
<button onClick={generateLoremIpsum}>Generate Lorem Ipsum</button>
{markdown && (
<div className="output">
<pre>{markdown}</pre>
<button onClick={copyToClipboard}>
{copied ? "Copied!" : "Copy to Clipboard"}
</button>
</div>
)}
<p className="footer">
View source on <a href={import.meta.url.replace("esm.town", "val.town")}>Val Town</a>
</p>
</div>
);
}
function client() {
createRoot(document.getElementById("root")).render(<App />);
}
if (typeof document !== "undefined") { client(); }
export default async function server(request: Request): Promise<Response> {
return new Response(`
<html>
<head>
<title>Lorem Ipsum Markdown Generator</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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: Arial, sans-serif;
line-height: 1.6;
color: #333;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
color: #2c3e50;
}