adds paging support to user permalinks

controllers/controllers.php

@@ -193,18 +193,43 @@ $app->post('/post', function() use($app) {
 });
 
 $app->get('/:domain', function($domain) use($app) {
+  $params = $app->request()->params();
+
   $user = ORM::for_table('users')->where('url', $domain)->find_one();
   if(!$user) {
     $app->notFound();
     return;
   }
 
-  $entries = ORM::for_table('entries')->where('user_id', $user->id)->find_many();
+  $per_page = 10;
+
+  $entries = ORM::for_table('entries')->where('user_id', $user->id);
+  if(array_key_exists('before', $params)) {
+    $entries->where_lte('id', $params['before']);
+  }
+  $entries = $entries->limit($per_page)->order_by_desc('published')->find_many();
+
+  $older = ORM::for_table('entries')->where('user_id', $user->id)
+    ->where_lt('id', $entries[count($entries)-1]->id)->order_by_desc('published')->find_one();
+
+  $newer = ORM::for_table('entries')->where('user_id', $user->id)
+    ->where_gte('id', $entries[0]->id)->order_by_asc('published')->offset($per_page)->find_one();
+
+  if(!$newer) {
+    // no new entry was found at the specific offset, so find the newest post to link to instead
+    $newer = ORM::for_table('entries')->where('user_id', $user->id)
+      ->order_by_desc('published')->limit(1)->find_one();
+
+    if($newer->id == $entries[0]->id)
+      $newer = false;
+  }
 
   $html = render('entries', array(
     'title' => 'Teacup',
     'entries' => $entries,
-    'user' => $user
+    'user' => $user,
+    'older' => ($older ? $older->id : false),
+    'newer' => ($newer ? $newer->id : false)
   ));
   $app->response()->body($html);
 });

public/css/style.css

@@ -205,6 +205,93 @@ body {
 
 
 
+/**
+ * Site Navigation Buttons
+ */
+.site-navigation {
+  padding-bottom: 10px;
+  font-size: 13px;
+  text-align: center;
+}
+.site-navigation ul {
+  list-style-type: none;
+  margin: 0;
+}
+.site-navigation .prev {
+  float: left;
+}
+.site-navigation .next {
+  float: right;
+}
+.site-navigation::after {
+  clear: both;
+  display: table;
+  content: "";
+}
+.site-navigation .disabled {
+  color: #ccc;
+}
+
+.site-navigation a.up {
+  height: 1.5em;
+  font-size: 10px;
+}
+.site-navigation a.up abbr {
+  padding-top: 1em;
+  display: block;
+  font-size: 14px;
+}
+
+/* Paging Buttons */
+/* Thanks tantek.com for the design inspiration */
+a.prev, a.next {
+  font-size: 10px;
+  width: 11.4em;
+  height: 6.5em;
+  padding: 0.2em 0 3em 0.1em;
+  margin-right: .3em;
+  text-align: center;
+  background: #d9d9d9;
+  border-radius: 1em;
+  border: .1em solid #CCC;
+  -webkit-border-radius: 1em;
+  -moz-border-radius: 1em;
+  line-height: 3em;
+}
+a.prev:hover, a.next:hover, 
+a.prev.hover, a.next.hover {
+  text-decoration: none;
+  background: #c9c9c9;
+  border-color: #AAA;
+}
+a.prev.disabled, a.next.disabled, 
+a.prev.disabled.hover, a.next.disabled.hover,
+a.prev.disabled:hover, a.next.disabled:hover {
+  text-decoration: none;
+  background: #f0f0f0;
+  border-color: #d9d9d9;
+  cursor: default;
+}
+a.prev.disabled abbr, a.next.disabled abbr, a.prev.disabled span, a.next.disabled span {
+  cursor: default;
+}
+a.prev abbr, a.next abbr {
+  display: block;
+  border-bottom: 0;
+  cursor: pointer;
+  font-size: 4em;
+  vertical-align: bottom;
+}
+a.prev span, a.next span {
+  font-size: 1.8em;
+  line-height: 1.2em;
+}
+
+
+
+
+
+
 /**
  entries
  */

views/entries.php

@@ -7,4 +7,17 @@
       <?= partial('partials/entry', array('entry' => $entry, 'user' => $this->user)) ?>
     <?php endforeach; ?>
   </ul>
+
+  <nav class="site-navigation">
+    <? if($this->older) { ?>
+      <a class="prev" href="/<?= $this->user->url ?>?before=<?= $this->older ?>" rel="prev"><abbr>&larr;</abbr> <span>Older</span></a>
+    <? } else { ?>
+      <a class="prev disabled"><abbr>&larr;</abbr> <span>Older</span></a>
+    <? } ?>
+    <? if($this->newer) { ?>
+      <a class="next" href="/<?= $this->user->url ?>?before=<?= $this->newer ?>" rel="next"><abbr>&rarr;</abbr> <span>Newer</span></a>
+    <? } else { ?>
+      <a class="next disabled"><abbr>&rarr;</abbr> <span>Newer</span></a>
+    <? } ?>
+  </nav>
 </div>