+43

site/app.js

reviewed

··· 919 919 920 920 const currentEmoji = statuses.length > 0 ? statuses[0].emoji : '😊'; 921 921 922 922 + const embedCode = `<div id="status-embed"></div> 923 923 + <script> 924 924 + (async function() { 925 925 + const did = '${user.did}'; 926 926 + const handle = '${handle}'; 927 927 + try { 928 928 + const res = await fetch('https://pds.zzstoatzz.io/xrpc/com.atproto.repo.listRecords?repo=' + did + '&collection=io.zzstoatzz.status.record&limit=1'); 929 929 + const data = await res.json(); 930 930 + const record = data.records?.[0]?.value; 931 931 + if (!record) return; 932 932 + const emoji = record.emoji || ''; 933 933 + const text = record.text || ''; 934 934 + const isCustom = emoji.startsWith('custom:'); 935 935 + const emojiHtml = isCustom 936 936 + ? '<img src="https://all-the.bufo.zone/' + emoji.slice(7) + '.png" style="width:1.25em;height:1.25em;vertical-align:middle" onerror="this.src=this.src.replace(\\'.png\\',\\'.gif\\')">' 937 937 + : emoji; 938 938 + const displayText = text || (isCustom ? emoji.slice(7).replace(/-/g, ' ') : 'vibing'); 939 939 + document.getElementById('status-embed').innerHTML = '<a href="https://status.zzstoatzz.io/@' + handle + '" target="_blank" style="text-decoration:none;color:inherit">' + emojiHtml + ' ' + displayText + '</a>'; 940 940 + } catch(e) { console.error('status embed error:', e); } 941 941 + })(); 942 942 + </` + `script>`; 943 943 + 922 944 main.innerHTML = ` 923 945 <div class="profile-card"> 924 946 <div class="current-status">${currentHtml}</div> ··· 948 970 </div> 949 971 </form> 950 972 ${historyHtml} 973 973 + <section class="embed-section"> 974 974 + <h2>embed your status</h2> 975 975 + <p class="embed-description">add this to your website to show your current status:</p> 976 976 + <div class="embed-code-container"> 977 977 + <pre class="embed-code"><code>${escapeHtml(embedCode)}</code></pre> 978 978 + <button class="copy-embed-btn" title="copy code"> 979 979 + <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 980 980 + <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect> 981 981 + <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path> 982 982 + </svg> 983 983 + </button> 984 984 + </div> 985 985 + </section> 951 986 `; 952 987 953 988 // Set up emoji picker ··· 1042 1077 copyToClipboard(permalink, btn); 1043 1078 }); 1044 1079 }); 1080 1080 + 1081 1081 + // Copy embed button 1082 1082 + const copyEmbedBtn = document.querySelector('.copy-embed-btn'); 1083 1083 + if (copyEmbedBtn) { 1084 1084 + copyEmbedBtn.addEventListener('click', () => { 1085 1085 + copyToClipboard(embedCode, copyEmbedBtn); 1086 1086 + }); 1087 1087 + } 1045 1088 } 1046 1089 } catch (e) { 1047 1090 console.error('Failed to init:', e);

+65

site/styles.css

reviewed

··· 420 420 text-decoration: underline; 421 421 } 422 422 423 423 + /* Embed section */ 424 424 + .embed-section { 425 425 + margin-top: 2rem; 426 426 + padding-top: 1.5rem; 427 427 + border-top: 1px solid var(--border); 428 428 + } 429 429 + 430 430 + .embed-section h2 { 431 431 + font-size: 0.875rem; 432 432 + text-transform: uppercase; 433 433 + letter-spacing: 0.05em; 434 434 + color: var(--text-secondary); 435 435 + margin-bottom: 0.5rem; 436 436 + } 437 437 + 438 438 + .embed-description { 439 439 + font-size: 0.875rem; 440 440 + color: var(--text-secondary); 441 441 + margin-bottom: 1rem; 442 442 + } 443 443 + 444 444 + .embed-code-container { 445 445 + position: relative; 446 446 + background: var(--bg-card); 447 447 + border: 1px solid var(--border); 448 448 + border-radius: var(--radius); 449 449 + } 450 450 + 451 451 + .embed-code { 452 452 + padding: 1rem; 453 453 + padding-right: 3rem; 454 454 + overflow-x: auto; 455 455 + font-size: 0.75rem; 456 456 + line-height: 1.5; 457 457 + margin: 0; 458 458 + } 459 459 + 460 460 + .embed-code code { 461 461 + white-space: pre-wrap; 462 462 + word-break: break-all; 463 463 + } 464 464 + 465 465 + .copy-embed-btn { 466 466 + position: absolute; 467 467 + top: 0.5rem; 468 468 + right: 0.5rem; 469 469 + background: var(--bg); 470 470 + border: 1px solid var(--border); 471 471 + color: var(--text-secondary); 472 472 + cursor: pointer; 473 473 + padding: 0.5rem; 474 474 + border-radius: 6px; 475 475 + transition: color 0.15s, border-color 0.15s; 476 476 + } 477 477 + 478 478 + .copy-embed-btn:hover { 479 479 + color: var(--accent); 480 480 + border-color: var(--accent); 481 481 + } 482 482 + 483 483 + .copy-embed-btn.copied { 484 484 + color: var(--accent); 485 485 + border-color: var(--accent); 486 486 + } 487 487 + 423 488 /* Logout */ 424 489 .logout-btn { 425 490 display: block;