export default async function main(req: Request): Promise<Response> {
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",
},
];
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 new Response(htmlContent, {
headers: {
"Content-Type": "text/html",
},
});
}