Hacker News

The user wants a webpage that copies Hacker News (news.ycombinator.com). It should: 1. Look like Hacker News (the classic orange header, story list, etc.) 2. Handle routing internally - clicking on a thread should show comments without actually changing the URL (SPA-style routing) 3. Have many comments in threads I should create a single HTML file with: - HN's classic styling (Verdana font, #ff6600 orange header, #f6f6ef background) - A list of stories on the front page - Clicking on comments link should show the thread view with nested comments - Internal routing (could use hash-based routing or just JavaScript state, but they said "internally rather than actually redirecting" - so maybe hash routing is fine, or just pure JS state management) Let me design this carefully to mimic HN: **Front page:** - Orange header bar with "Hacker News" title, nav links (new | past | comments | ask | show | jobs | submit) - Story list with rank numbers, upvote arrows, title, domain, points/author/time/comments metadata - "More" link at bottom **Item/thread page:** - Story at top with title, metadata - "add comment" textarea - Nested comments with upvote arrows, author/time, collapsible **Routing:** Since they want internal handling, I'll use JavaScript to swap views. I could use hash routing (#/item/123) which keeps the URL in the same page but allows back button. Actually they said "internally rather than actually redirecting to another URL" - hash routing doesn't redirect to another URL, it stays on the same page. I think hash-based routing is good because it gives back button support. Or I could do pure state-based with my own history stack. Let me do hash-based routing since it mimics URL changes (like item?id=123) without actual page navigation. Actually, HN URLs are like `item?id=37839213`. I could mimic with `#/item?id=37839213` or just `#/item/37839213`. Let me generate fake data: - ~30 stories for the front page - Each story has comments - I need "many comments" so I'll write a comment generator with realistic HN-style comments, nested replies. I'll create a data structure with stories, and generate comments procedurally or hand-write a bunch. A mix: hand-write some realistic comments and have nested replies. Let me write realistic HN-style content: Stories: 1. "Show HN: I built a tool that turns SQL queries into charts" (showhn.dev) - 342 points 2. "PostgreSQL 17 Released" (postgresql.org) - 891 points 3. "The unreasonable effectiveness of plain text files" (example.com) 4. "Why I'm still using jQuery in 2024" 5. etc. Comments should feel like real HN: some technical depth, some contrarian, some short, some asking questions, replies nested. Let me build the comment data structure: ```js const stories = [ { id: 1, title: "PostgreSQL 17 Released", url: "https://www.postgresql.org/about/news/postgresql-17-released-2936/", domain: "postgresql.org", points: 891, author: "fanf2", time: 5, // hours ago comments: [...nested comments...] }, ... ]; ``` Comment structure: ```js { id: 101, author: "tptacek", time: "4 hours ago", text: "comment HTML...", children: [...] } ``` I need a good number of comments. Let me write out maybe 15-20 stories with metadata, and for comments, I'll hand-write a decent set for a few stories and create a generator for variety. Actually, to make it feel rich, let me hand-write comments for the top few stories and use a seeded generator that combines comment templates to fill out the rest. Actually, let me write a good amount of comments manually for realism. Each thread should have "many comments" - so maybe 15-40 top-level comments with nesting. Hand-writing that for many stories is a lot. Let me do: - Hand-write rich threads for 3-4 stories (the ones most likely clicked) - Use a template-based generator for others that produces plausible comment trees deterministically based on story id. Actually, let me hand-write a solid pool of comments per story for maybe 8-10 stories, and have a generic generator for the rest. Or write a comment pool system. Let me think about the HTML/CSS: HN classic look: ```css body { font-family: Verdana, Geneva, sans-serif; font-size: 10pt; color: #828282; margin: 0; background: #f6f6ef; } header: table with bgcolor #ff6600 ``` The classic HN uses tables. I can replicate with tables or use divs styled similarly. Let me use a centered container width 85% with the table layout to be faithful. Header: ```html ``` For the Y logo, I can use an inline SVG or data URI, or draw it with CSS. A simple approach: an 18x18 box with orange-ish background, white border, "Y" text. Let me make a small inline SVG data URI: white background? Actually the YC logo is an orange "Y" on white rounded square... The y18.gif is an 18x18 white square with orange border and orange Y. Let me just create with CSS: a div 18x18, background white, border 1px white, containing "Y" in orange bold. Simpler: inline SVG. ```html ``` Upvote arrows: HN uses a gray triangle GIF. I can use CSS triangle or a div with border trick, or the ▲ character. HN's is a small gray triangle. Use: ```css .votearrow { width:10px; height:10px; border:5px solid transparent; border-bottom-color:#999; ... } ``` Actually border trick: `border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:5px solid #999; width:0; height:0;` Story row: ```html ``` Item page: - Same header - Story row at top (no rank) - Subtext - "add comment" textarea + button - Comments: indented with tables or divs. HN uses nested tables with indent width. I'll use divs with margin-left or padding-left based on depth, or nested structure. Comment: ```html

user 2 hours ago | parent | context | next [–]

...

... nested ...

``` Collapse toggle: HN has "[–]" that collapses. I can implement that - nice interactivity. Clicking toggles children visibility and changes to "[+N]". Routing: ```js function route() { const hash = location.hash; // e.g. #/item?id=123 or #/newest if (hash starts with #/item) renderItem(id) else renderFront() } window.addEventListener('hashchange', route); ``` Links for comments: `123 comments`. Title links: external ones go to the real URL? Better to make them not navigate (or just let them be real URLs that would open). Since this is a copy/demo, making the title link point to the actual story URL is fine, but the user might not want navigation away. Hmm, HN titles link to external articles. I could make them href to the fake URL but they'd 404. Better: make title links also open the item page (like clicking the title opens comments) — but that deviates from HN. Alternative: set href to the real URL with target behavior... Actually for demo purposes, clicking the title going to a real site like postgresql.org is fine, but many stories will be fake. Let me make fake domains and have title clicks ALSO go to the internal thread (since the articles don't exist). That's safer for the demo. Or I can make title links point to `#/item?id=` as well, consistent internal behavior. I'll do that: clicking title or comments link both open the thread internally. The domain shown is decorative. Hmm, but that might confuse. Actually for "Show HN" posts on real HN, clicking title goes to the external site. For this demo, internal is safer. I'll make title link internal too. Also add pages: "new", "past", "comments", "ask", "show", "jobs", "submit" — could render simple filtered views or a stub. To keep scope reasonable, "newest" can show stories sorted differently, "ask"/"show" filter by title prefix, others can show a minimal list or same list. Let me implement: front (news), newest (sorted by time), ask (Ask HN posts), show (Show HN posts), and submit shows a form that... just shows a stub message? Could be cute: submit form that prepends to list locally. Keep it simple: show a form with a note. Or skip. Let me implement basic ones: news, newest, ask, show. jobs -> simple message. submit -> form that does nothing meaningful (alert "Submitted (not really)"). Keep scope tight but complete-feeling. Also "login" link -> stub page. Back button works via hashchange. Now, content generation. Let me hand-write stories: 1. PostgreSQL 17 Released — postgresql.org — 891 pts — fanf2 — 5 hours ago — 412 comments 2. Show HN: I built a spreadsheet that runs in the terminal — github.com — 542 pts — 3 hours 3. The unreasonable effectiveness of plain text — danlucraft.com? Let me invent domains. 4. Why the QWERTY keyboard won 5. Ask HN: What are you working on? 6. Fuzzing the Rust compiler 7. ... Let me write ~25-30 stories. Comments: I'll write detailed threads for the first story and a couple others, and for the rest use a deterministic generator pulling from pools of realistic comment snippets with authors and nesting. Actually, let me write a decent generator that produces believable comments from template pools. Risk: repetitive/templated feel. Hand-writing 30 threads fully is too much. Hybrid: - Stories 1-4: fully hand-written threads (15-25 comments each with nesting). - Others: generator using a pool of ~40 generic-but-plausible HN comments, seeded by story id, producing 8-20 comments with nesting depth up to 3. The comment count displayed should match actual generated comments. I can compute counts after generation. Let me draft hand-written comments for the PostgreSQL story: 1. tptacek-style: "The JSON_TABLE addition alone is worth the upgrade for us. We've been maintaining a pile of lateral joins and jsonb_path_query gymnastics that this replaces entirely." - reply: "Is JSON_TABLE really that much better? We tried the equivalent in SQL Server and the ergonomics were rough." - reply: "It's SQL-standard, so at least the syntax you learn transfers..." 2. "Upgrade path from 15 was smooth for us: pg_upgrade with --link, 40 minutes of downtime for a 2TB database..." 3. "Incremental backup is the sleeper feature here. If you're running multi-TB instances..." 4. Short comment: "Postgres continues to be the default answer to 'which database should I use' and releases like this are why." 5. Contrarian: "Still no decent story for horizontal scaling though. Citus is fine until it isn't..." - replies debating. 6. "Does anyone know if this fixes the vacuum issue with high-churn tables?" - "Not fixed, but the new vacuum memory limit changes help..." 7. etc. For the terminal spreadsheet story: 1. "This is great. How do you handle ... ?" 2. Author reply "Thanks! ..." 3. "Reminds me of sc (the original Unix spreadsheet)..." 4. "I will never understand the appeal of TUIs for spreadsheets" / counter 5. Feature requests etc. OK, the generator pool: realistic HN-ish comments: - "This is really cool. How does it handle {X}?" - "I built something similar a few years ago and the hardest part was..." - "Congrats on the launch! ..." - "Honest question: who is the target user for this?" - "The pricing page is 404ing for me." - "I read the whole thing waiting for the catch and there isn't one. Impressive." - "This. We've been doing this at $dayjob for years..." - "Note that this breaks down once you have more than a handful of..." - "For anyone wanting to dig deeper, the author wrote a companion post here: ..." - "Flagged. This is a dupe of [post from last month]." - "The HN hug of death is real — site is down." - "I worked on this team, AMA." - "GPL licensing makes this a non-starter for us, unfortunately." - "This is the way." - "Came here to say this. ..." - "What's the performance like compared to {alternative}?" - "Tangent: the author's blog is a goldmine..." - "I wish people would stop posting Medium links." - "Nice writeup. One correction: ..." - "Does anyone else remember when {nostalgia}?" - Replies like: "Can you elaborate?", "Source?", "That's not been my experience at all.", "Exactly.", "This is underrated.", "GP here — yes, that's correct.", "Author here. Happy to answer questions." For nesting, generate 1-3 levels. Deterministic PRNG (mulberry32) seeded by story id so counts are stable. Let me also add the "More" link at bottom of front page. Also add collapse functionality on comments, and maybe upvote click toggles (visual only, increments score). Nice touch: clicking upvote arrow turns it orange/hides it and bumps the point count by 1. Keep simple. Also time display "x hours ago". Also on item page, HN shows "Guidelines | FAQ | ... " footer. Add footer with links (dead or internal). Let me structure the code: ```html Hacker News

Hacker News new | ...

Title (domain.com)

123 points by user 3 hours ago | hide | 45 comments

...nav...

footer

``` Since this runs in a sandboxed iframe possibly, hash changes should still work. Hash routing works in iframes fine. But note: if the iframe is sandboxed without allow-same-origin, location.hash manipulation still works I believe. To be extra safe, I could do routing purely in JS state with my own history stack and override back... but hash routing gives real back-button support and reflects "mimics clicking a HN thread." The user said "handle this internally rather than actually redirecting to another URL" — hash routing satisfies this (same document, no navigation). I'll use hash routing with a fallback: if hashchange isn't firing... it will fire. Let me just use hash routing. Hmm, one concern: some rendering environments strip or intercept hash changes. An alternative robust approach: intercept clicks, manage view state in JS, and use `history.replaceState`/pushState with hash. Actually simplest robust approach: use `location.hash = ...` in click handlers and listen to hashchange. That works in iframes. Let me also handle "pages": - `#/news` or empty -> front page - `#/newest` -> sorted by time - `#/ask`, `#/show`, `#/jobs`, `#/submit`, `#/login` - `#/item?id=N` For comments link: `#/item?id=N`. For jobs: render a few job postings (title-only rows like HN jobs page). For submit: a form with title/url/text; on submit, adds a story locally with 1 point and routes to newest. Fun. For login: stub form. Comment counts: compute total comments per story (recursive count) and display. Let me now write the actual content. I'll aim for ~30 front page stories. For each: id, title, url/domain, points, author, hoursAgo, and comments (hand-written for first few, generated for others). Hand-written threads — I'll do 4 detailed ones: Story 1: PostgreSQL 17 Released (id 1) Story 2: Show HN: spreadsheet in terminal (id 2) Story 3: "The unreasonable effectiveness of plain text" (id 3) Story 5: Ask HN: What are you working on? (id 5) — text post with many replies. Actually hand-writing 4 big threads is a lot of tokens but worth it for realism. Let me write them reasonably: ~12-18 top-level with some nesting for story 1 and 5; ~10-14 for 2 and 3. Let me draft. Story 1 comments (PostgreSQL 17): c1 (bdarnell, 4h): "The incremental backup support in pg_basebackup is the headline feature for anyone running large clusters. Combined with the new pg_combinebackup tool, point-in-time recovery on multi-TB instances just got dramatically cheaper. We've been paying for a third-party tool largely for this." c1.1 (jakewins, 4h): "How does this interact with WAL archiving? Do you still need a full WAL chain from the last full backup, or can PITR jump across incremental chains now?" c1.1.1 (bdarnell, 3h): "You still need WAL from the backup start point to your recovery target — incrementals just change what the base looks like. The WAL chain requirement is unchanged." c1.2 (mitsuhiko, 3h): "Seconded. We were about to pull the trigger on a commercial backup solution and this landed just in time." c2 (dang-ish? no) (homercles, 5h): "JSON_TABLE finally! For those who haven't been following: this is the SQL-standard way to shred JSON into relational rows. It replaces a lot of jsonb_to_recordset + lateral join boilerplate." c2.1 (petercooper, 4h): "The syntax is... verbose. But it's standard, so ORMs will presumably build on it." c3 (nrp, 5h): "Upgrade notes from 16 -> 17 for the lazy: we used pg_upgrade --link on a ~800GB database, total downtime was 11 minutes including a conservative ANALYZE. Zero issues in a week of production since." c3.1 (taylorbuley, 3h): "Watch out for the removed old_snapshot_threshold if you had it set — pg_upgrade will refuse to start if your config references removed GUCs. Learned that one the hard way in the rc." c4 (cryptonector, 5h): "Logical replication failover slots are quietly the most important feature here for anyone running HA pairs. Losing your replication slots on failover used to mean re-seeding subscribers." c4.1 (jfoutz, 2h): "This. Slots surviving failover removes a whole class of 3am pages." c5 (jashkenas, 4h): "Postgres remains the correct default answer to 'which database should we use?' Releases like this are why — steady, boring, meaningful improvements every single year." c6 (manigandham, 4h): "Still no native sharding though. Every year I check the release notes first for it. Citus works, but it's an extension with real limitations around DDL propagation and rebalancing." c6.1 (slaughteriv, 3h): "Honest question: how many people actually need sharding vs. how many just buy a bigger box? Vertical scaling goes absurdly far these days. A 128-core/2TB box covers a lot of workloads." c6.1.1 (manigandham, 2h): "Until you need to write from multiple regions, or your write throughput exceeds a single node's disks. It happens earlier than people think at consumer scale." c6.1.1.1 (slaughteriv, 1h): "Fair. Multi-region writes are the one case vertical scaling genuinely can't solve." c7 (derefr, 3h): "Does anyone know whether the new vacuum memory controls (vacuum_buffer_usage_limit) help with the classic 'autovacuum can't keep up with a high-churn queue table' problem?" c7.1 (anarazel, 3h): "It helps some, but the real fix for queue tables is partitioning + aggressive fillfactor tuning. Or don't use your database as a queue. (I say this as someone with three queue tables in production.)" c7.1.1 (derefr, 2h): "'Don't use your database as a queue' is the 'don't store files in the database' of this decade, and the answer is the same: it's fine, actually, up to a surprising scale." c8 (ksec, 2h): "The EXPLAIN MEMORY addition is going to save me so much guesswork." c9 (whalesalad, 2h): "Every Postgres release day I think about switching off MySQL at work, and every year the migration cost keeps us put. One of these days." c10 (pauldix, 1h): "Congrats to the whole team. The discipline of the annual release cycle with this level of quality is genuinely unmatched in open source infrastructure." That's 10 top-level with nesting; total ~18 comments. Good. Story 2: "Show HN: I built a spreadsheet that runs in your terminal" (author: tcellerier? make up "jcs"? let me use "tmshlvck"? I'll invent "pella" or author name "otoburb"...) Let me name the author "zitsare"? Keep plausible: "kaycebasques"? Simpler invented usernames: "mudassir", "tosh", "cpr", "sibarton"... I'll use plausible HN handles: "jmillikin", "sargun", "twobitshifter", "kepano", "michae2", "sltkr", "vardump", "acct1771"... I'll invent: author "tegiddig"? Let me just pick normal-looking handles: "l0b0", "qthedoc", "ansible", "tux3". Author of Show HN: "wardn"? I'll use "dhruvkar"? Simplest: author "jsmith17"? HN usernames are varied. Use "teapot01"? OK: author = "glitchcr". Fine. Comments for story 2: c1 (vparker25, 3h): "This is delightful. Genuine question: how do you handle recalculation? Do you build a dependency graph of cells or just re-evaluate everything on every change?" c1.1 (glitchcr — author, 3h): "Author here — dependency graph with topological sort, then dirty-marking. Re-evaluating everything was fine until about 10k cells, then typing lag got noticeable. The graph took it to effectively instant at 100k cells in my benchmarks." c1.1.1 (vparker25, 2h): "Nice. Did you consider a reactive/spreadsheet-as-streams model (like Excel's calc chain)? Curious what made you go topo-sort." c1.1.1.1 (glitchcr, 2h): "I started with a simple calc chain and hit subtle ordering bugs with cross-sheet references. Topo-sort per recalc batch was the boring correct answer." c2 (pfdietz, 3h): "Fun fact: VisiCalc, the original spreadsheet, fit in about 32KB and ran on machines with 48KB of RAM. It arguably sold more Apple IIs than any other single piece of software." c2.1 (rb808, 2h): "And 'sc' has been in Unix since the 80s and still ships in most distros. Worth checking out if you like this." c3 (kstrauser, 3h): "I know I'm supposed to be over the novelty, but a TUI spreadsheet that reads/writes .xlsx directly is genuinely useful to me. SSH'd into a server and need to sanity-check an export someone dropped there? This is exactly the tool." c4 (mrweasel, 2h): "Honest question, not trying to be dismissive: who is the audience? People who love terminals but also love spreadsheets feels like a small intersection." c4.1 (glitchcr, 2h): "Author: me, mostly! I built it for myself because I live in tmux and hated context-switching to LibreOffice for quick CSV checks. That others want it too has been a pleasant surprise." c4.2 (gnat, 1h): "The intersection of 'terminal people' and 'spreadsheet people' is called 'finance people who learned vim to seem hardcore.' It's bigger than you think." c5 (tokamak, 2h): "The vim keybindings sold me. Being able to yank a range and paste it as markdown into my notes is a workflow I didn't know I needed." c6 (astro1138, 1h): "Crash report: opening a 40MB xlsx with 60 sheets pegged one core for ~30s, then worked fine. Might want a progress bar. Otherwise solid." c6.1 (glitchcr, 1h): "Thanks — known issue, the xlsx parser loads eagerly. Lazy sheet loading is next on the list." c7 (photon317, 1h): "I will never understand TUIs. The GUI solved these problems decades ago." c7.1 (sevagh, 1h): "And yet here we are, still SSHing into things." c8 (dgrin91, 45m): "Any plans for collaborative editing? Even just 'two people can watch the same sheet over ssh/tmux' would be killer." c8.1 (glitchcr, 30m): "tmux attach already kind of gives you this! Real collab with CRDTs is a maybe-someday thing." Story 3: "The unreasonable effectiveness of plain text" (by "gutenberg2"? author "llimllib"? invent "cs241"?) Author: "bstroe"? Use "mikelevins"? I'll use "thunderbong"? Author: "j2kun". Sure. c1 (jerojero? no) (tsss... ) Let me write: c1 (recursivecaveat, 6h): "Every few years I rediscover this. My entire note system is now a folder of markdown files, grep, and a 20-line shell script that generates an index. It has outlasted Evernote, Notion, Roam, and Obsidian phases. The files don't care what editor I use next year." c1.1 (ctoth, 5h): "The key insight is that plain text is not a format, it's a family of formats with a common interface: line-oriented, human-diffable, greppable. Tooling compounds." c2 (sonicrocketman, 5h): "Counterpoint: plain text falls over the moment you need structure that isn't hierarchical. Try modeling a graph of cross-referenced meeting notes in flat files without inventing your own janky wiki syntax. You'll reinvent a database badly." c2.1 (recursivecaveat, 5h): "Sure — the article's actual claim is narrower: plain text for anything you'd otherwise lose to app lock-in. Graphs, attachments, and sync are real problems. But 'notes I can read in 30 years' is a feature no app has ever reliably given me." c2.2 (9dev, 4h): "I'd argue you don't need the graph. You think you do; what you need is search. Zettelkasten works on paper, after all." c2.2.1 (sonicrocketman, 3h): "Search finds what you know you have. Links surface what you forgot. Different things." c3 (davesailer? ) (zdw, 5h): "My job journal is a single text file, append-only, one line per entry, date-prefixed, since 2009. `grep -i` has answered more performance-review self-assessments than any HR tool." c4 (panzerboiler, 4h): "The companion superpower is version control. Plain text + git means your notes have history, branches for drafts, and free backup on every clone." c5 (kibwen, 3h): "Plain text ages well because the decoder is a human. That's the whole trick." c6 (marcusb? ) (jph00? ) (sosodev, 2h): "I agree with the thesis but the article glosses over attachments and images. Photos of whiteboards are half my notes. Ended up with markdown + an attachments folder, referenced by relative path. Works, but it's janky and mobile editing is painful." c7 (tpoacher, 2h): "org-mode users reading this thread like [smug face]" c7.1 (elif, 1h): "org-mode is the strongest argument both for and against plain text. For: it's just text. Against: it's just text only Emacs fully understands." Story 5: Ask HN: What are you working on? (self-post, author "whoishiring"? no — author "pg"? just "azinman2"? I'll use "dhotson"? Author: "mtlynch"? fine: "mindcrime"? Use author "brudgers"? Let's say author "cosmoblue".) Comments are people describing projects: c1 (pacificatlas? ) (throwaway2037? no) — write ~10: c1 (quasar36, 4h): "A Bluetooth-controlled compost tumbler. It tracks temperature, moisture, and rotation, and nags me on my phone when the carbon/nitrogen balance drifts. Completely unnecessary. Deeply satisfying. The ESP32 inside has survived three rainstorms so far." c1.1 (mikepurvis, 3h): "This is the kind of over-engineering I come here for. Are you publishing the sensor data anywhere? Backyard compost telemetry is a dataset I'd genuinely look at." c1.1.1 (quasar36, 3h): "Ha — currently it just logs to InfluxDB on my home server. If I ever clean up the dashboard I'll post a Show HN." c2 (swellJoe? no) (killingtime74, 4h): "Divorce papers. Filed last Tuesday. After that, a SaaS for scheduling construction crane lifts. The second one has a better chance of success." c2.1 (dang, 3h): "Sorry to hear it. Hope the crane business lifts you up. (Sorry.)" c2.2 (sbisker, 3h): "The crane scheduling market is shockingly real. A friend in construction says most lift coordination still happens over phone calls and a whiteboard." c3 (jamesward? no) (epgui, 3h): "A static site generator where the content lives in a single SQLite database instead of markdown files. Queries are the CMS. It started as a joke about 'what if the filesystem was the wrong abstraction' and now I unironically prefer it." c3.1 (simonw, 3h): "This is extremely my jam. sqlite as a build-time CMS is an underrated pattern — I've been doing something similar for my blog's link blog." c4 (mooreds, 2h): "Writing a book about passkeys for developers. The gap between the WebAuthn spec and what you actually need to ship is enormous. Every chapter ends with me discovering another edge case in platform authenticators." c4.1 (zxcvbn4038? ) (some_furry, 2h): "Please include a chapter on attestation and why you almost certainly shouldn't verify it. Every implementation guide gets this wrong." c5 (ninjagoo? ) (pstuart, 2h): "Teaching my 9-year-old to solder by building a terrible synthesizer. It currently makes one sound and the sound is 'angry bee.' She loves it." c5.1 (dang, 1h): "'Angry bee' is the correct first synthesizer sound." c6 (rob74? ) (blacksoil, 2h): "Migrating 15 years of family photos out of Google Photos into a self-hosted Immich instance. The Takeout export is 340GB and Google's metadata JSON sidecar situation is exactly as bad as everyone says." c7 (vbezhenar, 1h): "A ray tracer, badly, in Zig, on purpose. I understand maybe 60% of the math and 40% of Zig. Learning both by osmosis. 10/10, would recommend confusion as a study technique." c8 (Animats, 1h): "Getting my rust-but-actually-60-years-old pickup to pass smog. The carburetor is a physics argument I keep losing." That's a nice Ask HN thread. Other stories get generated comments. Let me build the generator with pools: Generic comment pool (adaptable, some with placeholders maybe none to keep simple): pool = [ "This is great work. The writeup alone is worth the read.", "I've been using this for a few months now and it's been rock solid.", "Honest question: how does this compare to the alternatives? The README doesn't really say.", "Congrats on shipping! The hardest part is always getting it out the door.", "Site's hugged to death. Archive link, anyone?", "I worked on something similar at a previous job. The hard part isn't the tech, it's {x}.", -- avoid placeholders, keep generic "This. A thousand times this.", "I don't get it. What problem does this solve that {n} doesn't? -- remove ... ] Let me write them fully generic: 1. "This is really well done. The attention to detail in the writeup alone sold me." 2. "Been running this in production for a few months. Zero issues so far." 3. "Honest question: how does this compare to existing solutions? The site doesn't have a comparison page." 4. "Congrats on shipping. Getting v1 out the door is always the hardest part." 5. "Site appears to be hugged to death. Mirror/archive anywhere?" 6. "I built something in this space a few years back. The tech was the easy part — distribution is what killed us." 7. "This. We've been saying this internally for a year." 8. "Bookmarked. This is exactly the rabbit hole I needed today." 9. "The author gave a great talk on this last year. Worth tracking down the recording." 10. "I'm surprised this works as well as it does. Tried it on a lark and it's now in my daily rotation." 11. "Note: this requires an account to try the demo, which is a shame. The product itself looks promising." 12. "Pricing seems steep for what's offered, but I suppose the target market isn't me." 13. "The documentation is genuinely excellent. More projects should be documented like this." 14. "Am I the only one who finds this kind of thing more concerning than exciting?" 15. "This thread is a goldmine. Thanks everyone." 16. "What's the business model? I don't see pricing anywhere." 17. "Open source alternative: [redacted]. We switched last year and haven't looked back." 18. "I remember when this was just a weekend project posted here. Amazing to see how far it's come." 19. "Small nit: the site breaks with JS disabled. Otherwise looks great." 20. "My team evaluated this last quarter. We went with something else, but this was a close second." Reply pool: 1. "Can you elaborate? Genuinely curious." 2. "Source? That contradicts what I've read elsewhere." 3. "That's not been my experience at all." 4. "Exactly this." 5. "Author here — thanks! This is on the roadmap." 6. "Author here. Good catch, fixing now." 7. "This is the correct take." 8. "I think you're underestimating how common this problem is." 9. "Seconded. Same experience here." 10. "Curious what you'd use instead?" 11. "Agreed, but good luck convincing management." 12. "This aged well." Deep reply pool: 1. "Fair point." 2. "Huh, TIL. Thanks." 3. "That's a good way to put it." 4. "Right — the devil's in the details." 5. "Makes sense. Appreciate the follow-up." Usernames pool: "tptacek", "patio11", "dang" (avoid dang as regular), use normal-ish: "jayfeather"? HN names: "btilly", "jgrahamc", "spicyusername"? Let me use pool: ["wongarsu","gnabgib","zamadatix","kragen","pjc50","Animats","msephton","throwaway987","bruce511","Joel_Mckay"?]. I'll pick: "wongarsu","zamadatix","kragen","pjc50","msephton","bruce511","layer8","water-data-dude","hn_throwaway_99","prmoustache","darthvader"? skip; "perihelions","sundarurfriend","dredmorbius","TedDoesTalk"? I'll assemble ~30 handles. Generator: for a story without hand comments, count = 8 + rng*14 (top-level), each with chance of replies. Recursively compute. Assign times descending-ish. Ensure comment count in subtext matches actual. Compute via recursion. Also front page "More" link — could paginate (show 30, more shows next 30) — I'll just have 30 stories and the More link scrolls/shows all or appends extra generated stories? Keep simple: generate 30 for page 1 and 30 more lower-quality ones (points decaying) for page 2. More link routes to #/news/2 or ?page=2 — let me support `#/news?p=2`. Hmm, HN uses /news?p=2. I'll mimic: `#/news?p=2`. Simpler: one list of 60 stories, page 1 shows 1-30, page 2 shows 31-60. Good. Story list — let me write 60 plausible titles with domains: 1. PostgreSQL 17 Released — postgresql.org 2. Show HN: I built a spreadsheet that runs in your terminal — github.com 3. The unreasonable effectiveness of plain text — j2kun.com 4. (2) "Show HN: RISC-V emulator in 1,000 lines of C" — github.com 5. Ask HN: What are you working on? (October 2024) — (no domain) 6. "Why I'm still using jQuery in 2024" — brainlid.org? use "tomdale.net"? invent "markv.dev" 7. "The Inside Story of How NASA Caught Up With Voyager 2" — scientificamerican.com? invent generic; fine to use real-ish domains. I'll use plausible: "quantamagazine.org" 8. "GrapheneOS: The private mobile OS" — grapheneos.org 9. "Ask HN: Who is hiring? (October 2024)" 10. "Fuzzing the Rust compiler with a 30-year-old technique" — blog.rust-lang.org? invent "tnichols.dev" 11. "EU fines Meta €840M over Marketplace practices" — reuters.com 12. "The lost art of log file analysis" — chrismaynard? invent "logfmt.dev" 13. "Show HN: Open-source alternative to DocuSign" — github.com 14. "A deep dive into the M4's memory subsystem" — anandtech.com? use "chipsandcheese.com" 15. "Why are there so many Founders? Notes on startup mythology" — paulgraham.com? pg essays; fine "paulgraham.com" 16. "SQLite is not a toy database" — antonz.org 17. "Google must open Android to rival app stores, judge rules" — theverge.com 18. "The man who invented the spreadsheet and never patented it" — npr.org? invent "historyofcomputing.net" 19. "Ask HN: Books that changed how you think about software?" 20. "Writing a chess engine in a weekend" — chessprogramming? invent "eightbyeight.dev" 21. "Waymo's driverless taxis are coming to Los Angeles freeways" — techcrunch.com 22. "The Era of the Personal Website Is Back" — wired.com? invent "microbyte.blog" 23. "Tcl is wildly underrated" — tcl.tk? invent "tcler.dev" 24. "Show HN: Turn your SQL into shareable dashboards" — querypage.io 25. "How I got my AI agent to stop apologizing" — simonwillison.net 26. "Bringing back the webring" — hotline? "webring.moe" 27. "Notes on running a single-server SaaS with 40k users" — runmemo? "oneprocess.dev" 28. "The hunt for the perfect monospace font" — fontreview? "typespecimens.io" 29. "Ask HN: How do you take notes?" 30. "Ubisoft cancels season passes as games-as-a-service falters" — arstechnica.com Page 2 (31-60): 31. "Understanding the Linux OOM killer by provoking it" — linuxjourney? "kernelnotes.dev" 32. "A visual guide to LLM quantization" — smcleod? "quantguide.ai" 33. "Show HN: API that turns any website into markdown" — mdify.dev 34. "The CDC's wastewater dashboard is a data viz masterclass" — cdc.gov 35. "My 20-year quest to beat Tetris (2011)" — longreads? "gaminghistory.org" 36. "Why Discord is switching from Go to Rust (again)" — discord.com? invented headline; fine "discord.engineering"? Maybe avoid fake-real claims about companies... it's a parody/demo; use invented headlines with generic domains to be safe. Let me adjust potentially-defamatory ones: EU fines Meta — that's real-ish news (happened Nov 2024 actually, €797.72M). Keep numbers vague: "EU fines Meta over Marketplace 'pay or consent' bundling". It's fine as a demo; but to be safe, use plausible but clearly sample content. I'll keep them light and generic. 36. "Why big rewrite projects fail" — refactorica? "legacycode.blog" 37. "The C23 standard is finalized: what's new" — open-std.org 38. "eBPF is eating the observability world" — ebpf.io 39. "Show HN: Self-hosted photo backup that actually works on iOS" — github.com 40. "Reverse-engineering the 1987 NeXTSTEP UI" — nextcomputers.org 41. "How Tailscale works" — tailscale.com 42. "A gentle introduction to CRDTs" — crdt.tech 43. "Ask HN: What did you automate that saved you the most time?" 44. "The economics of open source maintainership" — maintainer.fm 45. "Building a Game Boy emulator in Rust" — rustboy.dev 46. "DNS for people who think they know DNS" — dnsimple.blog? "dns.garden" 47. "The half-life of engineering knowledge is about 5 years" — blog.danlew.net? "bitsandpieces.dev" 48. "Show HN: I mapped every coffee shop in Lisbon with wifi speed tests" — lisbonwifi.map 49. "Running Doom on a $3 microcontroller" — hackaday.com 50. "What I learned reading 100 rejected RFCs" — rfcarchive.net 51. "Against database triggers" — dbdebunk? "relationalthoughts.dev" 52. "The resurgence of the monorepo" — monorepo.tools 53. "Ask HN: Freelancers, how do you find clients?" 54. "Web components are fine, actually" — componentparty.dev 55. "An oral history of the dial-up modem sound" — modemmuseum.org 56. "Show HN: Keyboard-driven window manager for macOS" — github.com 57. "The surprisingly deep lore of the Unicode standard" — unicode.org? "unicode.love" 58. "Lessons from 10 years of on-call rotations" — oncallbook.dev 59. "Why your unit tests are probably testing the wrong thing" — testdouble.com 60. "Show HN: Markdown-based slide decks with live code execution" — slidemd.dev Points: descending roughly with variance. Authors: random handles. Times: increasing. For Ask HN jobs post (#9) — that's a monthly thread; could hand-write a few job comments? Eh, generated comments for it would look weird ("This. We've been saying this"). Maybe exclude #9 from front page? HN's "Who is hiring" is always on front page though. Generated comments on it would be odd. Options: give it a few hand-written job comments. Let me hand-write 5 short job postings as comments. Or drop it from the list. I'll hand-write brief hiring comments: c1 (hiringteam): "Acme Robotics (acmerobotics.example) | Robotics Software Engineer | REMOTE (US) | Full-time — We're building warehouse robots that handle the messy 20% of SKUs..." c2 (founderjane): "Stealth climate startup | Founding Engineer | NYC | ONSITE — ..." c3 (cto_max): "Dataplane (YC W23) | Backend Engineer (Go) | REMOTE — ..." c4: "Note: please only post if you're personally hiring..." (like the reminder) — skip, keep 3-4. Also story 19, 29, 43, 53 are Ask HN — generated comments might be okay-ish? "This. We've been saying this internally" on "Ask HN: Books that changed..." would be weird. Let me improve: for Ask HN stories, use a separate reply pool of answer-style comments: Ask pool: - "SICP, unironically. It rewired something." - "For me it was 'The Pragmatic Programmer' — dated in places, but the mindset stuck." - "'Thinking in Systems' by Donella Meadows. Changed how I debug org problems, not just code." - "Honestly? The SQLite source code. Reading it taught me more than any book." - "'A Philosophy of Software Design'. Short, opinionated, and mostly right." - "The Mythical Man-Month. Written in 1975, still describes my last sprint." - "'Designing Data-Intensive Applications' — dense but worth it." - "'The Design of Everyday Things.' Software people should be forced to read the door chapter." - "'Code Complete', mostly for the chapters everyone skips." - "'Hackers' by Steven Levy — for the why, not the how." For "Ask HN: How do you take notes?" — could reuse... hmm. The generic generator doesn't know topic. Simplest: for any story whose title starts with "Ask HN", use the ask-pool. The notes answers (SICP etc.) would be wrong for the notes question. Acceptable imperfection? It'd look off. Let me instead hand-write short threads for each Ask HN (5-8 comments each). There are 4 Ask HN stories (5, 19, 29, 43, 53 = five). #5 hand-written big; for 19/29/43/53 write ~6-8 answers each with an occasional reply. That's doable. Ask HN: Books that changed how you think about software (#19): - "SICP, unironically. It rewired something about how I decompose problems." - reply: "Seconded. The first two chapters alone justify the hype." - "'A Philosophy of Software Design' by Ousterhout. Short, opinionated, mostly right. The 'define errors out of existence' chapter changed my API design forever." - "The Mythical Man-Month. Written in 1975. Describes my last sprint with eerie precision." - "'Thinking in Systems' by Donella Meadows — not a software book, but it changed how I debug organizations." - "'Designing Data-Intensive Applications'. Dense, but it's the closest thing our field has to a canonical reference." - "The SQLite source code isn't a book, but reading it taught me more about engineering rigor than any book has." - "'Code Complete' — specifically the chapters everyone skips about managing complexity." Ask HN: How do you take notes? (#29): - "A single append-only text file, date-prefixed lines, since 2015. grep is my search engine." - reply: "Same, but I split monthly. One file got to 4MB and my editor started complaining." - "Obsidian for long-term notes, paper notebook for meetings. The paper is a prop that stops me from checking email; Obsidian is where things actually live." - "Apple Notes. I've tried everything fancier and the friction always kills the habit. Capture speed beats organization." - "Org-mode. The learning curve is a cliff but the summit is nice." - reply: "The cliff has a cliff." - "I don't. I re-google things and it's fine. I spent more time maintaining note systems than I ever saved retrieving from them." - "Physical index cards, Zettelkasten-style, in an actual box. I know how it sounds. It works anyway." Ask HN: What did you automate that saved you the most time? (#43): - "My timesheet. A script watches git commits, calendar events, and Slack status, and drafts the week's entries. I just approve. Saves ~2 hours every Friday." - "Renaming and filing my photos and scans. One Hazel rule (and now a small script) replaced years of 'I'll organize it later.'" - "Dependency update triage. A bot opens the PR, runs the tests, and posts a risk summary. We went from a monthly dread-day to 10 minutes of review." - reply: "What do you use for the risk summary? Ours just dumps changelogs and it's noise." - "Onboarding. A single 'make dev' that goes from empty laptop to running stack in 20 minutes. Best ROI of anything I've built at work." - "My backups. Which is to say: I finally have backups." Ask HN: Freelancers, how do you find clients? (#53): - "Ninety percent repeat business and referrals. The boring answer: do good work, stay in touch, and ask happy clients if they know anyone else." - "Writing in public. Blog posts about my niche took 18 months to pay off, and now inbound leads are my only channel." - "Former coworkers. Every job change has eventually produced a client. Your network compounds." - reply: "This. And it takes years, which is why the advice is useless to beginners and perfect for everyone else." - "I niche hard: 'the person for Shopify performance' gets hired; 'full-stack developer' competes with everyone on Earth." - "Local meetups, of all things. Nobody else under 40 shows up, so I'm the only web person three business owners know." Good. Now the upvote interactivity: clicking the arrow increments score and hides arrow (like HN where you can't un-upvote via same control). Simple toggle: add class "voted", points+1. Collapse comments: click [–] to hide children and text, change to [+N]. Add comment box on item page (non-functional or appends locally? HN requires login; I'll render the textarea and button; clicking "add comment" shows alert "You have to be logged in to comment." or actually appends a comment locally by "you"? Fun to append. But then comment counts change; fine, recompute. Let me append locally with author "you (not really)"? Hmm, keep HN-faithful: show textarea; on submit, prepend comment by "pg"? Let me just make it work locally: adds comment with user "you". Actually simpler and HN-faithful: HN shows the comment form to logged-in users. I'll make it functional locally — author "you". Nice touch. Reply links under comments: on real HN, "reply" goes to a reply page. I could make reply links expand an inline textarea. That's a nice touch — implement inline reply form toggling, and submitting appends locally. Let me implement: clicking "reply" toggles a textarea under that comment; "add comment" button appends a child comment. This is all local state — need to re-render or append DOM. Since I re-render whole view on route, local additions should mutate the data structure then re-render. But re-render loses textarea state — that's fine since on submit we re-render anyway. Also "parent | context | next" links — can be no-ops or anchor links. I'll make "parent" scroll to parent via element id. Keep minimal: render them as links but only make collapse and reply functional. Or hide those to reduce clutter? HN shows them; keep visually, href="#" with no-op? Prevent default. I'll wire "parent" to scroll. Let me keep scope controlled: functional features: 1. Routing: front pages (p=1,2), item pages, ask/show/newest/jobs/submit/login pages. 2. Upvote (visual, +1). 3. Collapse/expand comments with counts. 4. Inline reply + top-level comment posting (local, as "you"). 5. Back/forward via hash. Data model: ```js const DB = { stories: [...] } ``` Each story: {id, title, domain, url (internal flag), points, user, hoursAgo, text? (for Ask HN/Show HN self text), comments: [comment]} Comment: {id, user, hoursAgo, text, children: []} Comment count fn: recursive. Time format: hours ago; if <1, "N minutes ago". Rendering front page: build table rows. Let me now write the CSS faithfully: ```css body { margin:0; background:#fff; } /* outer */ #hnmain { background:#f6f6ef; } td { font-family: Verdana, Geneva, sans-serif; font-size: 10pt; color: #828282; } a { color: #000; text-decoration: none; } a:hover { text-decoration: underline; } .title a { color: #000; } .titleline { font-size: 10pt; } .subtext { font-size: 7pt; color: #828282; } .subtext a { color: #828282; } .rank { color: #828282; } .comhead { font-size: 8pt; color: #828282; } .comment-text { font-family: Verdana; font-size: 9pt; color: #000; } .pagetop { font-size: 10pt; color:#222; } .pagetop a { color:#000; } .hnname a { font-weight:bold? } Actually HN: Hacker News color #222? The header links are black; white in visited? Header text color: #222222? The top bar text is black. Login on right. ``` Default HN: header links black; "Hacker News" bold. nav separated by " | ". Footer: orange line (2px #ff6600) then "Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact" and search box. Votelinks arrow centered. Structure the main table: ```html

footer links + search

``` "past" and "comments" pages: I said I'd implement news, newest, ask, show, jobs, submit, login. "past" -> just show same list sorted by points? "comments" -> list of recent comments across threads? That's doable: flatten all comments, render as list with "on: story title" links — nice touch, moderate effort. Let me implement "comments" page rendering recent comments flat. And "past" -> same as news (or sorted by time desc with older times). I'll make past show stories sorted by hoursAgo desc (oldest first) to feel different. Item page layout (HN): ``` [arrow] Title (domain) 123 points by user 3 hours ago | hide | 45 comments [textarea] [add comment] comments... ``` For Ask HN/self posts, the text appears under subtext. I'll give story 5 a text: "Same as last month: what are you working on? Side projects, startups, hobbies, all welcome." Comment HTML on HN: ```html ...children with indent

user 4 hours ago | parent | next [–]

text...

``` I'll use divs: indent = depth * 40px (HN uses 40px per indent). Each comment: flex row: votelinks (arrow), body. ```html

u 4h | parent | [–]

html text

...

``` Comment text may contain paragraphs — I'll store text with \n\n and convert to

like HN does (

between paragraphs). Also HN italics for *text*. Skip markdown; maybe support *italic* since HN does. Small regex replace `*([^*]+)*` -> $1. Careful with HTML injection — text is mine so fine, but user-submitted comments need escaping. I'll escape HTML first then apply italic + paragraph transforms. Comment text color: HN uses #000 for normal. Dead comments gray — skip. Now routing implementation: ```js function parseHash() { const h = location.hash.replace(/^#\/?/, ''); // e.g. "item?id=3" or "news?p=2" const [path, query] = h.split('?'); const params = new URLSearchParams(query || ''); return { path: path || 'news', params }; } function router() { const { path, params } = parseHash(); if (path === 'item') renderItem(+params.get('id')); else if (path === 'newest') renderList(sortByTime, 'New Links'); ... window.scrollTo(0,0); } window.addEventListener('hashchange', router); ``` Clicking a comments link: ``. Also clicking story title: route internally to item page (since external URLs are fake). I'll render title anchor with href="#/item?id=N" but show domain. Actually, for authenticity maybe titles of external stories could point to the "real" fake URL... they'd 404 / navigate away — bad. Internal it is. I'll note nothing; it's a demo. Wait — the user says "handle routing that mimics clicking a HN thread with many comments in it. It should handle this internally rather than actually redirecting to another URL." So the key requirement: clicking a thread's comments shows the thread internally. Hash routing satisfies. Good. Upvote handling: delegate clicks on .upv elements. For story rows: find story id, increment points, update score span, remove arrow. For comments: no score shown, just hide arrow / mark voted. HN doesn't show comment scores. Just hide arrow on click. Collapse: each comtr has data with children count. On click "[–]": hide .commtext, .reply, .children of that comtr; change text to "[+N]" where N = total descendants. On expand, restore. Implementation: ```js contentEl.addEventListener('click', e => { const t = e.target; if (t.closest('.collapse')) { toggleCollapse(t.closest('.comtr')); e.preventDefault(); } if (t.closest('.replylink')) { show inline form; e.preventDefault(); } if (t.classList.contains('upv') || t.closest('.upv')) {...} }); ``` Careful: links with href="#/" default prevented where needed. For posting comments: submit buttons call addComment(storyId, parentCommentId or null, text). Mutate DB, re-render item view. Update story's comment count. Persistence: could store in memory only. LocalStorage might be blocked in sandbox; wrap in try. Memory is fine. Now let me also implement the submit page: form with title, url, text. On submit: create new story with id = max+1, user "you", points 1, hoursAgo 0, comments [], then location.hash = '#/newest'. Nice. Login page: simple form "login" username/password + "create account" — buttons that show "Login is disabled in this demo." via inline message. Jobs page: a few job rows (title-only with time): - "Mux is hiring a Senior Video Infrastructure Engineer" ... use invented companies: "Y Combinator startups: ..." Real HN jobs are YC startup posts. I'll list: "Streamline (YC S21) is hiring backend engineers", etc. times. The "comments" page: flatten comments with story ref; sort by hoursAgo; show: "user 2 hours ago | parent | on: Story Title" then text. Limit 30. "show" page: filter titles starting "Show HN". "ask": filter "Ask HN". "newest": sort by hoursAgo asc. Now generate remaining stories' comments procedurally with seeded RNG. Let me write the generator: ```js function mulberry32(a){return function(){a|=0;a=a+0x6D2B79F5|0;let t=Math.imul(a^a>>>15,1|a);t=t+Math.imul(t^t>>>7,61|t)^t;return((t^t>>>14)>>>0)/4294967296}} const GEN_COMMENTS = [...pool as above]; const GEN_REPLIES = [...]; const GEN_DEEP = [...]; const USERS = ["wongarsu", ...]; function genComments(story) { const rng = mulberry32(story.id * 1000 + 7); const n = 6 + Math.floor(rng() * 12); // 6-17 top-level const usedUsers = new Set(); function pickUser(){ let u; do { u = USERS[Math.floor(rng()*USERS.length)] } while(false); return u; } function makeText(pool){ return pool[Math.floor(rng()*pool.length)]; } function makeComment(depth, baseTime) { const c = { id: nextCid++, user: pickUser(), hoursAgo: Math.max(0.1, baseTime - rng()*2), text: makeText(depth===0?GEN_COMMENTS:(depth===1?GEN_REPLIES:GEN_DEEP)), children: [] }; if (depth < 3) { const kids = rng() < (depth===0?0.55:(depth===1?0.4:0.15)) ? (1 + Math.floor(rng()*2)) : 0; for (let i=0;i comment hours: comments time <= story time; use story.hoursAgo as base: comment hours = story.hoursAgo - rng()*story.hoursAgo... times: comment posted after story, so hoursAgo smaller. base = story.hoursAgo. return out; } ``` Fix times: comment hoursAgo should be <= story hoursAgo (posted later). So commentHours = story.hoursAgo * rng() roughly, replies smaller. Let me compute: top-level: hours = story.hoursAgo * (0.2 + 0.75*rng()) — between 20% and 95% of story age. Replies: parent.hours * (0.3+0.6*rng()). Ensure min 0.05 (3 minutes). Time display: hoursAgo >= 1 -> "N hours ago"; <1 -> minutes. Dedupe users per thread slightly: allow reuse but fine. Now hand-written comment objects need ids too — I'll assign via a function that walks and assigns ids: `assignIds(story)` after building. Simpler: build all stories with comments lacking ids; then walk and assign unique ids (story.id * 10000 + counter). Also `text` for self posts: story.text (Ask HN ones + Show HN maybe). Show HN posts often have a blurb in comments; skip. Comment count: `countComments(story.comments)` recursive. Now points and times for 60 stories: I'll assign decreasing points with jitter, hours increasing. I'll hand-set in the array to look natural. Let me also add "flag"/"hide"/"past"/"web"/"favorite" links in subtext: HN shows "hide | past | favorite | N comments". I'll show "hide | N comments". Keep it light: `| hide | 45 comments`. Front page story subtext format: `123 points by user 3 hours ago | hide | 45 comments`. For Ask HN/self posts (no domain): no "(domain)" and title links internally anyway. Job stories on jobs page: just title + time. OK, header "past" page: I'll render list sorted oldest first (hoursAgo desc), labeled "past". Fine. Let me write everything now. I need to be careful with quoting in JS strings (apostrophes). Use double quotes or backticks for strings containing apostrophes. Avoid backticks conflicts with template literals — fine. Also the footnote: "Search:" input box at bottom (non-functional or filters front page? Could implement naive filter... skip, just render; maybe implement: pressing enter filters current story titles — small win; let me make it do a simple client-side search page showing matching stories. That's easy: on submit, renderSearch(query). I'll implement basic title match.) Alright, code size is significant but fine. Let me write it. Also: remember instructions: full HTML in same code block including scripts. Single file. No external libraries needed — vanilla JS. Fonts: Verdana (system). Good — no external deps at all, most robust. Let me carefully write the HTML/CSS/JS. CSS details: ```css * { box-sizing: border-box; } html,body { margin:0; padding:0; } body { font-family: Verdana, Geneva, sans-serif; font-size:10pt; color:#828282; background:#fff; } #hnmain { background:#f6f6ef; } a { color:#000; text-decoration:none; cursor:pointer; } a:visited { color:#828282; } /* HN visited links gray */ a:hover { text-decoration:underline; } .pagetop, .pagetop a { color:#000; } .pagetop a:visited { color:#000; } .hnname a { font-weight: bold; } ``` Wait, HN header: links are black, including visited? HN sets `a:visited { color:#828282 }` globally? On HN, header links stay black because... Actually on HN the "Hacker News" and nav links are black; visited story titles turn gray (#828282). The CSS on HN: `.title a:visited { color:#828282; }`? HN's news.css: `a:link { color:#000; } a:visited { color:#828282; }`... but header links? In HN, the header is inside `.pagetop` and visited pagetop links... I recall nav links stay black. HN CSS has `.pagetop a:visited { color: #000000; }`. I'll set: `a { color:#000 } a:visited{ color:#828282 } .pagetop a:visited { color:#000 } .comhead a, .subtext a { color:#828282 } .comhead a:visited, .subtext a:visited { color:#828282 }`. Title visited gray is a nice touch for the demo (visited item links will gray). Story title font-size 10pt; rank color #828282. .comment indentation: children margin-left: 40px? HN indents 40px per level via spacer image. The votelinks column adds width too. I'll do: .comtr .children { margin-left: 40px; } and each comment body row: arrow (width ~14px + padding) then text. HN comment text is 9pt (commtext class: font-size 9pt? Actually comment text uses default font 10pt? On HN, .commtext { font-family: Verdana; font-size: 9pt; }). Yes 9pt. .comhead: font-size: 8pt; color: #828282. .subtext: font-size: 7pt. Spacer rows 5px between stories. Story number rank right-aligned valign top. Let me build story rows as a table: ```html

1.		PostgreSQL 17 Released (postgresql.org)
		891 points by fanf2 5 hours ago \| hide \| 412 comments

``` Item page top: same story row without rank, then text (if any), then form, then comment tree, then bottom spacer. HN item page subtext: "891 points by fanf2 5 hours ago | hide | past | favorite | 412 comments". Comment form: ```html

``` Now the JS render functions: ```js const $content = document.getElementById('content'); function esc(s){ return s.replace(/[&<>"']/g, c => ({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c])); } function fmtText(s){ // paragraphs + italics return esc(s).split(/\n\n+/).map(p => '

'+ p.replace(/\*([^*\n]+)\*/g,'$1').replace(/\n/g,'
') +'

').join(''); } ``` Hmm for story.text HN uses toplevel text with class toptext. Same fmt. timeAgo: ```js function age(h){ if (h < 1/60) return 'just now'; const m = Math.round(h*60); if (m < 60) return m + (m===1?' minute ago':' minutes ago'); const hrs = Math.floor(h); if (hrs < 24) return hrs + (hrs===1?' hour ago':' hours ago'); const d = Math.floor(hrs/24); return d + (d===1?' day ago':' days ago'); } ``` countComments: ```js function countComments(cs){ let n=0; for(const c of cs){ n += 1 + countComments(c.children);} return n; } ``` storyRow(story, rank, opts): returns HTML. renderList(stories, opts): builds itemlist table + More link if applicable. renderItem(story): story row + subtext + text + form + comments. commentHTML(c, depth): recursive. Interactions via event delegation on document. Now careful: clicking upvote arrow anchor `` — no href so no navigation. Good. Use data attributes: data-story or data-comment. Upvote story: ```js const id = a.dataset.id; const s = findStory(id); if (a.classList.contains('voted')) return; a.classList.add('voted'); a.style.display='none'? HN: after upvote arrow disappears and "unvote" appears in subtext? Actually arrow disappears; score +1. s.points++; document.getElementById('score_'+id).textContent = s.points + ' points'; ``` But note item page re-renders only on route; direct DOM update fine. If user clicks upvote then navigates and comes back, re-render shows updated points and arrow again (unless we track voted set). Keep a votedStories Set; when rendering, if voted, skip arrow. Similarly comments voted Set. Collapse toggle: ```js function toggleCollapse(tr){ tr.classList.toggle('collapsed'); const link = tr.querySelector(':scope > .crow .collapse'); ... update text [–] or [+N] } ``` CSS: .comtr.collapsed .children, .comtr.collapsed .commtext, .comtr.collapsed .reply, .comtr.collapsed .replybox { display:none; } And collapsed count stored in data attr. The collapse link markup: ` | [–]`. On click compute descendant count = precomputed data-count. Reply: ```js if (target matches .replylink) { const box = comtr.querySelector(':scope .replybox'); box.classList.toggle('open'); box.querySelector('textarea').focus(); } ``` Reply box: ```html ``` Click .postreply: read textarea, addComment, re-render item. Top form: id="topcomment" with story id; submit handler. addComment: ```js function addComment(storyId, parentId, text){ const s = findStory(storyId); const c = { id: cidCounter++, user:'you', hoursAgo: 0.001, text, children: [] }; if (parentId) { const p = findComment(s.comments, parentId); p.children.push(c); } else s.comments.unshift(c); renderItem(s); } ``` After re-render, scroll to the new comment? Just scroll to top or to comment element. I'll scroll to element c.id. Now the "comments" (recent) page: ```js function flatten(){ const out=[]; for (const s of DB.stories){ walk s.comments, push {comment:c, story:s} } sort by hoursAgo asc; return out.slice(0,30); } ``` Render rows: `user age | parent | on: storyTitle` then text. Parent link -> item page. Jobs page: static list: ```js const JOBS = [ {title:"Terminal Industries (YC S23) is hiring senior Rust engineers", h:2}, ...] ``` Render as itemlist with no vote, subtext just age. Clicking could show... nothing; make them dead (href="#" preventDefault) or a stub item? I'll give each a tiny generated comment thread? No — jobs on HN have no comments; the job link goes to a job page with just text. I'll render job detail as text-only item: title + text. Simpler: jobs link to '#/item?id=jobN' with special job stories having text and no comments, subtext without comments link. Let me create job "stories" with flag isJob: true, no points/user, subtext = age only. renderItem handles isJob: show title + text + form? HN job pages have no comment form. I'll hide form/comments for jobs. Submit page: ```html ``` On submit -> add story. Login page: username/password inputs, "login" button; below "Forgot your password? ... create account". On submit, show red message "Login is disabled in this demo." Search: footer input; on enter -> render search results: stories whose title includes query (case-insensitive). Add route? Just render directly without changing hash; fine. Actually make it a route '#/search?q=...' for consistency? Direct render OK. I'll do direct render. Now assemble story data with hand-written threads. Let me write the JS data. I need to be careful: long file. Let's go. Also front page header row "More" link: `More`. Front page list: stories 1-30 (ids 1..30), page 2: 31-60, no More (or "More" disabled). Ranks 1-30, 31-60. Let me define points: decreasing from ~891 down to ~20. I'll write explicit values. Times: page1 from 2h to 14h, page2 14h-3d. hoursAgo numbers. Users for stories: pool. Let me write the stories array (id implicit by index+1): ```js const S = (title, domain, points, user, hoursAgo, extra={}) => ({ title, domain, points, user, hoursAgo, comments: null, ...extra }); ``` Comments: null means "generate on demand". After init, walk: for stories without explicit comments array, generate. Hand-written: ids 1,2,3,5,9,19,29,43,53. #9 Ask HN: Who is hiring? — hiring comments: c1 (jacobkg?): Let me write: - (recruiterkim? no—) "ridiculous_fish"? Use handles: "cobalt_io_hr"? Keep simple: - c1 (znpy): "Streamline Robotics (YC W24) | Senior Backend Engineer | REMOTE (US/EU) — We build orchestration software for warehouse fleets. Go, Postgres, a lot of boring reliability work. Email: hiring at streamlinerobotics.example" - c2 (mng2): "Ferrous Systems | Embedded Rust Consultant | REMOTE (EU) — ..." - c3 (skybrian): "Dataplane | Frontend Engineer (React) | NYC (hybrid) — ..." - c4 (tosh): "Reminder: please only post if you personally work at the company, and no recruiting agencies." — that's actually a real thread rule; fine as flavor. Actually the real thread has a format; good enough. Also story 5 text: "Monthly thread. What are you working on? Side projects, startups, research, hobbies — all welcome. Tell us what it is and what you've learned so far." Now write hand-written threads in JS object literal form. Watch apostrophes: use double-quoted strings, or template literals. I'll use double quotes consistently and avoid contractions issues (double quotes handle apostrophes fine). Let me write the comment tree structures: ```js function C(user, hoursAgo, text, children=[]) { return { user, hoursAgo, text, children }; } ``` Story 1 comments as drafted above. Let me finalize the exact trees. Now the generator pools. GEN_TOP (generic), GEN_REPLY, GEN_DEEP, USERS pool (~28 names): USERS = ["wongarsu","zamadatix","kragen","pjc50","msephton","bruce511","layer8","water_rider","hn_throwaway_99","perihelions","dredmorbius","sundae_friend","bjourne","qhilipp","titzer","kaptainscarlet","softboiled","ycombinatrix","fifteen1506","mrob","deathanatos","nine_k","jll29","underyx","tobr","gardenfelder","quickthrower2","bazizbaziz","mercurialmessage","detaro"]; GEN_TOP: as listed above (20 items). GEN_REPLY: as listed (12). GEN_DEEP: (5) plus a few more: "Fair enough.", "Good point — hadn't thought of it that way.", "Right, the devil's in the details.", "Makes sense, thanks for following up.", "Huh, TIL.", "That's a fair way to frame it." Generation rules: top-level count for generic stories: 5 + floor(rng*11) => 5-15. Reply probability decreasing with depth. Also cap total. Also to make "many comments" for story 1: my hand-written tree has ~18 total. Count: c1(3 incl nested 2) let me count story1: c1 + 2 children + 1 grandchild = 4; c2 + child = 2; c3 + child = 2; c4 + child = 2; c5 = 1; c6 + child + grandchild + great = 4; c7 + child + grandchild = 3; c8=1; c9=1; c10=1. Total = 4+2+2+2+1+4+3+1+1+1 = 21. Display count says e.g. "21 comments" — but front page often shows big numbers. It's fine — count matches actual, which is more important for believability. Maybe pad story 1 with a few generated comments too — combine hand-written + generated. I could append generated ones to hand-written for richness. Let me do: for hand-written stories, append a few generated generic comments (3-6). That boosts counts to ~25-30. Good — "many comments." Story 2 count: c1 chain: c1+c1.1+c1.1.1+c1.1.1.1 = 4; c2+child=2; c3=1; c4+2children=3; c5=1; c6+child=2; c7+child=2; c8+child=2; total 17. Plus 4 generated => 21. Story 3: c1+child=2; c2+2children+grandchild=4; c3=1;c4=1;c5=1;c6=1;c7+child=2 => 12; plus generated 5 => 17. Story 5: c1+child+grand=3; c2+2children=3; c3+child=2; c4+child=2; c5+child=2; c6=1; c7=1; c8=1 => 15 + generated... Ask HN generated comments would be off-topic; skip generated for Ask HN (19,29,43,53,9). Story 5 could take 2 generic ones like "This thread is a goldmine." — that one works for Ask threads. I'll add per-story optional "extra generated" only for non-Ask. Fine. Now, text for jobs (jobs page): JOBS = [ {title:"Streamline Robotics (YC W24) is hiring a senior backend engineer", hoursAgo:1.5, text:"Streamline Robotics builds orchestration software for warehouse robot fleets...\n\nWe're hiring a senior backend engineer (Go, Postgres, k8s). Remote within US/EU time zones.\n\nApply: jobs at streamline.example"}, {title:"Ferrous Systems is hiring embedded Rust consultants", hoursAgo:4, text:"..."}, {title:"Dataplane (YC S23) is hiring a frontend engineer", hoursAgo:7, text:"..."}, {title:"Meridian Health is hiring a staff platform engineer", hoursAgo:12, text:"..."}, {title:"Quill Analytics is hiring a founding designer", hoursAgo:26, text:"..."}, ] Give them ids like "job1".."job5". renderItem detects string id / isJob. Hmm — findStory by numeric id; jobs separate array. Now routing paths: - '' or 'news' -> front page p param - 'newest' -> sorted asc hoursAgo (limit 30? show all 60, fine, but keep 30 with More? just show 30) - 'past' -> sorted desc hoursAgo - 'ask' -> filter startsWith 'Ask HN' - 'show' -> filter startsWith 'Show HN' - 'jobs' -> jobs list - 'comments' -> recent comments - 'submit' -> form - 'login' -> login form - 'item' -> thread Also handle '#/item?id=' with numeric. Let me now also handle the scenario: clicking title for Ask HN etc. all internal '#/item?id=N'. One more detail: HN rank numbers only on list pages; item page no rank; "More" only on news pages. Header active nav styling: HN doesn't highlight; skip. Actually HN shows white text for current page? On HN the current page link in topnav is white. E.g., on /newest, "new" is white. Nice detail: highlight current: ``. I'll add: navLink(name, path) returns anchor with white color if current path matches. Let me implement. Also top-right: on item pages, HN shows "login" still. Fine. Footer links: Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact — hrefs "#" preventDefault or link to real ycombinator? Keep "#" with no-op (preventDefault to avoid hash change). Actually clicking would set hash '#'... href="#" would navigate to top/change hash to ''. My router treats '' as news — acceptable? Clicking Guidelines would go to front page — weird but harmless. Better: give them onclick preventDefault via delegation (class="dead"). I'll add delegation: `a.dead` -> preventDefault. Search form in footer: ``. Now write renderItem carefully: ```js function renderItem(id){ const story = findStory(id) || findJob(id); if (!story) { $content.innerHTML = '

No such item.

'; return; } const cc = countComments(story.comments||[]); let html = ''; html += '' + '' + ''; html += ''; html += ''; if (story.text) html += ''; html += '

'+ (story.isJob ? '' : upvoteHtml('story', story.id, story.voted)) +'	'+esc(story.title)+''+ (story.domain? ' ('+esc(story.domain)+')':'') +'
	'+ subtext(story, cc, true) +'
	'+ fmtText(story.text) +'

'; if (!story.isJob) { html += commentFormHtml(story.id); html += '...' -> I'll render comments as divs instead. } else { html += '

...

'? text already shown. } html += '

'+ story.comments.map(c=>commentHtml(story,c,0)).join('') +'

'; html += '

'; $content.innerHTML = html; } ``` Hmm, item page on HN: the story table has the votelinks cell but no rank cell, and there's some left padding: the item table on HN's item page has ` ``` With a space before nav links. "Hacker News" link -> '#/news'. CSS .navhere { color:#fff !important; } Logo: ```html ``` HN's y18 has white border effect; fine. Hmm the y18.gif is actually orange Y on white with 1px white border inside orange bar. Our rect white fill — good. Now item page subtext: include "past" and "favorite"? Keep "hide | past | favorite | N comments" for authenticity, all dead except comments. Front subtext: "N points by user age | hide | N comments". Also add "instapaper"/"save to pocket"? no. Edge: 'discuss' when 0 comments — all have comments. Now the search: ```js function renderSearch(q){ const res = DB.stories.filter(s=>s.title.toLowerCase().includes(q.toLowerCase())); ... render list; if none, "No results." Also keep search input value. } ``` Update footer input value after render? Footer is static; set input value programmatically. Also on search, set document.title = q + ' | Hacker News Search'? minor. Potential issue: form submit for search with empty q -> show news. Also — dead links: class="dead" with href="#" — clicking would set hash to '#'... we preventDefault in delegation. Ensure delegation checks .dead first. But href="#" + preventDefault => no hash change. Good. Even without delegation, hash '#' -> path '' -> news. Must preventDefault to avoid unwanted route. Delegation covers. Also `` etc. preventDefault. One more: the comment "parent" links in comhead navs — I only render toggle. HN shows "parent | context | next | on: title" for non-top-level... To reduce clutter I'll show: for all comments " [–]" toggle only. Keep navs minimal: HN actually shows: `user age | parent | context | next [–]`? Top-level comments show `| next [–]`... Hmm, top-level show: prev/next? Current HN comment navs: "prev | next" for top-level; replies get "root | parent | prev | next". That's modern HN. Simplify: just the collapse toggle. Fine. Reply box display none default: ```css .replybox { display:none; margin: 8px 0 4px; } .replybox.open { display:block; } .replybox textarea { font-family: monospace; font-size: 10pt; } ``` HN textarea font: monospace? The HN comment box uses monospace font (default textarea). Yes default is monospace in most browsers. OK. Now handlePostReply: after addComment re-render, the replybox disappears (whole re-render). Good. Also update comment count display — recomputed on render. Double-check delegation for dynamically added elements — using document-level listeners, fine. Init code: ```js // build DB, jobs window.addEventListener('hashchange', router); router(); ``` Wrap in DOMContentLoaded or place script at end of body. Script at end; elements exist. Let me also add subtle "voted" behavior: after upvoting story on list page, also insert "| unvote"? Skip. Also make sure `.upv` inside votelinks cell centers: cell width 14; arrow margin auto. Now — writing GEN pools concretely: GEN_TOP = [ "This is really well done. The attention to detail in the writeup alone sold me.", "Been running this in production for a few months now. Zero issues so far, which is more than I can say for the thing it replaced.", "Honest question: how does this compare to the existing options? The site doesn't seem to have a comparison page.", "Congrats on shipping. Getting v1 out the door is always the hardest part.", "Site appears to be hugged to death. Anyone have a mirror?", "I built something in this space a few years back. The tech was the easy part — distribution is what killed us.", "This. We've been saying the same thing internally for a year and change.", "Bookmarked. This is exactly the rabbit hole I needed today.", "The author gave a great talk on this last year. Worth tracking down the recording if you liked the post.", "I'm surprised how well this works. Tried it on a lark and it's now in my daily rotation.", "Small nit: the demo requires an account, which is a shame. The product itself looks promising.", "Pricing seems steep for what's on offer, but I suspect I'm not the target market.", "The documentation is genuinely excellent. More projects should be documented like this.", "Am I the only one who finds this kind of thing more concerning than exciting?", "What's the business model? I don't see pricing anywhere, which usually means I'm the product.", "We evaluated this last quarter and went with a competitor. This was a close second, and the gap has clearly narrowed.", "I remember when this was a weekend project posted in a Show HN. Amazing to see how far it's come.", "The article buries the lede — the interesting part is about three-quarters of the way down.", "Read the actual paper, not just the coverage. The results are more modest (and more interesting) than the headline suggests.", "Not surprising to anyone who's been following this space, but it's nice to see it written up clearly.", "Filed under: things that seem obvious in retrospect and yet nobody did.", "The footnotes are the best part of this article." ] GEN_REPLY = [ "Can you elaborate? Genuinely curious.", "Source? That contradicts what I've read elsewhere.", "That has not been my experience at all.", "Exactly this.", "Author here — thank you! This is on the roadmap.", "Author here. Good catch, fixing that now.", "I think you're underestimating how common this problem actually is.", "Seconded, with the same experience.", "Curious what you'd use instead?", "Agreed, but good luck convincing management.", "This is the correct take.", "It's more nuanced than that, but the broad strokes are right.", "Works until it doesn't. We hit the failure mode at around 10x our initial scale.", "+1, this matches what we saw as well." ] GEN_DEEP = [ "Fair point.", "Huh, TIL. Thanks.", "That's a good way to put it.", "Right — the devil's in the details.", "Makes sense. Appreciate the follow-up.", "Fair enough. I still think the tradeoff is worth it, but I see your point.", "That matches my experience too.", "Good point — I hadn't thought of it that way." ] USERS pool (28): ["wongarsu","zamadatix","kragen","pjc50","msephton","bruce511","layer8","water_rider","hn_throwaway_99","perihelions","dredmorbius","sundae_friend","bjourne","qhilipp","titzer","kaptainscarlet","softboiled","ycombinatrix","fifteen1506","mrob","deathanatos","nine_k","jll29","underyx","tobr","gardenfelder","quickthrower2","mercurialm","detaro","lmm","caffeinewriter"] Now writing story 3 (plain text) tree fully: C("recursivecaveat",6.4,"Every few years I rediscover this. My entire note system is now a folder of markdown files, grep, and a 20-line shell script that regenerates an index. It has outlasted my Evernote, Notion, Roam, and Obsidian phases. The files don't care what editor I use next year.",[ C("ctoth",5.6,"The key insight is that plain text isn't a format, it's a family of formats with a common interface: line-oriented, human-diffable, greppable. Tooling compounds in a way that proprietary formats never do.") ]), C("sonicrocketman",5.9,"Counterpoint: plain text falls over the moment you need structure that isn't hierarchical. Try modeling a graph of cross-referenced meeting notes in flat files and you'll end up inventing a janky wiki syntax, then a query language, then a bad database.",[ C("recursivecaveat",5.1,"Sure — but the article's claim is narrower: use plain text for anything you'd otherwise lose to app lock-in. Graphs and sync are real problems, but 'notes I can still read in 30 years' is a feature no app has ever reliably given me."), C("9dev",4.4,"I'd argue you don't need the graph. You think you do; what you actually need is search. Zettelkasten worked on paper, after all.",[ C("sonicrocketman",3.2,"Search finds what you know you have. Links surface what you forgot. Those are different things, and the second one is where the value is.") ]) ]), C("zdw",5.2,"My job journal is a single append-only text file, one date-prefixed line per entry, running since 2009. grep -i has answered more performance-review questions than any HR tool ever made."), C("panzerboiler",4.6,"The companion superpower is version control. Plain text plus git means your notes have history, branches for drafts, and a free backup on every clone."), C("kibwen",3.9,"Plain text ages well because the decoder is a human being. That's the whole trick."), C("sosodev",2.8,"I agree with the thesis but it always glosses over attachments. Photos of whiteboards are half my notes. I ended up with markdown plus an attachments folder referenced by relative path. It works, but it's janky, and mobile editing is painful."), C("tpoacher",2.1,"org-mode users reading this thread: [knowing nod]",[ C("elif",1.3,"org-mode is the strongest argument both for and against plain text. For: it's just text. Against: it's text that only Emacs fully understands.") ]) Story 5 tree (What are you working on): C("quasar36",3.8,"A Bluetooth-controlled compost tumbler. It tracks temperature, moisture, and rotation, and nags me on my phone when the carbon/nitrogen balance drifts. Completely unnecessary. Deeply satisfying. The ESP32 inside has survived three rainstorms so far.",[ C("mikepurvis",3.1,"This is the kind of over-engineering I come here for. Are you publishing the telemetry anywhere? Backyard compost data is a dataset I'd genuinely look at.",[ C("quasar36",2.6,"Ha — right now it just logs to an InfluxDB instance on my home server. If I ever clean up the dashboard I'll do a Show HN.") ]) ]), C("killingtime74",3.6,"Divorce papers. Filed last Tuesday. After that, a SaaS for scheduling construction crane lifts. The second one has a better chance of success.",[ C("dang",3.0,"Sorry to hear it. I hope the crane business lifts you up. (Sorry.)"), C("sbisker",2.9,"The crane scheduling market is shockingly real. A friend in construction says most lift coordination still happens over phone calls and a whiteboard in the site office.") ]), C("epgui",3.2,"A static site generator where the content lives in a single SQLite database instead of markdown files. Queries are the CMS. It started as a joke about 'what if the filesystem was the wrong abstraction' and now I unironically prefer it.",[ C("simonw",2.8,"This is extremely my jam. SQLite as a build-time CMS is a genuinely underrated pattern — everything in one file you can scp around, back up, and query.") ]), C("mooreds",2.4,"Writing a book about passkeys for developers. The gap between the WebAuthn spec and what you actually need to ship is enormous. Every chapter ends with me discovering another edge case in a platform authenticator.",[ C("some_furry",1.9,"Please include a chapter on attestation and why you almost certainly shouldn't verify it. Every implementation guide gets this wrong.") ]), C("pstuart",2.1,"Teaching my 9-year-old to solder by building a terrible synthesizer. It currently makes one sound and that sound is 'angry bee'. She loves it.",[ C("dang",1.2,"'Angry bee' is the correct first synthesizer sound.") ]), C("blacksoil",1.8,"Migrating 15 years of family photos out of Google Photos into a self-hosted Immich instance. The Takeout export is 340GB and the metadata sidecar situation is exactly as bad as everyone says."), C("vbezhenar",1.1,"A ray tracer, badly, in Zig, on purpose. I understand maybe 60% of the math and 40% of Zig. Learning both by osmosis. Ten out of ten, would recommend confusion as a study technique."), C("Animats",0.7,"Getting my 60-year-old pickup to pass smog. The carburetor is a physics argument I keep losing.") Story 2 tree: as drafted above. Let me write code for it. Story 19 (books): C("jgrahamc",8.6,"SICP, unironically. It rewired something about how I decompose problems.",[ C("gdilla",7.9,"Seconded. The first two chapters alone justify the hype.") ]), C("cartazio",8.1,"A Philosophy of Software Design by Ousterhout. Short, opinionated, mostly right. The chapter on defining errors out of existence permanently changed how I design APIs."), C("pmdulaney",7.2,"The Mythical Man-Month. Written in 1975. Describes my last sprint with eerie precision."), C("beebmam",6.3,"Thinking in Systems by Donella Meadows. Not a software book. It changed how I debug organizations, which turned out to matter more."), C("kqr",5.8,"Designing Data-Intensive Applications. Dense, but the closest thing our field has to a canonical reference."), C("miah",4.9,"Not a book: the SQLite source code. Reading it taught me more about engineering rigor than any book has. Every line justifies itself."), C("ggm",3.7,"Code Complete — specifically the chapters everyone skips, the ones about managing complexity as the primary technical imperative.") Story 29 (notes): C("jfengel",20.5,"A single append-only text file, date-prefixed lines, since 2015. grep is my search engine.",[ C("Wistar",19.1,"Same, but I split monthly. My single file hit 4MB and my editor started complaining.") ]), C("eru",18.7,"Obsidian for long-term notes, a paper notebook for meetings. The paper is mostly a prop that keeps me off email; Obsidian is where things actually live."), C("prawn",17.3,"Apple Notes. I've tried everything fancier and the friction always kills the habit. Capture speed beats organization, every time."), C("gentaro",15.9,"Org-mode. The learning curve is a cliff, but the view from the top is nice.",[ C("kkfx",14.2,"The cliff has a cliff.") ]), C("zeroth32",12.6,"I don't take notes. I re-google things, and it's fine. I spent more time maintaining note systems than I ever saved by retrieving from them."), C("yomritoyj",10.4,"Physical index cards, Zettelkasten-style, in an actual wooden box. I know how it sounds. It works anyway.") Story 43 (automation): C("spiffytech",47.5,"My timesheet. A script watches my git commits, calendar, and Slack status, then drafts the week's entries. I just approve. Saves about two hours every Friday."), C("bullen",45.1,"Renaming and filing photos and scans. One folder-watching rule replaced a decade of 'I'll organize it later.'"), C("jskajakzkjx",41.3,"Dependency update triage. A bot opens the PR, runs the tests, and posts a risk summary. We went from a monthly dread-day to ten minutes of review.",[ C("orliesaurus",38.2,"What do you use for the risk summary? Ours just dumps changelogs and it's mostly noise.") ]), C("ycombiredd",33.8,"Onboarding. A single 'make dev' that takes a new laptop from empty to a running stack in 20 minutes. Best ROI of anything I've ever built at work."), C("baudaux",28.4,"My backups. Which is to say: I finally have backups.") Story 53 (freelance clients): C("petercooper",64.5,"Ninety percent repeat business and referrals. The boring answer: do good work, stay in touch, and ask happy clients if they know anyone else who needs help."), C("swah",60.2,"Writing in public. Blog posts about my narrow niche took 18 months to pay off; now inbound leads are my only channel."), C("dfxm",55.7,"Former coworkers. Every job change has eventually produced a client. Your network compounds.",[ C("muzani",50.1,"This. And it takes years, which is why the advice is useless to beginners and perfect for everyone else.") ]), C("ksec",46.3,"Niche hard. 'The person for Shopify performance' gets hired. 'Full-stack developer' competes with everyone on Earth."), C("grahamj",40.9,"Local business meetups, of all things. I'm the only web person three business owners know.") Now story 2 tree in code: C("vparker25",2.8,"This is delightful. Genuine question: how do you handle recalculation? Do you build a dependency graph of cells, or re-evaluate everything on every change?",[ C("glitchcr",2.5,"Author here — dependency graph with a topological sort, plus dirty-marking. Re-evaluating everything was fine until about 10k cells, then typing lag got noticeable. The graph made recalc effectively instant at 100k cells in my benchmarks.",[ C("vparker25",2.0,"Nice. Did you consider a reactive model, like Excel's calc chain? Curious what pushed you toward topo-sort.",[ C("glitchcr",1.6,"I started with a simple calc chain and hit subtle ordering bugs with cross-sheet references. Topo-sort per recalc batch was the boring, correct answer.") ]) ]) ]), C("pfdietz",2.6,"Fun fact: VisiCalc, the original spreadsheet, fit in about 32KB and ran on machines with 48KB of RAM. It arguably sold more Apple IIs than any other single piece of software.",[ C("rb808",2.1,"And sc, the terminal spreadsheet, has been in Unix since the 80s and still ships in most distros. Worth a look if you like this.") ]), C("kstrauser",2.4,"I know I'm supposed to be over the novelty, but a TUI spreadsheet that reads and writes .xlsx directly is genuinely useful to me. SSHed into a server and need to sanity-check an export someone dropped there? This is exactly the tool."), C("mrweasel",1.9,"Honest question, not trying to be dismissive: who is the audience? 'Loves terminals' and 'loves spreadsheets' feels like a small intersection.",[ C("glitchcr",1.5,"Author: me, mostly. I live in tmux and hated context-switching to LibreOffice for quick CSV checks. That other people want it too has been a pleasant surprise."), C("gnat",1.1,"The intersection of terminal people and spreadsheet people is called 'finance people who learned vim'. It's bigger than you think.") ]), C("tokamak",1.7,"The vim keybindings sold me. Yanking a range and pasting it as a markdown table into my notes is a workflow I didn't know I needed."), C("astro1138",1.2,"Crash report: opening a 40MB xlsx with 60 sheets pegged a core for ~30s, then worked fine. Might want a progress bar. Otherwise solid.",[ C("glitchcr",0.8,"Thanks — known issue, the parser loads all sheets eagerly. Lazy loading is next on the list.") ]), C("photon317",0.9,"I will never understand TUIs. The GUI solved these problems decades ago.",[ C("sevagh",0.5,"And yet here we are, still SSHing into things.") ]), C("dgrin91",0.6,"Any plans for collaborative editing? Even 'two people watch the same sheet over tmux' would be killer.",[ C("glitchcr",0.3,"tmux attach already kind of gives you that! Real collaboration with CRDTs is a maybe-someday thing.") ]) Story 1 tree — as drafted; let me finalize text. Also add "past"/"favorite" dead links on item subtext. Let me now also double check item page subtext: for job, only age. Also: comment head: HN shows `user` then `age` then navs. I'll include toggle only. Now writing the whole file. Also include a max width for very deep nesting — fine. One more consideration: `content` cell padding: HN main table rows have some padding. Add style: #content { padding: 0 0 8px 0; } and the itemlist table width 100%. Let me also add `` spacing after header (HN has 10px gap row). Footer search: keep value. Time to write the final code. I'll be careful with JS syntax. Large but straightforward. Structure: ```html Hacker News

` structure with two left columns — actually on item pages there IS a spacer column: the table has the same 3-column structure with an empty rank column? Looking at HN item page: the title starts slightly right with the arrow in a column; there's an indent `

`? The item page top table: `

` then `

`. And subtext row: `

`? Hmm actually item pages: the table has two columns: votelinks and title; subtext row has colspan... Let me just do 2 columns: arrow | title; subtext in second column (first cell empty). And a small left margin via padding on the container (HN item pages have the comment form indented under the story). Actually HN item page: there's no rank column; comments align under story. Good: 2 cols. But wait — HN item page subtext shows under title (second column), correct. Comment tree on HN item page is a table with class "comment-tree" containing rows; each comment row has: ind td (spacer width=indent*40), votelinks td, default td. I'll emulate with divs; indent via children container margin-left 40px. But the first-level comments have zero indent and align with story. HN comment votelinks column ~14px wide; comhead includes user/age/[–]. One nuance: HN's comment arrow sits in a narrow column and text column has max width. Comment text max-width: HN constrains via table width 100% inside an 85% table — text wraps naturally. Add `max-width: 700px`? HN comments wrap at container width; with nesting, gets narrow. To keep readable, I'll not cap; nesting margin shrinks width naturally. HN actually caps comment text width? No, it fills. OK. Also `.commtext p { margin: 8px 0; }` with first p margin-top ~10px (HN has a
after comhead? There's spacing). I'll style: .commtext { margin-top:2px; } .commtext p:first-child { margin-top: 6px; } Actually HN markup: after comhead div there's `
` then `

`. The comhead has margin-bottom... I'll do .commtext { margin-top: 6px; }. reply link: HN shows `

` — font-size ~8.5px underlined. Style: .reply { font-size: 7pt; } .reply a { text-decoration: underline; color:#000? } HN reply link is black underlined. Comment form on item page has left padding equal to? It's placed under the story, aligned with title column. I'll wrap form in table or div with margin-left: 18px (arrow col width 14 + padding). Simple: div style="margin-left:18px". Wait, HN item page comment form: `

` (there might be two score spans? front page one; item page one). Use class + data attr: ``. On vote, update all matching in DOM. Comment upvote: just hide arrow (no visible score). Now collapse implementation details: commentHtml: ```js function commentHtml(story, c, depth){ const total = 1 + countComments(c.children) - 1... define desc = countAll(c.children); const voted = votedComments.has(c.id); return '

'+esc(c.user)+' '+age(c.hoursAgo)+' | [–]

'+ '

'+ fmtText(c.text) +'

'+ '

'+ c.children.map(k=>commentHtml(story,k,depth+1)).join('') +'

'+ '

'; } ``` CSS: .comtr { margin-top: 12px; } .crow { display:flex; } .cvote { width:14px; flex:none; } .cbody { flex:1; min-width:0; } .children { margin-left: 40px; } Hmm top-level .comtr inside .comment-tree; HN spaces comments ~ with the reply line. margin-top 12px OK. Collapsed CSS: ```css .comtr.collapsed > .crow .commtext, .comtr.collapsed > .crow .reply, .comtr.collapsed > .crow .replybox, .comtr.collapsed > .children { display:none; } ``` Toggle handler: ```js function onToggle(e){ const tr = e.target.closest('.comtr'); const collapsed = tr.classList.toggle('collapsed'); e.target.textContent = collapsed ? '[+'+tr.dataset.desc+']' : '[–]'; e.preventDefault(); } ``` desc = number of hidden comments = total descendants (not counting self). Set data-desc accordingly: `countAll(c.children)`. Reply handler: find `.replybox` within `:scope > .crow > .cbody`, toggle display, focus textarea. postreply: read sibling textarea value; if empty ignore; addComment; re-render; scroll to new comment id. Top-level form submit similar. Escape: user text escaped by fmtText (esc first). Good. Now the "past"/"front" etc. lists reuse renderList(stories, {page, more, showRanks}). subtextHtml(story, opts): ```js function subtextHtml(s){ if (s.isJob) return ''+age(s.hoursAgo)+''; const cc = countComments(s.comments); return ''+s.points+' points by '+esc(s.user)+' '+age(s.hoursAgo)+' | hide | '+ (cc===0?'discuss': cc+' comments') +''; } ``` Note: user link on HN goes to user page; route to item page is wrong-ish but harmless; maybe make hnuser a dead link. I'll make user links class "dead" (no-op). Better. Also "by" hidden for jobs. renderList: ```js function renderList(stories, {startRank=1, more=null}={}){ let html = ''; stories.forEach((s,i)=>{ html += ''+ ''+ ''+ ''; html += ''; html += ''; }); if (more) html += ''; html += '

'+(startRank+i)+'.	'+ (s.isJob?'':(votedStories.has(s.id)?'':' ')) +'	'+esc(s.title)+''+ (s.domain? ' ('+esc(s.domain)+')':'') +'
		'+ subtextHtml(s) +'
		More

'; $content.innerHTML = html; } ``` Wait: domain link on HN goes to /from?site=domain — a list of stories from that site. Could implement! `from?site=postgresql.org` filters by domain. Easy win: route 'from' with site param. Add. Router: ```js function router(){ const h = location.hash.replace(/^#\/?/, ''); const qIdx = h.indexOf('?'); const path = (qIdx>=0? h.slice(0,qIdx): h) || 'news'; const params = new URLSearchParams(qIdx>=0? h.slice(qIdx+1): ''); switch(path){ case 'news': renderNews(+(params.get('p')||1)); break; case 'newest': renderList(byTime(DB.stories).slice(0,30)); break; case 'front': renderList(...)? skip case 'past': renderList([...DB.stories].sort((a,b)=>b.hoursAgo-a.hoursAgo).slice(0,30)); break; case 'ask': renderList(DB.stories.filter(s=>s.title.startsWith('Ask HN'))); break; case 'show': renderList(DB.stories.filter(s=>s.title.startsWith('Show HN'))); break; case 'jobs': renderJobs(); break; case 'comments': renderCommentsPage(); break; case 'submit': renderSubmit(); break; case 'login': renderLogin(); break; case 'item': renderItem(params.get('id')); break; case 'from': renderFrom(params.get('site')); break; default: renderNews(1); } setActiveNav(path); window.scrollTo(0,0); } ``` setActiveNav: re-render header nav with white current link. I'll just re-render nav innerHTML each route. Simpler: nav built by function buildNav(activePath). Map path->nav key: news->'news'? HN top: "new | past | comments | ask | show | jobs | submit". 'news' isn't in nav (logo link). Active highlight: newest->new, ask->ask etc. Now numbers: let me write out the 60 stories with metadata. Points descending-ish but with some shuffles. I'll write the array explicitly. Also decide which have hand threads: ids: 1,2,3,5,9,19,29,43,53. Story times: ids 1..30 hoursAgo: 5,3,7,2,4,6,8,10,12,3,5,9,11,13,4,6,7,8,9,10,12,14,15,16,17,18,20,21,22,23 — "newest" sorted by hours asc would shuffle nicely. Page 2: hoursAgo 26..70. Points: 891,542,487,465,431,402,388,371,355,342,318,297,286,274,261,250,238,229,215,204,196,188,181,172,164,157,150,143,136,129 then page2: 121,115,109,104,98,93,88,84,80,76,72,68,64,61,57,54,51,48,45,42,40,37,35,33,31,29,27,25,23,21. Users: assign from pool. Let me write final story entries. I'll use a compact helper. Also ensure Ask HN: Who is hiring? has no domain and a text? On HN it has text with posting rules. Add text: "Please state the job location and include the keywords REMOTE, INTERNS and/or VISA when the corresponding sort of candidate is welcome.\n\nOnly post if you personally are part of the hiring company — no recruiting firms or job boards." OK. Also note: counts for these threads small (3-6) — fine. Now the generated content for other stories: titles like "EU fines Meta..." will get generic comments like "This is really well done..." which fits okay-ish. Some mismatches ("Congrats on shipping" for a news article) — acceptable parody-level. Maybe diversify pools so some are news-appropriate: add news-flavored lines: "Not surprising given the reporting last month.", "The article buries the lede — the interesting bit is three paragraphs in.", "Paywalled for me.", "Discussion from last time this came up is worth a read.", "The actual paper/report is much more nuanced than the headline." Mix them in GEN_TOP. Let me also make `age()` handle fractional hours. Edge: story 5 hoursAgo 4 etc. Also: initial page load: call router() once on DOMContentLoaded; if no hash, set to '#/news'? Keep '' -> news. Also clicking logo -> '#/news'. Now — build header HTML statically in the HTML with a span for nav that JS re-renders for active states. Simplest: JS renders entire header nav into #topnav and #loginlink static. Let me write the final code. Also include meta viewport for mobile. Potential pitfall: `location.hash` in sandboxed iframe — hash changes work. hashchange event fires. OK. Also `URLSearchParams` fine. Let me be careful that IDs for comments are unique across stories for element ids (c). I'll assign global unique ids at init: walk all stories' comments, c.id = ++cid. Generated comments also get ids. And jobs have no comments. Assign story ids: explicit 1..60 via index. Let me write the generator: ```js let cid = 0; function assignIds(comments){ for (const c of comments){ c.id = ++cid; assignIds(c.children);} } ``` After building DB: for each story: if (!story.comments) story.comments = genFor(story); else if (canAddGenerated(story)) story.comments = story.comments.concat(genFor(story, 3+rng...)); assignIds. canAddGenerated: not Ask HN, not Who is hiring. genFor(story, maxN): uses mulberry32(story.id*7919+13). Top-level comment time: between 5% and 90% of story.hoursAgo; ensure at least 0.05h (3 min). For stories with hoursAgo < 1, times become minutes — fine. Reply time: parent.hoursAgo * (0.4 + 0.5*rng()). Text pools — write them. Also I want the "comments" page (recent comments) — flatten with story, sort by hoursAgo, take 30: ```js function renderCommentsPage(){ const rows = []; for (const s of DB.stories){ (function walk(cs, parent){ for (const c of cs){ rows.push({s, c}); walk(c.children, c);} })(s.comments, null); } rows.sort((a,b)=> a.c.hoursAgo - b.c.hoursAgo); const top = rows.slice(0, 25); let html = ''; for each: '' } ``` Sort: recent = smallest hoursAgo first. But hoursAgo values overlap a lot; fine. Alright — the submit handler: ```js document.addEventListener('submit', ...) ``` Use delegation: forms with ids. Form submit: e.preventDefault; read fields; create story {id: ++storyCounter, title, domain: url? derive, points:1, user:'you', hoursAgo:0.02, comments:[]}; unshift into DB.stories; location.hash='#/newest'. Derive domain from url via try{ new URL(url).hostname.replace(/^www\./,'') }catch{}. Login form: prevent default; show message. Search form: preventDefault; renderSearch(q): filter stories title includes q case-insensitive; renderList with no ranks? Ranks fine. Global click delegation: ```js document.addEventListener('click', function(e){ const a = e.target.closest('a'); if (a){ if (a.classList.contains('dead')){ e.preventDefault(); return; } if (a.classList.contains('upv')){ handleUpvote(a); e.preventDefault(); return; } if (a.classList.contains('toggle')){ handleToggle(a); e.preventDefault(); return; } if (a.classList.contains('replylink')){ handleReplyLink(a); e.preventDefault(); return; } } const b = e.target.closest('button'); if (b && b.classList.contains('postreply')){ handlePostReply(b); } }); ``` handleUpvote(a): if a.dataset.sid (story) -> story = find; if votedStories has, return; votedStories.add; story.points++; update spans: document.querySelectorAll('.score[data-story="id"]').forEach(el=> el.textContent = points+' points'); a.remove(). For comments (data.cid): votedComments.add(cid); a.remove(). I'll use data-sid/data-cid on upvote anchors. Note: after re-render, voted arrows omitted (render checks sets). Comment form HTML: ```js function commentFormHtml(sid){ return '

'+ ''+ '

'+ '

'; } ``` Submit delegation: ```js document.addEventListener('submit', function(e){ const f = e.target; if (f.classList.contains('commentform')){ e.preventDefault(); const text = f.elements.text.value.trim(); if(!text) return; addComment(+f.dataset.sid, null, text); } else if (f.id==='submitform'){...} else if (f.id==='loginform'){...} else if (f.id==='searchform'){...} }); ``` addComment(sid, parentId, text): ```js const s = findStory(sid); const c = { id: ++cid, user:'you', hoursAgo: 0.02, text, children: [] }; if (parentId){ const p = findComment(s.comments, parentId); if(!p) return; p.children.push(c);} else s.comments.unshift(c); renderItem(sid); // scroll to c const el = document.getElementById('c'+c.id); if (el) el.scrollIntoView({block:'center'}); ``` Wait renderItem re-renders and my router scrolls top only on hashchange; direct renderItem call doesn't scroll — good; then scrollIntoView works. handlePostReply(b): textarea = b.parentElement.querySelector('textarea')... replybox structure: `

`. text = textarea.value.trim(); if !text return; addComment(sid, cid, text). Scroll after: inside addComment. Also need findComment recursive. Now fmtText: escape, then italic, then paragraphs. HN italic regex uses *...*. Also maybe support links? skip. Paragraph handling: split on \n\n, wrap each in

, single \n ->
? HN treats single newline as... HN requires blank line for paragraph; single newlines are... shown as line breaks? HN actually ignores single newlines (they're in HTML source but collapse). I'll convert single \n to space to be HN-faithful? Meh — convert to
is friendlier. Hmm, my hand-written comments mostly single paragraphs. Jobs text uses \n\n. Keep \n -> space? That would mangle my intended line breaks in some comments... I don't use single \n in comment texts except maybe none. I'll convert \n\n to paragraphs and single \n to
. CSS for visited story titles: `a:visited { color:#828282 }` affects all; .comhead a and .subtext a already #828282 anyway. Title visited gray = good. But careful: `a:visited` on hash routes — after clicking a story title (#/item?id=1), it becomes visited and grays. On HN, same behavior (visited article links gray). Comments link graying is also HN-like. OK. However .pagetop a:visited override keeps header black. Also .morelink visited? fine. Also `.sitestr` color #828282, font-size 8pt? HN sitebit comhead: font-size: 8pt; color #828282 with the parens. Let me nail CSS values: ```css body{font-family:Verdana,Geneva,sans-serif;font-size:10pt;color:#828282;margin:0} #hnmain{background:#f6f6ef} a{color:#000;text-decoration:none} a:hover{text-decoration:underline} a:visited{color:#828282} .pagetop{font-size:10pt;color:#222;line-height:12pt} .pagetop a{color:#000} .pagetop a:visited{color:#000} .hnname a{font-weight:bold} .topnav a.navhere{color:#fff} td{font-family:Verdana,Geneva,sans-serif;font-size:10pt;color:#828282} .title{font-size:10pt} .rank{color:#828282} .votelinks{vertical-align:top} .subtext{font-size:7pt;color:#828282} .subtext a{color:#828282} .subtext a:visited{color:#828282} .sitebit{font-size:8pt;color:#828282} .sitestr{color:#828282} .age{color:#828282} .hnuser{color:#3c963c?} ``` Wait — hnuser on HN: links colored #828282 in subtext; on item pages comment authors... In comhead, hnuser color is #828282? Actually HN comment author names are bold-ish? Let me recall: comment comhead: username link color #828282? Looking at HN: comment headers show username in a slightly darker gray/green? On HN the commenter name is colored #828282 (gray) — no wait. In the current HN CSS: `.comhead .hnuser { color: #3c963c; }`? Hmm. HN usernames in comment headers are GREEN? No... Let me think. HN comment header: "user 3 hours ago | parent | context..." The username appears in a greenish? No — I believe usernames are #828282 gray like the rest of comhead, EXCEPT the OP's username in comments is orange? Yes! On HN, comments by the story submitter show the username in the theme color (orange-ish, class "showdead"?). Hmm, actually: HN marks the OP with class on hnuser making it orange (#ff6600-ish?). I recall OP's username is highlighted (it's actually a different color, class="hnuser" with parent "athing" ... there's `.comhead .hnuser { font-weight: bold; }`? Let me just go with: .comhead { color:#828282; font-size:8pt } .comhead a { color:#828282; font-weight:bold? } Looking at actual HN: in comment threads, usernames are bold gray? Hmm, I'm fairly sure usernames in comment headers are NOT bold; they're regular gray #828282, and the OP's name appears in the "showdead"... I remember OP indicator: username colored orange for submitter. I'll implement: comment author equal to story.user gets class "submitter" colored #ff6600 (bold?). HN: `.submitter { }`? There is `a.hnuser` colored #828282 normally; the OP is styled... I'm fairly confident HN highlights OP in orange in comment threads. Let me add that — nice detail: `.hnuser.op { color:#ff6600; }`. I'll make hnuser gray default; OP orange. Front page "by " gray #828282 — matches subtext anyway. .comhead { font-family: Verdana; font-size: 8pt; color: #828282; } .commtext { font-family: Verdana, Geneva, sans-serif; font-size: 9pt; color: #000; } .commtext p { margin: 0; padding: 0; } + spacing: HN puts ~10px between paragraphs: .commtext p { margin: 10px 0 0 0; } first-child margin-top: 8px. .reply { font-size: 7pt; margin-top: 4px; } .reply a { color:#000; text-decoration: underline; } input/textarea styling: HN uses default browser styles; font-family monospace for textarea? HN textarea uses monospace? The add comment textarea uses default (monospace? no, default textarea font is monospace in some browsers). Leave default. Buttons: `input[type=submit], button { font-family: Verdana; font-size: 10pt? }` HN buttons look default. Keep default but set font-family: Verdana? HN sets `input { font-family: monospace? }` no. Keep simple: `input[type=submit], button { font-family: Verdana, Geneva, sans-serif; font-size: 10pt; }`. Footer: ```html

``` Footer link color: #828282? HN footer links are #828282? They're dark? HN footer: links gray #828282 I think (class yclinks a). Actually footer links look black on HN... Checking memory: bottom of HN — "Guidelines | FAQ | ..." appear in default link black? They look gray. `.yclinks a { color: #828282? }` Hmm. HN news.css: `.yclinks { font-family:Verdana; font-size: 8pt; }` links inherit default #000 with visited gray. I'll make them #828282-ish? I'll leave default black with 8pt — close enough either way. Actually HN footers do look gray... I'll set color:#828282 for footer links and search label. The search label "Search:" in 8pt. Login page HTML (mimic HN login): ```html Login

'+user+' '+age+' | parent | on: '+title+'

'+fmtText+'

username:
password:

Forgot your password?

Create account ``` On submit: msg "Login is disabled in this demo." Submit page as above. Now, biggest chunk: writing the data. Let me write it out. Also derive "sitestr": strip www. For story domain null (Ask HN) -> no sitebit; subtext without domain. For title links of self posts HN links to item page — same as ours. One more page: 'user' profile when clicking usernames? Make dead links (class dead). Fine. Also "hide" dead. Let me make sure the router handles empty hash on first load: if (!location.hash) history.replaceState? Not needed; router treats '' as news. Potential issue: clicking a link to '#/item?id=5' when already at '#/item?id=5' doesn't fire hashchange — fine (same content). But: after posting comment we call renderItem directly; URL unchanged — fine. Another nicety: document.title updates per route: "Hacker News", story title for items. Add. Now write all code. Also ensure the page is within and 85% width like HN. On mobile, 85% ok. Also add a tiny banner? No — keep faithful clone. Maybe include an unobtrusive note? The user asked to copy HN; a clone is fine. I'll keep it pure. Let me count generated comment threads' totals for display — computed at runtime. Now write the hand-written trees fully. I must keep apostrophes inside double-quoted strings — fine. Let me write story array: ```js const STORIES = [ {id:1, title:"PostgreSQL 17 Released", url:"https://www.postgresql.org/about/news/", points:891, user:"fanf2", hoursAgo:5, comments:[ ... ]}, {id:2, title:"Show HN: I built a spreadsheet that runs in your terminal", url:"https://github.com/glitchcr/termcalc", points:542, user:"glitchcr", hoursAgo:3, comments:[...]}, {id:3, title:"The unreasonable effectiveness of plain text", url:"https://j2kun.com/plain-text", points:487, user:"j2kun", hoursAgo:7, comments:[...]}, {id:4, title:"Show HN: RISC-V emulator in 1,000 lines of C", url:"https://github.com/", points:465, user:"krajzeg", hoursAgo:2}, {id:5, title:"Ask HN: What are you working on? (October 2024)", points:431, user:"cosmoblue", hoursAgo:4, text:"...", comments:[...]}, {id:6, title:"Why I'm still using jQuery in 2024", url:"https://markv.dev/jquery-2024", points:402, user:"markv", hoursAgo:6}, {id:7, title:"How NASA re-established contact with Voyager 2", url:"https://quantamagazine.org/voyager", points:388, user:"seud********", ...}, ... ] ``` I'll fill 60. Domains invented but plausible. Let me enumerate all 60 with user/hours: 1 PostgreSQL 17 Released — postgresql.org — 891 — fanf2 — 5 2 Show HN: I built a spreadsheet that runs in your terminal — github.com — 542 — glitchcr — 3 3 The unreasonable effectiveness of plain text — j2kun.com — 487 — j2kun — 7 4 Show HN: RISC-V emulator in 1,000 lines of C — github.com — 465 — krajzeg — 2 5 Ask HN: What are you working on? (October 2024) — null — 431 — cosmoblue — 4 — text 6 Why I'm still using jQuery in 2024 — markv.dev — 402 — markvoort — 6 7 How NASA re-established contact with Voyager 2 — quantamagazine.org — 388 — dnetesn — 8 8 GrapheneOS usage guide — grapheneos.org — 371 — wtfomglol — 10 9 Ask HN: Who is hiring? (October 2024) — null — 355 — whoishiring — 12 — text, hiring comments 10 Fuzzing the Rust compiler with a 30-year-old technique — tnichols.dev — 342 — tnichols — 3 11 EU moves to fine Meta over Marketplace bundling — reuters.com — 318 — belter — 5 12 The lost art of log file analysis — logfmt.dev — 297 — serhack — 9 13 Show HN: Open-source alternative to DocuSign — github.com — 286 — peerplex — 11 14 A deep dive into the M4 memory subsystem — chipsandcheese.com — 274 — zdw — 13 15 Notes on startup mythology — paulgraham.com — 261 — pg — 4 16 SQLite is not a toy database — antonz.org — 250 — ingve — 6 17 Judge rules Google must open Android to rival app stores — theverge.com — 238 — coloneltcb — 7 18 The man who invented the spreadsheet never patented it — historyofcomputing.net — 229 — benbreen — 8 19 Ask HN: Books that changed how you think about software? — null — 215 — rbanffy — 9 20 Writing a chess engine in a weekend — eightbyeight.dev — 204 — sevagh — 10 21 Driverless taxis approved for LA freeways — techcrunch.com — 196 — carlton — 12 22 The era of the personal website is back — microbyte.blog — 188 — cpach — 14 23 Tcl is wildly underrated — tcler.dev — 181 — dbremner — 15 24 Show HN: Turn SQL into shareable dashboards — querypage.io — 172 — aquma — 16 25 How I got my AI agent to stop apologizing — simonwillison.net — 164 — simonw — 17 26 Bringing back the webring — webring.moe — 157 — hotdog — 18 27 Running a single-server SaaS with 40k users — oneprocess.dev — 150 — pcthrowaway — 20 28 The hunt for the perfect monospace font — typespecimens.io — 143 — gandalf — 21 29 Ask HN: How do you take notes? — null — 136 — stefanpie — 22 30 Loot boxes under fire again as EU drafts new rules — arstechnica.com — 129 — Tomte — 23 Page 2 (31-60): 31 Understanding the Linux OOM killer by provoking it — kernelnotes.dev — 121 — chourobin — 26 32 A visual guide to LLM quantization — quantguide.ai — 115 — rdryan — 28 33 Show HN: API that turns any website into Markdown — mdify.dev — 109 — mdify — 30 34 The wastewater dashboard that changed epidemiology — statnews.com — 104 — pseudolus — 32 35 My 20-year quest to beat Tetris (2011) — gaminghistory.org — 98 — todsacerdoti — 34 36 Why big rewrite projects fail — legacycode.blog — 93 — mooreds — 36 37 C23 is finalized: what's new — open-std.org — 88 — uecker — 38 38 eBPF is eating the observability world — ebpf.io — 84 — tiffany — 40 39 Show HN: Self-hosted photo backup that works on iOS — github.com — 80 — photofloss — 42 40 Reverse-engineering the 1987 NeXTSTEP UI — nextcomputers.org — 76 — classichasclass — 44 41 How NAT traversal works — tailscale.com — 72 — crawshaw — 46 42 A gentle introduction to CRDTs — crdt.tech — 68 — zeebo — 48 43 Ask HN: What did you automate that saved you the most time? — null — 64 — jayatvin — 50 44 The economics of open-source maintainership — maintainer.fm — 61 — carnage — 52 45 Building a Game Boy emulator in Rust — rustboy.dev — 57 — kokada — 54 46 DNS for people who think they know DNS — dns.garden — 54 — fanf2 — 56 47 The half-life of engineering knowledge is about five years — bitsandpieces.dev — 51 — swatcoder — 58 48 Show HN: I mapped every coffee shop in Lisbon with Wi-Fi speed tests — lisbonwifi.map — 48 — lisboeta — 60 49 Running Doom on a $3 microcontroller — hackaday.com — 45 — zastrow — 62 50 What I learned reading 100 rejected RFCs — rfcarchive.net — 42 — mallorn — 64 51 Against database triggers — relationalthoughts.dev — 40 — dventimi — 65 52 The resurgence of the monorepo — monorepo.tools — 37 — nxio — 66 53 Ask HN: Freelancers, how do you find clients? — null — 35 — devon — 67 54 Web components are fine, actually — componentparty.dev — 33 — probablywrong — 68 55 An oral history of the dial-up modem sound — modemmuseum.org — 31 — rdl — 69 56 Show HN: Keyboard-driven window manager for macOS — github.com — 29 — k9 Unit? use "kasper" — 70 57 The surprisingly deep lore of the Unicode standard — unicode.love — 27 — lifthrasiir — 71 58 Lessons from 10 years of on-call rotations — oncallbook.dev — 25 — eburns — 72 59 Your unit tests are probably testing the wrong thing — testdouble.com — 23 — searls — 73 60 Show HN: Markdown slide decks with live code execution — slidemd.dev — 21 — slidemd — 74 Good. hoursAgo values: page1 2..23, page2 26..74. Now note story 15 "Notes on startup mythology — paulgraham.com — pg" fine. Duplicate user fanf2 (1 and 46) fine. Write helper: ```js const S=(id,title,domain,points,user,hoursAgo,rest)=>Object.assign({id,title,domain,points,user,hoursAgo,comments:null},rest||{}); ``` Hand threads: assign via rest.comments. Let me write the big hand-written blocks now in code. Story 1 tree (using C helper): ```js C("bdarnell",4.6,"The incremental backup support in pg_basebackup is the headline feature for anyone running large clusters. Combined with the new pg_combinebackup tool, point-in-time recovery on multi-TB instances just got dramatically cheaper. We had been paying for a third-party tool largely for this.",[ C("jakewins",4.1,"How does this interact with WAL archiving? Do you still need a full WAL chain from the last full backup, or can PITR jump across incremental chains now?",[ C("bdarnell",3.5,"You still need WAL from the backup start point to your recovery target — the incrementals just change what the base backup looks like. The WAL chain requirement is unchanged.")]), C("mitsuhiko",3.1,"Seconded. We were about to sign a contract for a commercial backup product and this landed just in time to cancel it.") ]), C("homercles",4.9,"JSON_TABLE, finally. For those who haven't been following: this is the SQL-standard way to shred JSON documents into relational rows, and it replaces a lot of jsonb_to_recordset + lateral join boilerplate.",[ C("petercooper",4.2,"The syntax is... verbose. But it's standard, which means ORMs and reporting tools can build on it without betting on a Postgres-only extension.") ]), C("nrp",4.8,"Upgrade notes from 16 to 17 for the lazy: we used pg_upgrade --link on a ~800GB database. Total downtime was 11 minutes, including a conservative ANALYZE. Zero issues in a week of production since.",[ C("taylorbuley",3.3,"Watch out for removed settings like old_snapshot_threshold: pg_upgrade will refuse to start if your config references GUCs that no longer exist. Learned that one the hard way during the RC.") ]), C("cryptonector",4.4,"Logical replication failover slots are quietly the most important feature here for anyone running HA pairs. Losing your replication slots on failover used to mean re-seeding subscribers, which for big datasets meant hours.",[ C("jfoutz",2.2,"This. Slots surviving failover removes an entire class of 3am pages.") ]), C("jashkenas",4.0,"Postgres remains the correct default answer to \u201Cwhich database should we use?\u201D. Releases like this are why: steady, boring, meaningful improvements, every single year."), ... ``` Using unicode escapes for quotes or just plain apostrophes. I'll use straight quotes. Continue as drafted. Fine. Story 2 tree as drafted (author glitchcr). Story 3 tree as drafted. Story 5 tree as drafted (8 comments). Story 9 hiring (4 comments, no replies): C("znpy",11,"Streamline Robotics (YC W24) | Senior Backend Engineer | REMOTE (US/EU) | Full-time\n\nWe build orchestration software for warehouse robot fleets. Go, Postgres, a lot of boring reliability work. Small team, real customers, no crypto, no AI hype.\n\nApply: hiring at streamline-robotics.example") Note \n\n handling: fmtText converts to paragraphs. Good. C("mng2",9,"Ferrous Systems | Embedded Rust Consultant | REMOTE (EU) — We help companies adopt Rust in safety-critical embedded systems. You should like reading datasheets and arguing about provenance. Email: jobs at ferrous.example") C("skybrian",7,"Dataplane (YC S23) | Frontend Engineer (React/TypeScript) | NYC, hybrid — Building the UI for a query engine that analysts actually enjoy using. Strong opinions about loading spinners welcome.") C("tootie",6,"Reminder from the thread rules: only post if you personally work at the hiring company. No recruiting firms, no job boards, and please include location and REMOTE/ONSITE.") Story 19, 29, 43, 53 trees as drafted. Now generator pools. Compose ~22 top-level comments (mix of product/news flavor), 14 replies, 8 deep replies. Also make generator skip users equal to story.user? Fine either way; skip to avoid OP talking to self? OP replying is normal on HN; allow. Also ensure generated top-level text not repeated within a thread: sample without replacement: shuffle pool copy per story, take n. Replies: pick from reply pool randomly with replacement ok (but could repeat; low count so ok — use without replacement too per level? keep simple: with replacement, small chance of dup; acceptable but let me do without replacement for top-level at least. For replies, pool size 14, replies per thread maybe 8 — without replacement feasible. Deep pool 8; deep replies per thread ~2-4. OK do all without replacement per thread: create function draw(pool) using a per-thread shuffled copy and pointer. ```js function makeDrawer(pool, rng){ const p = pool.slice(); for (let i=p.length-1;i>0;i--){ const j=Math.floor(rng()*(i+1)); const t=p[i];p[i]=p[j];p[j]=t; } let idx=0; return ()=> p[idx++ % p.length]; } ``` genThread(story): ```js function genThread(story, minTop, maxTop){ const rng = mulberry32(story.id*7919+13); const drawTop = makeDrawer(GEN_TOP, rng), drawRe = makeDrawer(GEN_REPLY, rng), drawDeep = makeDrawer(GEN_DEEP, rng); const n = minTop + Math.floor(rng()*(maxTop-minTop+1)); const out = []; for (let i=0;i{ if (s.comments == null) s.comments = genThread(s, 6, 14); else if (!/^Ask HN/.test(s.title)) s.comments = s.comments.concat(genThread(s, 3, 6)); assignIds(s.comments); }); ``` Hmm — hand-written comments don't have ids; assignIds handles all. Job detail items: ```js const JOBS = [ {id:"job1", isJob:true, title:"Streamline Robotics (YC W24) is hiring a senior backend engineer", hoursAgo:1.5, text:"Streamline Robotics builds orchestration software for warehouse robot fleets. Our customers run thousands of autonomous forklifts and we keep them busy, safe, and out of each other's way.\n\nWe're hiring a senior backend engineer (Go, Postgres, Kubernetes) to own our fleet-scheduling service. Remote within US/EU time zones. Compensation: $170k-$210k + equity.\n\nTo apply, email jobs at streamline-robotics.example with a short note about something you've built."}, ... 5 total ]; ``` findItem(id): story or job. renderItem for job: title + age subtext + text, no vote/form/comments. Jobs page: renderList with jobs (no ranks? HN jobs page has no rank numbers; also no vote). I'll pass option showRank:false; rank cell empty but present (HN jobs page has empty first col? HN jobs list has no number, but keeps the indent. I'll render rank cell empty). Also jobs page bottom: "These are jobs at startups that were funded by Y Combinator..." text. Add small blurb. Now "More" on news page1 -> '#/news?p=2'. Page 2 no More. OK, write renderNews(p): ```js function renderNews(p){ const per = 30; const slice = DB.stories.slice((p-1)*per, p*per); renderList(slice, { startRank:(p-1)*per+1, more: p===1 ? '#/news?p=2' : null }); document.title = 'Hacker News'; } ``` DB.stories order is front-page order; newest sort copies. New submit unshifts to DB.stories — would appear on front page top too; acceptable ("newest" route shows it first). Active nav highlight: buildNav(active): ```js const NAV = [["new","newest"],["past","past"],["comments","comments"],["ask","ask"],["show","show"],["jobs","jobs"],["submit","submit"]]; function buildNav(active){ return NAV.map(([label,path]) => ''+label+'').join(' | '); } ``` Called in router: document.getElementById('topnavlinks').innerHTML = buildNav(path). Header markup: ```html

Hacker News

logo

Hacker News

footer

``` Now the JS. Let me write it mentally in order: 1. helpers: esc, age, fmtText, mulberry32, pick, makeDrawer 2. pools: USERS, GEN_TOP, GEN_REPLY, GEN_DEEP 3. C helper, hand data: STORIES (60), JOBS 4. genThread, assignIds, init DB 5. state: votedStories, votedComments, cid counter 6. findStory, findComment, countAll 7. renderers: buildNav, storyRowHtml, subtextHtml, renderList, renderNews, renderItem, commentHtml, renderCommentsPage, renderJobs, renderSubmit, renderLogin, renderFrom, renderSearch 8. router 9. event handlers (click delegation, submit delegation) 10. init router() countAll(c) counts descendants of a comment: countComments(c.children). Let me write subtext with "unvote" hidden span — skip. Comment tree container: `

`. HN caps width of comments? no. Important: In commentHtml, include OP highlighting: `const isOp = c.user === story.user` — class "hnuser op". Story 2 has glitchcr replies — will show orange. For "you" comments — could highlight too; leave. Also for comments page, hnuser plain. Age formatting of hoursAgo: also handle days. Also on item page, the story title link — HN links to article; ours -> '#/item?id=' (self). Fine. Also add "Guidelines" dead links in footer; add class dead. Now potential bug sources: - Template literal usage with nested quotes — careful. - The `age()` for hoursAgo like 0.02 -> Math.round(1.2)=1 minute -> "1 minute ago". For 0.05h -> 3 minutes. - Story 2 comment hoursAgo 0.3 -> 18 min. Sorting for 'newest': `DB.stories.slice().sort((a,b)=>a.hoursAgo-b.hoursAgo).slice(0,30)`. 'from' page: `DB.stories.filter(s=>s.domain===site)`; header "from?site=..." — render list; title shows site. Also document.title per route. One more nicety: HN's "comments" nav page is called "comments" — done. Let me also handle 'item' with missing id -> render news. Now, the writing of 60 story objects compactly: ```js const STORIES = [ {id:1,title:"PostgreSQL 17 Released",domain:"postgresql.org",points:891,user:"fanf2",hoursAgo:5,comments:[...]}, ... ] ``` I'll define C() before STORIES. For generated ones: comments omitted (null). Also note: story.user for #9 "whoishiring" with text. Time values for page2 are up to 74 hours => age() prints "3 days ago" (74/24=3.08 -> floor(74)=74 hrs >=24 -> days = floor(74/24)=3). Good. Wait — my age(): hrs = Math.floor(h); if hrs<24 return "N hours ago"; days = Math.floor(hrs/24). For 23 -> "23 hours ago". 26 -> "1 day ago". Good. Points for user-submitted new stories: 1 point; comments 0 -> subtext "discuss". Edge: fmtText italic regex on text containing asterisks — fine. Also collapse data-desc: descendants count = countAll of children. Let me also make the toggle show "[–]" initially. One more HN detail: top-level comment rows have class "athing comtr" and each has id. Fine with divs. CSS .children { margin-left: 40px; } — for top-level, .comment-tree has no left margin. Let me also add `.comtr { margin-bottom: 4px; }` Hmm spacing: HN separates comments by reply line spacing; I'll add margin-top: 14px for top-level comtrs: `.comment-tree > .comtr { margin-top: 14px; }` nested margin-top: 10px. Also first comment spacing from form: form followed by
. Also `.toptext p { margin: 6px 0; }`. Comment form textarea width: cols=60; on small screens add max-width:100%. OK, also handle reply on comments inside collapsed thread — irrelevant. Let me also ensure clicking "parent" link on comments page goes to item — done via href '#/item?id=' (top of thread; fine). I think I'm ready. Also add a favicon via data URI? HN favicon is y18. Skip or add link rel=icon with SVG data URI — nice touch: `` — keep simple. Also: the instruction says the response renders in an iframe; include full HTML in one code block. Do not mention iframe. Provide brief intro + code. Length: this will be long (~1000+ lines). That's fine. Let me now write out the entire code carefully, checking syntax as I go. Key renderers code: ```js function upvoteHtml(kind, id){ return '

'; } ``` Use data-s for story, data-c for comment. storyRowHtml(s, rank, isItem): ```js function storyRowHtml(s, rank){ const voted = votedStories.has(s.id); const arrow = s.isJob ? '' : (voted ? '' : upvoteHtml('s', s.id)); const rankCell = rank == null ? '' : ''+rank+'.'; const title = ''+esc(s.title)+''; const sitebit = s.domain ? ' ('+esc(s.domain)+')' : ''; return { rankCell, arrow, title: title + sitebit }; } ``` Maybe simpler to inline in renderList and renderItem separately. renderList(items, opts): ```js function renderList(items, opts){ opts = opts || {}; let html = ''; items.forEach(function(s, i){ const rank = opts.noRank ? '' : (opts.startRank||1)+i + '.'; html += '' + '' + '' + ''; html += ''; html += ''; }); if (opts.more) html += ''; html += '

'+(opts.noRank?'':''+((opts.startRank\|\|1)+i)+'.')+'	'+((!s.isJob && !votedStories.has(s.id)) ? upvoteHtml('s',s.id) : '')+'	'+esc(s.title)+''+ (s.domain ? ' ('+esc(s.domain)+')' : '')+ '
		'+subtextHtml(s)+'
		More

'; if (opts.note) html += opts.note; contentEl.innerHTML = html; } ``` subtextHtml(s): ```js function subtextHtml(s){ if (s.isJob) return ''+age(s.hoursAgo)+''; const cc = countComments(s.comments); return ''+s.points+' points by '+esc(s.user)+' '+ ''+age(s.hoursAgo)+' | hide | '+ ''+(cc ? cc+' comments' : 'discuss')+''; } ``` For item page, subtext plus past/favorite: add opts.full -> insert " | past | favorite". I'll add param. commentHtml(story, c): ```js function commentHtml(story, c){ const desc = countComments(c.children); const op = c.user === story.user ? ' op' : ''; const arrow = votedComments.has(c.id) ? '' : upvoteHtml('c', c.id); return '

'+ '

'+arrow+'

'+ '

'+esc(c.user)+' '+age(c.hoursAgo)+' | [–]

'+ '

'+fmtText(c.text)+'

'+ '

'+ (c.children.length ? '

'+ c.children.map(function(k){return commentHtml(story,k);}).join('') +'

' : '')+ '

'; } ``` Careful: `.reply p { margin: 4px 0 0; }`. renderItem(id): ```js function renderItem(id){ const s = findItem(id); if (!s){ contentEl.innerHTML = '
No such item.'; return; } document.title = s.title + ' | Hacker News'; const cc = s.comments ? countComments(s.comments) : 0; let html = ''; html += '' + '' + ''; html += ''; if (s.text) html += ''; html += '

'+((!s.isJob && !votedStories.has(s.id)) ? upvoteHtml('s',s.id) : '')+'	'+esc(s.title)+''+ (s.domain ? ' ('+esc(s.domain)+')' : '') +'
	'+ subtextHtml(s, true) +'
	'+fmtText(s.text)+'

'; if (!s.isJob){ html += '

'; html += '

' + s.comments.map(function(c){return commentHtml(s,c);}).join('') + '

'; } else { html += '
'; } html += '
'; contentEl.innerHTML = html; } ``` subtextHtml(s, full): if full && !isJob add " | past | favorite" before comments link. Order on HN item: "points by user age | hide | past | favorite | N comments". .commentformwrap { margin-left: 18px; } The votelinks td width: set CSS .votelinks{width:14px; padding-right:2px}? In list there's also rank cell. For item page two columns; subtext under title. OK. Now router + nav highlight + title. Search results header: `
` + list? Fine. Login page html string. Submit page html string with form table. renderCommentsPage: ```js function renderCommentsPage(){ const rows = []; DB.stories.forEach(function(s){ (function walk(cs){ cs.forEach(function(c){ rows.push({s:s,c:c}); walk(c.children); }); })(s.comments); }); rows.sort(function(a,b){ return a.c.hoursAgo - b.c.hoursAgo; }); let html = ''; rows.slice(0,25).forEach(function(r){ html += ''; }); html += '

'+esc(r.c.user)+' '+age(r.c.hoursAgo)+' | parent | on: '+esc(r.s.title)+'

'+ '

'+fmtText(r.c.text)+'

'; contentEl.innerHTML = html; } ``` renderJobs: ```js function renderJobs(){ renderList(JOBS, { noRank: true, note: '

These are jobs at startups that were funded by Y Combinator. You can also get a job at a YC startup.

' }); } ``` Wait renderList uses subtextHtml(job) -> age only. Title link: '#/item?id=job1'. findItem handles string ids. storyRowHtml uses '#/item?id='+s.id — works for 'job1'. But renderList rank cell with noRank -> empty td. OK. findItem(id): ```js function findItem(id){ const n = +id; if (!Number.isNaN(n)) { const s = DB.stories.find(x=>x.id===n); if (s) return s; } return JOBS.find(j=>j.id===String(id)) || null; } ``` renderFrom(site): stories filter domain===site; if empty show message. renderSubmit / renderLogin static. Submit handler: ```js if (f.id === 'submitform'){ e.preventDefault(); const title = f.title.value.trim(); const url = f.url.value.trim(); const text = f.text.value.trim(); if (!title) return; let domain = ''; if (url){ try { domain = new URL(url).hostname.replace(/^www\./,''); } catch(err){ domain=''; } } const id = ++storyIdCounter; DB.stories.unshift({ id:id, title:title, domain: domain||null, points:1, user:'you', hoursAgo:0.02, text: text||null, comments:[] }); location.hash = '#/newest'; } ``` Note form field named "title" conflicts with form.title property? form.title works via name. Actually `f.title` is fine. But form has attribute "title"? elements named url/text/title accessible via f.elements. Use f.elements.title.value etc. `f.elements['title']`. Safe. Also `f.text` — form.text might clash? Use elements. Comment form submit: ```js if (f.classList.contains('commentform')){ e.preventDefault(); const t = f.elements['text'].value.trim(); if(!t) return; addComment(+f.dataset.s, null, t); } ``` addComment(sid, parentCid, text): ```js function addComment(sid, parentCid, text){ const s = findItem(sid); if(!s || s.isJob) return; const c = { id: ++cid, user: 'you', hoursAgo: 0.02, text: text, children: [] }; if (parentCid){ const p = findComment(s.comments, parentCid); if (!p) return; p.children.push(c); } else s.comments.unshift(c); renderItem(sid); const el = document.getElementById('c'+c.id); if (el) el.scrollIntoView({block:'center'}); } ``` handlePostReply(b): ```js const box = b.closest('.replybox'); const t = box.querySelector('textarea').value.trim(); if (!t) return; addComment(b.dataset.s, +b.dataset.c, t); ``` addComment sid may be number string -> findItem handles via +. parentCid number. findComment: ```js function findComment(cs, id){ for (const c of cs){ if (c.id===id) return c; const r = findComment(c.children, id); if (r) return r; } return null; } ``` Toggle handler: ```js function handleToggle(a){ const tr = a.closest('.comtr'); const collapsed = tr.classList.toggle('collapsed'); a.textContent = collapsed ? '[+'+tr.getAttribute('data-desc')+']' : '[–]'; } ``` data-desc of 0 (leaf) — HN shows toggle only if children? Leaf comments have no children; collapsing hides text only. HN shows [–] on all comments. Keep for all; [+0] would look odd — if desc==0, show "[+]"? Or just [–]→[+]. I'll show '[+'+desc+']' when desc>0 else '[+]'. Reply link: ```js function handleReplyLink(a){ const body = a.closest('.cbody'); const box = body.querySelector('.replybox'); box.classList.toggle('open'); if (box.classList.contains('open')) box.querySelector('textarea').focus(); } ``` Upvote handler: ```js function handleUpvote(a){ if (a.hasAttribute('data-s')){ const id = +a.getAttribute('data-s'); const s = findItem(id); if (!s || votedStories.has(id)) return; votedStories.add(id); s.points++; document.querySelectorAll('.score[data-story="'+id+'"]').forEach(function(el){ el.textContent = s.points + ' points'; }); a.remove(); } else if (a.hasAttribute('data-c')){ const id = +a.getAttribute('data-c'); if (votedComments.has(id)) return; votedComments.add(id); a.remove(); } } ``` upvoteHtml(kind,id): kind 's' or 'c': `'

'`. Login submit: ```js if (f.id==='loginform'){ e.preventDefault(); document.getElementById('loginmsg').textContent = 'Login is disabled in this demo.'; } ``` Search submit: ```js if (f.id==='searchform'){ e.preventDefault(); const q = f.elements['q'].value.trim(); if (q) renderSearch(q); else { location.hash='#/news'; } } ``` renderSearch(q): ```js function renderSearch(q){ const res = DB.stories.filter(s=>s.title.toLowerCase().indexOf(q.toLowerCase())!==-1); document.title = q + ' | Hacker News'; renderList(res, { note: res.length? '' : '

No stories matched “'+esc(q)+'”.

' }); document.getElementById('searchbox').value = q; } ``` Note footer input id="searchbox". Router: ```js function router(){ const raw = location.hash.replace(/^#\/?/, ''); const qi = raw.indexOf('?'); const path = (qi >= 0 ? raw.slice(0, qi) : raw) || 'news'; const params = new URLSearchParams(qi >= 0 ? raw.slice(qi+1) : ''); let navActive = path; if (path === 'item'){ renderItem(params.get('id')); } else if (path === 'newest'){ document.title='New Links | Hacker News'; renderList(DB.stories.slice().sort((a,b)=>a.hoursAgo-b.hoursAgo).slice(0,30)); } else if (path === 'past'){ document.title='Past Links | Hacker News'; renderList(DB.stories.slice().sort((a,b)=>b.hoursAgo-a.hoursAgo).slice(0,30)); } else if (path === 'ask'){ document.title='Ask | Hacker News'; renderList(DB.stories.filter(s=>s.title.indexOf('Ask HN')===0)); } else if (path === 'show'){ document.title='Show | Hacker News'; renderList(DB.stories.filter(s=>s.title.indexOf('Show HN')===0)); } else if (path === 'jobs'){ document.title='Jobs | Hacker News'; renderJobs(); } else if (path === 'comments'){ document.title='New Comments | Hacker News'; renderCommentsPage(); } else if (path === 'submit'){ renderSubmit(); } else if (path === 'login'){ renderLogin(); } else if (path === 'from'){ renderFrom(params.get('site')); } else { renderNews(parseInt(params.get('p')||'1',10)||1); navActive='news'; } buildNav(navActive); window.scrollTo(0,0); } ``` renderNews: ```js function renderNews(p){ document.title = 'Hacker News'; const per = 30; const start = (p-1)*per; renderList(DB.stories.slice(start, start+per), { startRank: start+1, more: p===1 ? '#/news?p=2' : null }); } ``` renderSubmit: ```js function renderSubmit(){ document.title = 'Submit | Hacker News'; contentEl.innerHTML = ''; } ``` renderLogin as planned. renderFrom: ```js function renderFrom(site){ const res = DB.stories.filter(s=>s.domain===site); document.title = site + ' | Hacker News'; renderList(res, { note: res.length? '' : '

No stories from '+esc(site)+'.

' }); } ``` buildNav: ```js function buildNav(active){ const items = [['new','newest'],['past','past'],['comments','comments'],['ask','ask'],['show','show'],['jobs','jobs'],['submit','submit']]; document.getElementById('topnavlinks').innerHTML = items.map(function(it){ return ''+it[0]+''; }).join(' | '); } ``` Init: ```js let cid = 0; function assignIds(cs){ cs.forEach(function(c){ c.id = ++cid; assignIds(c.children); }); } let storyIdCounter = 60; const DB = { stories: STORIES }; DB.stories.forEach(function(s){ if (!s.comments) s.comments = genThread(s, 6, 14); else if (s.title.indexOf('Ask HN') !== 0) s.comments = s.comments.concat(genThread(s, 3, 6)); assignIds(s.comments); }); const votedStories = new Set(); const votedComments = new Set(); ``` genThread uses USERS pool and drawers. Wait — generated comments for story 4 etc.: text from pools. Times as planned. Also random user could equal story.user — allow. Also possible issue: mulberry32 seed negative? story.id*7919+13 positive fine. Sort order of "past": hoursAgo desc — 74h first. OK. Also note front page shows rank; 'past' list also ranks? HN frontpast shows ranks? The /front page shows ranks. past page (news?p=...) hmm. Keep ranks everywhere except jobs. Now check the "newest" for jobs not included — fine. Also ensure renderList handles items with comments null (jobs) — subtextHtml checks isJob first. findItem for job ok. Edge: '#/item?id=job1' — renderItem: s.isJob true; no comment form; shows text. subtext age only. Good. document.title set. Now, footer HTML: ```html

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

``` Also footer small text: `.yclinks { font-size: 8pt; }`. CSS full list — write carefully. Also add `input[type=text], input[type=password], textarea { border: 1px solid #828282? }` HN inputs have default borders; leave default but set font. HN textarea default font monospace, size small. Set textarea { font-family: monospace; font-size: 10pt; }. Also `.spacer` row height inline. Also `#content { vertical-align: top; }` and the itemlist width: `table.itemlist { width: 100%; }`? HN front list width is auto (title column stretches). Use width:100% for itemlist; cells auto. Hmm — with width 100%, title column stretches fully; fine. comhead .toggle color: HN [–] is #828282. .comhead a { color:#828282 } covers. Let me make sure hnuser "dead" class color: `.comhead a { color:#828282 }` — ok. OP: `.hnuser.op { color:#ff6600; }`. Subtext hnuser color #828282 via .subtext a. Also `a.dead:hover { text-decoration: underline; }` default. One more: visited `.morelink` etc fine. Also the topnav "navhere" white: `.pagetop a.navhere { color:#fff; }` — HN current page link is white. Include visited override: `.pagetop a.navhere:visited { color:#fff; }`. Let me also include `#topnavlinks a { margin-left: 6px? }` — HN format: "Hacker News" then space then links separated by " | ". My buildNav joins with ' | ' and I put a space before the span content: `Hacker News ` — the space between elements renders. Good. Now compose the HTML for JOBS texts — write short: job1 Streamline Robotics: as above. job2: {id:"job2", isJob:true, title:"Ferrous Systems is hiring embedded Rust consultants", hoursAgo:4, text:"Ferrous Systems provides Rust consulting and training for safety-critical embedded systems.\n\nWe're looking for experienced embedded engineers who want to help clients adopt Rust. You should enjoy reading datasheets, writing RFCs, and the occasional heated debate about provenance.\n\nRemote within the EU. Email jobs at ferrous.example."} job3: {id:"job3", title:"Dataplane (YC S23) is hiring a frontend engineer", hoursAgo:7, text:"Dataplane is building a query engine that analysts actually enjoy using.\n\nWe're hiring a frontend engineer (React, TypeScript) to own the query builder UI. You should have strong opinions about loading states and keyboard shortcuts.\n\nNYC, hybrid. Email jobs at dataplane.example."} job4: {id:"job4", title:"Meridian Health is hiring a staff platform engineer", hoursAgo:12, text:"Meridian Health builds software for hospital operations — the unglamorous kind that decides whether a bed is clean.\n\nWe're hiring a staff platform engineer to lead our Kubernetes-to-boring-VMs migration. Yes, really.\n\nRemote (US). Email jobs at meridian.example."} job5: {id:"job5", title:"Quill Analytics is hiring a founding designer", hoursAgo:26, text:"Quill Analytics turns messy CSVs into dashboards people actually read.\n\nWe're two technical founders looking for a founding designer to own product and brand. Equity-heavy.\n\nRemote. Email design at quill.example."} Good. Also add on jobs page note. Let me also double check `age()`: ```js function age(h){ if (h < 1/60) return 'just now'; const m = Math.round(h*60); if (m < 60) return m + (m===1 ? ' minute ago' : ' minutes ago'); const hrs = Math.floor(h); if (hrs < 24) return hrs + (hrs===1 ? ' hour ago' : ' hours ago'); const d = Math.floor(hrs/24); return d + (d===1 ? ' day ago' : ' days ago'); } ``` fmtText: ```js function fmtText(t){ return esc(t).replace(/\*([^*\n]+)\*/g, '$1') .split(/\n\n+/).map(function(p){ return '

'+p.replace(/\n/g,'
')+'

'; }).join(''); } ``` Order: escape, italic, paragraphs. Careful: italic before split — fine since * within paragraph. Hmm, `.commtext p { margin: 8px 0 0 0; }` and first child no top? Set: `.commtext p { margin: 0 0 0 0; } .commtext p + p { margin-top: 8px; }` and container margin-top 2px? HN has decent spacing: comhead then text close. I'll do .commtext { margin-top: 4px; }. Story 9 text with rules: "Please only post if you personally are part of the hiring company — no recruiting firms or job boards.\n\nPlease state the location and include REMOTE, INTERNS or VISA when relevant. One post per company per month." Wait my reminder comment duplicates; fine. Who is hiring story: domain null, text set, comments 4 hand-written. Title "Ask HN: Who is hiring? (October 2024)" starts with "Ask HN" -> generator skipped. Good. Story 5 title starts with "Ask HN" too. Now — potential visual mismatch: item page subtext has colspan issue: my item table has 2 columns (vote, title). Subtext row: `` — good. fatitem class maybe width 100%. The comment form wrap margin-left 18px aligns under title col (vote cell width 14 + padding). Set .votelinks { width: 14px; min-width:14px; padding-right:4px; } => 18 total. Now — one more feature from prompt: "handle routing that mimics clicking a HN thread with many comments" — done via hash. Also should clicking a comment link update the URL? Yes — hash changes to #/item?id=N, mimicking HN's item?id=N. Edge: hashchange also fires on back/forward — router re-renders. Also handle links to '#/news?p=2' — raw = 'news?p=2'; path 'news'; params p=2. Good. Double-check URLSearchParams usage: `params.get('id')` returns string or null. Alright, also think about the "many comments" display: story 1 total comments: 21 hand + 3-6 generated = 24-27. Front shows "24 comments" etc. Good enough ("many"). Hmm, one consideration — maybe boost generated top-level range to 8-18 for bigger threads. Sure: genThread(s, 8, 18). Now, write CSS block completely: ```css html,body{margin:0;padding:0;background:#fff;} body{font-family:Verdana,Geneva,sans-serif;font-size:10pt;color:#828282;} #hnmain{background:#f6f6ef;} td{font-family:Verdana,Geneva,sans-serif;font-size:10pt;color:#828282;vertical-align:top;} a{color:#000;text-decoration:none;} a:visited{color:#828282;} a:hover{text-decoration:underline;} .pagetop{font-size:10pt;color:#222222;} .pagetop a{color:#000;} .pagetop a:visited{color:#000;} .pagetop a.navhere,.pagetop a.navhere:visited{color:#fff;} .hnname a{font-weight:bold;} table.itemlist{width:100%;} .title{font-size:10pt;color:#000;} .rank{color:#828282;} .rankcell{width:22px;padding-right:2px;} .votelinks{width:14px;min-width:14px;padding-right:4px;text-align:center;} .votearrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #999;margin:2px auto 0;} a.upv{display:block;cursor:pointer;} a.upv:hover{text-decoration:none;} .subtext{font-size:7pt;color:#828282;} .subtext a{color:#828282;} .subtext a:visited{color:#828282;} .sitebit{font-size:8pt;color:#828282;} .sitestr{color:#828282;} .age{color:#828282;} .hnuser{color:#828282;} .hnuser.op{color:#ff6600;} .toptext{font-size:9pt;color:#000;max-width:730px;} .toptext p{margin:6px 0;} .commentformwrap{margin-left:18px;} textarea,input[type=text],input[type=password]{font-family:monospace;font-size:10pt;max-width:100%;} input[type=submit],button{font-family:Verdana,Geneva,sans-serif;font-size:10pt;} .comment-tree{margin-bottom:10px;} .comment-tree > .comtr{margin-top:14px;} .comtr{margin-top:10px;} .crow{display:flex;} .cvote{width:14px;min-width:14px;padding-right:4px;flex:none;} .cbody{flex:1;min-width:0;} .comhead{font-size:8pt;color:#828282;} .comhead a{color:#828282;} .comhead a:visited{color:#828282;} .commtext{font-size:9pt;color:#000;margin-top:4px;max-width:730px;overflow-wrap:break-word;} .commtext p{margin:0;} .commtext p+p{margin-top:8px;} .reply{font-size:7pt;} .reply p{margin:4px 0 0;} .reply a{color:#000;text-decoration:underline;} .replybox{display:none;margin:8px 0 4px;} .replybox.open{display:block;} .children{margin-left:40px;} .comtr.collapsed > .children{display:none;} .comtr.collapsed > .crow .commtext,.comtr.collapsed > .crow .reply,.comtr.collapsed > .crow .replybox{display:none;} .comtr.collapsed{margin-bottom:0;} .yclinks{font-size:8pt;} .yclinks a{color:#828282;} .jobnote{font-size:8pt;} .morelink{color:#000;} .spacer{line-height:0;} #searchform{font-size:8pt;color:#828282;} ``` HN caps commtext width? Actually I don't think so... but long lines on wide screens get unwieldy; HN does not cap (text spans full width). Eh — real HN: comment text fills container width. To be faithful, drop max-width. But 85% of a wide screen = long lines. HN is exactly like that. Faithful > ideal; remove max-width on commtext/toptext. Hmm, I'll keep faithful (no max-width). Wait, one thing: on HN the itemlist table is NOT width:100%? The main table is 85%; itemlist default table auto width... Titles wrap based on container. Keep width:100% — fine either way. Nested children margin 40px matches HN indent (40px images). The collapsed .crow keeps comhead visible with [+N]. Good. Also for top-level comment separation HN has a subtle gap; margin-top 14px fine. Now assemble final file. Also include ``? No. One concern: total size — acceptable. Also: initial `router()` call — run at end of script. Also set buildNav('news') initial — router does. Also — handle case where user clicks "Hacker News" logo link while on '#/news' — hash unchanged, no event; page same anyway. Let me also make the "comments" count on front page update when adding a comment while on item page — renderItem recomputes. Good. Potential subtle bug: In commentHtml, toggle link: `[–]` — inside comhead navs span: `| `. The "–" is an en dash in brackets. Use – or literal –. I'll use literal characters with charset utf-8 declared. data-desc for leaf: 0 -> toggle shows [+] when collapsed (I said conditional). Implement: `a.textContent = collapsed ? (desc>0 ? '[+'+desc+']' : '[+]') : '[–]';` Store desc as number: `const desc = +tr.getAttribute('data-desc');`. Alright. Also — the reply link uses ; my CSS .reply a underline anyway; keep for fidelity, harmless. Also `

` inside .reply — margin handled. I think we're ready to write it all out. Let me also add minor: `document.addEventListener('DOMContentLoaded')` not needed if script at end. Write the final answer with brief intro sentence and the full HTML in one code block. No mention of iframe. Let me write the code now, being extra careful with the story data syntax. One more check on genThread — the draw functions: makeDrawer shuffles copy; for GEN_TOP with 22 items, top count up to 18 fine. Replies drawer 14 items; usage per thread maybe up to ~18 with wrap-around (% p.length) — could repeat after exhaustion; fine. Also GEN times: for story hoursAgo small (e.g., 2h), comment hours = 2*(0.1..0.9) = 0.2..1.8h — fine. For story 4 hoursAgo=2 with generated — ok. Also ensure generated comment hoursAgo < story.hoursAgo (yes, multiplier <1). Hand-written comment times: I gave values less than story hours mostly: story1 5h: comments 4.9 max ok. Story 3: story 7h, comments up to 6.4 ok. Story 5: 4h, comments 3.8 ok. Story 2: 3h, comments up to 2.8 ok. Story 9: 12h, comments up to 11 ok. Story 19: 9h, comments up to 8.6 ok. Story 29: 22h, comments 20.5 ok. Story 43: 50h, comments 47.5 ok. Story 53: 67h, comments 64.5 ok. Generated extras appended to story 1 (5h): hours = 5*(0.1..0.9) up to 4.5 — could be "older" than hand comments; fine. But wait: generated extras for story 2 (hoursAgo 3) => up to 2.7h fine. OK writing final. Also remember to NOT use external libraries; all vanilla. Also small: title links for Ask HN posts: no domain; still internal. Good. Let me write out. I'll keep code compact-ish (2-space indent minimal) but readable. Final check on delegation: clicking upvote arrow: target is div.votearrow inside a.upv -> closest('a') = a.upv. Good. Toggle: a.toggle. replylink: a.replylink class on anchor inside . Good. Also prevent default on .dead only; other in-page anchors (href="#/...") allowed. Careful: `e.target.closest('a')` when clicking span.sitestr inside a -> gets domain anchor '#/from?site=' — allowed, nice. Also the rank cell for jobs: empty string, keep consistent cell structure. Also renderList note param used by jobs + search empty state. One more: after submit new story -> location.hash='#/newest' — if already on '#/newest', no hashchange fires; manually call router() in that case: ```js if (location.hash === '#/newest') router(); else location.hash = '#/newest'; ``` Good catch. Similarly addComment uses renderItem directly — fine. Write it. Also, include favicon: ```html ``` OK. Final code below. Let me be careful about apostrophes inside single-quoted JS strings — I'm using double quotes for most strings; HTML-building strings single-quoted with double quotes inside for attributes. Comment texts double-quoted. Avoid double quotes inside comment text (use single quotes / curly quotes) — I used 'quotes' in some texts like 'what if the filesystem...' — single quotes inside double-quoted string fine. In story 5 text: includes apostrophes fine. Em-dashes: I used "—" literal in texts; charset utf-8 handles. Also make sure no `${}` template literals confusion; I'll use string concatenation mostly, or template literals carefully. I'll use template literals for some builders to reduce noise — must escape backticks? No backticks inside content. Use them selectively. Actually mixing may risk errors; I'll use plain concatenation with single quotes, converting attributes to double quotes. Consistent. Now finalize story data entries 6-60 (without comments). Let me write them all out. Also for the "comments" page: comhead then commtext; commtext has margin-bottom 12px inline. Also renderLogin: ```js function renderLogin(){ document.title = 'Login | Hacker News'; contentEl.innerHTML = '
Login

'+ '

Forgot your password?

Create account

'; } ``` OK — writing the final answer now. The code will be long; that's expected. Also add window scroll restoration: router scrolls to top — standard. Let me draft the whole script top to bottom once more, checking declarations order: - helpers - pools - C() - STORIES (uses C) - JOBS - genThread (uses pools, mulberry32) - init DB loop (uses genThread, assignIds) - state sets - find functions - render functions - router - event listeners - router() genThread defined before use in init loop. STORIES defined with comments arrays inline. Fine. pick(rng, arr) helper: arr[Math.floor(rng()*arr.length)]. Let me write everything. Also note: STORIES entries 6-60 need "comments" omitted; init loop generates. Also storyIdCounter = 60 initial; but if stories added, ids 61+. Let me make sure `DB.stories.find(function(x){return x.id===n;})` for findItem. Writing final HTML now. One more detail — HN's main table: `width="85%"` centered. Also outer body default white; #hnmain bg #f6f6ef. The header td bgcolor #ff6600. Spacer row height 10 after header? Actually HN: after header row there's ``. I have that. Content cell: ``? whatever, mine ok. Also add `style="height:10px"` empty td row before content — did: ``. Done. Compose answer: one line intro + code block. The intro shouldn't mention iframe. Something like "Here's a complete single-file Hacker News clone with client-side hash routing — clicking any thread opens its full comment tree internally." Let me write the code with care for syntax errors. I'll mentally lint as I go. Data section — writing now, final: Actually, also handle `story.url` — I dropped url field; domains only. Fine (title links internal). Let me also double check the fmtText on story 9 text containing "—" and apostrophes — ok. Comment counts: story 1: let me recount my tree as coded: 1. bdarnell: children [jakewins[bdarnell], mitsuhiko] -> total 4 2. homercles [petercooper] -> 2 3. nrp [taylorbuley] -> 2 4. cryptonector [jfoutz] -> 2 5. jashkenas -> 1 6. manigandham [slaughteriv [manigandham [slaughteriv]]] -> 4 7. derefr [anarazel [derefr]] -> 3 8. ksec -> 1 9. whalesalad -> 1 10. pauldix -> 1 Hand total: 21. Plus gen 3-6 => 24-27. Now writing the final file in the answer. I'll be thorough but efficient. Here's a complete single-file Hacker News clone. It uses hash-based routing (`#/item?id=...`), so clicking a thread's "N comments" link swaps the view internally to a full nested comment thread — no page navigation, and the back/forward buttons still work. It includes upvotes, collapsible comments, inline replies, working comment submission (posted locally as "you"), and stub pages for new/past/ask/show/jobs/submit/login. ```html Hacker News

Hacker News

``` **How the internal routing works:** all navigation happens through hash fragments (`#/news`, `#/item?id=3`, `#/newest`, etc.). A single `router()` function parses `location.hash` and re-renders the content `` in place — clicking a thread's **"N comments"** link swaps the front page for the full comment tree without any network request or page load, while the URL still updates so back/forward buttons work like real HN navigation. Try it with the PostgreSQL thread (24+ nested comments) or the "Ask HN: What are you working on?" thread.

title
url

text

	Leave url blank to submit a question for discussion. If there is no url, text will appear at the top of the thread. If there is a url, text is optional.

Hacker Clone