Add support for pagination (fixes #81)

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased](https://codeberg.org/daudix/duckquill/compare/v5.0.0...main)
 
+### Added
+
+- Add support for [pagination](https://www.getzola.org/documentation/templates/pagination/) (#81).
+
 ### Changed
 
 - Improve disabled checkbox/radio styling.

content/blog/_index.md

@@ -3,6 +3,7 @@ title = "Writings of Duck's Feet"
 sort_by = "date"
 template = "article_list.html"
 page_template = "article.html"
+paginate_by = 2
 +++
 
 Welcome to my quack'in blog, I quack about various stuff, but mostly I'm a demo

i18n/ar.toml

@@ -34,10 +34,12 @@ featured = "مميز"
 feed = "موجز"
 file_an_issue = "ملف مشكلة"
 filter_by_tag = "تصفية حسب العلامة"
+first = "الأولى"
 go_to_top = "الانتقال إلى الأعلى"
 hot = "حار"
 important = "مهم"
 language = "اللغة"
+last = "الأخيرة"
 load_comments = "تحميل التعليقات"
 loading = "التحميل"
 many_minutes_read = "$NUMBER دقائق القراءة"

i18n/en.toml

@@ -34,10 +34,12 @@ featured = "Featured"
 feed = "Feed"
 file_an_issue = "File an Issue"
 filter_by_tag = "Filter by tag"
+first = "First"
 go_to_top = "Go to Top"
 hot = "Hot"
 important = "Important"
 language = "Language"
+last = "Last"
 load_comments = "Load Comments"
 loading = "Loading"
 many_minutes_read = "$NUMBER minutes read"
@@ -46,7 +48,7 @@ many_tags = "$NUMBER tags in total"
 minutes_read = "$NUMBER minute read"
 newest_to_oldest = "From newest to oldest"
 next = "Next"
-no_comments = "No comments yet :/"
+no_comments = "No Comments yet :/"
 note = "Note"
 one_posts = "$NUMBER post in total"
 one_tags = "$NUMBER tag in total"
@@ -63,18 +65,18 @@ repo = "Repository"
 search = "Search"
 search_for = "Search for"
 share = "Share"
-skip_to_content = "Skip to main content"
+skip_to_content = "Skip to Main Content"
 source = "Website source"
 table_of_contents = "Table of Contents"
 tags = "tags"
 tags_title = "Tags"
 theme = "Theme"
-theme_dark = "Switch to dark theme"
+theme_dark = "Switch to Dark Theme"
-theme_light = "Switch to light theme"
+theme_light = "Switch to Light Theme"
-theme_system = "Use system theme"
+theme_system = "Use System Theme"
 tip = "Tip"
 trigger_warning = "Trigger Warning"
 updated = "Updated on"
-view_comment = "View comment at"
+view_comment = "View Comment At"
-view_profile = "View profile at"
+view_profile = "View Profile At"
 warning = "Warning"

i18n/ms.toml

@@ -34,10 +34,12 @@ featured = "Ditampilkan"
 feed = "Suapan"
 file_an_issue = "Failkan Isu"
 filter_by_tag = "Tapis mengikut tag"
+first = "Pertama"
 go_to_top = "Pergi ke Atas"
 hot = "Hangat"
 important = "Penting"
 language = "Bahasa"
+last = "Terakhir"
 load_comments = "Memuatkan Komen"
 loading = "Memuatkan"
 many_minutes_read = "$NUMBER minit membaca"

i18n/ru.toml

@@ -41,10 +41,12 @@ few_posts = "Всего $NUMBER поста"
 few_tags = "Всего $NUMBER тега"
 file_an_issue = "Отправить Отчет об Ошибке"
 filter_by_tag = "Фильтр по тегам"
+first = "Первая"
 go_to_top = "Перейти в Начало"
 hot = "Горячее"
 important = "Важно"
 language = "Язык"
+last = "Последняя"
 load_comments = "Загрузить Комментарии"
 loading = "Загрузка"
 many_minutes_read = "$NUMBER минуты чтения"

sass/_article-list.scss

@@ -337,3 +337,88 @@
 		}
 	}
 }
