redesign pin and enable pinning only in section.html

welpo · Nov 13, 2024 · 48bfa5c · 48bfa5c
1 parent e7d64c2
commit 48bfa5c
Show file tree

Hide file tree

Showing 15 changed files with 58 additions and 53 deletions.
diff --git a/README.md b/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.

diff --git a/content/_index.ca.md b/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" }

diff --git a/content/_index.es.md b/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" }

diff --git a/content/_index.md b/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" }

diff --git a/content/blog/_index.ca.md b/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]

diff --git a/content/blog/_index.es.md b/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]

diff --git a/content/blog/_index.md b/content/blog/_index.md
@@ -2,7 +2,6 @@
 paginate_by = 5
 title = "Blog"
 sort_by = "date"
-template = "section.html"
 insert_anchor_links = "left"
 
 [extra]

diff --git a/content/blog/mastering-tabi-settings/img/pinned_post_dark.webp b/content/blog/mastering-tabi-settings/img/pinned_post_dark.webp
diff --git a/content/blog/mastering-tabi-settings/img/pinned_post_light.webp b/content/blog/mastering-tabi-settings/img/pinned_post_light.webp
diff --git a/content/blog/mastering-tabi-settings/index.ca.md b/content/blog/mastering-tabi-settings/index.ca.md
@@ -1,7 +1,7 @@
 +++
 title = "Domina la configuració de tabi: guia completa"
 date = 2023-09-18
-updated = 2024-11-08
+updated = 2024-11-13
 description = "Descobreix les múltiples maneres en què pots personalitzar tabi."
 
 [taxonomies]
@@ -122,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]
@@ -138,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]
@@ -169,7 +167,8 @@ Per fixar una entrada, afegeix el següent al seu front matter:
 pinned = true
 ```
 
-{{ admonition(type="note", text='Aquesta configuració només afecta la pàgina principal (`template = "section.html"`). En altres seccions (p.ex. `blog/`, `archive/`), aquest configuració no té cap efecte.') }}
+
+{{ 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
 

diff --git a/content/blog/mastering-tabi-settings/index.es.md b/content/blog/mastering-tabi-settings/index.es.md
@@ -1,7 +1,7 @@
 +++
 title = "Domina la configuración de tabi: guía completa"
 date = 2023-09-18
-updated = 2024-11-08
+updated = 2024-11-13
 description = "Descubre las múltiples maneras en que puedes personalizar tabi."
 
 [taxonomies]
@@ -122,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]
@@ -138,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]
@@ -169,7 +167,7 @@ Para fijar una publicación, añade lo siguiente a su front matter:
 pinned = true
 ```
 
-{{ admonition(type="note", text='Este ajuste solo afecta a la página principal (`template = "section.html"`). En otras secciones (p.ej. `blog/`, `archive/`), este ajuste no tiene ningún efecto.') }}
+{{ 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
 

diff --git a/content/blog/mastering-tabi-settings/index.md b/content/blog/mastering-tabi-settings/index.md
@@ -1,7 +1,7 @@
 +++
 title = "Mastering tabi Settings: A Comprehensive Guide"
 date = 2023-09-18
-updated = 2024-11-08
+updated = 2024-11-13
 description = "Discover the many ways you can customise your tabi site."
 
 [taxonomies]
@@ -122,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]
@@ -138,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]
@@ -169,7 +167,7 @@ To pin a post, add the following to its front matter:
 pinned = true
 ```
 
-{{ admonition(type="note", text='This setting only affects the main page (`template = "section.html"`). On other sections (e.g. `blog/`, `archive/`), this setting makes no difference.') }}
+{{ 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
 

diff --git a/sass/parts/_posts_list.scss b/sass/parts/_posts_list.scss
@@ -3,22 +3,14 @@
     grid-template-columns: 1fr 8fr;
 }
 
-.pinned-label {
-    display: flex;
-    align-items: center;
-    gap: 0.3rem;
-}
 
-.pinned-label svg {
-    width: 1rem;
-    height: 1rem;
-}
+$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;
@@ -45,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;
@@ -136,6 +145,13 @@
         padding: 0;
         padding-bottom: 2rem;
 
+
+        .pinned-label {
+            position: static;
+            margin: 0;
+            margin-top: -1.9rem;
+        }
+
         div {
             width: 100%;
         }

diff --git a/templates/macros/list_posts.html b/templates/macros/list_posts.html
@@ -3,24 +3,29 @@
 {# 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="•") -%}
 
 {# Separate pinned and regular posts #}
-{% 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 = [] %}
+{% 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) #}
-    {% set all_posts = pinned_posts | concat(with=regular_posts) %}
     {% for post in all_posts %}
         {% if loop.index <= max %}
             {% if loop.index == max or loop.last %}
@@ -59,16 +64,6 @@
                         {%- 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 -%}
                         {%- set show_updated = post.updated and post_listing_date == "updated" or post.updated and post_listing_date == "both" -%}
 
-                        {% if post.extra.pinned %}
-                            <li 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>
-                            </li>
-                            {%- if show_date -%}
-                                <li class="mobile-only">{{- separator -}}</li>
-                            {%- endif -%}
-                        {% endif %}
-
                         {%- if show_date or show_updated -%}
                             {%- if show_date -%}
                                 <li class="date">{{- macros_format_date::format_date(date=post.date, short=false, language_strings=language_strings) -}}</li>
@@ -93,6 +88,13 @@
 
             <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>

diff --git a/templates/partials/main_page_posts_list.html b/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 %}