2c:null 2d:["$","title",null,{"children":"Bluesky Post Viewer | LuoZihYuan | Observable"}] 32:Tbfc,# Bluesky Post Viewer Data scientists and researchers waste valuable time copying text from Bluesky posts or wrestling with complex API calls just to reference social conversations in their work. **Bluesky Post Viewer** cuts through these obstacles by fetching, displaying, and extracting post content with a single URL, empowering users to seamlessly integrate social discourse into their data visualizations and analytical workflows without technical headaches. --- ## What it does This component takes a Bluesky post URL, then: 1. fetches the post data from the Bluesky public API 2. renders the post with full styling 3. and returns the post text as a string for further processing or analysis. #### Options - Dark/Light Mode: To match the color theme of your notebook, react application or website, you have the option to switch between light and dark mode with a simple click on the toggle. --- ## Example ${bskyPostViewer("https://bsky.app/profile/yuan-neu.bsky.social/post/3lmv6dpoei22p", true)} ```js viewof bskyPost = bskyPostViewer("https://bsky.app/profile/yuan-neu.bsky.social/post/3lmv6dpoei22p", true); ``` --- ## Usage ### Observable Import this widget into your Observable notebooks using: ```js import { bskyPostViewer } from "@luozihyuan/bluesky-post-viewer"; ``` Then, in your notebook: ```js viewof bskyPost = bskyPostViewer(); ``` ### React.js Install the dependancies in your node project using: ```shell yarn add @observablehq/runtime@5 yarn add "https://api.observablehq.com/@luozihyuan/bluesky-post-viewer@161.tgz?v=3" ``` Then, in your .jsx file: ```jsx import React, {useRef, useEffect} from "react"; import {Runtime, Inspector} from "@observablehq/runtime"; import notebook from "@luozihyuan/bluesky-post-viewer"; function BlueskyPostViewer() { const viewofBskyPostRef = useRef(); useEffect(() => { const runtime = new Runtime(); runtime.module(notebook, name => { if (name === "viewof bskyPost") return new Inspector(viewofBskyPostRef.current); }); return () => runtime.dispose(); }, []); return ( <>

Credit: Bluesky Post Viewer by LuoZihYuan

); } export default BlueskyPostViewer; ``` ### Plain HTML & Javascript In your HTML file: ```html

Credit: Bluesky Post Viewer by LuoZihYuan

