my-bluesky-data

v1.0.17

Published

3 months ago

Connects to your Bluesky acocunt and creates HTML of your latest post for use on your webpage, with hourly cron job to get updates

Downloads

0High
0Medium
0Low

erik-s

Bluesky Bsky

My Bluesky Data

git repo

Nodejs server code to return data on posts from Bluesky Can be returned as JSON as well as lightly styled HTML or the HTML wrapped in an anchor tag linking to the orginal post on Bluesky.

Install

npm i 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.

Import Functions. You can import just the ones you want to use.

import { FeedJSON, LatestBskyPostJSON, LatestBskyPostHTML, LatestBskyPostHTMLAsLink } from 'my-bluesky-data'

Examples

Express.js Your lastest post returned as JSON

import { LatestBskyPostJSON } from 'my-bluesky-data'
app.get('/bskyjson', (req, res) => {
    res.send(LatestBskyPostJSON()) 
})

Your Lastest post returned as stylized HTML Set the width of the parent element. The Blusky content will fill the element automatically.

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="width: 300px;">
            ${LatestBskyPostHTMLAsLink()}
        </div>
    </body>
    </html>
`
app.get('/bskyhtml', (req, res) => {
    res.send(html) 
})

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.17 - Removed hourly console log and replaced with more detailed intial log. Timestamp.mjs code cleanup.
- New message informs Bluesky login last ~14 days.
1.0.15 - Images auto added to posts from pasting urls should display properly.
1.0.14 - General styling changes
- Added dark mode system detection and added blueskys darkmode colors to the elements
- LatestBskyPostHTML() -- added links to hashtags in post text
- LatestBskyPostHTMLAsLink() -- stylized hashtags in post text
1.0.13 - update usage in readme
1.0.12 - added funtions to return post and feed data as JSON. code clean up and seperation of concerns
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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

My Bluesky Data

Examples

Changes

Future Plans—in no order

Frontend

Backend/Admin