deepState/tabi-lean
3
0
Fork 0
forked from deepStateMirrors/tabi
Code Issues 1 Pull requests 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
No known key found for this signature in database
GPG key ID: A2F978CF4EC1F5A6
46 changed files with 421 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

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 %}