diff --git a/CHANGELOG.md b/CHANGELOG.md
index 396d08e..68be77c 100644
--- a/CHANGELOG.md
+++ b/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.
diff --git a/content/blog/_index.md b/content/blog/_index.md
index 0c05693..9137376 100644
--- a/content/blog/_index.md
+++ b/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
diff --git a/i18n/ar.toml b/i18n/ar.toml
index 77f0b1d..8d5dae8 100644
--- a/i18n/ar.toml
+++ b/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 دقائق القراءة"
diff --git a/i18n/en.toml b/i18n/en.toml
index adf84f8..e0523ef 100644
--- a/i18n/en.toml
+++ b/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_light = "Switch to light theme"
-theme_system = "Use system theme"
+theme_dark = "Switch to Dark Theme"
+theme_light = "Switch to Light Theme"
+theme_system = "Use System Theme"
tip = "Tip"
trigger_warning = "Trigger Warning"
updated = "Updated on"
-view_comment = "View comment at"
-view_profile = "View profile at"
+view_comment = "View Comment At"
+view_profile = "View Profile At"
warning = "Warning"
diff --git a/i18n/ms.toml b/i18n/ms.toml
index 0697f35..90bdf44 100644
--- a/i18n/ms.toml
+++ b/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"
diff --git a/i18n/ru.toml b/i18n/ru.toml
index 606e28d..c650ae9 100644
--- a/i18n/ru.toml
+++ b/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 минуты чтения"
diff --git a/sass/_article-list.scss b/sass/_article-list.scss
index 0cf6925..580ff6a 100644
--- a/sass/_article-list.scss
+++ b/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;
+ }
+}
diff --git a/templates/partials/articles.html b/templates/partials/articles.html
index 2c41324..5ec3c4c 100644
--- a/templates/partials/articles.html
+++ b/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 @@
{%- endfor %}
+
+{%- if paginator.pages -%}
+
+{%- endif -%}
diff --git a/templates/partials/comments.html b/templates/partials/comments.html
index fb8b1cc..c96001f 100644
--- a/templates/partials/comments.html
+++ b/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);
}
diff --git a/templates/partials/nav.html b/templates/partials/nav.html
index a7e07cd..134156a 100644
--- a/templates/partials/nav.html
+++ b/templates/partials/nav.html
@@ -3,7 +3,7 @@