Add pagination

assets/sass/_pagination.scss

@@ -0,0 +1,56 @@
+.pagination {
+    display: flex;
+    margin: 2rem auto 0;
+    max-width: 150px;
+    justify-content: space-evenly;
+
+    list-style: none;
+    user-select: none;
+
+    .page-item {
+        a {
+            transition: background-color 100ms ease-in;
+            background-color: rgba(white, 0.05);
+            padding: 1rem;
+
+            text-decoration: none;
+
+            &:hover {
+                background-color: rgba(white, 0.1);
+            }
+        }
+
+        &.disabled,
+        &.active {
+            a {
+                cursor: not-allowed;
+            }
+        }
+
+        &.disabled {
+            a {
+                background-color: rgba(white, 0.025);
+            }
+        }
+
+        &.active {
+            a {
+                background-color: rgba(white, 0.1);
+            }
+        }
+
+        &:first-child {
+            a {
+                border-top-left-radius: 1rem;
+                border-bottom-left-radius: 1rem;
+            }
+        }
+
+        &:last-child {
+            a {
+                border-top-right-radius: 1rem;
+                border-bottom-right-radius: 1rem;
+            }
+        }
+    }
+}

assets/sass/app.scss

@@ -16,4 +16,5 @@
 
 // Component-specific styling
 @import "compact-list";
+@import "pagination";
 @import "list";

layouts/partials/generic-list.html

@@ -1,7 +1,11 @@
+{{ $page := index $ "page" }}
+
 {{ $labelSingular := index $ "labelSingular" }}
+{{ $pageType := index $ "pageType"}}
+
+{{ $pagination := index $ "pagination" }}
 {{ $labelPlural := or (index $ "labelPlural") (print $labelSingular "s") }}
 {{ $maximumListSize := or (index $ "maximumListSize") 3 }}
-{{ $pageType := index $ "pageType"}}
 {{ $viewAllHref := or (index $ "viewAllHref") (print "/" $labelPlural) }}
 
 <section class="list">
@@ -16,7 +20,11 @@
     </div>
     <div class="list-items-container">
         <ul class="list-items">
-            {{ range ( first $maximumListSize (where site.RegularPages "Type" $pageType).ByDate.Reverse ) }}
+            {{ $entries := (where site.RegularPages "Type" $pageType).ByDate.Reverse }}
+
+            {{ if $pagination }}
+            {{ $paginator := $page.Paginate $entries }}
+            {{ range $paginator.Pages }}
             <li class="list-item" data-href="{{ .Permalink }}" role="button">
                 <img class="list-item-image" src="//via.placeholder.com/128" alt="{{ index $ "labelSingular" }} Topic">
                 <div class="list-item-text">
@@ -25,6 +33,18 @@
                 </div>
             </li>
             {{ end }}
+            {{ template "_internal/pagination.html" $page }}
+            {{ else }}
+            {{ range ( first $maximumListSize $entries ) }}
+                <li class="list-item" data-href="{{ .Permalink }}" role="button">
+                    <img class="list-item-image" src="//via.placeholder.com/128" alt="{{ index $ "labelSingular" }} Topic">
+                    <div class="list-item-text">
+                        <h4 class="list-item-title">{{ .Title }}</h4>
+                        <span class="list-item-date">{{ .Date.Format "January 2, 2006" }}</span>
+                    </div>
+                </li>
+            {{ end }}
+            {{ end }}
         </ul>
     </div>
 </section>

layouts/partials/snippet-list.html

@@ -1,3 +1,5 @@
 {{ $showViewAllButton := or (index $ "showViewAllButton") false }}
+{{ $pagination := or (index $ "pagination") false }}
+{{ $page := index $ "page" }}
 
-{{ partial "generic-list" (dict "labelSingular" "snippet" "pageType" "snippets" "showViewAllButton" $showViewAllButton) }}
+{{ partial "generic-list" (dict "labelSingular" "snippet" "pageType" "snippets" "showViewAllButton" $showViewAllButton "page" $page "pagination" $pagination) }}

layouts/snippets/list.html

@@ -1,3 +1,3 @@
 {{ define "main" }}
-{{ partial "snippet-list" (dict) }}
+{{ partial "snippet-list" (dict "page" . "pagination" true) }}
 {{ end }}