``` --- ### Try It Out33:T35cf,function bskyPostViewer(urlInput, defaultDarkMode) { const container = document.createElement("div"); container.className = "bsky-post-container"; container.style.fontFamily = "sans-serif"; container.style.maxWidth = "600px"; container.style.margin = "20px auto"; container.style.padding = "20px"; container.style.border = "1px solid #e1e8ed"; container.style.borderRadius = "12px"; container.style.backgroundColor = "#fff"; container.style.boxShadow = "0 1px 3px rgba(0,0,0,0.1)"; let isDarkMode = defaultDarkMode; const themes = { light: { backgroundColor: "#fff", textColor: "#000", borderColor: "#e1e8ed", secondaryTextColor: "#657786", buttonColor: "#1DA1F2", buttonTextColor: "white", inputBorderColor: "#ccc" }, dark: { backgroundColor: "#15202B", textColor: "#fff", borderColor: "#38444d", secondaryTextColor: "#8899a6", buttonColor: "#1A91DA", buttonTextColor: "white", inputBorderColor: "#38444d" } }; function applyTheme(isDark) { const theme = isDark ? themes.dark : themes.light; container.style.backgroundColor = theme.backgroundColor; container.style.color = theme.textColor; container.style.borderColor = theme.borderColor; input.style.backgroundColor = theme.backgroundColor; input.style.color = theme.textColor; input.style.borderColor = theme.inputBorderColor; fetchButton.style.backgroundColor = theme.buttonColor; fetchButton.style.color = theme.buttonTextColor; toggleSwitch.style.backgroundColor = isDark ? "#1A91DA" : "#ccc"; toggleIndicator.style.transform = isDark ? "translateX(20px)" : "translateX(0)"; toggleText.textContent = isDark ? "Dark Mode" : "Light Mode"; toggleText.style.color = theme.textColor; if (contentArea.querySelector(".bsky-post")) { const postElement = contentArea.querySelector(".bsky-post"); const authorHandle = postElement.querySelector(".post-author div:nth-child(2) div:nth-child(2)"); const metadata = postElement.querySelector(".post-metadata"); const dateElement = postElement.querySelector(".post-date"); if (authorHandle) authorHandle.style.color = theme.secondaryTextColor; if (metadata) metadata.style.color = theme.secondaryTextColor; if (dateElement) dateElement.style.color = theme.secondaryTextColor; } } const toggleContainer = document.createElement("div"); toggleContainer.style.display = "flex"; toggleContainer.style.alignItems = "center"; toggleContainer.style.justifyContent = "flex-end"; toggleContainer.style.marginBottom = "15px"; const toggleText = document.createElement("span"); toggleText.textContent = "Light Mode"; toggleText.style.marginRight = "10px"; toggleText.style.fontSize = "14px"; const toggleSwitchContainer = document.createElement("div"); toggleSwitchContainer.style.position = "relative"; toggleSwitchContainer.style.cursor = "pointer"; const toggleSwitch = document.createElement("div"); toggleSwitch.style.width = "40px"; toggleSwitch.style.height = "20px"; toggleSwitch.style.backgroundColor = "#ccc"; toggleSwitch.style.borderRadius = "10px"; toggleSwitch.style.transition = "background-color 0.3s"; const toggleIndicator = document.createElement("div"); toggleIndicator.style.width = "16px"; toggleIndicator.style.height = "16px"; toggleIndicator.style.backgroundColor = "#fff"; toggleIndicator.style.borderRadius = "50%"; toggleIndicator.style.position = "absolute"; toggleIndicator.style.top = "2px"; toggleIndicator.style.left = "2px"; toggleIndicator.style.transition = "transform 0.3s"; toggleSwitchContainer.addEventListener("click", () => { isDarkMode = !isDarkMode; applyTheme(isDarkMode); }); toggleSwitchContainer.appendChild(toggleSwitch); toggleSwitchContainer.appendChild(toggleIndicator); toggleContainer.appendChild(toggleText); toggleContainer.appendChild(toggleSwitchContainer); const inputContainer = document.createElement("div"); inputContainer.style.marginBottom = "20px"; inputContainer.style.display = "flex"; inputContainer.style.gap = "10px"; const input = document.createElement("input"); input.type = "text"; input.placeholder = "Enter Bluesky post URL"; input.value = urlInput || ""; input.style.flex = "1"; input.style.padding = "10px"; input.style.borderRadius = "6px"; input.style.border = "1px solid #ccc"; input.style.fontSize = "14px"; const fetchButton = document.createElement("button"); fetchButton.textContent = "Fetch Post"; fetchButton.style.padding = "8px 16px"; fetchButton.style.backgroundColor = "#1DA1F2"; fetchButton.style.color = "white"; fetchButton.style.border = "none"; fetchButton.style.borderRadius = "6px"; fetchButton.style.cursor = "pointer"; fetchButton.style.fontWeight = "bold"; // Function to trigger fetch const triggerFetch = () => { fetchButton.click(); }; input.addEventListener("keypress", (event) => { if (event.key === "Enter") { triggerFetch(); event.preventDefault(); // Prevent form submission if inside a form } }); // Create a content area where the post will be displayed const contentArea = document.createElement("div"); contentArea.className = "post-content"; contentArea.style.marginTop = "20px"; // Create a loader const loader = document.createElement("div"); loader.className = "loader"; loader.textContent = "Loading..."; loader.style.display = "none"; // Create an error message area const errorArea = document.createElement("div"); errorArea.className = "error-message"; errorArea.style.color = "red"; errorArea.style.marginTop = "10px"; errorArea.style.display = "none"; // Function to parse Bluesky URL function parseBlueskyUrl(url) { // Matches URLs like https://bsky.app/profile/username.bsky.social/post/postid const regex = /bsky\.app\/profile\/([^\/]+)\/post\/([^\/]+)/; const match = url.match(regex); if (!match) { throw new Error("Invalid Bluesky URL format. Expected format: https://bsky.app/profile/username.bsky.social/post/postid"); } return { handle: match[1], postId: match[2] }; } // Function to fetch a Bluesky post async function fetchBlueskyPost(handle, postId) { try { // First, we need to get the DID for the handle // Use public.api.bsky.app for public endpoints const didResponse = await fetch(`https://public.api.bsky.app/xrpc/com.atproto.identity.resolveHandle?handle=${handle}`); if (!didResponse.ok) { throw new Error(`Failed to resolve handle: ${handle}`); } const didData = await didResponse.json(); const did = didData.did; // Now we can fetch the post // Use public.api.bsky.app for public endpoints const postResponse = await fetch(`https://public.api.bsky.app/xrpc/app.bsky.feed.getPosts?uris=at://${did}/app.bsky.feed.post/${postId}`); if (!postResponse.ok) { throw new Error(`Failed to fetch post data: ${postResponse.status} ${postResponse.statusText}`); } const postData = await postResponse.json(); if (!postData.posts || postData.posts.length === 0) { throw new Error("No post found with the given ID"); } return postData.posts[0]; } catch (error) { throw error; } } // Function to render the post function renderPost(post) { // Clear previous content contentArea.innerHTML = ""; // Get current theme const theme = isDarkMode ? themes.dark : themes.light; // Create post container const postElement = document.createElement("div"); postElement.className = "bsky-post"; // Add author info const authorElement = document.createElement("div"); authorElement.className = "post-author"; authorElement.style.display = "flex"; authorElement.style.alignItems = "center"; authorElement.style.marginBottom = "10px"; // Author avatar if (post.author.avatar) { const avatarElement = document.createElement("img"); avatarElement.src = post.author.avatar; avatarElement.alt = `${post.author.displayName}'s avatar`; avatarElement.style.width = "48px"; avatarElement.style.height = "48px"; avatarElement.style.borderRadius = "50%"; avatarElement.style.marginRight = "10px"; authorElement.appendChild(avatarElement); } else { // Default avatar if none is provided const defaultAvatar = document.createElement("div"); defaultAvatar.style.width = "48px"; defaultAvatar.style.height = "48px"; defaultAvatar.style.borderRadius = "50%"; defaultAvatar.style.backgroundColor = "#ccc"; defaultAvatar.style.marginRight = "10px"; authorElement.appendChild(defaultAvatar); } // Author name and handle const authorInfo = document.createElement("div"); authorInfo.style.display = "flex"; authorInfo.style.flexDirection = "column"; const authorName = document.createElement("div"); authorName.textContent = post.author.displayName || post.author.handle; authorName.style.fontWeight = "bold"; authorInfo.appendChild(authorName); const authorHandle = document.createElement("div"); authorHandle.textContent = `@${post.author.handle}`; authorHandle.style.color = theme.secondaryTextColor; authorHandle.style.fontSize = "14px"; authorInfo.appendChild(authorHandle); authorElement.appendChild(authorInfo); postElement.appendChild(authorElement); // Post content const postContent = document.createElement("div"); postContent.className = "post-text"; postContent.textContent = post.record.text; postContent.style.marginBottom = "15px"; postContent.style.whiteSpace = "pre-wrap"; postContent.style.lineHeight = "1.4"; postElement.appendChild(postContent); // Post metadata const metadataElement = document.createElement("div"); metadataElement.className = "post-metadata"; metadataElement.style.display = "flex"; metadataElement.style.color = theme.secondaryTextColor; metadataElement.style.fontSize = "14px"; const likesElement = document.createElement("div"); likesElement.textContent = `${post.likeCount || 0} Likes`; likesElement.style.marginRight = "20px"; metadataElement.appendChild(likesElement); const repostsElement = document.createElement("div"); repostsElement.textContent = `${post.repostCount || 0} Reposts`; repostsElement.style.marginRight = "20px"; metadataElement.appendChild(repostsElement); const repliesElement = document.createElement("div"); repliesElement.textContent = `${post.replyCount || 0} Replies`; metadataElement.appendChild(repliesElement); postElement.appendChild(metadataElement); // Date posted const dateElement = document.createElement("div"); dateElement.className = "post-date"; const postDate = new Date(post.indexedAt); dateElement.textContent = postDate.toLocaleString(); dateElement.style.marginTop = "10px"; dateElement.style.color = theme.secondaryTextColor; dateElement.style.fontSize = "14px"; postElement.appendChild(dateElement); // Add to content area contentArea.appendChild(postElement); // Return the post text return post.record.text; } // Handle the fetch button click let postContent = null; fetchButton.addEventListener("click", async () => { const url = input.value.trim(); if (!url) { errorArea.textContent = "Please enter a Bluesky post URL"; errorArea.style.display = "block"; return; } // Show loader and hide any previous errors loader.style.display = "block"; errorArea.style.display = "none"; contentArea.innerHTML = ""; try { const { handle, postId } = parseBlueskyUrl(url); const post = await fetchBlueskyPost(handle, postId); postContent = renderPost(post); // This is the key addition: explicitly set the container.value and dispatch the input event container.value = postContent; container.dispatchEvent(new CustomEvent("input")); } catch (error) { errorArea.textContent = error.message || "Failed to fetch post"; errorArea.style.display = "block"; contentArea.innerHTML = ""; // Reset the value to null on error and notify Observable container.value = null; container.dispatchEvent(new CustomEvent("input")); } finally { loader.style.display = "none"; } }); // If a URL was provided, trigger the fetch automatically if (urlInput) { setTimeout(() => { fetchButton.click(); }, 100); } // Assemble the component container.appendChild(toggleContainer); inputContainer.appendChild(input); inputContainer.appendChild(fetchButton); container.appendChild(inputContainer); container.appendChild(loader); container.appendChild(errorArea); container.appendChild(contentArea); // Apply initial theme applyTheme(isDarkMode); // Create a viewof object to make this Observable-friendly container.value = postContent; // When the post content changes, update the value Object.defineProperty(container, "value", { get: () => postContent, set: (v) => { postContent = v; container.dispatchEvent(new CustomEvent("input")); } }); return container; }34:[] 30:{"id":"d49aeac944a2243e","slug":"bluesky-post-viewer","title":"Bluesky Post Viewer","thumbnail":"f77b115bd9454e35b4ce8fd700d23994f9a521895e2983103ec22488dffca835","access_level":"unlisted","create_time":"$D2025-04-14T21:26:09.461Z","update_time":"$D2025-04-18T15:49:43.402Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"5cd74a37b674e4dd","login":"luozihyuan","name":"LuoZihYuan","avatar_url":"https://avatars-next.observableusercontent.com/cd32856adf0dd119648136999efb69f06fbe351d9dca314551596407d277f043","tier":"starter_2024","bio":""},"version":217,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"50df93014dbc02b3","login":"zihyuan-luo","name":"ZihYuan Luo","avatar_url":"https://avatars-next.observableusercontent.com/a834018b203c1b3d27953d07df803a3d8b119ee351aa50d0cc8f4a83bd341f52","tier":null,"bio":""}],"members":[{"type":"individual","id":"50df93014dbc02b3","login":"zihyuan-luo","name":"ZihYuan Luo","avatar_url":"https://avatars-next.observableusercontent.com/a834018b203c1b3d27953d07df803a3d8b119ee351aa50d0cc8f4a83bd341f52","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Bluesky Post Viewer","cells":[{"id":0,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"viewof bskyPost = bskyPostViewer()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"bskyPost","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"