Component Widgets

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Chip thumbnail viewer</title>
<style>html,body{margin:0;background:transparent}adom-chip-thumbnail{display:block}.msg{padding:22px;color:#8b97ac;font:13px/1.6 ui-monospace,monospace}</style></head>
<body>
<!-- Embeddable chip-thumbnail viewer. ?src=<img>&mpn=&package= · postMessage {type:'thumbnail',data} · ?theme= -->
<adom-chip-thumbnail id="w"></adom-chip-thumbnail>
<div class="msg" id="msg" hidden></div>
<script src="chip-thumbnail-widget.js"></script>
<script>
const w=document.getElementById('w'), msg=document.getElementById('msg'), P=new URLSearchParams(location.search);
if(P.get('theme')) w.setAttribute('theme', P.get('theme'));
if(P.get('src')){ w.setAttribute('src', P.get('src')); if(P.get('mpn')) w.setAttribute('mpn', P.get('mpn')); if(P.get('package')) w.setAttribute('package', P.get('package')); }
else { msg.hidden=false; msg.textContent='pass ?src=<image-url>&mpn=&package=, or postMessage {type:"thumbnail", data:{…}}'; }
addEventListener('message', e=>{ const m=e.data||{}; if(m.type==='thumbnail' && m.data){ msg.hidden=true; w.data=m.data; } });
function ph(){ try{ parent.postMessage({type:'readme-height', height:Math.max(120,Math.min(16000,document.body.scrollHeight||200))}, '*'); }catch(_){} }
addEventListener('load',ph); setTimeout(ph,400); if('ResizeObserver' in window) new ResizeObserver(ph).observe(document.body);
</script>
</body></html>