tweets-timeline.html 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. <script>
  2. if (!window['dataset']) {
  3. window.dataset = {
  4. items: [],
  5. update: function (items) {
  6. dataset.items = dataset.items.concat(items);
  7. }
  8. }
  9. }
  10. </script>
  11. <ul id="tweets" class="tweets w-75 center z-0">
  12. {% for tweet in tweets %}
  13. <li class="tweet w-100 dt">
  14. <script>
  15. dataset.update([
  16. {{ tweet | tojson }}
  17. ]);
  18. </script>
  19. {% if tweet.retweeted_by %}
  20. <div class="dt-row moon-gray">
  21. <p class="dtc w-10 tr pa1">RT</p>
  22. <p class="dtc w-90"><a class="moon-gray" href="{{ tweet.retweeted_by_url }}">{{ tweet.retweeted_by }} Retweeted</a></p>
  23. </div>
  24. {% endif %}
  25. <div class="dt-row">
  26. {% include "partial/timeline-tweet.html" %}
  27. </div>
  28. <div class="dt-row">
  29. <div class="dtc"></div>
  30. <div class="dtc ">
  31. <p class="tweet-actions-box">
  32. <a hx-get="/twitter/data/thread/{{ tweet.conversation_id }}?me={{ me }}" hx-target="#tweets" hx-swap="outerHTML">view author thread</a>
  33. |
  34. <a hx-get="/twitter/data/conversation/{{ tweet.conversation_id }}?me={{ me }}" hx-target="#tweets" hx-swap="outerHTML">view full convo</a>
  35. |
  36. <a class="tweet-action bookmark" href="#">bookmark</a>
  37. <a class="tweet-action copy-formatted" href="#">copy formatted</a>
  38. |
  39. <a class="tweet-action swipe-to-note" href="#">swipe to note</a>
  40. </p>
  41. </div>
  42. </div>
  43. </li>
  44. {% endfor %}
  45. {% if query.next_data_url %}
  46. <li style="height: 50px; vertical-align: middle"
  47. hx-get="{{ query.next_data_url }}"
  48. hx-trigger="revealed"
  49. hx-swap="outerHTML"
  50. hx-select="ul#tweets > li"
  51. >
  52. <center style="height: 100%">
  53. <span class="js-only">
  54. Loading more tweets...
  55. </span>
  56. {% if query.next_page_url %}
  57. <a href="{{ query.next_page_url }}">
  58. Go to Next Page
  59. </a>
  60. {% endif %}
  61. <script>
  62. var profileDataEl = document.querySelector('#profile-data');
  63. if (window['dataset'] && profileDataEl) {
  64. profileDataEl.innerHTML = dataset.items.filter(i => 'public_metrics' in i).map(i => i.public_metrics.like_count).join(', ');
  65. }
  66. </script>
  67. </center>
  68. </li>
  69. {% endif %}
  70. </ul>
  71. <script>
  72. var profileDataEl = document.querySelector('#profile-data');
  73. if (window['dataset'] && profileDataEl) {
  74. profileDataEl.innerHTML = dataset.items.filter(i => 'public_metrics' in i).map(i => i.public_metrics.like_count).join(', ');
  75. }
  76. </script>