UNPKG

my-bluesky-data

Version:

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

96 lines (88 loc) • 3.36 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
# My Bluesky Data [git repo](https://gitlab.com/erik.dev/my-bluesky-data) 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 ``` import { FeedJSON, LatestBskyPostJSON, LatestBskyPostHTML, LatestBskyPostHTMLAsLink } from 'my-bluesky-data' ``` Express.js Examples ``` import { LatestBskyPostJSON } from 'my-bluesky-data' app.get('/bskyjson', (req, res) => { res.send(LatestBskyPostJSON()) }) ``` ``` 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('/bskyhtml', (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.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 ### Future Plans—in no order #### Frontend - Make links in post text functional - Add video playback on non-link returns. - Add play button to videos on link returns #### Backend/Admin - Add an OAuth option instead of a mandatory ID/password.