feat(series): add a page to display a series

It displays an explanation of the series and lists all its articles.
This commit is contained in:
ZzMzaw 2024-08-07 07:59:38 +02:00
parent 080a1b4b8c
commit 45705ed9c6
8 changed files with 138 additions and 21 deletions

View file

@ -157,6 +157,11 @@ show_date = true
# "both" - Show both the original date and the last updated date.
post_listing_date = "date"
# Determines if indexes should be increasing (false) or decreasing (true) in series' posts list.
# It has only effect if the section uses indexes metadata (which is only the case for series as of now).
# Can be set at section levels, following the hierarchy: section > config. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy
post_listing_index_reversed = false # Defaults to false.
# 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).

View file

@ -62,6 +62,11 @@ see_changes = "See changes"
table_of_contents = "Table of Contents"
load_comments = "Load comments"
# Series.
series = "SERIE"
series_jump_to_posts = "Jump to posts"
series_posts = "Series' posts:"
# Copy code block button.
copied = "Copied!"
copy_code_to_clipboard = "Copy code to clipboard"

View file

@ -62,6 +62,11 @@ see_changes = "Voir les modifications"
table_of_contents = "Table des matières"
load_comments = "Afficher les commentaires"
# Series.
series = "SERIE"
series_jump_to_posts = "Aller aux articles"
series_posts = "Articles de la série :"
# Copy code block button.
copied = "Copié !"
copy_code_to_clipboard = "Copier le code dans le presse-papier"

View file

@ -190,7 +190,7 @@ article {
}
}
.section-title {
.section-title, .seriesposts-title {
display: block;
margin: 0;
margin-top: -0.15em;
@ -200,6 +200,10 @@ article {
line-height: 1.2em;
}
.seriesposts-title {
font-size: 1.5em;
}
.last-updated {
margin-top: -5vmin;
}

View file

@ -42,6 +42,20 @@ ul {
padding-bottom: 8px;
}
.title-label {
margin-right: 0.3rem;
background-color: var(--primary-color);
padding: 2px 4px;
color: var(--hover-color);
font-size: 1rem;
vertical-align: top;
}
.title-button {
margin-left: 0.3rem;
float: right;
}
.bottom-divider {
border-bottom: var(--divider-color) solid 0.5px;
}

View file

@ -1,4 +1,9 @@
{% macro list_posts(posts, max, language_strings="", section_path="blog") %}
{# `metadata` can be "dates", "indexes" or both (e.g. "dates indexes" or "indexes dates"). #}
{# If both, the order doesn't matter and indexes will always be displayed before dates. #}
{# 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="") %}
{%- set separator = config.extra.separator | default(value="•") -%}
@ -15,27 +20,46 @@
<section class="bloglist-meta {% if bottom_divider -%}bottom-divider{%- endif -%}">
<ul>
{%- 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'.") }}
{%- if "indexes" in metadata -%}
{%- set post_index = loop.index -%}
{%- set nb_posts = posts | length -%}
{# in case we have a pager, the index has been computed for the current page. #}
{%- if paginator -%}
{%- set nb_posts = paginator.total_pages -%}
{%- set number_of_other_pages = paginator.current_index - 1 -%}
{%- set posts_per_page = paginator.paginate_by -%}
{%- set posts_in_other_pages = number_of_other_pages * posts_per_page -%}
{%- set post_index = posts_in_other_pages + post_index -%}
{%- endif -%}
{%- 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 #}
{%- set post_index = nb_posts + 1 - post_index -%}
{%- endif -%}
<li class="index-label">{{ post_index }}</li>
{%- 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 -%}
{%- 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>
{%- 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 -%}
{%- 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>
{%- 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 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 -%}
{%- endif -%}

55
templates/series.html Normal file
View file

@ -0,0 +1,55 @@
{% extends "base.html" %}
{% block main_content %}
{# Throw an error if the section is not flagged as a series. #}
{# This page would be displayed properly but it would become impossible for the series' child pages to reference their series. #}
{%- if "series" not in section.extra or not section.extra.series -%}
{{ throw(message="Section is not flagged as a series. Set `section.extra.series` to `true` if you want to use `series.html` template.") }}
{%- endif -%}
<main>
{%- if section.extra.header %}
{%- include "partials/home_banner.html" -%}
{% endif -%}
<article>
<div>
<span class="title-label">{{ macros_translate::translate(key="series", default="SERIES", language_strings=language_strings) }}</span>
{%- set jump_to_series_posts = macros_translate::translate(key="series_jump_to_posts", default="Jump to posts", language_strings=language_strings) -%}
<a href="#posts-list" class="title-button no-hover-padding" title="{{ jump_to_series_posts }}">
{{ jump_to_series_posts }}
</a>
{{ macros_page_header::page_header(title=section.title) }}
</div>
<section class="body">
{{ section.content | safe }}
</section>
</article>
<div id="posts-list">
<div>
<h2 class="seriesposts-title bottom-divider">
{{ macros_translate::translate(key="series_posts", default="Series' posts:", language_strings=language_strings) }}
</h2>
</div>
{%- if paginator %}
{%- set pages = paginator.pages -%}
{% else %}
{%- set pages = section.pages -%}
{% endif -%}
{% set max_posts = section.extra.max_posts | default(value=999999) %}
{{ macros_list_posts::list_posts(posts=pages, max=max_posts, metadata="indexes", language_strings=language_strings, section_path=section.path, paginator=paginator | default(value="")) }}
</div>
{% if paginator %}
{%- include "partials/paginate.html" -%}
{% endif %}
</main>
{%- include "partials/extra_features.html" -%}
{% endblock main_content %}

View file

@ -114,6 +114,11 @@ show_date = true
# "both" - Show both the original date and the last updated date.
post_listing_date = "date"
# Determines if indexes should be increasing (false) or decreasing (true) in series' posts list.
# It has only effect if the section uses indexes metadata (which is only the case for series as of now).
# Can be set at section levels, following the hierarchy: section > config. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy
post_listing_index_reversed = false # Defaults to false.
# 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).