+
+#paginator {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	gap: 0.5rem;
+	margin-block-start: 4rem;
+
+	#paginator-first,
+	#paginator-previous,
+	#paginator-next,
+	#paginator-last {
+		display: inline-block;
+		transition: var(--transition);
+		box-shadow: var(--edge-highlight);
+		border-radius: 999px;
+		background-color: var(--fg-muted-1);
+		padding: 0.5rem;
+		color: var(--fg-muted-4);
+		line-height: 0;
+
+		&:hover {
+			background-color: var(--fg-muted-2);
+			color: var(--fg-muted-5);
+		}
+
+		&:active {
+			transform: var(--active);
+		}
+
+		.icon {
+			transition: var(--transition);
+			width: 1rem;
+			height: 1rem;
+
+			:root[dir*="rtl"] & {
+				transform: scaleX(-1);
+			}
+		}
+	}
+
+	#paginator-first .icon {
+		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M3 2v12h2V8.414l5.293 5.293a1 1 0 1 0 1.414-1.414L7.414 8l4.293-4.293a1 1 0 1 0-1.414-1.414L5 7.586V2zm0 0'/%3E%3C/svg%3E");
+	}
+
+	#paginator-previous .icon {
+		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='m9.293 13.707-5-5a1 1 0 0 1 0-1.414l5-5a1 1 0 1 1 1.414 1.414L6.414 8l4.293 4.293a1 1 0 1 1-1.414 1.414m0 0'/%3E%3C/svg%3E");
+	}
+
+	#paginator-next .icon {
+		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='m6.707 13.707 5-5a1 1 0 0 0 0-1.414l-5-5a1 1 0 1 0-1.414 1.414L9.586 8l-4.293 4.293a1 1 0 1 0 1.414 1.414m0 0'/%3E%3C/svg%3E");
+	}
+
+	#paginator-last .icon {
+		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M11 2v5.586L5.707 2.293a1 1 0 1 0-1.414 1.414L8.586 8l-4.293 4.293a1 1 0 1 0 1.414 1.414L11 8.414V14h2V2zm0 0'/%3E%3C/svg%3E");
+	}
+
+	span {
+		&#paginator-first,
+		&#paginator-previous,
+		&#paginator-next,
+		&#paginator-last {
+			opacity: var(--disabled-opacity);
+			cursor: not-allowed;
+
+			&:hover {
+				background-color: var(--fg-muted-1);
+				color: var(--fg-muted-4);
+			}
+
+			&:active {
+				transform: none;
+			}
+		}
+	}
+
+	#paginator-counter {
+		display: inline-block;
+		color: var(--fg-muted-5);
+		line-height: 1;
+		font-variant-numeric: tabular-nums;
+		margin: 0 0.5rem;
+	}
+}

templates/partials/articles.html

@@ -1,4 +1,6 @@
-{%- if section.pages -%}
+{%- if paginator.pages -%}
+    {%- set pages = paginator.pages -%}
+{%- elif section.pages -%}
     {%- set pages = section.pages -%}
 {%- else -%}
     {%- set pages = term.pages -%}
@@ -80,3 +82,49 @@
 		</article>
 	{%- endfor %}
 </div>
+
+{%- if paginator.pages -%}
+	<nav id="paginator">
+		{%- if paginator.first != current_url -%}
+			<a id="paginator-first" href="{{ paginator.first }}" title="{{ macros_translate::translate(key='first', default='First', language_strings=language_strings) }}">
+				<i class="icon"></i>
+			</a>
+		{% else %}
+			<span id="paginator-first" title="{{ macros_translate::translate(key='first', default='First', language_strings=language_strings) }}">
+				<i class="icon"></i>
+			</span>
+		{%- endif -%}
+
+		{%- if paginator.previous -%}
+			<a id="paginator-previous" href="{{ paginator.previous }}" title="{{ macros_translate::translate(key='previous', default='Previous', language_strings=language_strings) }}">
+				<i class="icon"></i>
+			</a>
+		{% else %}
+			<span id="paginator-previous" title="{{ macros_translate::translate(key='previous', default='Previous', language_strings=language_strings) }}">
+				<i class="icon"></i>
+			</span>
+		{%- endif -%}
+
+		<span id="paginator-counter">{{ paginator.current_index }}/{{ paginator.number_pagers }}</span>
+
+		{%- if paginator.next -%}
+			<a id="paginator-next" href="{{ paginator.next }}" title="{{ macros_translate::translate(key='next', default='Next', language_strings=language_strings) }}">
+				<i class="icon"></i>
+			</a>
+		{%- else -%}
+			<span id="paginator-next" title="{{ macros_translate::translate(key='next', default='Next', language_strings=language_strings) }}">
+				<i class="icon"></i>
+			</span>
+		{%- endif -%}
+
+		{%- if paginator.last != current_url -%}
+			<a id="paginator-last" href="{{ paginator.last }}" title="{{ macros_translate::translate(key='last', default='Last', language_strings=language_strings) }}">
+				<i class="icon"></i>
+			</a>
+		{% else %}
+			<span id="paginator-last" title="{{ macros_translate::translate(key='last', default='Last', language_strings=language_strings) }}">
+				<i class="icon"></i>
+			</span>
+		{%- endif -%}
+	</nav>
+{%- endif -%}

