NP@naman-parashar-s-team / Run receiptPublic
Run receipt

A JS snippet on QuikRun, callable at quik.run/r/run-receipt.
JS· node:20· 152 runs· 0 forks· updated 1mo ago
Endpointquik.run/r/run-receiptRun Fork
Run receipt.js
// QuikRun · Run Receipt
// A landing "RUN RECEIPT" card, rendered live by this snippet: preact SSR + Tailwind
// (Play CDN) + a scannable QR — mirrors the dashboard's run-receipt.tsx (torn edge,
// line items, TOTAL, status, live URL).
//
// Customize via query params:
//   /r/run-receipt?snippet=world-cup&status=200%20OK&duration=48ms&region=iad1
//   /r/run-receipt?golden=1                       → force the golden receipt
import htm from "htm";
import { h } from "preact";
import { render } from "preact-render-to-string";
import QRCode from "qrcode";
 
const html = htm.bind(h);
 
// ── utils ────────────────────────────────────────────────────────────────
const pad = (n) => String(n).padStart(2, "0");
const cx = (...c) => c.filter(Boolean).join(" ");
const hash = (s) => {
  let x = 0;
  for (let i = 0; i < s.length; i++) x = ((x << 5) - x + s.charCodeAt(i)) | 0;
  return Math.abs(x);
};
 
// ── theme ────────────────────────────────────────────────────────────────
// One source of truth for the palette — reused by the QR ink and the Tailwind config.
const COLORS = {
  foreground: "#0B0B0C",
  "muted-foreground": "#87867e",
  border: "#e8e8e2",
  brand: "#E6FF55",
  pass: "#4a9d52",
  destructive: "#d64b4b",
};
const SHADOW = {
  base: "[filter:drop-shadow(0_1px_2px_rgba(11,11,12,0.09))_drop-shadow(0_22px_45px_rgba(11,11,12,0.14))]",
  golden: "[filter:drop-shadow(0_2px_3px_rgba(212,200,80,0.4))_drop-shadow(0_24px_50px_rgba(230,255,85,0.28))]",
};
 
// The receipt itself, screenshot live at 1200×630 — the real slip unfurls, not a marketing card.
const OG_IMAGE = "https://api.quik.run/og/shot/run-receipt";
const OG_LOGO = "https://quik.run/brand/quikrun-mark-fullbleed-512.png";
const OG_DESC = "A live run receipt with a scannable QR, rendered by a QuikRun snippet. Deploy your own in seconds.";
const TITLE = "QuikRun Run Receipt · a live QR receipt for every run";
 
// ── handler ──────────────────────────────────────────────────────────────
export default async function handler(req) {
  // The sandbox hands the snippet an already-parsed request: { method, path, query, headers, body }.
  const q = (req && req.query) || {};
 
  const run = buildRun(q, req);
  const stamp = formatStamp(new Date());
  const liveUrl = `https://quik.run/r/${run.snippet}`;
  const qr = await renderQR(liveUrl); // phone cameras read it natively — points at the live snippet
 
  const page = html`
    <html lang="en">
      ${Head({ liveUrl })}
      <body
        class="flex min-h-screen items-center justify-center p-6"
        style="background-image:radial-gradient(60% 60% at 50% 28%,#17171a 0%,#0B0B0C 72%)"
      >
        ${Receipt({ run, stamp, qr })}
      </body>
    </html>`;
 
  return new Response("<!doctype html>" + render(page), {
    status: 200,
    headers: { "content-type": "text/html; charset=utf-8" },
  });
}
 
// ── model ────────────────────────────────────────────────────────────────
// Build the run from query params. Defaults describe THIS snippet, so a bare
// /r/run-receipt renders a receipt of itself (QR + live URL both self-referential).
function buildRun(q, req) {
  const snippet = q.snippet || "run-receipt";
  const status = q.status || "200 OK";
  const path = (req && req.path) || "receipt";
  const id = q.id || "R-" + hash(path + snippet).toString(16).toUpperCase().slice(0, 6).padStart(6, "0");
 
  return {
    snippet,
    trigger: (q.trigger || "HTTP").toUpperCase(),
    region: q.region || "iad1",
    runtime: q.runtime || "node:20",
    size: q.size || "1.2 KB",
    duration: q.duration || "48ms",
    status,
    id,
    ok: /^2\d\d/.test(status),
    // easter egg: ~1 in 23 runs prints a golden receipt (force it with ?golden=1)
    golden: q.golden === "1" || hash(id + snippet) % 23 === 0,
  };
}
 
function formatStamp(now) {
  const date = `${pad(now.getUTCMonth() + 1)}.${pad(now.getUTCDate())}.${now.getUTCFullYear()}`;
  const time = `${pad(now.getUTCHours())}:${pad(now.getUTCMinutes())} UTC`;
  return { date, time };
}
 
async function renderQR(url) {
  const svg = await QRCode.toString(url, {
    type: "svg",
    margin: 0,
    errorCorrectionLevel: "M",
    color: { dark: COLORS.foreground, light: "#ffffff" },
  });
  // Let the SVG fill its 54×54 slot instead of its intrinsic size.
  return svg.replace(/\swidth="[^"]*"/, ' width="100%"').replace(/\sheight="[^"]*"/, ' height="100%"');
}
 
// ── components ───────────────────────────────────────────────────────────
const Rule = () => html`<div class="my-3 border-t border-dashed border-border"></div>`;
 
const Row = (label, value) => html`
  <div class="flex items-baseline justify-between font-mono text-[11px]">
    <span class="text-muted-foreground">${label}</span>
    <span class="max-w-[62%] truncate tabular-nums text-foreground">${value}</span>
  </div>`;
 
