Add pagination

16 files changed, 121 insertions, 4 deletions

diff --git a/assets/css/components/_pagination.scss b/assets/css/components/_pagination.scss
new file mode 100644
index 0000000..cc0d8a1
--- /dev/null
+++ b/assets/css/components/_pagination.scss
@@ -0,0 +1,24 @@
+.pagination {
+  display: block;
+  list-style: none;
+  padding: 0;
+  font-size: 0.8em;
+  text-align: center;
+  margin: 3em 0;
+}
+
+.page-item {
+  display: inline-block;
+  .page-link {
+    display: block;
+    padding: 0.285em 0.8em;
+  }
+
+  &.active {
+    .page-link {
+      color: $lightest-color;
+      border-radius: 2em;
+      background: $primary-color;
+    }
+  }
+}
diff --git a/assets/css/main.scss b/assets/css/main.scss
index 8635974..55ea2f8 100644
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -8,7 +8,8 @@ $primary-color: {{ .Site.Params.style.primaryColor | default "#57cc8a" }};
 
 @import 'components/app';
 @import 'components/icon';
-@import 'components/tag';
+@import 'components/pagination';
 @import 'components/post';
 @import 'components/posts_list';
+@import 'components/tag';
 
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 31ab880..774dcba 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -2,6 +2,7 @@ baseURL = "https://example.com"
 title = "Your title"
 themesDir = "../.."
 theme = "m10c"
+paginate = 5
 
 [params]
   author = "John Doe"
diff --git a/exampleSite/content/posts/test-1.md b/exampleSite/content/posts/test-1.md
new file mode 100644
index 0000000..076b555
--- /dev/null
+++ b/exampleSite/content/posts/test-1.md
@@ -0,0 +1,7 @@
++++
+title = "Test 1"
+tags = ["test"]
+date = "1012-01-01"
++++
+
+Test 1
diff --git a/exampleSite/content/posts/test-2.md b/exampleSite/content/posts/test-2.md
new file mode 100644
index 0000000..a23643a
--- /dev/null
+++ b/exampleSite/content/posts/test-2.md
@@ -0,0 +1,7 @@
++++
+title = "Test 2"
+tags = ["test"]
+date = "1012-01-02"
++++
+
+Test 2
diff --git a/exampleSite/content/posts/test-3.md b/exampleSite/content/posts/test-3.md
new file mode 100644
index 0000000..51ae401
--- /dev/null
+++ b/exampleSite/content/posts/test-3.md
@@ -0,0 +1,7 @@
++++
+title = "Test 3"
+tags = ["test"]
+date = "1012-01-03"
++++
+
+Test 3
diff --git a/exampleSite/content/posts/test-4.md b/exampleSite/content/posts/test-4.md
new file mode 100644
index 0000000..40194fb
--- /dev/null
+++ b/exampleSite/content/posts/test-4.md
@@ -0,0 +1,7 @@
++++
+title = "Test 4"
+tags = ["test"]
+date = "1012-01-04"
++++
+
+Test 4
diff --git a/exampleSite/content/posts/test-5.md b/exampleSite/content/posts/test-5.md
new file mode 100644
index 0000000..3feaec8
--- /dev/null
+++ b/exampleSite/content/posts/test-5.md
@@ -0,0 +1,7 @@
++++
+title = "Test 5"
+tags = ["test"]
+date = "1012-01-05"
++++
+
+Test 5
diff --git a/exampleSite/content/posts/test-6.md b/exampleSite/content/posts/test-6.md
new file mode 100644
index 0000000..919731e
--- /dev/null
+++ b/exampleSite/content/posts/test-6.md
@@ -0,0 +1,7 @@
++++
+title = "Test 6"
+tags = ["test"]
+date = "1012-01-06"
++++
+
+Test 6
diff --git a/exampleSite/content/posts/test-7.md b/exampleSite/content/posts/test-7.md
new file mode 100644
index 0000000..edb9fb7
--- /dev/null
+++ b/exampleSite/content/posts/test-7.md
@@ -0,0 +1,7 @@
++++
+title = "Test 7"
+tags = ["test"]
+date = "1012-01-07"
++++
+
+Test 7
diff --git a/exampleSite/content/posts/test-8.md b/exampleSite/content/posts/test-8.md
new file mode 100644
index 0000000..9a37235
--- /dev/null
+++ b/exampleSite/content/posts/test-8.md
@@ -0,0 +1,7 @@
++++
+title = "Test 8"
+tags = ["test"]
+date = "1012-01-08"
++++
+
+Test 8
diff --git a/exampleSite/content/posts/test-9.md b/exampleSite/content/posts/test-9.md
new file mode 100644
index 0000000..a7711a2
--- /dev/null
+++ b/exampleSite/content/posts/test-9.md
@@ -0,0 +1,7 @@
++++
+title = "Test 9"
+tags = ["test"]
+date = "1012-01-09"
++++
+
+Test 9
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 00884f6..392c5e2 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -2,7 +2,7 @@
   <article>
     <h1>{{ .Title }}</h1>
     <ul class="posts-list">
