Add pagination

layouts/index.html

@@ -1,29 +1,36 @@
 {{ define "main" -}}
-<div class="posts">
-  {{ range .Site.RegularPages -}}
-    {{ if and (or (eq .Type "post") (eq .Type "article")) (or (not (isset .Params "Hidden")) (eq .Params.Hidden false)) -}}
-    <article class="post">
-      <h1 class="post-title">
-        <a href="{{ .Permalink }}">{{ .Title }}</a>
-      </h1>
+  <div class="posts">
+    {{- $regularPages := where .Site.RegularPages "Type" "in" .Site.Params.MainSections -}}
+    {{- $pagesNotHidden := where $regularPages ".Params.hidden" "==" false -}}
+    {{- $pagesHiddenUnset := where $regularPages ".Params.hidden" "==" nil -}}
 
-      <div class="post-date">
-        <time datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}">{{ .Date.Format "Jan 2, 2006" }}</time> · {{ .ReadingTime }} min read
-      </div>
+    {{- $pages := $pagesNotHidden | union $pagesHiddenUnset -}}
+    {{- $paginator := .Paginate $pages -}}
 
-      {{ if .Description }}
-        {{ .Description }}
-      {{ else }}
-        {{ .Summary }}
-      {{ end }}
+    {{ range $paginator.Pages }}
+      <article class="post">
+        <h1 class="post-title">
+          <a href="{{ .Permalink }}">{{ .Title }}</a>
+        </h1>
 
-      {{ if .Truncated }}
-      <div class="read-more-link">
-        <a href="{{ .RelPermalink }}">Read More</a>
-      </div>
-      {{ end }}
-    </article>
+        <div class="post-date">
+          <time datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}">{{ .Date.Format "Jan 2, 2006" }}</time> · {{ .ReadingTime }} min read
+        </div>
+
+        {{ if .Description }}
+          {{ .Description }}
+        {{ else }}
+          {{ .Summary }}
+        {{ end }}
+
+        {{ if .Truncated }}
+        <div class="read-more-link">
+          <a href="{{ .RelPermalink }}">Read More</a>
+        </div>
+        {{ end }}
+      </article>
     {{- end }}
-  {{- end }}
-</div>
+  </div>
+
+  {{ template "_internal/pagination.html" . }}
 {{- end }}

static/css/hyde.css

@@ -67,6 +67,10 @@ html {
     bottom: 0;
     width: 18rem;
   }
+
+  footer {
+    padding-left: 18rem;
+  }
 }
 
 /* Sidebar links */
@@ -206,3 +210,66 @@ ul.posts {
 .social-icons a:focus {
   text-decoration: none !important;
 }
+
+.pagination {
+  justify-content: center;
+  display: flex;
+  margin: 1em 0;
+  padding: 0;
+}
+
+.pagination ul {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+.pagination li {
+  display: block;
+  float: left;
+  margin-left: -1px;
+}
+
+.pagination li a {
+  display: block;
+  margin-bottom: 0.25em;
+  padding: 0.5em 1em;
+  font-size: 14px;
+  font-weight: bold;
+  line-height: 1.5;
+  text-align: center;
+  text-decoration: none;
+  color: #49757a;
+  border: 1px solid #49757a;
+  border-radius: 0;
+}
+
+.pagination li a:hover {
+  color: #fff;
+  background: rgba(67, 118, 122, 0.75);
+}
+
+.pagination li.active a {
+  color: #fff;
+  background: #49757a;
+}
+
+.pagination li.disabled a {
+  color: rgba(67, 118, 122, 0.5);
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+.pagination li:first-child {
+  margin-left: 0;
+}
+
+.pagination li:first-child a {
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+
+.pagination li:last-child a {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}