mackuba.eu
+32
-1
index.html
+32
-1
index.html
···
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
···
164
</div>
165
166
<div id="private_search_page">
167
-
<h2>Archive search *Beta*</h2>
168
169
<div class="timeline-search">
170
<form>
···
192
<input type="radio" name="collection" value="pins" id="collection-pins"> <label for="collection-pins">Pins</label>
193
</div>
194
</form>
195
196
<div class="results">
197
</div>
···
49
50
<li><a href="#" data-action="login">Log in</a></li>
51
<li><a href="#" data-action="logout">Log out</a></li>
52
+
53
+
<li class="link"><a href="?">Home</a></li>
54
+
<li class="link"><a href="?page=posting_stats">Posting stats</a></li>
55
+
<li class="link"><a href="?page=like_stats">Like stats</a></li>
56
+
<li class="link"><a href="?page=search">Timeline search</a></li>
57
+
<li class="link"><a href="?page=search&mode=likes">Archive search</a></li>
58
</ul>
59
</div>
60
···
170
</div>
171
172
<div id="private_search_page">
173
+
<h2>Archive search</h2>
174
175
<div class="timeline-search">
176
<form>
···
198
<input type="radio" name="collection" value="pins" id="collection-pins"> <label for="collection-pins">Pins</label>
199
</div>
200
</form>
201
+
202
+
<div class="lycan-import">
203
+
<form>
204
+
<h4>Data not imported yet</h4>
205
+
206
+
<p>
207
+
In order to search within your likes and bookmarks, the posts you've liked or saved need to be imported into a database.
208
+
This is a one-time process, but it can take several minutes or more, depending on the age of your account.
209
+
</p>
210
+
<p>
211
+
To start the import, press the button below. You can then wait until it finishes, or close this tab and come back a bit later.
212
+
After the import is complete, the database will be kept up to date automatically going forward.
213
+
</p>
214
+
<p>
215
+
<input type="submit" value="Start import">
216
+
</p>
217
+
</form>
218
+
219
+
<div class="import-progress">
220
+
<h4>Import in progress</h4>
221
+
222
+
<p class="import-status"></p>
223
+
<p><progress></progress> <output></output></p>
224
+
</div>
225
+
</div>
226
227
<div class="results">
228
</div>
+1
-1
minisky.js
+1
-1
minisky.js
+190
-11
private_search_page.js
+190
-11
private_search_page.js
···
3
/** @type {number | undefined} */
4
fetchStartTime;
5
6
constructor() {
7
this.pageElement = $id('private_search_page');
8
9
this.rangeInput = $(this.pageElement.querySelector('input[type="range"]'), HTMLInputElement);
10
this.submitButton = $(this.pageElement.querySelector('input[type="submit"]'), HTMLInputElement);
11
this.progressBar = $(this.pageElement.querySelector('input[type="submit"] + progress'), HTMLProgressElement);
···
17
this.results = $(this.pageElement.querySelector('.results'));
18
19
this.timelineSearch = $(this.pageElement.querySelector('.timeline-search'));
20
this.searchCollections = $(this.pageElement.querySelector('.search-collections'));
21
22
this.timelinePosts = [];
23
24
this.setupEvents();
25
26
let params = new URLSearchParams(location.search);
27
this.mode = params.get('mode');
28
-
this.lycanMode = params.get('lycan');
29
30
-
if (this.lycanMode == 'local') {
31
this.localLycan = new BlueskyAPI('http://localhost:3000', false);
32
}
33
}
34
35
setupEvents() {
36
-
$(this.pageElement.querySelector('form')).addEventListener('submit', (e) => {
37
e.preventDefault();
38
39
if (!this.fetchStartTime) {
···
62
}
63
}
64
});
65
}
66
67
/** @returns {number} */
···
74
this.pageElement.style.display = 'block';
75
76
if (this.mode == 'likes') {
77
this.timelineSearch.style.display = 'none';
78
this.searchCollections.style.display = 'block';
79
this.searchLine.style.display = 'block';
80
} else {
81
this.timelineSearch.style.display = 'block';
82
this.searchCollections.style.display = 'none';
83
}
84
}
85
···
121
daysBack = 0;
122
}
123
124
-
this.timelinePosts = timeline.map(x => Post.parseFeedPost(x));
125
126
this.archiveStatus.innerText = "Timeline archive fetched: " + ((daysBack == 1) ? '1 day' : `${daysBack} days`);
127
this.searchLine.style.display = 'block';
···
140
return;
141
}
142
143
-
let matching = this.timelinePosts.filter(x => x.lowercaseText.includes(query));
144
145
for (let post of matching) {
146
let postView = new PostComponent(post, 'feed').buildElement();
···
151
/** @param {string} query */
152
153
searchInLycan(query) {
154
-
this.results.innerHTML = '';
155
-
156
-
if (query.length == 0) {
157
return;
158
}
159
160
let collection = this.searchForm.elements['collection'].value;
161
···
174
let response;
175
176
if (this.localLycan) {
177
-
let params = { collection, query, user: window.accountAPI.user.did };
178
if (cursor) params.cursor = cursor;
179
180
response = await this.localLycan.getRequest('blue.feeds.lycan.searchPosts', params);
···
183
if (cursor) params.cursor = cursor;
184
185
response = await accountAPI.getRequest('blue.feeds.lycan.searchPosts', params, {
186
-
headers: { 'atproto-proxy': 'did:web:lycan.feeds.blue#lycan' }
187
});
188
}
189
···
197
return;
198
}
199
200
-
let records = await window.accountAPI.loadPosts(response.posts);
201
let posts = records.map(x => new Post(x));
202
203
if (!firstPageLoaded) {
···
3
/** @type {number | undefined} */
4
fetchStartTime;
5
6
+
/** @type {number | undefined} */
7
+
importTimer;
8
+
9
+
/** @type {string | undefined} */
10
+
lycanImportStatus;
11
+
12
constructor() {
13
this.pageElement = $id('private_search_page');
14
15
+
this.header = $(this.pageElement.querySelector('h2'));
16
+
17
this.rangeInput = $(this.pageElement.querySelector('input[type="range"]'), HTMLInputElement);
18
this.submitButton = $(this.pageElement.querySelector('input[type="submit"]'), HTMLInputElement);
19
this.progressBar = $(this.pageElement.querySelector('input[type="submit"] + progress'), HTMLProgressElement);
···
25
this.results = $(this.pageElement.querySelector('.results'));
26
27
this.timelineSearch = $(this.pageElement.querySelector('.timeline-search'));
28
+
this.timelineSearchForm = $(this.pageElement.querySelector('.timeline-search form'), HTMLFormElement);
29
this.searchCollections = $(this.pageElement.querySelector('.search-collections'));
30
31
+
this.lycanImportSection = $(this.pageElement.querySelector('.lycan-import'));
32
+
this.lycanImportForm = $(this.pageElement.querySelector('.lycan-import form'), HTMLFormElement);
33
+
this.importProgress = $(this.pageElement.querySelector('.import-progress'));
34
+
this.importProgressBar = $(this.pageElement.querySelector('.import-progress progress'), HTMLProgressElement);
35
+
this.importStatusLabel = $(this.pageElement.querySelector('.import-status'));
36
+
this.importStatusPosition = $(this.pageElement.querySelector('.import-progress output'));
37
+
38
+
this.isCheckingStatus = false;
39
this.timelinePosts = [];
40
41
this.setupEvents();
42
43
let params = new URLSearchParams(location.search);
44
this.mode = params.get('mode');
45
+
let lycan = params.get('lycan');
46
47
+
if (lycan == 'local') {
48
this.localLycan = new BlueskyAPI('http://localhost:3000', false);
49
+
} else if (lycan) {
50
+
this.lycanAddress = `did:web:${lycan}#lycan`;
51
+
} else {
52
+
this.lycanAddress = 'did:web:lycan.feeds.blue#lycan';
53
}
54
}
55
56
setupEvents() {
57
+
this.timelineSearchForm.addEventListener('submit', (e) => {
58
e.preventDefault();
59
60
if (!this.fetchStartTime) {
···
83
}
84
}
85
});
86
+
87
+
this.lycanImportForm.addEventListener('submit', (e) => {
88
+
e.preventDefault();
89
+
this.startLycanImport();
90
+
});
91
}
92
93
/** @returns {number} */
···
100
this.pageElement.style.display = 'block';
101
102
if (this.mode == 'likes') {
103
+
this.header.innerText = 'Archive search';
104
this.timelineSearch.style.display = 'none';
105
this.searchCollections.style.display = 'block';
106
this.searchLine.style.display = 'block';
107
+
this.lycanImportSection.style.display = 'none';
108
+
this.checkLycanImportStatus();
109
} else {
110
+
this.header.innerText = 'Timeline search';
111
this.timelineSearch.style.display = 'block';
112
this.searchCollections.style.display = 'none';
113
+
this.lycanImportSection.style.display = 'none';
114
+
}
115
+
}
116
+
117
+
/** @returns {Promise<void>} */
118
+
119
+
async checkLycanImportStatus() {
120
+
if (this.isCheckingStatus) {
121
+
return;
122
+
}
123
+
124
+
this.isCheckingStatus = true;
125
+
126
+
try {
127
+
let response = await this.getImportStatus();
128
+
this.showImportStatus(response);
129
+
} catch (error) {
130
+
this.showImportError(`Couldn't check import status: ${error}`);
131
+
} finally {
132
+
this.isCheckingStatus = false;
133
+
}
134
+
}
135
+
136
+
/** @returns {Promise<json>} */
137
+
138
+
async getImportStatus() {
139
+
if (this.localLycan) {
140
+
return await this.localLycan.getRequest('blue.feeds.lycan.getImportStatus', { user: accountAPI.user.did });
141
+
} else {
142
+
return await accountAPI.getRequest('blue.feeds.lycan.getImportStatus', null, {
143
+
headers: { 'atproto-proxy': this.lycanAddress }
144
+
});
145
+
}
146
+
}
147
+
148
+
/** @param {json} info */
149
+
150
+
showImportStatus(info) {
151
+
console.log(info);
152
+
153
+
if (!info.status) {
154
+
this.showImportError("Error checking import status");
155
+
return;
156
+
}
157
+
158
+
this.lycanImportStatus = info.status;
159
+
160
+
if (info.status == 'not_started') {
161
+
this.lycanImportSection.style.display = 'block';
162
+
this.lycanImportForm.style.display = 'block';
163
+
this.importProgress.style.display = 'none';
164
+
this.searchField.disabled = true;
165
+
166
+
this.stopImportTimer();
167
+
} else if (info.status == 'in_progress' || info.status == 'scheduled' || info.status == 'requested') {
168
+
this.lycanImportSection.style.display = 'block';
169
+
this.lycanImportForm.style.display = 'none';
170
+
this.importProgress.style.display = 'block';
171
+
this.searchField.disabled = true;
172
+
173
+
this.showImportProgress(info);
174
+
this.startImportTimer();
175
+
} else if (info.status == 'finished') {
176
+
this.lycanImportForm.style.display = 'none';
177
+
this.importProgress.style.display = 'block';
178
+
this.searchField.disabled = false;
179
+
180
+
this.showImportProgress({ status: 'finished', progress: 1.0 });
181
+
this.stopImportTimer();
182
+
} else {
183
+
this.showImportError("Error checking import status");
184
+
this.stopImportTimer();
185
+
}
186
+
}
187
+
188
+
/** @param {json} info */
189
+
190
+
showImportProgress(info) {
191
+
let progress = Math.max(0, Math.min(info.progress || 0));
192
+
this.importProgressBar.value = progress;
193
+
this.importProgressBar.style.display = 'inline';
194
+
195
+
let percent = Math.round(progress * 100);
196
+
this.importStatusPosition.innerText = `${percent}%`;
197
+
198
+
if (info.progress == 1.0) {
199
+
this.importStatusLabel.innerText = `Import complete ✓`;
200
+
} else if (info.position) {
201
+
let date = new Date(info.position).toLocaleString(window.dateLocale, { day: 'numeric', month: 'short', year: 'numeric' });
202
+
this.importStatusLabel.innerText = `Downloaded data until: ${date}`;
203
+
} else if (info.status == 'requested') {
204
+
this.importStatusLabel.innerText = 'Requesting import…';
205
+
} else {
206
+
this.importStatusLabel.innerText = 'Import started…';
207
+
}
208
+
}
209
+
210
+
/** @param {string} message */
211
+
212
+
showImportError(message) {
213
+
this.lycanImportSection.style.display = 'block';
214
+
this.lycanImportForm.style.display = 'none';
215
+
this.importProgress.style.display = 'block';
216
+
this.searchField.disabled = true;
217
+
218
+
this.importStatusLabel.innerText = message;
219
+
this.stopImportTimer();
220
+
}
221
+
222
+
startImportTimer() {
223
+
if (this.importTimer) {
224
+
return;
225
+
}
226
+
227
+
this.importTimer = setInterval(() => {
228
+
this.checkLycanImportStatus();
229
+
}, 3000);
230
+
}
231
+
232
+
stopImportTimer() {
233
+
if (this.importTimer) {
234
+
clearInterval(this.importTimer);
235
+
this.importTimer = undefined;
236
+
}
237
+
}
238
+
239
+
/** @returns {Promise<void>} */
240
+
241
+
async startLycanImport() {
242
+
this.showImportStatus({ status: 'requested' });
243
+
244
+
try {
245
+
if (this.localLycan) {
246
+
await this.localLycan.postRequest('blue.feeds.lycan.startImport', {
247
+
user: accountAPI.user.did
248
+
});
249
+
} else {
250
+
await accountAPI.postRequest('blue.feeds.lycan.startImport', null, {
251
+
headers: { 'atproto-proxy': this.lycanAddress }
252
+
});
253
+
}
254
+
255
+
this.startImportTimer();
256
+
} catch (err) {
257
+
console.error('Failed to start Lycan import', err);
258
+
this.showImportError(`Import failed: ${err}`);
259
}
260
}
261
···
297
daysBack = 0;
298
}
299
300
+
this.timelinePosts = timeline;
301
302
this.archiveStatus.innerText = "Timeline archive fetched: " + ((daysBack == 1) ? '1 day' : `${daysBack} days`);
303
this.searchLine.style.display = 'block';
···
316
return;
317
}
318
319
+
let matching = this.timelinePosts
320
+
.filter(x => x.post.record.text.toLowerCase().includes(query))
321
+
.map(x => Post.parseFeedPost(x));
322
323
for (let post of matching) {
324
let postView = new PostComponent(post, 'feed').buildElement();
···
329
/** @param {string} query */
330
331
searchInLycan(query) {
332
+
if (query.length == 0 || this.lycanImportStatus != 'finished') {
333
return;
334
}
335
+
336
+
this.results.innerHTML = '';
337
+
this.lycanImportSection.style.display = 'none';
338
339
let collection = this.searchForm.elements['collection'].value;
340
···
353
let response;
354
355
if (this.localLycan) {
356
+
let params = { collection, query, user: accountAPI.user.did };
357
if (cursor) params.cursor = cursor;
358
359
response = await this.localLycan.getRequest('blue.feeds.lycan.searchPosts', params);
···
362
if (cursor) params.cursor = cursor;
363
364
response = await accountAPI.getRequest('blue.feeds.lycan.searchPosts', params, {
365
+
headers: { 'atproto-proxy': this.lycanAddress }
366
});
367
}
368
···
376
return;
377
}
378
379
+
let records = await accountAPI.loadPosts(response.posts);
380
let posts = records.map(x => new Post(x));
381
382
if (!firstPageLoaded) {
+49
-4
style.css
+49
-4
style.css
···
127
padding: 6px 11px;
128
}
129
130
-
#account_menu li a {
131
display: inline-block;
132
color: #333;
133
font-size: 11pt;
···
138
background-color: hsla(210, 100%, 4%, 0.12);
139
}
140
141
-
#account_menu li a:hover {
142
background-color: hsla(210, 100%, 4%, 0.2);
143
text-decoration: none;
144
}
145
146
#account_menu li .check {
···
1074
vertical-align: middle;
1075
}
1076
1077
#private_search_page .results {
1078
margin-top: 30px;
1079
}
···
1121
background-color: transparent;
1122
}
1123
1124
#account_menu {
1125
background: hsl(210, 33.33%, 94.0%);
1126
border-color: #ccc;
1127
}
1128
1129
-
#account_menu li a {
1130
color: #333;
1131
border-color: #bbb;
1132
background-color: hsla(210, 100%, 4%, 0.12);
1133
}
1134
1135
-
#account_menu li a:hover {
1136
background-color: hsla(210, 100%, 4%, 0.2);
1137
}
1138
···
1363
1364
#private_search_page .search-query {
1365
border: 1px solid #666;
1366
}
1367
1368
#private_search_page .results-end {
···
127
padding: 6px 11px;
128
}
129
130
+
#account_menu li a[data-action] {
131
display: inline-block;
132
color: #333;
133
font-size: 11pt;
···
138
background-color: hsla(210, 100%, 4%, 0.12);
139
}
140
141
+
#account_menu li a[data-action]:hover {
142
background-color: hsla(210, 100%, 4%, 0.2);
143
text-decoration: none;
144
+
}
145
+
146
+
#account_menu li:not(.link) + li.link {
147
+
margin-top: 16px;
148
+
padding-top: 10px;
149
+
border-top: 1px solid #ccc;
150
+
}
151
+
152
+
#account_menu li.link {
153
+
margin-top: 8px;
154
+
margin-left: 2px;
155
+
}
156
+
157
+
#account_menu li.link a {
158
+
font-size: 11pt;
159
+
color: #333;
160
}
161
162
#account_menu li .check {
···
1090
vertical-align: middle;
1091
}
1092
1093
+
#private_search_page .lycan-import {
1094
+
display: none;
1095
+
1096
+
margin-top: 30px;
1097
+
border-top: 1px solid #ccc;
1098
+
padding-top: 5px;
1099
+
}
1100
+
1101
+
#private_search_page .lycan-import form p {
1102
+
line-height: 135%;
1103
+
}
1104
+
1105
+
#private_search_page .lycan-import .import-progress progress {
1106
+
margin-left: 0;
1107
+
margin-right: 6px;
1108
+
}
1109
+
1110
+
#private_search_page .lycan-import .import-progress progress + output {
1111
+
font-size: 11pt;
1112
+
}
1113
+
1114
#private_search_page .results {
1115
margin-top: 30px;
1116
}
···
1158
background-color: transparent;
1159
}
1160
1161
+
#account.active {
1162
+
color: #333;
1163
+
}
1164
+
1165
#account_menu {
1166
background: hsl(210, 33.33%, 94.0%);
1167
border-color: #ccc;
1168
}
1169
1170
+
#account_menu li a[data-action] {
1171
color: #333;
1172
border-color: #bbb;
1173
background-color: hsla(210, 100%, 4%, 0.12);
1174
}
1175
1176
+
#account_menu li a[data-action]:hover {
1177
background-color: hsla(210, 100%, 4%, 0.2);
1178
}
1179
···
1404
1405
#private_search_page .search-query {
1406
border: 1px solid #666;
1407
+
}
1408
+
1409
+
#private_search_page .lycan-import {
1410
+
border-top-color: #888;
1411
}
1412
1413
#private_search_page .results-end {