function Receipt({ run, stamp, qr }) {
  const { golden, ok } = run;
  const lines = [
    ["SNIPPET", run.snippet],
    ["TRIGGER", run.trigger],
    ["REGION", run.region],
    ["RUNTIME", run.runtime],
    ["SIZE", run.size],
  ];
 
  return html`
    <div class=${cx("w-[320px] select-none", golden ? SHADOW.golden : SHADOW.base)}>
      ${golden &&
      html`<div class="rounded-t-[10px] bg-brand py-1.5 text-center font-mono text-[10px] font-bold tracking-[0.18em] text-foreground">
        ★ GOLDEN RECEIPT · 1 IN 23 ★
      </div>`}
 
      <div
        class=${cx("relative border-x border-t px-5 pt-5 pb-3", golden ? "border-[#d9cf5e]" : "rounded-t-[10px] border-border")}
        style="background-image:linear-gradient(180deg,#fdfdfc 0%,#f6f6f3 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,0.7)"
      >
        <header class="flex items-start justify-between gap-3">
          <div class="min-w-0">
            <div class="font-mono text-[12px] font-semibold tracking-[0.08em] text-foreground">QUIKRUN · RUN RECEIPT</div>
            <div class="mt-1 font-mono text-[10px] tracking-[0.02em] text-muted-foreground">RUN ${run.id} · ${stamp.date} · ${stamp.time}</div>
          </div>
          <div class="h-[54px] w-[54px] shrink-0 overflow-hidden rounded-[3px] bg-white" dangerouslySetInnerHTML=${{ __html: qr }}></div>
        </header>
 
        <${Rule} />
 
        <div class="flex flex-col gap-1.5">${lines.map(([label, value]) => Row(label, value))}</div>
 
        <${Rule} />
 
        <div class="flex items-baseline justify-between font-mono text-[12px] font-semibold text-foreground">
          <span>TOTAL</span>
          <span class="tabular-nums">${run.duration}</span>
        </div>
 
        <div class="mt-4 flex items-center gap-2 font-mono text-[11px]">
          <span class=${cx("h-1.5 w-1.5 rounded-full", ok ? "bg-brand" : "bg-destructive")}></span>
          <span class="text-muted-foreground">LIVE AT</span>
          <span class=${cx(
            "ml-auto inline-flex items-center rounded-[5px] px-1.5 py-0.5 text-[10px] font-semibold",
            ok ? "bg-pass/10 text-pass" : "bg-destructive/10 text-destructive",
          )}>${run.status}</span>
        </div>
        <div class="mt-1 break-all font-mono text-[12px] text-foreground">quik.run/r/${run.snippet}</div>
 
        ${golden && html`<div class="mt-2 font-mono text-[10px] tracking-[0.02em] text-muted-foreground">You hit a golden run. Screenshot it.</div>`}
      </div>
 
      <${TornEdge} />
    </div>`;
}
 
// The perforated tear along the bottom edge — a jagged path over a 1px seam line.
function TornEdge() {
  const n = 16;
  const w = 100 / n;
  const base = 2.4;
  const tips = [9.6, 8.8, 10.2, 9.2, 9.8, 10.4, 8.9, 9.9, 9.3, 10.1, 9.6, 9, 10.3, 9.1, 9.7, 9.4];
 
  let teeth = "";
  for (let i = 0; i < n; i++) {
    teeth += `L${(100 - (i + 0.5) * w).toFixed(2)} ${tips[i]} L${(100 - (i + 1) * w).toFixed(2)} ${base} `;
  }
 
  return html`<svg class="-mt-px block w-full" viewBox="0 0 100 11" preserveAspectRatio="none" style="height:10px" aria-hidden="true">
    <path d=${`M0 0 H100 V${base} ${teeth}Z`} fill="#f6f6f3"></path>
    <path d=${`M100 0 L100 ${base} ${teeth}L0 0`} fill="none" stroke="#e8e8e2" stroke-width="1" stroke-linejoin="round" vector-effect="non-scaling-stroke"></path>
  </svg>`;
}
 
function Head({ liveUrl }) {
  const config = `tailwind.config={theme:{extend:{colors:${JSON.stringify(COLORS)},fontFamily:{mono:['ui-monospace','SFMono-Regular','Menlo','monospace']}}}}`;
 
  return html`
    <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <title>${TITLE}</title>
      <meta name="description" content=${OG_DESC} />
      <meta property="og:type" content="website" />
      <meta property="og:site_name" content="QuikRun" />
      <meta property="og:logo" content=${OG_LOGO} />
      <meta property="og:title" content=${TITLE} />
      <meta property="og:description" content=${OG_DESC} />
      <meta property="og:url" content=${liveUrl} />
      <meta property="og:image" content=${OG_IMAGE} />
      <meta property="og:image:alt" content="A QuikRun run receipt with a scannable QR" />
      <meta property="og:image:width" content="1200" />
      <meta property="og:image:height" content="630" />
      <meta name="twitter:card" content="summary_large_image" />
      <meta name="twitter:title" content=${TITLE} />
      <meta name="twitter:description" content=${OG_DESC} />
      <meta name="twitter:image" content=${OG_IMAGE} />
      <script src="https://cdn.tailwindcss.com"></script>
      <script dangerouslySetInnerHTML=${{ __html: config }}></script>
    </head>`;
}
Fork this and make it yours
Describe a change in plain English and QuikRun deploys it to your own URL.
Fork snippet
Built on QuikRun by @naman-parashar-s-team · plain English in, live URL out