···

       
168
       
 
       
  .alt {

     

       
169
       
 
       
    padding: 10px;

     

       
170
       
 
       
  }

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
171
       
 
       
}
     

···

       
168
       
 
       
  .alt {

     

       
169
       
 
       
    padding: 10px;

     

       
170
       
 
       
  }

     

       
171
       
+
       
}

     

       
172
       
+
       


     

       
173
       
+
       
@keyframes fadeOut {

     

       
174
       
+
       
  0% {

     

       
175
       
+
       
    opacity: 100%;

     

       
176
       
+
       
  }

     

       
177
       
+
       
  

     

       
178
       
+
       
  100% {

     

       
179
       
+
       
    opacity: 0;

     

       
180
       
+
       
  }

     

       
181
       
+
       
}

     

       
182
       
+
       


     

       
183
       
+
       
.copy-tooltip {

     

       
184
       
+
       
  position: absolute;

     

       
185
       
+
       
  z-index: 99;

     

       
186
       
+
       
  padding: 3px;

     

       
187
       
+
       
  text-transform: lowercase;

     

       
188
       
+
       
  background-color: var(--btn-primary-bg);

     

       
189
       
+
       
  color: var(--text-color);

     

       
190
       
+
       
  animation: fadeOut 1s;

     

       
191
       
+
       
  animation-delay: 2s;

     

       
192
       
 
       
}
     

···

       
1
       
-
       
