Added pagination to web templates. Fixes #29

src/web/mvc/Views/Cms/Archive.cshtml

@@ -4,6 +4,13 @@
     var hasImage = Model.PrimaryImage.HasValue;
 
     var posts = Model.Archive.Posts.Count;
+
+    Func<string> BlogLink = () => {
+        return Model.Permalink
+            + (Model.Archive.Category != null ? $"/category/{Model.Archive.Category.Slug}"  : "")
+            + (Model.Archive.Year.HasValue ? $"/{Model.Archive.Year}" : "" )
+            + (Model.Archive.Month.HasValue ? $"/{Model.Archive.Month}" : "");
+    };
 }
 @section head {
     @WebApp.MetaTags(Model)
@@ -88,5 +95,42 @@
                 }
             </div>
         }
+        @if (Model.Archive.TotalPages > 1) {
+            <div class="row">
+                <div class="col-sm">
+                    <nav aria-label="Page navigation example">
+                    <ul class="pagination justify-content-center">
+                        <li class="page-item">
+                            <a class="page-link" href="@BlogLink()/page/1">
+                                <span aria-hidden="true">&laquo;</span>
+                                <span class="sr-only">Previous</span>
+                            </a>
+                        </li>
+                        <li class="page-item">
+                            <a class="page-link" href="@BlogLink()/page/@Math.Max(1, Model.Archive.CurrentPage - 1)">
+                                <span aria-hidden="true">&lsaquo;</span>
+                                <span class="sr-only">Previous</span>
+                            </a>
+                        </li>
+                        @for (var n = 1; n <= Model.Archive.TotalPages; n++) {
+                            <li class="page-item @(Model.Archive.CurrentPage == n ? "active" : "")"><a class="page-link" href="@BlogLink()/page/@n">@n</a></li>
+                        }
+                        <li class="page-item">
+                            <a class="page-link" href="@BlogLink()/page/@Math.Min(Model.Archive.TotalPages, Model.Archive.CurrentPage + 1)">
+                                <span aria-hidden="true">&rsaquo;</span>
+                                <span class="sr-only">Next</span>
+                            </a>
+                        </li>
+                        <li class="page-item">
+                            <a class="page-link" href="@BlogLink()/page/@Model.Archive.TotalPages">
+                                <span aria-hidden="true">&raquo;</span>
+                                <span class="sr-only">Next</span>
+                            </a>
+                        </li>
+                    </ul>
+                    </nav>
+                </div>
+            </div>
+        }
     </div>
 </main>

src/web/mvc/assets/scss/inc/_pagination.scss

