Remember when you made an A+ post last year and everyone clapped
bailey.tngl.io/remember-when
started with bluesky embed
+116
+86
embed.js
+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
+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);