alexohneander/alexohneander-zola
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

💥 feat!: add tag filtering for projects (#431)

Browse Source 
- Card (project) images no longer require manual top/bottom margin
adjustments for proper spacing. Action needed: Review existing card
images as previous manual margin adjustments may now be
unnecessary/excessive.
- Sites using `cards.html` with tags will now load JavaScript by
default when tags are present. To maintain no-JS behaviour, explicitly
set `enable_cards_tag_filtering = false` in either `config.toml` or the
`_index.md` file where `cards.html` is used.
This commit is contained in:
welpo
2024-11-17 00:38:32 +01:00
parent f93def0692
commit a7833299ff
46 changed files with 421 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
templates/cards.html
View File

@@ -18,7 +18,12 @@
{%- set show_pages = section.pages -%}
{% endif -%}
{%- include "partials/cards_pages.html" -%}
{%- if macros_settings::evaluate_setting_priority(setting="enable_cards_tag_filtering", page=section, default_global_value=true) == "true" -%}
{%- include "partials/filter_card_tags.html" -%}
{%- endif -%}
{%- include "partials/cards_pages.html" -%}
</main>
{% if paginator %}

19
templates/macros/list_posts.html
View File

@@ -92,6 +92,25 @@
{%- endif -%}
{%- endif -%}
{% if post.extra.local_image or post.extra.remote_image %}
<li class="post-thumbnail">
<a href="{{ post.permalink }}">
{% if post.extra.local_image %}
{% set meta = get_image_metadata(path=post.extra.local_image, allow_missing=true) %}
<img class="thumbnail-image"
alt="{{ post.extra.local_image }}"
src="{{ get_url(path=post.extra.local_image) }}"
{% if meta.width %}width="{{ meta.width }}"{% endif %}
{% if meta.height %}height="{{ meta.height }}"{% endif %}>
{% elif post.extra.remote_image %}
<img class="thumbnail-image"
alt="{{ post.extra.remote_image }}"
src="{{ post.extra.remote_image }}">
{% endif %}
</a>
</li>
{% endif %}
{% if post.draft %}
<li class="draft-label">{{ macros_translate::translate(key="draft", default="DRAFT", language_strings=language_strings) }}</li>
{% endif %}

1
templates/page.html
View File

@@ -61,6 +61,7 @@ Current section extra: {% if current_section %}{{ current_section.extra | json_e
</pre></div>
{% set settings_to_test = [
"enable_cards_tag_filtering",
"footnote_backlinks",
"add_src_to_code_block",
"force_codeblock_ltr",

44
templates/partials/cards_pages.html
View File

@@ -15,24 +15,34 @@
{% set target_url = page.extra.link_to | default(value=page.permalink) %}
<a rel="{{ rel_attributes }}" {{ blank_target }} href="{{ target_url }}" class="card">
<div>
{% if page.extra.local_image %}
{% set meta = get_image_metadata(path=page.extra.local_image, allow_missing=true) %}
<img class="card-image" alt="{{ page.extra.local_image }}" src="{{ get_url(path=page.extra.local_image) }}" {% if meta.width %}width="{{ meta.width }}" {% endif %} {% if meta.height %}height="{{ meta.height }}" {% endif %}>
{% elif page.extra.remote_image %}
<img class="card-image" alt="{{ page.extra.remote_image }}" src="{{ page.extra.remote_image }}">
{% else %}
<div class="card-image-placeholder"></div>
{% endif %}
<a rel="{{ rel_attributes }}"
{{ blank_target }}
href="{{ target_url }}"
class="card"
{% if page.taxonomies %}
data-tags="{% for tax_name, terms in page.taxonomies %}{% for term in terms | unique %}{{ term | lower }}{% if not loop.last %},{% endif %}{% endfor %}{% endfor %}"
{% endif %}>
{% if page.extra.local_image %}
{% set meta = get_image_metadata(path=page.extra.local_image, allow_missing=true) %}
<img class="card-image"
alt="{{ page.extra.local_image }}"
src="{{ get_url(path=page.extra.local_image) }}"
{% if meta.width %}width="{{ meta.width }}"{% endif %}
{% if meta.height %}height="{{ meta.height }}"{% endif %}>
{% elif page.extra.remote_image %}
<img class="card-image"
alt="{{ page.extra.remote_image }}"
src="{{ page.extra.remote_image }}">
{% else %}
<div class="card-image-placeholder"></div>
{% endif %}
<div class="card-info">
<h2 class="card-title">{{ page.title }}</h2>
<div class="card-description">
{% if page.description %}
{{ page.description }}
{% endif %}
</div>
<div class="card-info">
<h2 class="card-title">{{ page.title }}</h2>
<div class="card-description">
{% if page.description %}
{{ page.description }}
{% endif %}
</div>
</div>
</a>

34
templates/partials/filter_card_tags.html Normal file
View File

@@ -0,0 +1,34 @@
{#- Collect all terms. -#}
{#- We don't use `get_taxonomy` so users aren't forced to use 'tags' -#}
{% set all_terms = [] %}
{% for page in show_pages %}
{% if page.taxonomies %}
{% for tax_name, terms in page.taxonomies %}
{% for term in terms %}
{% set_global all_terms = all_terms | concat(with=term) %}
{% endfor %}
{% endfor %}
{% endif %}
{% endfor %}
{#- Display unique terms -#}
{%- if all_terms -%}
<ul class="filter-controls" role="group" aria-label="{{ macros_translate::translate(key='project_filters', default='Project filters', language_strings=language_strings) }}">
<li class="taxonomy-item no-hover-padding">
<a id="all-projects-filter" class="no-hover-padding active"
href="{{ get_url(path="projects", lang=lang) }}"
data-filter="all">
{{- macros_translate::translate(key="all_projects", default="All projects", language_strings=language_strings) -}}
</a>
</li>
{% for term in all_terms | unique | sort %}
<li class="taxonomy-item no-hover-padding">
<a class="no-hover-padding"
href="{{ get_taxonomy_url(kind="tags", name=term, lang=lang) }}"
data-filter="{{ term | lower }}">{{ term }}</a>
</li>
{% endfor %}
</ul>
{#- Load the script -#}
<script src="{{ get_url(path='js/filterCards.min.js', trailing_slash=false, cachebust=true) | safe }}" defer></script>
{% endif %}