An interactive test of how Wimble fits embedded HTML to its content.
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788// @ts-check
const HEIGHTS = [64, 280, 440, 1400];
/** @param {{ args: string[], accept: string[] }} context */export default function resize({ args, accept }) { if (args.includes("--help")) return "Test embedded HTML resizing.\n\nUsage: run.js\n"; for (const type of accept) { if (type === "text/html") { return new Response(renderHtml(), { headers: { "content-type": "text/html; charset=utf-8" }, }); } if (type === "application/json") return { heights: HEIGHTS }; if (type === "text/plain") return `Resize demo heights: ${HEIGHTS.join(", ")}px\n`; }}
function renderHtml() { return `<!doctype html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Resize demo</title> <style> :root { color: #191919; background: transparent; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } * { box-sizing: border-box; } html, body { margin: 0; } body { overflow-x: hidden; } .canvas { position: relative; height: ${HEIGHTS[0]}px; min-height: 1px; transition: height 180ms ease; } .marker { position: absolute; right: 12px; bottom: 8px; color: #686868; font-size: 11px; } button { position: fixed; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); min-height: 42px; padding: 0 18px; border: 0; border-radius: 4px; color: #fff; background: #191919; font: inherit; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); } button:hover { background: #353535; } button:focus-visible { outline: 2px solid #191919; outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .canvas { transition: none; } } </style></head><body> <main class="canvas" id="canvas"> <span class="marker" id="marker">${HEIGHTS[0]}px content</span> </main> <button id="resize" type="button">Make taller</button> <script> const heights = ${JSON.stringify(HEIGHTS)}; const canvas = document.getElementById("canvas"); const marker = document.getElementById("marker"); const button = document.getElementById("resize"); let stage = 0; button.addEventListener("click", () => { stage = (stage + 1) % heights.length; const height = heights[stage]; canvas.style.height = height + "px"; marker.textContent = height + "px content"; button.textContent = stage === heights.length - 1 ? "Reset height" : "Make taller"; if (stage === 0) scrollTo(0, 0); }); </script></body></html>`;}