Make the feed sorted the right way and just show a feed on the main page.

api/feed.go

@@ -19,6 +19,7 @@ func GetApiFeed(c *fiber.Ctx) error {
     Limit(2).
     Offset(uint64(2 * page)).
     From("message").
+    OrderBy("created_at DESC").
     Where(sq.Eq{"user_id": c.Params("user_id")}).ToSql()
 
   if err != nil { return IfErrNil(err, c) }

pages/index.html

@@ -1,3 +1,59 @@
-<h1>Twitter for Coders</h1>
+<script>
+  let feed = new ForeverScroll('/api/feed/1');
+</script>
 
-<p>I don't have a better name, but go <a href="/feed/">here</a> for the prototype UI.</p>
+<div class="p-1" x-data="feed">
+  <bar class="justify-evenly">
+    <img src="/favicon.ico" />
+    <b>Notifications</b>
+    <svg xmlns="http://www.w3.org/2000/svg"
+      width="2rem"
+      height="2rem"
+      viewBox="0 0 2rem 2rem">
+      <use href="/icons/settings.svg#settings" />
+    </svg>
+  </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>