Remember when you made an A+ post last year and everyone clapped bailey.tngl.io/remember-when
2
fork

Configure Feed

Select the types of activity you want to include in your feed.

started with bluesky embed

+116
+86
embed.js
··· 1 + "use strict"; 2 + var EMBED_URL = "https://embed.bsky.app"; 3 + window.bluesky = window.bluesky || { 4 + scan: scan, 5 + }; 6 + /** 7 + * Listen for messages from the Bluesky embed iframe and adjust the height of 8 + * the iframe accordingly. 9 + */ 10 + window.addEventListener("message", function (event) { 11 + if (event.origin !== EMBED_URL) { 12 + return; 13 + } 14 + // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment 15 + var id = event.data.id; 16 + if (!id) { 17 + return; 18 + } 19 + var embed = document.querySelector('[data-bluesky-id="'.concat(id, '"]')); 20 + if (!embed) { 21 + return; 22 + } 23 + // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment 24 + var height = event.data.height; 25 + if (height) { 26 + embed.style.height = "".concat(height, "px"); 27 + } 28 + }); 29 + /** 30 + * Scan the document for all elements with the data-bluesky-aturi attribute, 31 + * and initialize them as Bluesky embeds. 32 + * 33 + * @param element Only scan this specific element @default document @optional 34 + * @returns 35 + */ 36 + function scan(node) { 37 + if (node === void 0) { 38 + node = document; 39 + } 40 + var embeds = node.querySelectorAll("[data-bluesky-uri]"); 41 + for (var i = 0; i < embeds.length; i++) { 42 + var id = String(Math.random()).slice(2); 43 + var embed = embeds[i]; 44 + var aturi = embed.getAttribute("data-bluesky-uri"); 45 + if (!aturi) { 46 + continue; 47 + } 48 + var ref_url = location.origin + location.pathname; 49 + var searchParams = new URLSearchParams(); 50 + searchParams.set("id", id); 51 + if (ref_url.startsWith("http")) { 52 + searchParams.set("ref_url", encodeURIComponent(ref_url)); 53 + } 54 + if (embed.dataset.blueskyEmbedColorMode) { 55 + searchParams.set("colorMode", embed.dataset.blueskyEmbedColorMode); 56 + } 57 + var iframe = document.createElement("iframe"); 58 + iframe.setAttribute("data-bluesky-id", id); 59 + iframe.src = "" 60 + .concat(EMBED_URL, "/embed/") 61 + .concat(aturi.slice("at://".length), "?") 62 + .concat(searchParams.toString()); 63 + iframe.width = "100%"; 64 + iframe.style.border = "none"; 65 + iframe.style.display = "block"; 66 + iframe.style.flexGrow = "1"; 67 + iframe.frameBorder = "0"; 68 + iframe.scrolling = "no"; 69 + var container = document.createElement("div"); 70 + container.style.maxWidth = "600px"; 71 + container.style.width = "100%"; 72 + container.style.marginTop = "10px"; 73 + container.style.marginBottom = "10px"; 74 + container.style.display = "flex"; 75 + container.className = "bluesky-embed"; 76 + container.appendChild(iframe); 77 + embed.replaceWith(container); 78 + } 79 + } 80 + if (["interactive", "complete"].indexOf(document.readyState) !== -1) { 81 + scan(); 82 + } else { 83 + document.addEventListener("DOMContentLoaded", function () { 84 + return scan(); 85 + }); 86 + }
+30
index.html
··· 5 5 <title>Remember When</title> 6 6 <meta name="description" content="" /> 7 7 <meta name="viewport" content="width=device-width, initial-scale=1" /> 8 + <script 9 + async 10 + src="https://embed.bsky.app/static/embed.js" 11 + charset="utf-8" 12 + ></script> 8 13 </head> 9 14 10 15 <body> ··· 15 20 <input required id="handle" /> 16 21 <button type="submit">Remember</button> 17 22 </form> 23 + 24 + <div id="postView"> 25 + <!--<blockquote 26 + id="embed" 27 + class="bluesky-embed" 28 + data-bluesky-uri="at://did:plc:rnpkyqnmsw4ipey6eotbdnnf/app.bsky.feed.post/3mkdcsuagik2b" 29 + data-bluesky-cid="bafyreiesakwblnkn3tehd7f5ou7zvs4hr46qzmfidj4i7fvraro54lqj2q" 30 + data-bluesky-embed-color-mode="system" 31 + 32 + </blockquote>--> 33 + </div> 18 34 </div> 19 35 20 36 <script type="module"> ··· 127 143 ); 128 144 }); 129 145 console.log(postsFromThatDay); 146 + if (postsFromThatDay.length > 0) { 147 + let blockquote = document.createElement("blockquote"); 148 + const post = postsFromThatDay[0]; 149 + blockquote.setAttribute("data-bluesky-uri", post.uri); 150 + blockquote.setAttribute("data-bluesky-cid", post.cid); 151 + blockquote.setAttribute( 152 + "data-bluesky-embed-color-mode", 153 + "system", 154 + ); 155 + blockquote.setAttribute("class", "bluesky-embed"); 156 + document 157 + .getElementById("postView") 158 + .appendChild(blockquote); 159 + } 130 160 } catch (e) { 131 161 console.error(e); 132 162 alert("Failed to find posts from that day: " + e.message);