Hacker News Clone

// This val will serve an HTML page emulating a Hacker News clone. // It uses plain HTML and CSS to create the frontend. Eventually, // we can make it interactive with additional scripts. export default async function(req: Request): Promise { const url = new URL(req.url); const pathname = url.pathname; // If the user navigates to a specific story page if (pathname.startsWith("/story/")) { const storyId = pathname.split("/")[2]; return new Response(renderStoryPage(storyId), { headers: { "Content-Type": "text/html", }, }); } // Otherwise, render the main page with story titles const htmlContent = ` Hacker News Clone

First Fake Story

100 points by user1 1 hour ago | 50 comments

Second Fake Story

150 points by user2 2 hours ago | 75 comments

Third Fake Story

200 points by user3 3 hours ago | 100 comments

Fourth Fake Story

250 points by user4 4 hours ago | 120 comments

Fifth Fake Story

300 points by user5 5 hours ago | 150 comments

`; return new Response(htmlContent, { headers: { "Content-Type": "text/html", }, }); } function renderStoryPage(storyId: string): string { const stories = { "1": { title: "First Fake Story", content: "This is the content of the first fake story. Lorem ipsum dolor sit amet, consectetur adipiscing elit.", comments: [ { user: "commenter1", text: "This is the first comment on the first fake story." }, { user: "commenter2", text: "This is the second comment on the first fake story." }, ], }, "2": { title: "Second Fake Story", content: "This is the content of the second fake story. Lorem ipsum dolor sit amet, consectetur adipiscing elit.", comments: [ { user: "commenter3", text: "This is the first comment on the second fake story." }, { user: "commenter4", text: "This is the second comment on the second fake story." }, ], }, "3": { title: "Third Fake Story", content: "This is the content of the third fake story. Lorem ipsum dolor sit amet, consectetur adipiscing elit.", comments: [ { user: "commenter5", text: "This is the first comment on the third fake story." }, { user: "commenter6", text: "This is the second comment on the third fake story." }, ], }, "4": { title: "Fourth Fake Story", content: "This is the content of the fourth fake story. Lorem ipsum dolor sit amet, consectetur adipiscing elit.", comments: [ { user: "commenter7", text: "This is the first comment on the fourth fake story." }, { user: "commenter8", text: "This is the second comment on the fourth fake story." }, ], }, "5": { title: "Fifth Fake Story", content: "This is the content of the fifth fake story. Lorem ipsum dolor sit amet, consectetur adipiscing elit.", comments: [ { user: "commenter9", text: "This is the first comment on the fifth fake story." }, { user: "commenter10", text: "This is the second comment on the fifth fake story." }, ], }, }; const story = stories[storyId] || { title: "Story Not Found", content: "The story you are looking for does not exist.", comments: [] }; const commentsHtml = story.comments.map(comment => `

${comment.user}

${comment.text}

`).join(""); return ` ${story.title}

${story.title}

${story.content}

${commentsHtml}

`; }

valle_tmp_2739467303170559614047477836350564