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
// This HTTP val will generate an HTML frontend for a simple Hacker News clone.
// It will use hardcoded example stories for now and display them in a clean layout.
import { Hono } from "npm:hono";
const app = new Hono();
const exampleStories = [
{
title: "Introducing Val Town",
url: "https://val.town",
points: 100,
author: "Steve Krouse",
comments: 30,
},
{
title: "Hacker News Clone with Val Town",
url: "https://val.town",
points: 200,
author: "Steve Krouse",
comments: 40,
},
{
title: "Learn JavaScript with Val Town",
url: "https://val.town",
points: 150,
author: "Steve Krouse",
comments: 24,
},
];
app.get("/", (c) => {
return c.html(`
<html>
<head>
<title>Hacker News Clone</title>
<style>
body { font-family: Arial, sans-serif; }
.story { margin-bottom: 20px; }
.title { font-size: 18px; font-weight: bold; }
.meta { font-size: 14px; color: #555; }
</style>
</head>
<body>
<h1>Hacker News Clone</h1>
<div id="stories">
${exampleStories
.map((story) => {
return `
<div class="story">
<div class="title"><a href="${story.url}">${story.title}</a></div>
<div class="meta">${story.points} points by ${story.author} | ${story.comments} comments</div>
</div>
`;
})
.join("")}
</div>
</body>
</html>
`);
});
export default app.fetch;
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