templates/partials/comments.html

@@ -170,7 +170,7 @@
 							avatar.setAttribute("rel", "{{ rel_attributes }}");
 							avatar.setAttribute(
 								"title",
-								`{{ macros_translate::translate(key="view_profile", default="View profile at", language_strings=language_strings) }} @${status.account.username}@${instance}`
+								`{{ macros_translate::translate(key="view_profile", default="View Profile At", language_strings=language_strings) }} @${status.account.username}@${instance}`
 							);
 							avatar.appendChild(avatarPicture);
 
@@ -198,7 +198,7 @@
 							let permalink = document.createElement("a");
 							permalink.setAttribute("href", status.url);
 							permalink.setAttribute("itemprop", "url");
-							permalink.setAttribute("title", `{{ macros_translate::translate(key="view_comment", default="View comment at", language_strings=language_strings) }} ${instance}`);
+							permalink.setAttribute("title", `{{ macros_translate::translate(key="view_comment", default="View Comment At", language_strings=language_strings) }} ${instance}`);
 							permalink.setAttribute("rel", "{{ rel_attributes }}");
 							permalink.textContent = new Date(
 								status.created_at
@@ -363,7 +363,7 @@
 
 					else {
 						var statusText = document.createElement("p");
-						statusText.innerHTML = "{{ macros_translate::translate(key='no_comments', default='No comments yet :/', language_strings=language_strings) }}";
+						statusText.innerHTML = "{{ macros_translate::translate(key='no_comments', default='No Comments yet :/', language_strings=language_strings) }}";
 						statusText.setAttribute("id", "comments-status");
 						commentsWrapper.appendChild(statusText);
 					}

templates/partials/nav.html

@@ -3,7 +3,7 @@
 <header id="site-nav">
 	<nav>
 		<a href="#main" id="main-content" tabindex="0">
-			{{ macros_translate::translate(key="skip_to_content", default="Skip to main content", language_strings=language_strings) }}
+			{{ macros_translate::translate(key="skip_to_content", default="Skip to Main Content", language_strings=language_strings) }}
 		</a>
 		<ul>
 			<li id="home">
@@ -87,17 +87,17 @@
 						</summary>
 						<ul>
 							<li>
-								<button class="circle" id="theme-light" onclick="switchTheme('light')" title="{{ macros_translate::translate(key='theme_light', default='Switch to light theme', language_strings=language_strings) }}">
+								<button class="circle" id="theme-light" onclick="switchTheme('light')" title="{{ macros_translate::translate(key='theme_light', default='Switch to Light Theme', language_strings=language_strings) }}">
 									<i class="icon"></i>
 								</button>
 							</li>
 							<li>
-								<button class="circle" id="theme-dark" onclick="switchTheme('dark')" title="{{ macros_translate::translate(key='theme_dark', default='Switch to dark theme', language_strings=language_strings) }}">
+								<button class="circle" id="theme-dark" onclick="switchTheme('dark')" title="{{ macros_translate::translate(key='theme_dark', default='Switch to Dark Theme', language_strings=language_strings) }}">
 									<i class="icon"></i>
 								</button>
 							</li>
 							<li>
-								<button class="circle" id="theme-system" onclick="switchTheme('system')" title="{{ macros_translate::translate(key='theme_system', default='Use system theme', language_strings=language_strings) }}">
+								<button class="circle" id="theme-system" onclick="switchTheme('system')" title="{{ macros_translate::translate(key='theme_system', default='Use System Theme', language_strings=language_strings) }}">
 									<i class="icon"></i>
 								</button>
 							</li>