✨ feat: add date visibility options to post list (#330)

Co-authored-by: welpo <welpo@users.noreply.github.com>

config.toml

@@ -146,6 +146,12 @@ show_reading_time = true
 # Can be set at page or section levels, following the hierarchy: page > section > config. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy
 show_date = true
 
+# Determines how dates are displayed in the post listing (e.g. front page or /blog). Options:
+# "date" - Show only the original date of the post (default if unset).
+# "updated" - Show only the last updated date of the post.
+# "both" - Show both the original date and the last updated date.
+post_listing_date = "date"
+
 # DEPRECATED!
 # Use Zola's built-in `bottom_footnotes = true` in the [markdown] section instead. (Available since v0.19.0)
 # Adds backlinks to footnotes (loads ~500 bytes of JavaScripts).

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-07-04
+updated = 2024-07-09
 description = "Descobreix les múltiples maneres en què pots personalitzar tabi."
 
 [taxonomies]
@@ -141,6 +141,14 @@ Fixa't que si configures `section_path`, no cal que configuris `paginate_by`. Po
 
 El `title` és el títol que apareix a sobre de les publicacions.
 
+##### 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:
+
+- `date`: Mostra només la data de publicació original de l'article (opció per defecte).
+- `updated`: Mostra només la data de l'última actualització de l'article.
+- `both`: Mostra tant la data de publicació original com la data de l'última actualització.
+
 #### Llistat de Projectes
 
 Pots mostrar una selecció de projectes a la teva pàgina principal. Per fer això, primer necessitaràs configurar el directori `projects`.

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-07-04
+updated = 2024-07-09
 description = "Descubre las múltiples maneras en que puedes personalizar tabi."
 
 [taxonomies]
@@ -141,6 +141,14 @@ Fíjate que si configuras `section_path`, no necesitas configurar `paginate_by`.
 
 El `title` es el encabezado que aparece sobre las publicaciones.
 
+##### 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:
+
+- `date`: Muestra solo la fecha de publicación original del artículo (opción por defecto).
+- `updated`: Muestra solo la fecha de la última actualización del artículo.
+- `both`: Muestra tanto la fecha de publicación original como la fecha de la última actualización.
+
 #### Listado de proyectos
 
 Puedes mostrar una selección de proyectos en tu página principal. Para hacer esto, primero necesitarás configurar el directorio `projects`.

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

@@ -1,7 +1,7 @@
 +++
 title = "Mastering tabi Settings: A Comprehensive Guide"
 date = 2023-09-18
-updated = 2024-07-04
+updated = 2024-07-09
 description = "Discover the many ways you can customise your tabi site."
 
 [taxonomies]
@@ -141,6 +141,14 @@ Notice how if you set `section_path`, you don't need to set `paginate_by`. You c
 
 The `title` is the header that appears above the posts.
 
+##### 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:
+
+- `date`: Show only the original date of the post (default).
+- `updated`: Show only the last updated date of the post.
+- `both`: Show both the original date and the last updated date.
+
 #### Listing Projects
 
 You can showcase a selection of projects on your main page. To do this, you'll need to set up the `projects` directory first.

sass/main.scss

@@ -276,6 +276,10 @@ video {
     margin-bottom: 2rem;
 }
 
+.mobile-only {
+    display: none;
+}
+
 @media only screen and (max-width: 1000px) {
     .content {
         max-width: var(--normal-layout-width);
@@ -292,6 +296,10 @@ video {
         max-width: none;
         overflow-x: auto;
     }
+
+    .mobile-only {
+        display: block;
+    }
 }
 
 @media only screen and (max-width: 600px) {

sass/parts/_posts_list.scss

@@ -10,6 +10,7 @@
     padding: 2.5rem 0;
 
     .bloglist-meta {
+        margin-right: 0.7rem;
         padding: 0;
         width: 13.5rem;
         color: var(--meta-color);

static/feed_style.xsl

@@ -42,17 +42,42 @@
                 <xsl:attribute name="href">
                   <xsl:value-of select="/atom:feed/@xml:base"/>
                 </xsl:attribute>
-            <xsl:value-of select="/atom:feed/str:translations/str:visit_the_site" />&#160;<span class="arrow">→</span></a><p></p>
+                <xsl:value-of select="/atom:feed/str:translations/str:visit_the_site" />&#160;<span class="arrow">→</span>
+              </a>
+              <p></p>
             </section>
-
             <div class="padding-top listing-title bottom-divider">
               <h1><xsl:value-of select="/atom:feed/str:translations/str:recent_posts" /></h1>
             </div>
+            <xsl:variable name="post_listing_date" select="/atom:feed/atom:post_listing_date"/>
             <div class="bloglist-container">
               <xsl:for-each select="/atom:feed/atom:entry">
                 <section class="bloglist-row bottom-divider">
                   <ul class="bloglist-meta">
-                    <li class="date"><xsl:value-of select="substring(atom:published, 0, 11)"/></li>
+                    <xsl:variable name="show_date" select="$post_listing_date = 'date' or $post_listing_date = 'both'"/>
+                    <xsl:variable name="show_updated" select="$post_listing_date = 'updated' or $post_listing_date = 'both'"/>
+
+                    <xsl:if test="$show_date">
+                      <li class="date">
+                        <xsl:value-of select="substring(atom:published, 0, 11)"/>
+                      </li>
+                    </xsl:if>
+
+                    <xsl:if test="$show_date and $show_updated">
+                      <li class="mobile-only">
+                        <xsl:value-of select="/atom:feed/str:translations/str:separator"/>
+                      </li>
+                    </xsl:if>
+
+                    <xsl:if test="$show_updated">
+                      <li class="date">
+                        <xsl:variable name="update_string" select="/atom:feed/str:translations/str:last_updated_on"/>
+                        <xsl:variable name="update_date" select="substring(atom:updated, 0, 11)"/>
+                        <xsl:value-of select="substring-before($update_string, '$DATE')"/>
+                        <xsl:value-of select="$update_date"/>
+                        <xsl:value-of select="substring-after($update_string, '$DATE')"/>
+                      </li>
+                    </xsl:if>
                   </ul>
                   <div class="bloglist-content">
                     <div class="bloglist-title">

templates/atom.xml

@@ -9,6 +9,9 @@
 <?xml-stylesheet href="{{ get_url(path='/feed_style.xsl', trailing_slash=false) | safe }}" type="text/xsl"?>
 <feed xmlns="http://www.w3.org/2005/Atom" xmlns:base="http://purl.org/atompub/base/1.0/" xml:lang="{{ lang }}" xml:base="{{ config.base_url }}">
     <str:translations xmlns:str="https://github.com/welpo/tabi">
+        <str:separator>
+            {{  config.extra.separator | default(value="•") }}
+        </str:separator>
         <str:about_feeds>
             {{- macros_translate::translate(key="about_feeds", default="This is a web feed, also known as an Atom feed. Subscribe by copying the URL from the address bar into your newsreader", language_strings=language_strings) -}}
         </str:about_feeds>
@@ -18,6 +21,9 @@
         <str:recent_posts>
             {{- macros_translate::translate(key="recent_posts", default="Recent posts", language_strings=language_strings) -}}
         </str:recent_posts>
+        <str:last_updated_on>
+            {{- macros_translate::translate(key="last_updated_on", default="Updated on $DATE", language_strings=language_strings) -}}
+        </str:last_updated_on>
     </str:translations>
 
     {#- Load extra CSS (skin) if set in config.toml -#}
@@ -34,6 +40,7 @@
         <subtitle>{{ config.description }}</subtitle>
     {%- endif %}
     <link href="{{ feed_url | safe }}" rel="self" type="application/atom+xml"/>
+    <post_listing_date>{{ config.extra.post_listing_date | default(value="date") }}</post_listing_date>
     <link href="
         {%- if section -%}
             {{ section.permalink | escape_xml | safe }}

templates/macros/list_posts.html

@@ -1,5 +1,7 @@
 {% macro list_posts(posts, max, language_strings="", section_path="blog") %}
 
+{%- set separator = config.extra.separator | default(value="•") -%}
+
 <div class="bloglist-container">
     {% for post in posts %}
         {% if loop.index <= max %}
@@ -12,9 +14,30 @@
             {% endif %}
 
             <ul class="bloglist-meta">
-                {% if post.date %}
+                {%- set allowed_post_listing_dates = ["date", "updated", "both"] -%}
-                <li class="date">{{ macros_format_date::format_date(date=post.date, short=false, language_strings=language_strings) }}</li>
+                {%- set post_listing_date = config.extra.post_listing_date | default(value="date") -%}
-                {% endif %}
+                {%- 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" -%}
+                {%- set show_updated = post.updated and post_listing_date == "updated" or post.updated and post_listing_date == "both" -%}
+
+                {%- 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>
+                    {%- endif -%}
+                    {%- if show_date and show_updated -%}
+                        <li class="mobile-only">{{- separator -}}</li>
+                    {%- endif -%}
+                    {%- if show_updated -%}
+                        {%- 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 -%}
+
                 {% if post.draft %}
                 <li class="draft-label">{{ macros_translate::translate(key="draft", default="DRAFT", language_strings=language_strings) }}</li>
                 {% endif %}

theme.toml

@@ -103,6 +103,12 @@ show_reading_time = true
 # Can be set at page or section levels, following the hierarchy: page > section > config. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy
 show_date = true
 
+# Determines how dates are displayed in the post listing (e.g. front page or /blog). Options:
+# "date" - Show only the original date of the post (default if unset).
+# "updated" - Show only the last updated date of the post.
+# "both" - Show both the original date and the last updated date.
+post_listing_date = "date"
+
 # DEPRECATED!
 # Use Zola's built-in `bottom_footnotes = true` in the [markdown] section instead. (Available since v0.19.0)
 # Adds backlinks to footnotes (loads ~500 bytes of JavaScripts).