Finish table of contents and pagination

layouts/_default/list.html

@@ -10,8 +10,10 @@
     {{ .Content }}
 
     <section>
-        {{ range .Pages }}
+        {{ range .Paginator.Pages }}
             {{ partial "card.html" . }}
         {{ end }}
     </section>
+
+    {{ partial "pagination.html" . }}
 {{ end }}

layouts/_default/single.html

@@ -5,33 +5,40 @@
 {{ end }}
 
 {{ define "main" }}
-    {{ partial "breadcrumb.html" . }}
+    <div id="container">
+        <div>
+            {{ partial "breadcrumb.html" . }}
+        
+            <section id="metadata">
+                <h1>{{ .Title }}</h1>
+                <div>
+                    <span>{{ readFile "assets/icons/calendar.svg" | safeHTML }} {{ .Date.Format .Site.Params.dateFormat }}</span>
+                    <span>{{ readFile "assets/icons/clock.svg" | safeHTML }} {{ printf "%d minute(s) read" .ReadingTime }}</span>
+                    <span
+                        id="share"
+                        data-title="{{ .Title }}"
+                        data-description="{{ .Params.description }}"
+                        data-url="{{ .Permalink }}"
+                    >
+                        {{ readFile "assets/icons/share.svg" | safeHTML }}
+                        Share
+                    </span>
+                </div>
+            </section>
+            
+            <section id="content">
+                <div>
+                    {{ .Content }}
+                </div>
+                
+                <h2>Contact</h2>
+                {{ partial "contact-form.html" }}
+            </section>
+        </div>
 
-    <section id="metadata">
-        <h1>{{ .Title }}</h1>
-        <div>
-            <span>{{ .Date.Format .Site.Params.dateFormat }}</span>
-            <span>{{ printf "%d minutes read" .ReadingTime }}</span>
-            <span
-                id="share"
-                data-title="{{ .Title }}"
-                data-description="{{ .Params.description }}"
-                data-url="{{ .Permalink }}"
-            >
-                Share
-            </span>
-        </div>
-    </section>
-    
-    <section id="content">
-        <div>
-            {{ .Content }}
-        </div>
         {{ partial "table-of-contents.html" . }}
-    </section>
+    </div>
 
-    <h2>Contact</h2>
-    {{ partial "contact-form.html" }}
     
     <script>
         document.querySelector('#share').addEventListener('click', async event => {

layouts/partials/pagination.html

@@ -0,0 +1,32 @@
+{{ $styles := resources.Get "css/partials/pagination.css" | toCSS | minify }}
+
+<link rel="stylesheet" href="{{ $styles.Permalink }}" />
+
+{{ $paginator := .Paginator }}
+{{ if gt $paginator.TotalPages 1 }}
+    <div class="pagination">
+        <a class="first {{ if eq $paginator.PageNumber $paginator.First.PageNumber }} active {{ end }}" href="{{ $paginator.First.URL }}">
+            {{ $paginator.First.PageNumber }}
+        </a>
+        {{ with $paginator.HasPrev }}
+            <a href="{{ $paginator.Prev.URL }}">
+                «
+            </a>
+        {{ end }}
+        {{ range $index, $pager := $paginator.Pagers }}
+            {{ with and (ne $index 0) (ne $index (sub (len $paginator.Pagers) 1)) }}
+                <a class="{{ if eq $pager $paginator }} active {{ end }}" href="{{ $pager.URL }}">
+                    {{ $pager.PageNumber }}
+                </a>
+            {{ end }}
+        {{ end }}
+        {{ with $paginator.HasNext }}
+            <a href="{{ $paginator.Next.URL }}">
+                »
+            </a>
+        {{ end }}
+        <a class="last {{ if eq $paginator.PageNumber $paginator.Last.PageNumber }} active {{ end }}" href="{{ $paginator.Last.URL }}">
+            {{ $paginator.Last.PageNumber }}
+        </a>
+    </div>
+{{ end }}

layouts/partials/table-of-contents.html

@@ -2,6 +2,9 @@
 
 <link rel="stylesheet" href="{{ $styles.Permalink }}" />
 
-<aside>
-    {{ .TableOfContents }}
-</aside>
+{{ with .TableOfContents }}
+    <aside id="table-of-contents">
+        <h3>Table of contents</h3>
+        {{ . }}
+    </aside>
+{{ end }}