const loadPost = async (post) => {

     

       
2
       
 
       
  post.setAttribute('data-status', 'loading');

     

       
3
       
 
       
  const urlComponents = post.getAttribute('data-uri').split(/at:\/\/(did:plc:[a-z0-9]+)\/app\.bsky\.feed\.post\/([a-z0-9]+)/);

     

       
4
       
 
       
  fetch('/api/post/'+urlComponents[1]+'/'+urlComponents[2])

     

       
5
       
 
       
    .then((data) => {

     

       
6
       
 
       
      data.text().then((content) => {

     

       
7
       
 
       
        post.innerHTML = content;

     

       
8
       
-
       
        post.setAttribute('data-status', 'loaded');

     

       
9
       
 
       
        Promise.all([

     

       
10
       
 
       
          fetch('/api/likes/'+urlComponents[1]+"/"+urlComponents[2]),

     

       
11
       
 
       
          fetch('/api/replies/'+urlComponents[1]+"/"+urlComponents[2]),

     
···

       
14
       
 
       
        ]).then((values) => {

     

       
15
       
 
       
          values[0].json().then((likes) => {

     

       
16
       
 
       
            post.querySelector('.like-count').textContent = likes.total;

     

       
17
       
-
       
            if (document.getElementById('interactions')) {

     

       
18
       
 
       
              document.getElementById('likes').querySelector('.inner').innerHTML = likes.rendered;

     

       
19
       
 
       
            }

     

       
20
       
 
       
          });

     

       
21
       
 
       
          values[1].json().then((replies) => {

     

       
22
       
 
       
            post.querySelector('.reply-count').textContent = replies.total;

     

       
23
       
-
       
            if (document.getElementById('interactions')) {

     

       
24
       
 
       
              document.getElementById('replies').querySelector('.inner').innerHTML = replies.rendered;

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
25
       
 
       
            }

     

       
26
       
 
       
          });

     

       
27
       
 
       
          values[2].json().then((reposts) => {

     

       
28
       
 
       
            post.querySelector('.repost-count').textContent = reposts.total;

     

       
29
       
-
       
            if (document.getElementById('interactions')) {

     

       
30
       
 
       
              document.getElementById('reposts').querySelector('.inner').innerHTML = reposts.rendered;

     

       
31
       
 
       
            }

     

       
32
       
 
       
          });

     

       
33
       
 
       
          values[3].json().then((quotes) => {

     

       
34
       
 
       
            post.querySelector('.quote-count').textContent = quotes.total;

     

       
35
       
-
       
            if (document.getElementById('interactions')) {

     

       
36
       
 
       
              document.getElementById('quotes').querySelector('.inner').innerHTML = quotes.rendered;

     

       
37
       
 
       
            }

     

       
38
       
 
       
          });

     

       
0
       
 
       

     

       
39
       
 
       
        })

     

       
40
       
 
       
      });

     

       
41
       
 
       
    });

     
···

       
44
       
 
       
document.addEventListener('click', (e) => {

     

       
45
       
 
       
  if (e.target.closest('.post .postSharing a')) {

     

       
46
       
 
       
    e.preventDefault();

     

       
0
       
 
       

     

       
47
       
 
       
    const link = e.target.closest('.post .postSharing a');

     

       
48
       
 
       
    const url = link.getAttribute('data-share');

     

       
49
       
 
       
    navigator.clipboard.writeText(url);

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
50
       
 
       
  }

     

       
51
       
 
       
});

     

       
52
       
 
       


     

       
53
       
 
       
window.addEventListener('load', (_e) => {

     

       
54
       
 
       
  document.querySelectorAll('[data-status="unloaded"]').forEach(async (post) => {

     

       
55
       
-
       
    loadPost(post);

     

       
56
       
 
       
  });

     

       
57
       
 
       
});
     

···

       
1
       
+
       
const loadPost = async (post, toplevel = false) => {

     

       
2
       
 
       
  post.setAttribute('data-status', 'loading');

     

       
3
       
 
       
  const urlComponents = post.getAttribute('data-uri').split(/at:\/\/(did:plc:[a-z0-9]+)\/app\.bsky\.feed\.post\/([a-z0-9]+)/);

     

       
4
       
 
       
  fetch('/api/post/'+urlComponents[1]+'/'+urlComponents[2])

     

       
5
       
 
       
    .then((data) => {

     

       
6
       
 
       
      data.text().then((content) => {

     

       
7
       
 
       
        post.innerHTML = content;

     

       
0
       
 
       

     

       
8
       
 
       
        Promise.all([

     

       
9
       
 
       
          fetch('/api/likes/'+urlComponents[1]+"/"+urlComponents[2]),

     

       
10
       
 
       
          fetch('/api/replies/'+urlComponents[1]+"/"+urlComponents[2]),

     
···

       
13
       
 
       
        ]).then((values) => {

     

       
14
       
 
       
          values[0].json().then((likes) => {

     

       
15
       
 
       
            post.querySelector('.like-count').textContent = likes.total;

     

       
16
       
+
       
            if (toplevel) {

     

       
17
       
 
       
              document.getElementById('likes').querySelector('.inner').innerHTML = likes.rendered;

     

       
18
       
 
       
            }

     

       
19
       
 
       
          });

     

       
20
       
 
       
          values[1].json().then((replies) => {

     

       
21
       
 
       
            post.querySelector('.reply-count').textContent = replies.total;

     

       
22
       
+
       
            if (toplevel) {

     

       
23
       
 
       
              document.getElementById('replies').querySelector('.inner').innerHTML = replies.rendered;

     

       
24
       
+
       
              document.getElementById('replies').querySelectorAll('.inner .post').forEach((reply) => {

     

       
25
       
+
       
                loadPost(reply);

     

       
26
       
+
       
              });

     

       
27
       
 
       
            }

     

       
28
       
 
       
          });

     

       
29
       
 
       
          values[2].json().then((reposts) => {

     

       
30
       
 
       
            post.querySelector('.repost-count').textContent = reposts.total;

     

       
31
       
+
       
            if (toplevel) {

     

       
32
       
 
       
              document.getElementById('reposts').querySelector('.inner').innerHTML = reposts.rendered;

     

       
33
       
 
       
            }

     

       
34
       
 
       
          });

     

       
35
       
 
       
          values[3].json().then((quotes) => {

     

       
36
       
 
       
            post.querySelector('.quote-count').textContent = quotes.total;

     

       
37
       
+
       
            if (toplevel) {

     

       
38
       
 
       
              document.getElementById('quotes').querySelector('.inner').innerHTML = quotes.rendered;

     

       
39
       
 
       
            }

     

       
40
       
 
       
          });

     

       
41
       
+
       
          post.setAttribute('data-status', 'loaded');

     

       
42
       
 
       
        })

     

       
43
       
 
       
      });

     

       
44
       
 
       
    });

     
···

       
47
       
 
       
document.addEventListener('click', (e) => {

     

       
48
       
 
       
  if (e.target.closest('.post .postSharing a')) {

     

       
49
       
 
       
    e.preventDefault();

     

       
50
       
+
       
    console.log(e);

     

       
51
       
 
       
    const link = e.target.closest('.post .postSharing a');

     

       
52
       
 
       
    const url = link.getAttribute('data-share');

     

       
53
       
 
       
    navigator.clipboard.writeText(url);

     

       
54
       
+
       
    const tooltip = document.createElement('span');

     

       
55
       
+
       
    tooltip.classList.add("copy-tooltip");

     

       
56
       
+
       
    tooltip.textContent = "Copied!";

     

       
57
       
+
       
    tooltip.style.top = e.y+"px";

     

       
58
       
+
       
    tooltip.style.left = e.x+"px";

     

       
59
       
+
       
    document.body.append(tooltip);

     

       
60
       
+
       
    setTimeout(() => {

     

       
61
       
+
       
      tooltip.remove();

     

       
62
       
+
       
    }, 3000);

     

       
63
       
 
       
  }

     

       
64
       
 
       
});

     

       
65
       
 
       


     

       
66
       
 
       
window.addEventListener('load', (_e) => {

     

       
67
       
 
       
  document.querySelectorAll('[data-status="unloaded"]').forEach(async (post) => {

     

       
68
       
+
       
    loadPost(post, true);

     

       
69
       
 
       
  });

     

       
70
       
 
       
});
     

···

       
1
       
 
       
<div class="postHeader">

     

       
2
       
 
       
  <div class="avatar">

     

       
3
       
-
       
    <a href="{$post->author->profileLink}"><img src="{$post->author->avatar}" alt="{$post->author->displayName}'s user icon" /></a>

     

       
4
       
 
       
  </div>

     

       
5
       
 
       
  <div class="displayName"><a href="{$post->author->profileLink}">{$post->author->displayName|noescape}</a></div>

     

       
6
       
 
       
  <div class="handle"><a href="{$post->author->profileLink}">{$post->author->handle}</a></div>

     

···

       
1
       
 
       
<div class="postHeader">

     

       
2
       
 
       
  <div class="avatar">

     

       
3
       
+
       
    <a href="{$post->author->profileLink}"><img src="{$post->author->avatar}" alt="{$post->author->displayName}'s user icon" loading="lazy" /></a>

     

       
4
       
 
       
  </div>

     

       
5
       
 
       
  <div class="displayName"><a href="{$post->author->profileLink}">{$post->author->displayName|noescape}</a></div>

     

       
6
       
 
       
  <div class="handle"><a href="{$post->author->profileLink}">{$post->author->handle}</a></div>