@@ -0,0 +1,18 @@
+.page-link {
+    color: #f94c3b;
+    min-width: 2.5rem;
+    text-align: center;
+
+    &:hover {
+        color: darken(#f94c3b, 10%);
+    }
+}
+
+.page-item {
+    &.active {
+        .page-link {
+            background: #f94c3b;
+            border-color: #f94c3b;
+        }
+    }
+}

src/web/mvc/assets/scss/style.scss

@@ -6,3 +6,4 @@
 @import "inc/header";
 @import "inc/blocks";
 @import "inc/posts";
+@import "inc/pagination";

src/web/mvc/wwwroot/assets/css/style.min.css

@@ -1 +1 @@
-.btn.btn-primary,a{transition:all .2s ease-in-out}body{padding-top:3.5rem;font-family:Lato,sans-serif}main{padding:2rem 0}img{max-width:100%}a{color:#f94c3b}a:hover{color:#f71f0a}h1,h2,h3,h4,h5,h6{font-family:Raleway,sans-serif}blockquote{color:#999;font-size:1.5rem;font-weight:300;margin:3rem auto;width:80%}.navbar-brand small{font-family:Lato,sans-serif;font-size:75%;font-weight:400;margin-left:.5rem}.lead{font-size:1.2rem}.btn.btn-primary{background-color:#f94c3b;border-color:#f94c3b}.btn.btn-primary:hover{background-color:#e11a07;border-color:#e11a07}.card .card-img,.card .card-img-top{border-bottom-left-radius:0;border-bottom-right-radius:0}.navbar.fixed-top{background:#fff;border-bottom:1px solid #ddd;font-family:Raleway,sans-serif;box-shadow:0 0 2rem rgba(0,0,0,.15)}.navbar.fixed-top .navbar-nav{font-size:.875rem;font-weight:700;text-transform:uppercase}.navbar.fixed-top .navbar-nav .active a{color:#f94c3b}.navbar.fixed-top .navbar-toggler{padding:.25rem .5rem}.navbar.fixed-top .navbar-toggler .navbar-toggler-icon{width:1em;height:1em}@media (max-width:767px){.navbar.fixed-top .container{max-width:100%}}header{background-position:50% 50%;background-size:cover;position:relative}header .container{padding-top:7rem;padding-bottom:7rem;position:relative}header h1{font-size:3.6rem;text-transform:uppercase}header .lead{font-size:1.35rem}header.has-image{color:#eee;text-shadow:1px 1px 1px rgba(0,0,0,.15)}header.has-image .dimmer{background:#000;position:absolute;top:0;left:0;width:100%;height:100%;opacity:.45}.block{padding:0 0 1.5rem}.block img{border-radius:.25rem}.block.column-block .col-md:not(:last-child){margin-bottom:1.5rem}.block.column-block img{height:100%;object-fit:cover}.block.image-gallery-block .carousel{border-radius:.25rem;overflow:hidden}@media (min-width:768px){.block.column-block .col-md:not(:last-child){margin-bottom:0}}.post-meta{font-size:.875rem}.post-meta span:not(:last-child)::after{content:"\25C6";display:inline-block;padding:0 .25rem}.archive article{padding-bottom:1rem}.comments .alert{background:#f4f4f4;padding:2rem 2.5rem}
+.btn.btn-primary,a{transition:all .2s ease-in-out}body{padding-top:3.5rem;font-family:Lato,sans-serif}main{padding:2rem 0}img{max-width:100%}a{color:#f94c3b}a:hover{color:#f71f0a}h1,h2,h3,h4,h5,h6{font-family:Raleway,sans-serif}blockquote{color:#999;font-size:1.5rem;font-weight:300;margin:3rem auto;width:80%}.navbar-brand small{font-family:Lato,sans-serif;font-size:75%;font-weight:400;margin-left:.5rem}.lead{font-size:1.2rem}.btn.btn-primary{background-color:#f94c3b;border-color:#f94c3b}.btn.btn-primary:hover{background-color:#e11a07;border-color:#e11a07}.card .card-img,.card .card-img-top{border-bottom-left-radius:0;border-bottom-right-radius:0}.navbar.fixed-top{background:#fff;border-bottom:1px solid #ddd;font-family:Raleway,sans-serif;box-shadow:0 0 2rem rgba(0,0,0,.15)}.navbar.fixed-top .navbar-nav{font-size:.875rem;font-weight:700;text-transform:uppercase}.navbar.fixed-top .navbar-nav .active a{color:#f94c3b}.navbar.fixed-top .navbar-toggler{padding:.25rem .5rem}.navbar.fixed-top .navbar-toggler .navbar-toggler-icon{width:1em;height:1em}@media (max-width:767px){.navbar.fixed-top .container{max-width:100%}}header{background-position:50% 50%;background-size:cover;position:relative}header .container{padding-top:7rem;padding-bottom:7rem;position:relative}header h1{font-size:3.6rem;text-transform:uppercase}header .lead{font-size:1.35rem}header.has-image{color:#eee;text-shadow:1px 1px 1px rgba(0,0,0,.15)}header.has-image .dimmer{background:#000;position:absolute;top:0;left:0;width:100%;height:100%;opacity:.45}.block{padding:0 0 1.5rem}.block img{border-radius:.25rem}.block.column-block .col-md:not(:last-child){margin-bottom:1.5rem}.block.column-block img{height:100%;object-fit:cover}.block.image-gallery-block .carousel{border-radius:.25rem;overflow:hidden}@media (min-width:768px){.block.column-block .col-md:not(:last-child){margin-bottom:0}}.post-meta{font-size:.875rem}.post-meta span:not(:last-child)::after{content:"\25C6";display:inline-block;padding:0 .25rem}.archive article{padding-bottom:1rem}.comments .alert{background:#f4f4f4;padding:2rem 2.5rem}.page-link{color:#f94c3b;min-width:2.5rem;text-align:center}.page-link:hover{color:#f71f0a}.page-item.active .page-link{background:#f94c3b;border-color:#f94c3b}

src/web/razor/Pages/Archive.cshtml

@@ -5,6 +5,13 @@
     var hasImage = Model.Data.PrimaryImage.HasValue;
 
     var posts = Model.Archive.Posts.Count;
+
+    Func<string> BlogLink = () => {
+        return Model.Data.Permalink
+            + (Model.Archive.Category != null ? $"/category/{Model.Archive.Category.Slug}"  : "")
+            + (Model.Archive.Year.HasValue ? $"/{Model.Archive.Year}" : "" )
+            + (Model.Archive.Month.HasValue ? $"/{Model.Archive.Month}" : "");
+    };
 }
 @section head {
     @WebApp.MetaTags(Model.Data)
@@ -89,5 +96,42 @@
                 }
             </div>
         }
+        @if (Model.Archive.TotalPages > 1) {
+            <div class="row">
+                <div class="col-sm">
+                    <nav aria-label="Page navigation example">
+                    <ul class="pagination justify-content-center">
+                        <li class="page-item">
+                            <a class="page-link" href="@BlogLink()/page/1">
+                                <span aria-hidden="true">&laquo;</span>
+                                <span class="sr-only">Previous</span>
+                            </a>
+                        </li>
+                        <li class="page-item">
+                            <a class="page-link" href="@BlogLink()/page/@Math.Max(1, Model.Archive.CurrentPage - 1)">
+                                <span aria-hidden="true">&lsaquo;</span>
+                                <span class="sr-only">Previous</span>
+                            </a>
+                        </li>
+                        @for (var n = 1; n <= Model.Archive.TotalPages; n++) {
+                            <li class="page-item @(Model.Archive.CurrentPage == n ? "active" : "")"><a class="page-link" href="@BlogLink()/page/@n">@n</a></li>
+                        }
+                        <li class="page-item">
+                            <a class="page-link" href="@BlogLink()/page/@Math.Min(Model.Archive.TotalPages, Model.Archive.CurrentPage + 1)">
+                                <span aria-hidden="true">&rsaquo;</span>
+                                <span class="sr-only">Next</span>
+                            </a>
+                        </li>
+                        <li class="page-item">
+                            <a class="page-link" href="@BlogLink()/page/@Model.Archive.TotalPages">
+                                <span aria-hidden="true">&raquo;</span>
+                                <span class="sr-only">Next</span>
+                            </a>
+                        </li>
+                    </ul>
+                    </nav>
+                </div>
+            </div>
+        }
     </div>
 </main>

src/web/razor/assets/scss/inc/_pagination.scss

@@ -0,0 +1,18 @@
+.page-link {
+    color: #f94c3b;
+    min-width: 2.5rem;
+    text-align: center;
+
+    &:hover {
+        color: darken(#f94c3b, 10%);
+    }
+}
+
+.page-item {
+    &.active {
+        .page-link {
+            background: #f94c3b;
+            border-color: #f94c3b;
+        }
+    }
+}

src/web/razor/assets/scss/style.scss

@@ -6,3 +6,4 @@
 @import "inc/header";
 @import "inc/blocks";
 @import "inc/posts";
+@import "inc/pagination";

src/web/razor/wwwroot/assets/css/style.min.css

@@ -1 +1 @@
-.btn.btn-primary,a{transition:all .2s ease-in-out}body{padding-top:3.5rem;font-family:Lato,sans-serif}main{padding:2rem 0}img{max-width:100%}a{color:#f94c3b}a:hover{color:#f71f0a}h1,h2,h3,h4,h5,h6{font-family:Raleway,sans-serif}blockquote{color:#999;font-size:1.5rem;font-weight:300;margin:3rem auto;width:80%}.navbar-brand small{font-family:Lato,sans-serif;font-size:75%;font-weight:400;margin-left:.5rem}.lead{font-size:1.2rem}.btn.btn-primary{background-color:#f94c3b;border-color:#f94c3b}.btn.btn-primary:hover{background-color:#e11a07;border-color:#e11a07}.card .card-img,.card .card-img-top{border-bottom-left-radius:0;border-bottom-right-radius:0}.navbar.fixed-top{background:#fff;border-bottom:1px solid #ddd;font-family:Raleway,sans-serif;box-shadow:0 0 2rem rgba(0,0,0,.15)}.navbar.fixed-top .navbar-nav{font-size:.875rem;font-weight:700;text-transform:uppercase}.navbar.fixed-top .navbar-nav .active a{color:#f94c3b}.navbar.fixed-top .navbar-toggler{padding:.25rem .5rem}.navbar.fixed-top .navbar-toggler .navbar-toggler-icon{width:1em;height:1em}@media (max-width:767px){.navbar.fixed-top .container{max-width:100%}}header{background-position:50% 50%;background-size:cover;position:relative}header .container{padding-top:7rem;padding-bottom:7rem;position:relative}header h1{font-size:3.6rem;text-transform:uppercase}header .lead{font-size:1.35rem}header.has-image{color:#eee;text-shadow:1px 1px 1px rgba(0,0,0,.15)}header.has-image .dimmer{background:#000;position:absolute;top:0;left:0;width:100%;height:100%;opacity:.45}.block{padding:0 0 1.5rem}.block img{border-radius:.25rem}.block.column-block .col-md:not(:last-child){margin-bottom:1.5rem}.block.column-block img{height:100%;object-fit:cover}.block.image-gallery-block .carousel{border-radius:.25rem;overflow:hidden}@media (min-width:768px){.block.column-block .col-md:not(:last-child){margin-bottom:0}}.post-meta{font-size:.875rem}.post-meta span:not(:last-child)::after{content:"\25C6";display:inline-block;padding:0 .25rem}.archive article{padding-bottom:1rem}.comments .alert{background:#f4f4f4;padding:2rem 2.5rem}
+.btn.btn-primary,a{transition:all .2s ease-in-out}body{padding-top:3.5rem;font-family:Lato,sans-serif}main{padding:2rem 0}img{max-width:100%}a{color:#f94c3b}a:hover{color:#f71f0a}h1,h2,h3,h4,h5,h6{font-family:Raleway,sans-serif}blockquote{color:#999;font-size:1.5rem;font-weight:300;margin:3rem auto;width:80%}.navbar-brand small{font-family:Lato,sans-serif;font-size:75%;font-weight:400;margin-left:.5rem}.lead{font-size:1.2rem}.btn.btn-primary{background-color:#f94c3b;border-color:#f94c3b}.btn.btn-primary:hover{background-color:#e11a07;border-color:#e11a07}.card .card-img,.card .card-img-top{border-bottom-left-radius:0;border-bottom-right-radius:0}.navbar.fixed-top{background:#fff;border-bottom:1px solid #ddd;font-family:Raleway,sans-serif;box-shadow:0 0 2rem rgba(0,0,0,.15)}.navbar.fixed-top .navbar-nav{font-size:.875rem;font-weight:700;text-transform:uppercase}.navbar.fixed-top .navbar-nav .active a{color:#f94c3b}.navbar.fixed-top .navbar-toggler{padding:.25rem .5rem}.navbar.fixed-top .navbar-toggler .navbar-toggler-icon{width:1em;height:1em}@media (max-width:767px){.navbar.fixed-top .container{max-width:100%}}header{background-position:50% 50%;background-size:cover;position:relative}header .container{padding-top:7rem;padding-bottom:7rem;position:relative}header h1{font-size:3.6rem;text-transform:uppercase}header .lead{font-size:1.35rem}header.has-image{color:#eee;text-shadow:1px 1px 1px rgba(0,0,0,.15)}header.has-image .dimmer{background:#000;position:absolute;top:0;left:0;width:100%;height:100%;opacity:.45}.block{padding:0 0 1.5rem}.block img{border-radius:.25rem}.block.column-block .col-md:not(:last-child){margin-bottom:1.5rem}.block.column-block img{height:100%;object-fit:cover}.block.image-gallery-block .carousel{border-radius:.25rem;overflow:hidden}@media (min-width:768px){.block.column-block .col-md:not(:last-child){margin-bottom:0}}.post-meta{font-size:.875rem}.post-meta span:not(:last-child)::after{content:"\25C6";display:inline-block;padding:0 .25rem}.archive article{padding-bottom:1rem}.comments .alert{background:#f4f4f4;padding:2rem 2.5rem}.page-link{color:#f94c3b;min-width:2.5rem;text-align:center}.page-link:hover{color:#f71f0a}.page-item.active .page-link{background:#f94c3b;border-color:#f94c3b}