AverageMarcus/bsky-screenshot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tweaked css and debounced image update

Browse Source 
Signed-off-by: Marcus Noble <github@marcusnoble.co.uk>
This commit is contained in:
Marcus Noble
2025-08-22 17:42:50 +01:00
parent 0df8d48810
commit 02cce91303
3 changed files with 19 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
index.html
View File

@@ -136,8 +136,12 @@
</div> </div>
</div> </div>
<div> <div class="container">
Source code available on <a href="https://github.com/AverageMarcus/bsky-screenshot" target="_blank" rel="noopener noreferrer">GitHub</a>, <a href="https://gitlab.com/AverageMarcus/bsky-screenshot" target="_blank" rel="noopener noreferrer">GitLab</a>, <a href="https://bitbucket.org/AverageMarcus/bsky-screenshot/" target="_blank" rel="noopener noreferrer">Bitbucket</a> & <a href="https://git.cluster.fun/AverageMarcus/bsky-screenshot" target="_blank" rel="noopener noreferrer">my own Gitea server</a>. <div class="row">
<div class="column column-60 column-offset-20" style="text-align: center;">
Source code available on <a href="https://github.com/AverageMarcus/bsky-screenshot" target="_blank" rel="noopener noreferrer">GitHub</a>, <a href="https://gitlab.com/AverageMarcus/bsky-screenshot" target="_blank" rel="noopener noreferrer">GitLab</a>, <a href="https://bitbucket.org/AverageMarcus/bsky-screenshot/" target="_blank" rel="noopener noreferrer">Bitbucket</a> & <a href="https://git.cluster.fun/AverageMarcus/bsky-screenshot" target="_blank" rel="noopener noreferrer">my own Gitea server</a>.
</div>
</div>
</div> </div>
</div> </div>

11
script.js
View File

@@ -23,6 +23,7 @@ function setWidth(value) {
} }
(() => { (() => {
var timeout;
let {bskyPost, config} = bindIt({ let {bskyPost, config} = bindIt({
config: { config: {
corsProxy: "https://corsproxy.io/?url=", corsProxy: "https://corsproxy.io/?url=",
@@ -163,19 +164,20 @@ function setWidth(value) {
bskyPost.externalLink.domain = record.value.embed.external.uri.replaceAll("https://", "").split("/")[0]; bskyPost.externalLink.domain = record.value.embed.external.uri.replaceAll("https://", "").split("/")[0];
bskyPost.externalLink.image = `${config.corsProxy}https://cdn.bsky.app/img/feed_thumbnail/plain/${did}/${record.value.embed.external.thumb.ref["$link"]}@jpeg`; bskyPost.externalLink.image = `${config.corsProxy}https://cdn.bsky.app/img/feed_thumbnail/plain/${did}/${record.value.embed.external.thumb.ref["$link"]}@jpeg`;
} }
updateImage();
} }
function updateImage() { function updateImage() {
window.requestAnimationFrame(function() { if (timeout) {
window.cancelAnimationFrame(timeout);
}
timeout = window.requestAnimationFrame(function() {
domtoimage.toPng(document.getElementById('post'), { cacheBust: false }) domtoimage.toPng(document.getElementById('post'), { cacheBust: false })
.then(function (dataUrl) { .then(function (dataUrl) {
document.getElementById('result-image').src = dataUrl; document.getElementById('result-image').src = dataUrl;
}); });
}); });
} }
[...document.querySelectorAll('img')].forEach(el => el.addEventListener("load", updateImage)); [...document.querySelectorAll('#post img'), ...document.querySelectorAll('#input-form input')].forEach(el => el.addEventListener("load", updateImage));
document.getElementById('submit').addEventListener('click', loadPost); document.getElementById('submit').addEventListener('click', loadPost);
document.getElementById('post-url').addEventListener('change', loadPost); document.getElementById('post-url').addEventListener('change', loadPost);
@@ -188,5 +190,4 @@ function setWidth(value) {
link.href = document.getElementById('result-image').src; link.href = document.getElementById('result-image').src;
link.click(); link.click();
}); });
})(); })();

10
style.css
View File

@@ -1,4 +1,3 @@
body { body {
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
@@ -257,7 +256,12 @@ body {
font-variant: no-contextual; font-variant: no-contextual;
} }
#download, #result-image { #result-image {
display: block; display: block;
margin: 30px auto; margin: 20px auto;
}
#download {
display: block;
margin: 10px auto 30px;
} }