# 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 Out