Thread viewer for Bluesky
mackuba.eu
1<!DOCTYPE html>
2<html>
3<head>
4 <meta charset="UTF-8">
5 <meta http-equiv="Content-Security-Policy" content="
6 default-src 'none';
7 script-src 'self' 'sha256-C5RUxaoIkpRux1/UhIgLL5RalHWo6EOGHzWOhCMr8Fs=';
8 style-src 'self';
9 img-src 'self' https:;
10 font-src 'self';
11 script-src-attr 'none';
12 style-src-attr 'none';
13 connect-src https:;
14 base-uri 'none';
15 form-action 'none';">
16
17 <title>Skythread</title>
18 <link href="./fontawesome/fontawesome.min.css" rel="stylesheet">
19 <link href="./fontawesome/solid.min.css" rel="stylesheet">
20 <link href="./fontawesome/regular.min.css" rel="stylesheet">
21 <link href="style.css" rel="stylesheet">
22</head>
23<body>
24 <div id="loader"><img src="icons/sunny.png"></div>
25
26 <div id="search">
27 <form method="get">
28 🌤 <input type="text" placeholder="Paste a thread link or type a #hashtag" name="q">
29 </form>
30 </div>
31
32 <div id="github">
33 <a href="https://github.com/mackuba/skythread" target="_blank">
34 <img src="icons/github.png">
35 </a>
36 </div>
37
38 <div id="account">
39 <i class="fa-regular fa-user-circle fa-xl"></i>
40 </div>
41
42 <div id="account_menu">
43 <ul>
44 <li><a href="#" data-action="incognito"
45 title="Temporarily load threads as a logged-out user"><span class="check">✓ </span>Incognito mode</a></li>
46
47 <li><a href="#" data-action="biohazard"
48 title="Show links to blocked and hidden comments"><span class="check">✓ </span>Show infohazards</a></li>
49
50 <li><a href="#" data-action="login">Log in</a></li>
51 <li><a href="#" data-action="logout">Log out</a></li>
52 </ul>
53 </div>
54
55 <div id="thread">
56 </div>
57
58 <div id="login" class="dialog">
59 <form method="get">
60 <i class="close fa-circle-xmark fa-regular"></i>
61 <h2>🌤 Skythread</h2>
62 <p><input type="text" id="login_handle" required placeholder="name.bsky.social"></p>
63 <p><input type="password" id="login_password" required
64 placeholder="✱✱✱✱✱✱✱✱"></p>
65 <p class="info"><a href="#"><i class="fa-regular fa-circle-question"></i> Use an "app password" here</a></p>
66 <div class="info-box">
67 <p>Bluesky API currently doesn't allow apps to request fine-grained permissions, only access to the whole account. However, you can generate an "app password" in the Bluesky app settings for this specific app that you can later revoke at any time.</p>
68 <p>The password you enter here is only passed to the Bluesky API and isn't saved anywhere. The returned access token is only stored in your browser's local storage. You can see the complete source code of this app <a href="http://github.com/mackuba/skythread" target="_blank">on GitHub</a>.</p>
69 </div>
70 <p class="submit">
71 <input id="login_submit" type="submit" value="Log in">
72 <i id="cloudy" class="fa-solid fa-cloud fa-beat fa-xl"></i>
73 </p>
74 </form>
75 </div>
76
77 <div id="biohazard_dialog" class="dialog">
78 <form method="get">
79 <i class="close fa-circle-xmark fa-regular"></i>
80 <h2>☣️ Infohazard Warning</h2>
81 <p>“<em>This thread is not a place of honor... no highly esteemed post is commemorated here... nothing valued is here.</em>”</p>
82 <p>This feature allows access to comments in a thread which were hidden because one of the commenters has blocked another. Bluesky currently hides such comments to avoid escalating conflicts.</p>
83 <p>Are you sure you want to enter?<br>(You can toggle this in the menu in top-left corner.)</p>
84 <p class="submit">
85 <input type="submit" id="biohazard_show" value="Show me the drama 😈">
86 <input type="submit" id="biohazard_hide" value="Nope, I'd rather not 🙈">
87 </p>
88 </form>
89 </div>
90
91 <div id="posting_stats_page">
92 <h2>Bluesky posting statistics</h2>
93
94 <form>
95 <p>
96 Scan posts from:
97 <input type="radio" name="scan_type" id="scan_type_timeline" value="home" checked>
98 <label for="scan_type_timeline">Home timeline</label>
99
100 <input type="radio" name="scan_type" id="scan_type_list" value="list">
101 <label for="scan_type_list">List feed</label>
102
103 <input type="radio" name="scan_type" id="scan_type_users" value="users" disabled>
104 <label for="scan_type_users">Selected users (coming soon)</label>
105
106 <input type="radio" name="scan_type" id="scan_type_you" value="you">
107 <label for="scan_type_you">Your profile</label>
108 </p>
109
110 <p>
111 Time range: <input type="range" min="1" max="60" value="7"> <label>7 days</label>
112 </p>
113
114 <p class="list-choice">
115 <label>Select list:</label>
116 <select name="scan_list"></select>
117 </p>
118
119 <p>
120 <input type="submit" value="Start scan"> <progress></progress>
121 </p>
122 </form>
123
124 <p class="scan-info"></p>
125
126 <table class="scan-result">
127 <thead>
128 </thead>
129 <tbody>
130 </tbody>
131 </table>
132 </div>
133
134 <div id="like_stats_page">
135 <h2>Like statistics</h2>
136
137 <form>
138 <p>
139 Time range: <input type="range" min="1" max="60" value="7"> <label>7 days</label>
140 </p>
141
142 <p>
143 <input type="submit" value="Start scan"> <progress></progress>
144 </p>
145 </form>
146
147 <table class="scan-result given-likes">
148 <thead>
149 <tr><th colspan="3">❤️ Likes from you:</th></tr>
150 </thead>
151 <tbody></tbody>
152 </table>
153
154 <table class="scan-result received-likes">
155 <thead>
156 <tr><th colspan="3">💛 Likes on your posts:</th></tr>
157 </thead>
158 <tbody></tbody>
159 </table>
160 </div>
161
162 <div id="private_search_page">
163 <h2>Archive search *Beta*</h2>
164
165 <form>
166 <p>
167 Fetch timeline posts: <input type="range" min="1" max="60" value="7"> <label>7 days</label>
168 </p>
169
170 <p>
171 <input type="submit" value="Fetch timeline"> <progress></progress>
172 </p>
173 </form>
174
175 <p class="archive-status"></p>
176
177 <hr>
178
179 <p class="search">Search: <input type="text" class="search-query"></p>
180
181 <div class="results">
182 </div>
183 </div>
184
185 <script src="lib/purify.min.js"></script>
186 <script src="minisky.js"></script>
187 <script src="api.js"></script>
188 <script src="utils.js"></script>
189 <script src="rich_text_lite.js"></script>
190 <script src="models.js"></script>
191 <script src="menu.js"></script>
192 <script src="thread_page.js"></script>
193 <script src="posting_stats_page.js"></script>
194 <script src="like_stats_page.js"></script>
195 <script src="notifications_page.js"></script>
196 <script src="private_search_page.js"></script>
197 <script src="embed_component.js"></script>
198 <script src="post_component.js"></script>
199 <script src="skythread.js"></script>
200
201 <script>
202 init();
203 </script>
204</body>
205</html>