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
/**
* This val will create a simple Hacker News clone with hardcoded example stories.
* We'll use basic HTML for the layout and styling.
*/
export default async function main(req: Request): Promise<Response> {
// Define some example stories
const stories = [
{
title: "First story on Hacker News",
link: "https://example.com/1",
points: 123,
author: "author1",
},
{
title: "Second story on Hacker News",
link: "https://example.com/2",
points: 456,
author: "author2",
},
{
title: "Third story on Hacker News",
link: "https://example.com/3",
points: 789,
author: "author3",
},
];
// Generate the HTML content
const htmlContent = `
<html>
<head>
<title>Hacker News Clone</title>
<style>
body { font-family: Arial, sans-serif; background-color: #f6f6f6; margin: 0; padding: 20px; }
.container { max-width: 800px; margin: auto; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
h1 { font-size: 24px; }
ul { list-style: none; padding: 0; }
li { margin: 20px 0; }
a { text-decoration: none; color: #0366d6; }
.points { font-size: 12px; color: #999; }
.author { font-size: 12px; color: #555; }
</style>
</head>
<body>
<div class="container">
<h1>Hacker News Clone</h1>
<ul>
${stories
.map(
(story) => `
<li>
<a href="${story.link}">${story.title}</a>
<div class="points">${story.points} points</div>
<div class="author">by ${story.author}</div>
</li>
`
)
.join("")}
</ul>
</div>
</body>
</html>
`;
// Return the HTML response
return new Response(htmlContent, {
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!
July 17, 2024