-      {{ range $index, $element := $.Paginator.Pages }}
+      {{ range $index, $element := .Paginator.Pages }}
         <li class="posts-list-item">
           <a class="posts-list-item-title" href="{{ .Permalink }}">{{ .Title }}</a>
           <span class="posts-list-item-description">
@@ -12,5 +12,6 @@
         </li>
       {{ end }}
     </ul>
+    {{ partial "pagination.html" $ }}
   </article>
 {{ end }}
diff --git a/layouts/partials/pagination.html b/layouts/partials/pagination.html
new file mode 100644
index 0000000..be6fa11
--- /dev/null
+++ b/layouts/partials/pagination.html
@@ -0,0 +1,27 @@
+{{ with $.Paginator }}
+{{ if gt .TotalPages 1 }}
+<ul class="pagination">
+  {{ with .Prev }}
+  <li class="page-item">
+    <a class="page-link" href="{{ .URL }}">
+      {{ partial "icon.html" (dict "ctx" $ "name" "arrow-left") }}
+    </a>
+  </li>
+  {{ end }}
+  {{ range .Pagers }}
+  <li class="page-item{{ if eq .PageNumber $.Paginator.PageNumber }} active{{ end }}">
+    <a class="page-link" href="{{ .URL }}">
+      {{ .PageNumber }}
+    </a>
+  </li>
+  {{ end }}
+  {{ with .Next }}
+  <li class="page-item">
+    <a class="page-link" href="{{ .URL }}">
+      {{ partial "icon.html" (dict "ctx" $ "name" "arrow-right") }}
+    </a>
+  </li>
+  {{ end }}
+</ul>
+{{ end }}
+{{ end }}
diff --git a/resources/_gen/assets/scss/css/main.scss_e86386c8bae1cd02295de71a1be078d6.content b/resources/_gen/assets/scss/css/main.scss_e86386c8bae1cd02295de71a1be078d6.content
index e32a8cb..91311f1 100644
--- a/resources/_gen/assets/scss/css/main.scss_e86386c8bae1cd02295de71a1be078d6.content
+++ b/resources/_gen/assets/scss/css/main.scss_e86386c8bae1cd02295de71a1be078d6.content
@@ -1 +1 @@
-*{box-sizing:border-box}html{line-height:1.6}body{margin:0;font-family:sans-serif;background:#353b43;color:#afbac4}h1,h2,h3,h4,h5,h6{color:#fff}a{color:#57cc8a;text-decoration:none}a:hover{color:#fff;transition:color .8s}pre{overflow:auto}.app-header{padding:2.5em;background:#242930;text-align:center}.app-header-avatar{max-width:15rem;max-height:15rem;border-radius:100%;border:.5rem solid #57cc8a}.app-container{padding:2.5rem}.app-header-social{font-size:2em;color:#fff}.app-header-social a{margin:0 .1em}.icon{display:block-inline;width:1em;height:1em;vertical-align:-.125em}.tag{display:inline-block;margin-right:.2em;padding:0 .6em;font-size:.9em;border-radius:.2em;white-space:nowrap;background:rgba(255,255,255,.1);transition:background .8s}.tag:hover{background:rgba(255,255,255,.3)}.post-title{color:#fff}.post-content pre{border-left:.4em solid rgba(87,204,138,.8);padding-left:1em}.post-meta{font-size:.8em}.posts-list{padding:0}.posts-list-item{list-style:none;border-bottom:1px dashed rgba(255,255,255,.3);padding:.4em 0}.posts-list-item-description{display:block;font-size:.8em}@media(min-width:940px){.app-header{position:fixed;top:0;left:0;width:20rem;min-height:100vh}.app-container{max-width:65rem;margin-left:20rem}}
\ No newline at end of file
+*{box-sizing:border-box}html{line-height:1.6}body{margin:0;font-family:sans-serif;background:#353b43;color:#afbac4}h1,h2,h3,h4,h5,h6{color:#fff}a{color:#57cc8a;text-decoration:none}a:hover{color:#fff;transition:color .8s}pre{overflow:auto}.app-header{padding:2.5em;background:#242930;text-align:center}.app-header-avatar{max-width:15rem;max-height:15rem;border-radius:100%;border:.5rem solid #57cc8a}.app-container{padding:2.5rem}.app-header-social{font-size:2em;color:#fff}.app-header-social a{margin:0 .1em}@media(min-width:940px){.app-header{position:fixed;top:0;left:0;width:20rem;min-height:100vh}.app-container{max-width:65rem;margin-left:20rem}}.icon{display:block-inline;width:1em;height:1em;vertical-align:-.125em}.pagination{display:block;list-style:none;padding:0;font-size:.8em;text-align:center;margin:3em 0}.page-item{display:inline-block}.page-item .page-link{display:block;padding:.285em .8em}.page-item.active .page-link{color:#fff;border-radius:2em;background:#57cc8a}.post-title{color:#fff}.post-content pre{border-left:.4em solid rgba(87,204,138,.8);padding-left:1em}.post-meta{font-size:.8em}.posts-list{padding:0}.posts-list-item{list-style:none;border-bottom:1px dashed rgba(255,255,255,.3);padding:.4em 0}.posts-list-item-description{display:block;font-size:.8em}.tag{display:inline-block;margin-right:.2em;padding:0 .6em;font-size:.9em;border-radius:.2em;white-space:nowrap;background:rgba(255,255,255,.1);transition:background .8s}.tag:hover{background:rgba(255,255,255,.3)}
\ No newline at end of file
diff --git a/resources/_gen/assets/scss/css/main.scss_e86386c8bae1cd02295de71a1be078d6.json b/resources/_gen/assets/scss/css/main.scss_e86386c8bae1cd02295de71a1be078d6.json
index f890f10..0db82fd 100644
--- a/resources/_gen/assets/scss/css/main.scss_e86386c8bae1cd02295de71a1be078d6.json
+++ b/resources/_gen/assets/scss/css/main.scss_e86386c8bae1cd02295de71a1be078d6.json
@@ -1 +1 @@
-{"Target":"css/main.min.3bf813d46763420c83fb33c51950b4fc582483efcfddb34b4e4e8d6b811e3208.css","MediaType":"text/css","Data":{"Integrity":"sha256-O/gT1GdjQgyD+zPFGVC0/Fgkg+/P3bNLTk6Na4EeMgg="}}
\ No newline at end of file
+{"Target":"css/main.min.ed2bee65dbc2f611ff1a2ca5cfa6d7ec362a8e79fea5cf61bb5213445359e232.css","MediaType":"text/css","Data":{"Integrity":"sha256-7SvuZdvC9hH/Giylz6bX7DYqjnn+pc9hu1ITRFNZ4jI="}}
\ No newline at end of file