NP@naman-parashar-s-team / Morning tech digestPublic

Morning tech digest

A JS snippet on QuikRun, callable at quik.run/r/morning-digest.

JS· node:20· 29 runs· 0 forks· updated 13h ago

Endpointquik.run/r/morning-digestRun Fork

Morning tech digest.js

// Morning tech digest - the top Hacker News front-page stories, server-rendered to a clean HTML
// page with preact + htm + preact-render-to-string (all pre-bundled). htm gives JSX-style markup
// via tagged template literals, so it stays consistent with preact's renderer (no JSX/React mix).
import { h } from "preact";
import { renderToString } from "preact-render-to-string";
import htm from "htm";
 
const html = htm.bind(h);
 
export default async function handler(req) {
  const res = await fetch("https://hn.algolia.com/api/v1/search?tags=front_page&hitsPerPage=20");
  if (!res.ok) return new Response("<h1>upstream unavailable</h1>", { status: 502, headers: { "content-type": "text/html; charset=utf-8" } });
  const data = await res.json();
 
  const page = html`<html>
    <head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><title>Morning tech digest</title></head>
    <body style=${{ fontFamily: "system-ui, -apple-system, sans-serif", background: "#0b0b0c", color: "#eaeaea", margin: 0, padding: "40px 20px" }}>
      <div style=${{ maxWidth: "640px", margin: "0 auto" }}>
        <p style=${{ color: "#6b6f76", fontSize: "12px", letterSpacing: "0.12em", textTransform: "uppercase", margin: 0 }}>Morning digest</p>
        <h1 style=${{ fontSize: "28px", margin: "6px 0 24px", lineHeight: "1.2" }}>Hacker News, front page</h1>
        ${data.hits.map(
          (story, i) => html`<div style=${{ padding: "14px 0", borderTop: "1px solid #23252a", display: "flex", gap: "14px" }}>
            <span style=${{ color: "#3a3d44", minWidth: "22px" }}>${i + 1}</span>
            <div>
              <a href=${story.url || `https://news.ycombinator.com/item?id=${story.objectID}`} style=${{ color: "#E6FF55", textDecoration: "none", fontSize: "16px", fontWeight: 600 }}>${story.title}</a>
              <div style=${{ color: "#6b6f76", fontSize: "13px", marginTop: "4px" }}>${story.points || 0} points · ${story.num_comments || 0} comments</div>
            </div>
          </div>`,
        )}
      </div>
    </body>
  </html>`;
 
  return new Response("<!doctype html>" + renderToString(page), { status: 200, headers: { "content-type": "text/html; charset=utf-8" } });
}

Fork this and make it yours

Describe a change in plain English and QuikRun deploys it to your own URL.

Fork snippet