twitter-for-coders/pages/index.html

<script>
  let feed = new ForeverScroll('/api/feed/1');
</script>

<div class="p-1" x-data="feed">
  <bar class="justify-evenly">
    <img src="/favicon.ico" />
    <b>Your Feed</b>
  </bar>

  <template x-for="message in items">
    <block class="!gap-0 border-t-1 border-gray-600">
      <bar class="justify-between !p-0 mb-3">
        <img src="/favicon.ico" />
        <span>13s</span>
      </bar>

      <block class="!p-0 gap-2 mb-2">
        <p><a x-bind:href="`/post/view/${message.id}/`" x-text="message.text"></a></p>
      </block>

      <bar class="!p-0 !pt-1 mt-4 bg-gray-800 justify-evenly rounded-full">
        <svg xmlns="http://www.w3.org/2000/svg"
          width="2rem"
          height="2rem"
          viewBox="0 0 2rem 2rem">
          <use href="/icons/reply.svg#img" />
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg"
          width="2rem"
          height="2rem"
          viewBox="0 0 2rem 2rem">
          <use href="/icons/refresh-cw.svg#img" />
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg"
          width="2rem"
          height="2rem"
          viewBox="0 0 2rem 2rem">
          <use href="/icons/heart.svg#img" />
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg"
          width="2rem"
          height="2rem"
          viewBox="0 0 2rem 2rem">
          <use href="/icons/bookmark.svg#img" />
        </svg>
      </bar>
    </block>
  </template>

  <template x-if="!end"><div x-intersect.full="load()">Loading More...</div></template>
  <template x-if="end"><div>The End. Get Back to Work.</div></template>
</div>