Open
Description
Currently, the populate-updates.js script will not render linkts to Bluesky posts in place. Some other embeds (like YouTube, Twitter) handle dynamically loaded content automatically, but Bluesky’s embed script does not automatically watch for new content—so it has to be triggered manually.
Adding this functionality would allow showing the exact Bluesky post (with likes, comments, etc.) within the UI directly.
To make this happen, do something like what is shown below, but make it more generic than for just Bluesky:
function loadData(url) {
fetch(url)
.then(response => response.json())
.then(data => {
const container = document.getElementById("updates");
data.forEach(item => {
const div = document.createElement("div");
div.classList.add("update");
const date = new Date(item.publish_date * 1000).toLocaleDateString(); // Convert timestamp to a readable date
div.innerHTML = `
<div class="update">
<div class="update-circle"></div>
<div class="update-text">
<div class="update-text-header">
<h3>${item.title}</h3>
<p>${convertDate(item.publish_date)}<p>
</div>
<p>${item.description}</p>
<img src=${item.image} class="update-image">
<p>Source: <a href=${item.source_link}>${item.source_name}</a></p>
<div class="embed-container">${item.custom_html}</div>
</div>
</div>
`;
container.appendChild(div);
});
// Manually add the Bluesky embed script after content is loaded
let script = document.createElement("script");
script.src = "https://embed.bsky.app/static/embed.js";
script.async = true;
script.charset = "utf-8";
script. => {
if (window.BlueskyEmbed) {
window.BlueskyEmbed.process();
}
};
document.body.appendChild(script);
})
}