From dfecd6c7eb132bf91871a43bdf8ba065e582e187 Mon Sep 17 00:00:00 2001 From: Ian Andwati Date: Sun, 13 Aug 2023 01:42:45 +0300 Subject: [PATCH] completed pagination --- content/archive/_index.md | 3 ++- sass/_codeblocks.scss | 29 +++++++++++++++++++++++++++++ sass/_pagination.scss | 16 ++++++++++++++++ sass/site.scss | 36 ++++-------------------------------- templates/archive.html | 2 ++ templates/footer.html | 3 +-- templates/paginate.html | 25 +++++++++++++++++++++++++ templates/post_macros.html | 2 +- templates/posts.html | 11 +++++++---- 9 files changed, 87 insertions(+), 40 deletions(-) create mode 100644 sass/_codeblocks.scss create mode 100644 sass/_pagination.scss create mode 100644 templates/paginate.html diff --git a/content/archive/_index.md b/content/archive/_index.md index 8406ec7..08c52cc 100644 --- a/content/archive/_index.md +++ b/content/archive/_index.md @@ -1,4 +1,5 @@ +++ sort_by = "date" template= "archive.html" -+++ \ No newline at end of file +paginate_by= 10 ++++ diff --git a/sass/_codeblocks.scss b/sass/_codeblocks.scss new file mode 100644 index 0000000..39aeb4b --- /dev/null +++ b/sass/_codeblocks.scss @@ -0,0 +1,29 @@ +pre { + display: block; + padding: 0.25rem 1.25rem; + font-size: 85%; + border-left: 0.25rem solid var(--primary-accent-color); + } + + code { + padding: 0 0.4rem; + // background-color: #3c3836; + background-color: var(--inline-code-background-color); + /* Inline code blocks look less aggresive with a little rounding. */ + border-radius: 2px; + } + + pre, code { + overflow: auto; + font-family: var(--default-mono-font); + } + + /* Without this the tag gains a little padding that offsets text by like + 2 pixels. Let's *not* do that. */ + pre > code { + padding: 0; + background-color: var(--code-background-color); + // Code inside a pre block doesn't need rounded borders. + border-radius: unset; + } + \ No newline at end of file diff --git a/sass/_pagination.scss b/sass/_pagination.scss new file mode 100644 index 0000000..a0b436f --- /dev/null +++ b/sass/_pagination.scss @@ -0,0 +1,16 @@ +.pagination{ + display: flex; + justify-content: space-between; + align-items: center; + list-style: none; + + .page-item .disabled{ + opacity: 0.5; + pointer-events: none; + } + + .page-numbers{ + font-size: 0.9rem; + color: var(--link-color); + } +} \ No newline at end of file diff --git a/sass/site.scss b/sass/site.scss index 96f02a9..f6b85d8 100644 --- a/sass/site.scss +++ b/sass/site.scss @@ -5,10 +5,13 @@ - Serve fonts from the local server rather than Google's API. - Support a "display title" in an [extra] section to allow for
elements or other manual control over title display. */ - @charset "utf-8"; + @use '_pagination.scss'; + @use '_codeblocks.scss'; + @import url('https://fonts.googleapis.com/css?family=Noto+Sans|Noto+Serif|Noto+Sans+Mono'); + :root { /* Fonts and Text Sizes */ --default-serif-font: "Noto Serif", serif; @@ -165,37 +168,6 @@ color: var(--muted-color); } - /* ---- Code blocks ---------------------------------------------------------*/ - - pre { - display: block; - padding: 0.25rem 1.25rem; - font-size: 85%; - border-left: 0.25rem solid var(--primary-accent-color); - } - - code { - padding: 0 0.4rem; - // background-color: #3c3836; - background-color: var(--inline-code-background-color); - /* Inline code blocks look less aggresive with a little rounding. */ - border-radius: 2px; - } - - pre, code { - overflow: auto; - font-family: var(--default-mono-font); - } - - /* Without this the tag gains a little padding that offsets text by like - 2 pixels. Let's *not* do that. */ - pre > code { - padding: 0; - background-color: var(--code-background-color); - // Code inside a pre block doesn't need rounded borders. - border-radius: unset; - } - /* ---- Tables --------------------------------------------------------------*/ table { diff --git a/templates/archive.html b/templates/archive.html index 2fe517b..20ce9f3 100644 --- a/templates/archive.html +++ b/templates/archive.html @@ -1,5 +1,6 @@ {% extends "section.html" %} {% import "post_macros.html" as page_macros %} +{% import "paginate.html" as paginate_macro %} {% block content %}
@@ -22,6 +23,7 @@ {% endfor %} + {% if paginator %}{{ paginate_macro::paginate() }}{% endif %}
{% include "footer.html" %} {% endblock content %} diff --git a/templates/footer.html b/templates/footer.html index 750503e..ce19d81 100644 --- a/templates/footer.html +++ b/templates/footer.html @@ -18,5 +18,4 @@ Source ⬡ Feed -

- + diff --git a/templates/paginate.html b/templates/paginate.html new file mode 100644 index 0000000..947d373 --- /dev/null +++ b/templates/paginate.html @@ -0,0 +1,25 @@ +{% macro paginate() %} + {% if paginator %} +
    + {% if paginator.previous %} +
  • + ← Prev +
    • + {% else %} +
  • + ← Prev +
    • + {% endif %} +
  • {{ paginator.current_index }} of {{ paginator.number_pagers }}
    • + {% if paginator.next %} +
  • + Next → +
    • + {% else %} +
  • + Next → +
    • + {% endif %} +
+ {% endif %} +{% endmacro paginate %} diff --git a/templates/post_macros.html b/templates/post_macros.html index db4befc..f971f8d 100644 --- a/templates/post_macros.html +++ b/templates/post_macros.html @@ -8,7 +8,7 @@ {%- if page.taxonomies.tags | length > 1 and loop.index != page.taxonomies.tags | length -%},{% endif %} {% endfor %} {% endif %} -
☕{{ page.reading_time }} minutes 📝 {{ page.word_count }}
+
☕ {{ page.reading_time }} minutes 📝 {{ page.word_count }}
{% endmacro meta %} {% macro snippet(page) %} diff --git a/templates/posts.html b/templates/posts.html index f482016..420c75c 100644 --- a/templates/posts.html +++ b/templates/posts.html @@ -1,15 +1,18 @@ {% extends "section.html" %} {% import "post_macros.html" as post_macros %} +{% import "paginate.html" as paginate_macro %} {% block content %}

Posts

{% for page in paginator.pages %}{{ post_macros::snippet(page=page) }}{% endfor %} - + + {% if paginator %}{{ paginate_macro::paginate() }}{% endif %}
{% include "footer.html" %} {% endblock content %}