From bd572912bdf727937e557f1d1ef278d77bfeb127 Mon Sep 17 00:00:00 2001 From: daudix Date: Thu, 19 Sep 2024 22:11:09 +0300 Subject: [PATCH] Add support for pagination (fixes #81) --- CHANGELOG.md | 4 ++ content/blog/_index.md | 1 + i18n/ar.toml | 2 + i18n/en.toml | 16 +++--- i18n/ms.toml | 2 + i18n/ru.toml | 2 + sass/_article-list.scss | 85 ++++++++++++++++++++++++++++++++ templates/partials/articles.html | 50 ++++++++++++++++++- templates/partials/comments.html | 6 +-- templates/partials/nav.html | 8 +-- 10 files changed, 161 insertions(+), 15 deletions(-) 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 @@