feat: Add pagination and pinned posts to blog

This commit introduces pagination to the blog, displaying 10 posts per page. It also adds the ability to pin posts to the top of the blog list.

- Enables pagination in `config.toml`.
- Modifies the blog list template to display pinned posts first, followed by paginated posts.
- Adds pagination controls to the blog list page.

Author: google-labs-jules[bot]

.gitignore

@@ -15,6 +15,8 @@ hugo.linux
 
 # Temporary lock file while building
 /.hugo_build.lock
+hugo_output.log
+bin/
 
 ### Intellij+all ###
 # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio, WebStorm and Rider

config.toml

@@ -2,6 +2,7 @@ baseURL = "https://www.infraspec.dev/"
 languageCode = "en-us"
 title = "Infraspec"
 enableRobotsTXT = false
+paginate = 10
 
 [module]
   [module.hugoVersion]

content/blog/building-a-discord-gpt-bot.md

@@ -4,6 +4,7 @@ authorIds: ["nandhitha"]
 date: 2024-05-31
 draft: false
 featured: true
+pinned: true
 weight: 1
 sitemap:
 changefreq: "monthly"

layouts/blog/list.html

@@ -11,11 +11,20 @@
 
 <div class="container pt-6 pb-6">
   <div class="row">
-    {{ range .Pages.ByWeight }}
-    <div class="col-12">
-      <div>{{ .Render "summary" }}</div>
-    </div>
+    {{ $pinned := where .Pages "Params.pinned" "eq" true }}
+    {{ range $pinned }}
+      <div class="col-12">
+        <div>{{ .Render "summary" }}</div>
+      </div>
+    {{ end }}
+
+    {{ $paginator := .Paginate (where .Pages "Params.pinned" "ne" true) }}
+    {{ range $paginator.Pages }}
+      <div class="col-12">
+        <div>{{ .Render "summary" }}</div>
+      </div>
     {{ end }}
   </div>
+  {{ partial "pagination.html" . }}
 </div>
 {{ end }}

layouts/partials/pagination.html

@@ -0,0 +1,16 @@
+{{ $paginator := .Paginator }}
+<!-- Pagination -->
+<div class="pagination">
+    {{ if $paginator.HasPrev }}
+        <a class="pagination-previous" href="{{ $paginator.Prev.URL }}">
+            <i class="fa fa-chevron-left"></i>
+            Older Posts
+        </a>
+    {{ end }}
+    {{ if $paginator.HasNext }}
+        <a class="pagination-next" href="{{ $paginator.Next.URL }}">
+            Newer Posts
+            <i class="fa fa-chevron-right"></i>
+        </a>
+    {{ end }}
+</div>