My-bluesky-data NPM

My Bluesky Data

Server-side code that returns your latest Bluesky post as HTML with minimal styling to resize cleanly while closely resembling the Bluesky website. You can either have it be a non-interactive element or have it returned wrapped in an anchor tag that links to the post in another window.

Install

npm install my-bluesky-data

Set env variables.

BSKY_ID=<your handle without the '@'>
BSKY_PASS=<create app password at https://bsky.app/settings/privacy-and-security>

When imported, it will automatically connect to your Bluesky and get your author feed. It also initiates a cron job to check your feed at the top of every hour.

// Express.js example
import { LatestBskyPostHTMLAsLink } from 'my-bluesky-data'
let html = /*html*/`
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Bluesky Post</title>
    </head>
    <body >
        <div style="height: max-content; width: 300px; background-color:black; color: white;">
            ${LatestBskyPostHTMLAsLink()}
        </div>
    </body>
    </html>
`
app.get('/bsky', (req, res) => {
    res.send(html) 
})

Set the height and width of the parent element. The Blusky content will fill the element automatically. If you would like to change styling, add these selectors to your CSS.

#bsky_link {}
#bsky {}
#bsky_header {}
#bsky_avatar {}
#bsky_name_handle {}
#bsky_display_name {}
#bsky_icon {}
#bsky_post_content {}
#bsky_post_text {}
#bsky_post_image {}
#bsky_post_date {}
#bsky_metrics {}
.bsky_post_metric {}

Changes

1.0.11 - timestamp code clean up, added tab focus outline to #bsky_link
1.0.10 - changed overly complicated AM/PM setting
1.0.9 - AM/PM bug fix
1.0.8 - added GIF playback
1.0.7 - removed horizontal display CSS because it wasn't mobile friendly, added better readme example
1.0.6 - removed useless css and added css for when the user wants to display #bsky_post_content horizontally
1.0.5 - added bsky.app font settings to css
1.0.4 - post dates now in server time-zone instead of GMT
1.0.3 - likes and comments were displayed in wrong location
1.0.2 - readme.md fix
1.0.1 - ConstructContent() now creates the post in memory on server start and cron job instead of on web request