✨ feat: add pinned posts functionality (#424)

README.md

@@ -120,7 +120,6 @@ highlight_theme = "css"
    +++
    title = "Home"
    paginate_by = 5  # Show 5 posts per page.
-   template = "section.html"
    +++
    ```
 
@@ -132,7 +131,6 @@ highlight_theme = "css"
    +++
    title = "Home"
    # Note we're not setting `paginate_by` here.
-   template = "section.html"
 
    [extra]
    section_path = "blog/_index.md"  # Where to find your posts.

content/_index.ca.md

@@ -1,7 +1,6 @@
 +++
 title = "Publicacions recents"
 sort_by = "date"
-template = "section.html"
 
 [extra]
 header = {title = "Hola! Soc tabi~", img = "img/main.webp", img_alt = "Óscar Fernández, l'autor de tabi" }

content/_index.es.md

@@ -1,7 +1,6 @@
 +++
 title = "Publicaciones recientes"
 sort_by = "date"
-template = "section.html"
 
 [extra]
 header = {title = "¡Hola! Soy tabi~", img = "img/main.webp", img_alt = "Óscar Fernández, el autor de tabi" }

content/_index.md

@@ -1,7 +1,6 @@
 +++
 title = "Latest posts"
 sort_by = "date"
-template = "section.html"
 
 [extra]
 header = {title = "Hello! I'm tabi~", img = "img/main.webp", img_alt = "Óscar Fernández, the theme's author" }

content/blog/_index.ca.md

@@ -2,7 +2,6 @@
 paginate_by = 5
 title = "Blog"
 sort_by = "date"
-template = "section.html"
 insert_anchor_links = "left"
 
 [extra]

content/blog/_index.es.md

@@ -2,7 +2,6 @@
 paginate_by = 5
 title = "Blog"
 sort_by = "date"
-template = "section.html"
 insert_anchor_links = "left"
 
 [extra]

content/blog/_index.md

@@ -2,7 +2,6 @@
 paginate_by = 5
 title = "Blog"
 sort_by = "date"
-template = "section.html"
 insert_anchor_links = "left"
 
 [extra]

content/blog/mastering-tabi-settings/index.ca.md

@@ -1,13 +1,14 @@
 +++
 title = "Domina la configuració de tabi: guia completa"
 date = 2023-09-18
-updated = 2024-10-20
+updated = 2024-11-13
 description = "Descobreix les múltiples maneres en què pots personalitzar tabi."
 
 [taxonomies]
 tags = ["funcionalitat", "tutorial", "preguntes freqüents"]
 
 [extra]
+pinned = true
 quick_navigation_buttons = true
 social_media_card = "social_cards/ca_blog_mastering_tabi_settings.jpg"
 +++
@@ -121,7 +122,6 @@ Configura `paginate_by` al front matter del teu arxiu `content/_index.md`:
 ```toml
 title = "Últimes publicacions"
 sort_by = "date"
-template = "section.html"
 paginate_by = 5  # Mostra 5 publicacions per pàgina.
 
 [extra]
@@ -137,7 +137,6 @@ Utilitza `section_path` a la secció `[extra]` del teu arxiu `content/_index.md`
 ```toml
 title = "Últimes publicacions"
 sort_by = "date"
-template = "section.html"
 # No configuris `paginate_by` aquí.
 
 [extra]
@@ -153,6 +152,23 @@ Notes addicionals:
 - El `title` al front matter estableix el títol que apareix sobre les publicacions.
 - Utilitza la ruta completa a l'arxiu `_index.md` de la secció per a `section_path`. Usar `section_path = "blog/"` no funcionarà.
 
+##### Fixar entrades
+
+Pots fixar entrades per mantenir-les a la part superior de la pàgina principal. En aquesta demo, aquesta entrada està fixada, així que apareix primera amb una icona i etiqueta de "fixada":
+
+{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/pinned_post_light.webp", dark_src="blog/mastering-tabi-settings/img/pinned_post_dark.webp", alt="Entrada fixada", full_width=true) }}
+
+Les entrades fixades es mostren primer, mantenint el seu ordre relatiu segons el `sort_by` de la secció, seguides per les entrades regulars.
+
+Per fixar una entrada, afegeix el següent al seu front matter:
+
+```toml
+[extra]
+pinned = true
+```
+
+{{ admonition(type="note", text="Aquesta configuració només afecta les pàgines que utilitzen la plantilla predeterminada `section.html`. En aquesta demo, això inclou la pàgina principal i `blog/`. Altres seccions —pàgines d'etiquetes, `archive/` o sèries— ignoren aquesta configuració.") }}
+
 ##### Mostrar la data dels articles al llistat
 
 Per defecte, quan es llisten els articles, es mostra la data de creació. Pots configurar quina(es) data(es) mostrar utilitzant l'opció `post_listing_date`. Configuracions disponibles:

content/blog/mastering-tabi-settings/index.es.md

@@ -1,13 +1,14 @@
 +++
 title = "Domina la configuración de tabi: guía completa"
 date = 2023-09-18
-updated = 2024-10-20
+updated = 2024-11-13
 description = "Descubre las múltiples maneras en que puedes personalizar tabi."
 
 [taxonomies]
 tags = ["funcionalidad", "tutorial", "preguntas frecuentes"]
 
 [extra]
+pinned = true
 quick_navigation_buttons = true
 social_media_card = "social_cards/es_blog_mastering_tabi_settings.jpg"
 +++
@@ -121,7 +122,6 @@ Configura `paginate_by` en el front matter de tu archivo `content/_index.md`:
 ```toml
 title = "Últimas publicaciones"
 sort_by = "date"
-template = "section.html"
 paginate_by = 5  # Muestra 5 publicaciones por página.
 
 [extra]
@@ -137,7 +137,6 @@ Utiliza `section_path` en la sección `[extra]` de tu archivo `content/_index.md
 ```toml
 title = "Últimas publicaciones"
 sort_by = "date"
-template = "section.html"
 # No configures `paginate_by` aquí.
 
 [extra]
@@ -153,6 +152,23 @@ Notas adicionales:
 - El `title` en el front matter establece el título que aparece sobre las publicaciones.
 - Usa la ruta completa al archivo `_index.md` de la sección para `section_path`. Usar `section_path = "blog/"` no funcionará.
 
+##### Fijar publicaciones
+
+Puedes fijar publicaciones para mantenerlas en la parte superior de la página principal. En esta demo, esta publicación está fijada, por lo que aparece primera con un icono y etiqueta de "fijada":
+
+{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/pinned_post_light.webp", dark_src="blog/mastering-tabi-settings/img/pinned_post_dark.webp", alt="Entrada fijada", full_width=true) }}
+
+Las publicaciones fijadas se muestran primero, manteniendo su orden relativo según el `sort_by` de la sección, seguidas por el resto de las publicaciones.
+
+Para fijar una publicación, añade lo siguiente a su front matter:
+
+```toml
+[extra]
+pinned = true
+```
+
+{{ admonition(type="note", text='Este ajuste solo afecta a las páginas que usan la plantilla predeterminada `section.html`. En esta demo, esto incluye la página principal y `blog/`. Otras secciones —páginas de etiquetas, `archive/` o series— ignoran este ajuste.') }}
+
 ##### Mostrar la fecha de los artículos en el listado
 
 Por defecto, cuando se listan los artículos, se muestra la fecha de creación. Puedes configurar qué fecha(s) mostrar usando la opción `post_listing_date`. Configuraciones disponibles:

content/blog/mastering-tabi-settings/index.md

@@ -1,13 +1,14 @@
 +++
 title = "Mastering tabi Settings: A Comprehensive Guide"
 date = 2023-09-18
-updated = 2024-10-20
+updated = 2024-11-13
 description = "Discover the many ways you can customise your tabi site."
 
 [taxonomies]
 tags = ["showcase", "tutorial", "FAQ"]
 
 [extra]
+pinned = true
 quick_navigation_buttons = true
 social_media_card = "social_cards/blog_mastering_tabi_settings.jpg"
 +++
@@ -121,7 +122,6 @@ Set `paginate_by` in the front matter of your `content/_index.md` file:
 ```toml
 title = "Latest posts"
 sort_by = "date"
-template = "section.html"
 paginate_by = 5  # Show 5 posts per page.
 
 [extra]
@@ -137,7 +137,6 @@ Use `section_path` in the `[extra]` section of your `content/_index.md` file:
 ```toml
 title = "Latest posts"
 sort_by = "date"
-template = "section.html"
 # Do not set `paginate_by` here.
 
 [extra]
@@ -153,6 +152,23 @@ Additional notes:
 - The `title` in the front matter sets the header that appears above the posts.
 - Use the full path to the section's `_index.md` file for `section_path`. Using `section_path = "blog/"` will not work.
 
+##### Pinning Posts
+
+You can pin posts to keep them at the top of the main page listing. In this demo, this post is pinned, so it appears first with a "pinned" icon and label:
+
+{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/pinned_post_light.webp", dark_src="blog/mastering-tabi-settings/img/pinned_post_dark.webp", alt="Pinned post", full_width=true) }}
+
+Pinned posts are shown first, maintaining their relative order of the section's `sort_by`, followed by regular posts.
+
+To pin a post, add the following to its front matter:
+
+```toml
+[extra]
+pinned = true
+```
+
+{{ admonition(type="note", text='This setting only affects pages using the default `section.html` template. In this demo, this includes the main page and `blog/`. Other sections —tags, archives, or series pages— ignore this setting.') }}
+
 ##### Display the Date of Posts in Listing
 
 By default, when listing posts, the date of post creation is shown. You can configure which date(s) to display using the `post_listing_date` option. Available settings:

i18n/ar.toml

@@ -30,6 +30,7 @@ few_results = "تم العثور على $NUMBER نتائج"  # for 3 to 10 searc
 many_results = "تم العثور على $NUMBER نتيجة"  # 11 or more search results.
 
 # Navigation.
+pinned = "مثبتة"
 jump_to_posts = "الإنتقال إلى التدوينات"
 read_more = "إقرأ المزيد"
 one_posts = "تدوينة واحدة"  #One blog post.

i18n/ca.toml

@@ -23,6 +23,7 @@ one_results = "$NUMBER resultat"  # "1 result"
 many_results = "$NUMBER resultats"  # "3 results"
 
 # Navigation.
+pinned = "Fixada"
 jump_to_posts = "Saltar als articles"
 read_more = "Llegir més"
 one_posts = "$NUMBER entrada"

i18n/de.toml

@@ -27,6 +27,7 @@ one_results = "$NUMBER Ergebnis"  # "1 result"
 many_results = "$NUMBER Ergebnisse"  # "3 results"
 
 # Navigation.
+pinned = "Angeheftet"
 jump_to_posts = "Zu den Beiträgen springen"
 read_more = "Weiterlesen"
 one_posts = "$NUMBER Beitrag"

i18n/en.toml

@@ -23,6 +23,7 @@ one_results = "$NUMBER result"  # "1 result"
 many_results = "$NUMBER results"  # "3 results"
 
 # Navigation.
+pinned = "Pinned"
 jump_to_posts = "Jump to posts"
 read_more = "Read more"
 one_posts = "$NUMBER post"

i18n/es.toml

@@ -23,6 +23,7 @@ one_results = "$NUMBER resultado"
 many_results = "$NUMBER resultados"
 
 # Navigation.
+pinned = "Fijada"
 jump_to_posts = "Saltar a las entradas"
 read_more = "Leer más"
 one_posts = "$NUMBER entrada"

i18n/et.toml

@@ -23,6 +23,7 @@ one_results = "$NUMBER tulemus"  # "1 result"
 many_results = "$NUMBER tulemust"  # "3 results"
 
 # Navigation.
+pinned = "Kinnitatud"
 jump_to_posts = "Hüppa postitusteni"
 read_more = "Loe edasi"
 one_posts = "$NUMBER postitus"

i18n/fa.toml

@@ -23,6 +23,7 @@ one_results = "$NUMBER نتیجه"   # "1 result"
 many_results = "$NUMBER نتیجه"  # "3 results"
 
 # Navigation.
+pinned = "سنجاق‌شده"
 jump_to_posts = "پرش به نوشته‌ها"
 read_more = "ادامه مطلب"
 one_posts = "$NUMBER مطلب"

i18n/fr.toml

@@ -23,6 +23,7 @@ one_results = "$NUMBER résultat"  # "1 result"
 many_results = "$NUMBER résultats"  # "3 results"
 
 # Navigation.
+pinned = "Épinglé"
 jump_to_posts = "Aller aux articles"
 read_more = "Lire plus"
 one_posts = "$NUMBER article"

i18n/hi.toml

@@ -25,6 +25,7 @@ one_results = "$NUMBER परिणाम"  # "1 result"
 many_results = "$NUMBER परिणाम"  # "3 results"
 
 # Navigation.
+pinned = "पिन किया गया"
 jump_to_posts = "पोस्ट पर जाएं"
 read_more = "और पढ़ें"
 one_posts = "$NUMBER पोस्ट"

i18n/it.toml

@@ -23,6 +23,7 @@ one_results = "$NUMBER risultato"
 many_results = "$NUMBER risultati"
 
 # Navigation.
+pinned = "In evidenza"
 jump_to_posts = "Vai ai post"
 read_more = "Leggi di più"
 one_posts = "$NUMBER post"

i18n/ja.toml

@@ -27,6 +27,7 @@ one_results = "$NUMBER 結果"  # "1 result"
 many_results = "$NUMBER 結果"  # "3 results"
 
 # Navigation.
+pinned = "固定"
 jump_to_posts = "投稿へジャンプ"
 read_more = "続きを読む"
 one_posts = "$NUMBER 投稿"

i18n/ko.toml

@@ -27,6 +27,7 @@ one_results = "$NUMBER 결과"  # "1 result"
 many_results = "$NUMBER 결과"  # "3 results"
 
 # Navigation.
+pinned = "고정됨"
 jump_to_posts = "게시물로 이동"
 read_more = "더 읽기"
 one_posts = "$NUMBER 게시물"

i18n/nl.toml

@@ -23,6 +23,7 @@ one_results = "$NUMBER resultaat"  # "1 result"
 many_results = "$NUMBER resultaten"  # "3 results"
 
 # Navigation.
+pinned = "Vastgezet"
 jump_to_posts = "Naar berichten springen"
 read_more = "Lees meer"
 one_posts = "$NUMBER bericht" # "1 post"

i18n/or.toml

@@ -23,6 +23,7 @@ one_results = "$NUMBER ପରିଣାମ"  # "1 result"
 many_results = "$NUMBER ପରିଣାମଗୁଡ଼ିକ"  # "3 results"
 
 # Navigation.
+pinned = "ପିନ୍ କରାଯାଇଛି"
 jump_to_posts = "ପୋଷ୍ଟକୁ ଯାଆନ୍ତୁ"
 read_more = "ଆହୁରି ପଢ଼ନ୍ତୁ"
 one_posts = "$NUMBER ପୋଷ୍ଟ"

i18n/pt-PT.toml

@@ -23,6 +23,7 @@ one_results = "$NUMBER resultado"  # "1 result"
 many_results = "$NUMBER resultados"  # "3 results"
 
 # Navigation.
+pinned = "Fixado"
 jump_to_posts = "Ir para as publicações"
 read_more = "Ler mais"
 one_posts = "$NUMBER publicação"

i18n/ru.toml

@@ -28,6 +28,7 @@ few_results = "$NUMBER результата"  # 2, 3, 4 but not 12-14
 many_results = "$NUMBER результатов"  # 5-9, 0, 11-14, and others
 
 # Navigation.
+pinned = "Закреплено"
 jump_to_posts = "Перейти к записям"
 read_more = "Читать далее"
 post = "пост"

i18n/uk.toml

@@ -33,6 +33,7 @@ few_results = "$NUMBER результати"
 many_results = "$NUMBER результатів"
 
 # Navigation.
+pinned = "Закріплено"
 jump_to_posts = "Перейти до дописів"
 read_more = "Читати далі"
 one_posts = "$NUMBER пост"

i18n/zh-Hans.toml

@@ -23,6 +23,7 @@ one_results = "$NUMBER 个结果"
 many_results = "$NUMBER 个结果"
 
 # Navigation.
+pinned = "置顶"
 jump_to_posts = "跳转到文章"
 read_more = "阅读全文"
 one_posts = "$NUMBER 篇文章"

i18n/zh-Hant.toml

@@ -23,6 +23,7 @@ one_results = "$NUMBER 個結果"
 many_results = "$NUMBER 個結果"
 
 # Navigation.
+pinned = "釘選"
 jump_to_posts = "跳轉到文章"
 read_more = "閱讀全文"
 one_posts = "$NUMBER 篇文章"

sass/parts/_posts_list.scss

@@ -3,11 +3,14 @@
     grid-template-columns: 1fr 8fr;
 }
 
+
+$padding: 2.5rem;
+
 .bloglist-meta {
     display: flex;
     align-items: flex-start;
     background-color: var(--navbar-color);
-    padding-block: 2.5rem;
+    padding-block: $padding;
 
     ul {
         margin-inline-end: 0.7rem;
@@ -34,9 +37,26 @@
 
 .bloglist-content {
     display: flex;
+    position: relative;
     align-items: flex-start;
     background-color: var(--navbar-color);
-    padding: 2.5rem 0;
+    padding: $padding 0;
+
+    .pinned-label {
+        display: flex;
+        position: absolute;
+        top: 0.8rem;
+        align-items: center;
+        gap: 0.3rem;
+        color: var(--meta-color);
+        font-weight: 300;
+        font-size: 0.8rem;
+    }
+
+    .pinned-label svg {
+        width: 0.8rem;
+        height: 0.8rem;
+    }
 
     div {
         flex: 1;
@@ -100,9 +120,13 @@
         grid-template-columns: 1fr;
     }
 
+    .pinned-label svg {
+        margin-bottom: -2px;
+    }
+
     .bloglist-meta {
-        padding-block: 2rem;
         border-bottom: 0;
+        padding-block: 2rem;
 
         ul {
             margin-block-end: 0;
@@ -121,6 +145,13 @@
         padding: 0;
         padding-bottom: 2rem;
 
+
+        .pinned-label {
+            position: static;
+            margin: 0;
+            margin-top: -1.9rem;
+        }
+
         div {
             width: 100%;
         }

templates/macros/list_posts.html

@@ -3,12 +3,30 @@
 {# It would also work with arrays (e.g. ["dates"] or ["indexes"] or even ["indexes","dates"]). #}
 {# Nevertheless, arrays cannot be used as a default value for a macro parameter in Tera (see https://github.com/Keats/tera/issues/710). #}
 {# `paginator` is only used to compute indexes metadata and can be let empty otherwise. #}
-{% macro list_posts(posts, max, metadata="dates", language_strings="", section_path="blog", paginator="") %}
+{% macro list_posts(posts, max, metadata="dates", language_strings="", section_path="blog", paginator="", pinned_first=false) %}
 
 {%- set separator = config.extra.separator | default(value="•") -%}
 
-<div class="bloglist-container">
+{# Separate pinned and regular posts #}
+{% set all_posts = [] %}
+{% if pinned_first %}
+    {% set pinned_posts = [] %}
+    {% set regular_posts = [] %}
     {% for post in posts %}
+        {% if post.extra.pinned %}
+            {% set_global pinned_posts = pinned_posts | concat(with=post) %}
+        {% else %}
+            {% set_global regular_posts = regular_posts | concat(with=post) %}
+        {% endif %}
+    {% endfor %}
+    {% set all_posts = pinned_posts | concat(with=regular_posts) %}
+{% else %}
+    {% set all_posts = posts %}
+{% endif %}
+
+<div class="bloglist-container">
+    {# Display all posts (pinned first, then regular) #}
+    {% for post in all_posts %}
         {% if loop.index <= max %}
             {% if loop.index == max or loop.last %}
                 {% set bottom_divider = false %}
@@ -16,81 +34,90 @@
                 {% set bottom_divider = true %}
             {% endif %}
 
-        <section class="bloglist-meta {% if bottom_divider -%}bottom-divider{%- endif -%}">
+            <section class="bloglist-meta {% if bottom_divider -%}bottom-divider{%- endif -%}">
-            <ul>
+                <ul>
-                {%- if "indexes" in metadata -%}
+                    {%- if "indexes" in metadata -%}
-                    {%- set post_index = loop.index -%}
+                        {%- set post_index = loop.index -%}
-                    {%- set nb_posts = posts | length -%}
+                        {%- set number_of_posts = posts | length -%}
-                    {# in case we have a pager, the index has been computed for the current page. #}
+                        {# in case we have a pager, the index has been computed for the current page. #}
-                    {%- if paginator -%}
+                        {%- if paginator -%}
-                        {%- set nb_posts = paginator.total_pages -%}
+                            {%- set number_of_posts = paginator.total_pages -%}
-                        {%- set number_of_other_pages = paginator.current_index - 1 -%}
+                            {%- set number_of_other_pages = paginator.current_index - 1 -%}
-                        {%- set posts_per_page = paginator.paginate_by -%}
+                            {%- set posts_per_page = paginator.paginate_by -%}
-                        {%- set posts_in_other_pages = number_of_other_pages * posts_per_page -%}
+                            {%- set posts_in_other_pages = number_of_other_pages * posts_per_page -%}
-                        {%- set post_index = posts_in_other_pages + post_index -%}
+                            {%- set post_index = posts_in_other_pages + post_index -%}
-                    {%- endif -%}
+                        {%- endif -%}
-                    {%- if macros_settings::evaluate_setting_priority(setting="post_listing_index_reversed", page=section, default_global_value=false) == "true" -%}
+                        {%- if macros_settings::evaluate_setting_priority(setting="post_listing_index_reversed", page=section, default_global_value=false) == "true" -%}
-                        {# index starts at 1 instead of 0 #}
+                            {# index starts at 1 instead of 0 #}
-                        {%- set post_index = nb_posts + 1 - post_index -%}
+                            {%- set post_index = number_of_posts + 1 - post_index -%}
-                    {%- endif -%}
+                        {%- endif -%}
-                    <li class="index-label">{{ post_index }}</li>
+                        <li class="index-label">{{ post_index }}</li>
-                {%- endif -%}
-                {%- if "dates" in metadata -%}
-                    {%- set allowed_post_listing_dates = ["date", "updated", "both"] -%}
-                    {%- set post_listing_date = config.extra.post_listing_date | default(value="date") -%}
-                    {%- if post_listing_date not in allowed_post_listing_dates -%}
-                        {{ throw(message="ERROR: Invalid value for config.extra.post_listing_date. Allowed values are 'date', 'updated', or 'both'.") }}
                     {%- endif -%}
 
-                    {%- set show_date = post.date and post_listing_date == "date" or post.date and post_listing_date == "both" or post.date and post_listing_date == "updated" and not post.updated -%}
+                    {%- if "dates" in metadata -%}
-                    {%- set show_updated = post.updated and post_listing_date == "updated" or post.updated and post_listing_date == "both" -%}
+                        {%- set allowed_post_listing_dates = ["date", "updated", "both"] -%}
+                        {%- set post_listing_date = config.extra.post_listing_date | default(value="date") -%}
+                        {%- if post_listing_date not in allowed_post_listing_dates -%}
+                            {{ throw(message="ERROR: Invalid value for config.extra.post_listing_date. Allowed values are 'date', 'updated', or 'both'.") }}
+                        {%- endif -%}
 
-                    {%- if show_date or show_updated -%}
+                        {%- set show_date = post.date and post_listing_date == "date" or post.date and post_listing_date == "both" or post.date and post_listing_date == "updated" and not post.updated -%}
-                        {%- if show_date -%}
+                        {%- set show_updated = post.updated and post_listing_date == "updated" or post.updated and post_listing_date == "both" -%}
-                            <li class="date">{{- macros_format_date::format_date(date=post.date, short=false, language_strings=language_strings) -}}</li>
+
-                        {%- endif -%}
+                        {%- if show_date or show_updated -%}
-                        {%- if show_date and show_updated -%}
+                            {%- if show_date -%}
-                            <li class="mobile-only">{{- separator -}}</li>
+                                <li class="date">{{- macros_format_date::format_date(date=post.date, short=false, language_strings=language_strings) -}}</li>
-                        {%- endif -%}
+                            {%- endif -%}
-                        {%- if show_updated -%}
+                            {%- if show_date and show_updated -%}
-                            {%- set last_updated_str = macros_translate::translate(key="last_updated_on", default="Updated on $DATE", language_strings=language_strings) -%}
+                                <li class="mobile-only">{{- separator -}}</li>
-                            {%- set formatted_date = macros_format_date::format_date(date=post.updated, short=true, language_strings=language_strings) -%}
+                            {%- endif -%}
-                            {%- set updated_str = last_updated_str | replace(from="$DATE", to=formatted_date) -%}
+                            {%- if show_updated -%}
-                            <li class="date">{{ updated_str }}</li>
+                                {%- set last_updated_str = macros_translate::translate(key="last_updated_on", default="Updated on $DATE", language_strings=language_strings) -%}
+                                {%- set formatted_date = macros_format_date::format_date(date=post.updated, short=true, language_strings=language_strings) -%}
+                                {%- set updated_str = last_updated_str | replace(from="$DATE", to=formatted_date) -%}
+                                <li class="date">{{ updated_str }}</li>
+                            {%- endif -%}
                         {%- endif -%}
                     {%- endif -%}
-                {%- endif -%}
 
-                {% if post.draft %}
+                    {% if post.draft %}
-                <li class="draft-label">{{ macros_translate::translate(key="draft", default="DRAFT", language_strings=language_strings) }}</li>
+                        <li class="draft-label">{{ macros_translate::translate(key="draft", default="DRAFT", language_strings=language_strings) }}</li>
-                {% endif %}
-            </ul>
-        </section>
-        <section class="bloglist-content {% if bottom_divider -%}bottom-divider{%- endif -%}">
-            <div>
-                <h2 class="bloglist-title">
-                    <a href="{{ post.permalink }}">{{ post.title }}</a>
-                </h2>
-
-                {% if post.taxonomies.tags %}
-                    <div class="bloglist-tags">
-                        {% for tag in post.taxonomies.tags %}
-                            <a class="tag" href="{{ get_taxonomy_url(kind='tags', name=tag, lang=lang) | safe }}">{{ tag }}</a>
-                        {% endfor %}
-                    </div>
-                {% endif %}
-
-                <div class="description">
-                    {% if post.description %}
-                        <p>{{ post.description }}</p>
-                    {% elif post.summary %}
-                        <p>{{ post.summary | striptags | trim_end_matches(pat=".") | safe }}…</p>
                     {% endif %}
+                </ul>
+            </section>
+
+            <section class="bloglist-content {% if bottom_divider -%}bottom-divider{%- endif -%}">
+                <div>
+                    {% if pinned_first and post.extra.pinned %}
+                    <div class="pinned-label">
+                        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M10.5 2.255v-.01c.003-.03.013-.157-.361-.35C9.703 1.668 8.967 1.5 8 1.5s-1.703.169-2.138.394c-.375.194-.365.32-.362.351v.01c-.003.03-.013.157.362.35C6.297 2.832 7.033 3 8 3s1.703-.169 2.139-.394c.374-.194.364-.32.361-.351M12 2.25c0 .738-.433 1.294-1.136 1.669l.825 2.31c1.553.48 2.561 1.32 2.561 2.52c0 1.854-2.402 2.848-5.5 2.985V15a.75.75 0 0 1-1.5 0v-3.266c-3.098-.136-5.5-1.131-5.5-2.984c0-1.2 1.008-2.04 2.561-2.52l.825-2.311C4.433 3.544 4 2.988 4 2.25C4 .75 5.79 0 8 0s4 .75 4 2.25" clip-rule="evenodd"/></svg>
+                        <span>{{ macros_translate::translate(key="pinned", default="Pinned", language_strings=language_strings) }}</span>
+                    </div>
+                    {% endif %}
+
+                    <h2 class="bloglist-title">
+                        <a href="{{ post.permalink }}">{{ post.title }}</a>
+                    </h2>
+
+                    {% if post.taxonomies.tags %}
+                        <div class="bloglist-tags">
+                            {% for tag in post.taxonomies.tags %}
+                                <a class="tag" href="{{ get_taxonomy_url(kind='tags', name=tag, lang=lang) | safe }}">{{ tag }}</a>
+                            {% endfor %}
+                        </div>
+                    {% endif %}
+
+                    <div class="description">
+                        {% if post.description %}
+                            <p>{{ post.description }}</p>
+                        {% elif post.summary %}
+                            <p>{{ post.summary | striptags | trim_end_matches(pat=".") | safe }}…</p>
+                        {% endif %}
+                    </div>
+                    <a class="readmore" href="{{ post.permalink }}">{{ macros_translate::translate(key="read_more", default="Read more", language_strings=language_strings) }}&nbsp;<span class="arrow">→</span></a>
                 </div>
-                <a class="readmore" href="{{ post.permalink }}">{{ macros_translate::translate(key="read_more", default="Read more", language_strings=language_strings) }}&nbsp;<span class="arrow">→</span></a>
+            </section>
-            </div>
+        {% endif %}
-        </section>
-    {% endif %}
         {% if not loop.last %}
             {% if loop.index == max %}
                 <div class="all-posts">
@@ -100,5 +127,4 @@
         {% endif %}
     {% endfor %}
 </div>
-
 {% endmacro %}

templates/partials/main_page_posts_list.html

@@ -37,7 +37,7 @@
         {% endif -%}
 
         {% set max_posts = section.extra.max_posts | default(value=999999) %}
-        {{ macros_list_posts::list_posts(posts=pages, max=max_posts, language_strings=language_strings, section_path=path) }}
+        {{ macros_list_posts::list_posts(posts=pages, max=max_posts, language_strings=language_strings, section_path=path, pinned_first=true) }}
     </div>
 
     {% if paginator and paginator.pages | length > 0 %}