feat: add pagination

layouts/index.html

@@ -2,40 +2,43 @@
 {{ partial "profile.html" . }}
 
 <div id="list-page">
-    {{ $pages := where .Site.RegularPages "Params.hidden" "ne" "true" }}
+    {{ $pages := .Site.RegularPages }}
     {{ $paginator := .Paginate ($pages) }}
     {{ range $paginator.Pages }}
         {{ $title := .Title }}
         {{ $summary := .Summary }}
+        {{ $date := dateFormat "Jan 2, 2006" .Date }}
         <section class="item">
           <div>
             <h1 class="title"><a href='{{ .RelPermalink }}'>{{ $title }}</a></h1>   
-            <div class="date">{{ .Date.Format "Jan 2" }}</div>
+            <div class="date">{{ $date }}</div>
           </div>
 
           <div class="summary">{{ $summary | plainify | htmlUnescape }}</div>
 
+        </section>
+    {{ end }}
 
-
-          {{ with .Resources.ByType "image" }}
-            {{ $image := index . 1 }}  
-            {{ range .  }}
-              {{ if eq .Name "images/cover.png" }} 
-                {{ $image = . }}
-              {{ else if eq .Name "images/cover.jpg" }}
-                {{ $image = . }}
-              {{ else if eq .Name "images/cover.jpeg" }}
-                {{ $image = . }}
-              {{ end }}
-            {{ end }}
-
-            <div class="cover">
-              <img src="{{ $image.RelPermalink }}" alt="{{ $title }}">
-            </div>
+    {{ if or ($paginator.HasPrev) ($paginator.HasNext) }}
+        <div class="pagination">
+          {{ if $paginator.HasPrev }}
+              <span class="prev">
+                  <a href="{{.Paginator.Prev.URL}}">
+                      <span class="arrow">←</span> {{ with .Site.Params.newerPosts }}{{ . }}{{ else }}Newer Posts{{ end }}
+                  </a>
+            </span>
           {{ end }}
-
-        </section>
+          
+          {{ if $paginator.HasNext }}
+              <span class="next">
+                  <a href="{{.Paginator.Next.URL}}">
+                      {{ with .Site.Params.olderPosts }}{{ . }}{{ else }}Older Posts{{ end }} <span class="arrow">→</span>
+                  </a>
+              </span>
+          {{ end }}
+        </div>
     {{ end }}
 
+
 </div>
 {{ end }}

static/css/style.css

@@ -252,7 +252,7 @@ nav.navigation a.button {
 }
 
 #list-page .summary {
-  color: #6a737d;
+  color: #8c8c8c;
   margin-top: 12px;
 }
 
@@ -265,4 +265,18 @@ nav.navigation a.button {
 #list-page .cover img {
   width: 100%;
   text-align: center;
+}
+
+#list-page .pagination {
+  margin: 48px 0;
+  width: 100%;
+  height: 32px;
+  margin-top: 48px;
+}
+
+#list-page .pagination .pre {
+  float: left;
+}
+#list-page .pagination .next {
+  float: right;
 }