From 313e573a3a09bebc3e483b540342ebc8d72c2373 Mon Sep 17 00:00:00 2001 From: welpo Date: Tue, 9 Jul 2024 23:18:58 +0200 Subject: [PATCH 1/3] =?UTF-8?q?=E2=9C=A8=20feat:=20add=20date=20visibility?= =?UTF-8?q?=20options=20to=20post=20list?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: sam <12381166+sam9032@users.noreply.github.com> Co-authored-by: welpo --- config.toml | 6 ++ .../blog/mastering-tabi-settings/index.ca.md | 10 ++- .../blog/mastering-tabi-settings/index.es.md | 10 ++- content/blog/mastering-tabi-settings/index.md | 10 ++- sass/main.scss | 8 +++ sass/parts/_posts_list.scss | 1 + static/feed_style.xsl | 63 ++++++++++++------- templates/atom.xml | 4 ++ templates/macros/list_posts.html | 23 ++++++- theme.toml | 6 ++ 10 files changed, 111 insertions(+), 30 deletions(-) diff --git a/config.toml b/config.toml index bb93fe386..87a093219 100644 --- a/config.toml +++ b/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. +# "updated" - Show only the last updated date of the post. +# "both" - Show both the original date and the last updated date. +post_listing_date = "both" + # 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). diff --git a/content/blog/mastering-tabi-settings/index.ca.md b/content/blog/mastering-tabi-settings/index.ca.md index e67961502..497947442 100644 --- 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-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`. diff --git a/content/blog/mastering-tabi-settings/index.es.md b/content/blog/mastering-tabi-settings/index.es.md index 10eaa3d9e..6f78c8d10 100644 --- 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-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`. diff --git a/content/blog/mastering-tabi-settings/index.md b/content/blog/mastering-tabi-settings/index.md index 36cb8447b..32c5dbd32 100644 --- 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-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. diff --git a/sass/main.scss b/sass/main.scss index 13401e6a9..5d1f2751a 100644 --- a/sass/main.scss +++ b/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) { diff --git a/sass/parts/_posts_list.scss b/sass/parts/_posts_list.scss index 1a9243a92..a4572fd6e 100644 --- a/sass/parts/_posts_list.scss +++ b/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); diff --git a/static/feed_style.xsl b/static/feed_style.xsl index 6068bd232..04dfee01c 100644 --- a/static/feed_style.xsl +++ b/static/feed_style.xsl @@ -19,40 +19,55 @@
- - - - - About Feeds - - - - - - + + + + + About Feeds + + + + + +
-
-

+

+
    -
    • + +
  • + +
    • +     + +
  • + + + + + +
    • +
diff --git a/templates/atom.xml b/templates/atom.xml index 4f59410c3..886e6d1ef 100644 --- a/templates/atom.xml +++ b/templates/atom.xml @@ -18,6 +18,9 @@ {{- macros_translate::translate(key="recent_posts", default="Recent posts", language_strings=language_strings) -}} + + {{- macros_translate::translate(key="last_updated_on", default="Updated on $DATE", language_strings=language_strings) -}} + {#- Load extra CSS (skin) if set in config.toml -#} @@ -34,6 +37,7 @@ {{ config.description }} {%- endif %} + {{ config.extra.post_listing_date | default(value="date") }} {% for post in posts %} {% if loop.index <= max %} @@ -12,9 +14,24 @@ {% endif %}
    - {% if post.date %} -
  • {{ macros_format_date::format_date(date=post.date, short=false, language_strings=language_strings) }}
    • - {% endif %} + {%- set show_date = post.date and config.extra.post_listing_date == "date" or post.date and config.extra.post_listing_date == "both" -%} + {%- set show_updated = post.updated and config.extra.post_listing_date == "updated" or post.updated and config.extra.post_listing_date == "both" -%} + + {%- if show_date or show_updated -%} + {%- if show_date -%} +
  • {{- macros_format_date::format_date(date=post.date, short=false, language_strings=language_strings) -}}
    • + {%- endif -%} + {%- if show_date and show_updated -%} +
  • {{- separator -}}
    • + {%- 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) -%} +
  • {{ updated_str }}
    • + {%- endif -%} + {%- endif -%} + {% if post.draft %}
  • {{ macros_translate::translate(key="draft", default="DRAFT", language_strings=language_strings) }}
    • {% endif %} diff --git a/theme.toml b/theme.toml index a806e1309..c18a988d6 100644 --- a/theme.toml +++ b/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. +# "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). From f3946dc7c6eb52344210dbd19192c027ac96b2cc Mon Sep 17 00:00:00 2001 From: welpo Date: Thu, 11 Jul 2024 23:01:55 +0200 Subject: [PATCH 2/3] add separator between dates in Atom feed --- static/feed_style.xsl | 14 ++++++++++++-- templates/atom.xml | 3 +++ 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/static/feed_style.xsl b/static/feed_style.xsl index 04dfee01c..12e68c14b 100644 --- a/static/feed_style.xsl +++ b/static/feed_style.xsl @@ -54,12 +54,22 @@
      - + + + +
      • - + + +
    • + +
      • +       + +
    • diff --git a/templates/atom.xml b/templates/atom.xml index 886e6d1ef..277424394 100644 --- a/templates/atom.xml +++ b/templates/atom.xml @@ -9,6 +9,9 @@ + + {{ config.extra.separator | default(value="•") }} + {{- 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) -}} From 77a4b5ff8097c911174eb5d41ef6f7945504aa86 Mon Sep 17 00:00:00 2001 From: welpo Date: Thu, 11 Jul 2024 23:16:05 +0200 Subject: [PATCH 3/3] validate settings + use 'date' by default + mention default in comments --- config.toml | 4 ++-- templates/macros/list_posts.html | 10 ++++++++-- theme.toml | 2 +- 3 files changed, 11 insertions(+), 5 deletions(-) diff --git a/config.toml b/config.toml index 87a093219..29d607b1f 100644 --- a/config.toml +++ b/config.toml @@ -147,10 +147,10 @@ show_reading_time = true 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. +# "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 = "both" +post_listing_date = "date" # DEPRECATED! # Use Zola's built-in `bottom_footnotes = true` in the [markdown] section instead. (Available since v0.19.0) diff --git a/templates/macros/list_posts.html b/templates/macros/list_posts.html index dd23114af..d3760de4a 100644 --- a/templates/macros/list_posts.html +++ b/templates/macros/list_posts.html @@ -14,8 +14,14 @@ {% endif %}
        - {%- set show_date = post.date and config.extra.post_listing_date == "date" or post.date and config.extra.post_listing_date == "both" -%} - {%- set show_updated = post.updated and config.extra.post_listing_date == "updated" or post.updated and config.extra.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 -%} + + {%- 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 -%} diff --git a/theme.toml b/theme.toml index c18a988d6..957bd9a3d 100644 --- a/theme.toml +++ b/theme.toml @@ -104,7 +104,7 @@ show_reading_time = true 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. +# "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"