fix: paginate recent posts and use params.mainSections

7 files changed, 84 insertions, 40 deletions

diff --git a/README.md b/README.md
index 5860927..41bb39e 100644
--- a/README.md
+++ b/README.md
@@ -1,12 +1,15 @@
 # Ezhil
+
 Clean and minimal personal blog and portfolio theme for Hugo.
 
-# Demo
+## Demo
+
 [View demo](https://ezhil-hugo.netlify.com/)
 
 ![Screenshot](images/screenshot.png "Ezhil")
 
-# Features
+## Features
+
 * Clean and minimal
 * Responsive
 * Supports tags
@@ -17,7 +20,8 @@ Clean and minimal personal blog and portfolio theme for Hugo.
 * Disqus comments
 * Hugo RSS feeds
 
-# Installation
+## Installation
+
 From your Hugo site run the following.
 
 ```sh
@@ -27,7 +31,8 @@ git clone https://github.com/vividvilla/ezhil.git
 
 For more information read the [official setup guide](https://gohugo.io/overview/installing/) of Hugo.
 
-# Configuration
+## Configuration
+
 ```toml
 baseURL = "http://example.org/"
 languageCode = "en-us"
@@ -44,17 +49,18 @@ googleAnalytics = "UA-123-45"
 # Your Disqus sortname.
 disqusShortname = "localhost"
 
+# Number of posts to show in recent posts list (Optional). Defaults to 10.
+paginate = 10
+
 [params]
-	# Blog subtitle which appears below blog title. Supports markdown.
-	subtitle = "Clean and minimal personal [blog theme for Hugo](https://github.com/vividvilla/ezhil)"
-	# Number of posts to show in recent posts list (Optional). Defaults to 10.
-	recentPostsCount = 10
-	# Content types which are excluded from recent posts and archive page (Optional). Defaults to ["page"]
-	excludedTypes = ["page"]
-	# Content types which are excludes Disqus comments (Optional). Defaults to ["page"]
-	disableDisqusTypes = ["page"]
-	# If social media links are enabled then enable this to fetch icons from CDN instead of hosted on your site.
-	featherIconsCDN = true
+    # Blog subtitle which appears below blog title. Supports markdown.
+    subtitle = "Clean and minimal personal [blog theme for Hugo](https://github.com/vividvilla/ezhil)"
+    # Content types which are included in home page recent posts list.
+    mainSections = ["posts"]
+    # Content types which are excludes Disqus comments.
+    disableDisqusTypes = ["page"]
+    # If social media links are enabled then enable this to fetch icons from CDN instead of hosted on your site.
+    featherIconsCDN = true
 
 # Main menu which appears below site header.
 [[menu.main]]
@@ -94,10 +100,11 @@ url = "https://twitter.com/gohugoio"
    tag = "tags"
 ```
 
-# Content type
-You can specify content type with field `type` in your content. For example static pages can be set as type `page` which are excluded from recent posts and all posts page. You can use site params `excludedTypes` and `disableDisqusTypes` to control which page types are excluded from recent posts and Disqus comments respectively.
+## Content type
 
-```
+You can specify content type with field `type` in your content. For example static pages can be set as type `page` which are excluded from recent posts and all posts page. You can use site params `mainSections` and `disableDisqusTypes` to control which page types are excluded from recent posts and Disqus comments respectively.
+
+```md
 ---
 title: "About"
 date: 2019-04-19T21:37:58+05:30
@@ -107,10 +114,11 @@ type: "page"
 This is some static page where you can write about yourself.
 ```
 
-# Disable Disqus
+## Disable Disqus
+
 You can disable Disqus from contents selectively or for all contents with certain content type. Use content field `disqus` to disable Disqus from certain contents.
 
-```
+```md
 ---
 title: "Content without comments"
 date: 2019-04-19T21:37:58+05:30
@@ -122,6 +130,7 @@ This is a content without Disqus comments.
 
 You can also disable Disqus for certain content types by using site param `disableDisqusTypes`. You can check config section above for example.
 
-# Credits
+## Credits
+
 * [Feather Icons](https://feathericons.com/)
 * [Zen habits](https://zenhabits.net/) for demo content
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index eeea110..d77f39e 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -2,6 +2,7 @@ baseURL = "http://example.org/"
 languageCode = "en-us"
 title = "Ezhil"
 theme = "ezhil"
+paginate = 5
 
 pygmentsstyle = "vs"
 pygmentscodefences = true
@@ -11,11 +12,8 @@ googleAnalytics = "UA-123-45"
 disqusShortname = "localhost"
 
 [params]
+	mainSections = ["posts"]
 	subtitle = "Clean and minimal personal [blog theme for Hugo](https://github.com/vividvilla/ezhil)"
-	# Number of posts to show in recent posts list.
-	recentPostsCount = 10
-	# Content types which are excluded from recent posts and archive page.
-	excludedTypes = ["page"]
 	disableDisqusTypes = ["page"]
 	featherIconsCDN = true
 
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 958d67b..2d02a73 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -7,7 +7,7 @@
 		{{ partial "head.html" . }}
 
 		{{ if isset .Data "Term" }}
-			<h1>Entries tagged - "{{.Data.Term}}"</h1>
+			<h1>Entries tagged - "{{ .Data.Term }}"</h1>
 		{{ else }}
 			<h1 class="page-title">All articles</h1>
 		{{ end }}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 72569ba..26d1c1b 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -16,7 +16,7 @@
 
 		{{- $.Scratch.Set "isDisqus" true -}}
 
-		{{- if and (isset .Params "type") (in (.Site.Params.disableDisqusTypes | default (slice "page")) .Params.type) -}}
+		{{- if and (isset .Params "type") (in .Site.Params.disableDisqusTypes .Params.type) -}}
 		{{- $.Scratch.Set "isDisqus" false -}}
 		{{- end -}}
 
diff --git a/layouts/index.html b/layouts/index.html
index 7d617e4..adfe375 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -10,30 +10,24 @@
 				Recent posts
 			</h2>
 			<div class="posts">
-				{{- $.Scratch.Set "counter" 0 -}}
-				{{- range .Data.Pages -}}
-				{{- if (in (.Site.Params.excludedTypes | default (slice "page")) .Type) -}}
-				{{- else -}}
-				{{- if lt ($.Scratch.Get "counter") (.Site.Params.RecentPostsCount | default 10) -}}
+				{{ $pages := where site.RegularPages "Type" "in" site.Params.mainSections }}
+				{{ $paginator := .Paginate (where $pages "Params.hidden" "ne" true) }}
+				{{ range $paginator.Pages }}
 				<div class="post">
 					<div class="meta">{{ dateFormat "Jan 2, 2006" .Date }}</div>
 					<a class="title" href="{{ .RelPermalink }}">{{.Title}}</a> &mdash;
 					<span class="description">
 						{{ if isset .Params "description" }}
-							{{ .Description }}
+						{{ .Description }}
 						{{ else if gt (len .RawContent) 120 }}
-							{{ slicestr .RawContent 0 120 }}...
+						{{ slicestr .RawContent 0 120 }}...
 						{{ else }}
-							{{ .RawContent }}
+						{{ .RawContent }}
 						{{ end }}
 					</span>
 				</div>
-				{{- $.Scratch.Set "counter" (add ($.Scratch.Get "counter") 1) -}}
-				{{- end -}}
-				{{- end -}}
-				{{- end -}}
-
-				<a href="/posts">All articles →</a>
+				{{ end }}
+				{{ template "partials/paginator.html" . }}
 			</div>
 		</div>
 	</div>
diff --git a/layouts/partials/paginator.html b/layouts/partials/paginator.html
new file mode 100644
index 0000000..ace433d
--- /dev/null
+++ b/layouts/partials/paginator.html
@@ -0,0 +1,15 @@
+{{ $pag := $.Paginator }}
+{{ if gt $pag.TotalPages 1 }}
+<ul class="pagination">
+	<li class="page-item page-prev">
+	{{ if $pag.HasPrev }}
+    <a {{ if $pag.HasPrev }}href="{{ $pag.Prev.URL }}"{{ end }} class="page-link" aria-label="Previous"><span aria-hidden="true">← Prev page</span></a>
+	{{ end }}
+	</li>
+	<li class="page-item page-next">
+	{{ if $pag.HasNext }}
+    <a {{ if $pag.HasNext }}href="{{ $pag.Next.URL }}"{{ end }} class="page-link" aria-label="Next"><span aria-hidden="true">Next page →</span></a>
+	{{ end }}
+	</li>
+</ul>
+{{ end }}
diff --git a/static/css/main.css b/static/css/main.css
index 3cd0fe3..804d717 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -284,6 +284,34 @@ ul {
     margin-right: 15px;
 }
 
+.pagination {
+	margin: 0;
+	padding: 0;
+	text-align: left;
+	display: flex;
+	justify-content: space-between;
+}
+
+.pagination li {
+	list-style: none;
+	display: inline-block;
+	margin: 0;
+	padding: 0;
+}
+
+.pagination .page-prev {
+	margin-right: 20px;
+	padding-right: 20px;
+}
+
+.pagination .page-item.page-prev {
+	text-align: left;
+}
+
+.pagination .page-item.page-next {
+	text-align: right;
+}
+
 @media (max-width: 767px) {
 	body {
 		padding: 20px;