feat: add support for more complex filters in Portfolio widget

See https://isotope.metafizzy.co/filtering.html

E.g. filter on multiple tags:

```
  filter_button:
    - name: All
      tag: '*'
    - name: Machine Learning
      tag: ML
    - name: Computer Vision
      tag: CV
    - name: NLP
      tag: NLP
    - name: CV or NLP
      filter: '.js-id-cv, .js-id-nlp'
    - name: ML and NLP
      filter: '.js-id-ml.js-id-nlp'
```
This commit is contained in:
George Cushen committed 2022-08-25 20:28:05 +01:00
1 parent d9b6d28562
commit 005e361174
1 file changed
+23 -10
@@ -18,13 +18,20 @@
{{ $filter_default := default (int $st.Params.content.filter_default) 0 }}
{{/* Parse default filter tag from front matter in the form of either tag name or CSS class name. */}}
{{ $default_filter_tag_raw := (index $st.Params.content.filter_button ($filter_default)).tag }}
{{ $default_filter_tag := printf ".js-id-%s" (replace $default_filter_tag_raw " " "-") }}
{{ if or (eq (substr $default_filter_tag_raw 0 1) "*") (eq (substr $default_filter_tag_raw 0 1) ".") }}
{{ $default_filter_tag = $default_filter_tag_raw }}
{{ end }}
{{ $default_filter_item := (index $st.Params.content.filter_button ($filter_default)) }}
{{ $default_data_filter := "" }}
{{ with $default_filter_item.filter }}
{{ $default_data_filter = . }}
{{ else }}
{{ $default_filter_tag := $default_filter_item.tag }}
{{ if or (eq (substr $default_filter_tag 0 1) "*") (eq (substr $default_filter_tag 0 1) ".") }}
{{ $default_data_filter = $default_filter_tag }}
{{ else }}
{{ $default_data_filter = printf ".js-id-%s" (lower (replace $default_filter_tag " " "-")) }}
{{ end }}
{{end}}
<span class="d-none default-project-filter">{{ $default_filter_tag }}</span>
<span class="d-none default-project-filter">{{ $default_data_filter }}</span>
{{/* Only show filter buttons if there are multiple filters. */}}
{{ if gt (len $st.Params.content.filter_button) 1 }}
@@ -34,9 +41,15 @@
<div class="btn-group flex-wrap">
{{ range $idx, $item := $st.Params.content.filter_button }}
{{/* Parse filter tag from front matter in the form of either tag name or CSS class name. */}}
{{ $data_filter := printf ".js-id-%s" (replace .tag " " "-") }}
{{ if or (eq (substr .tag 0 1) "*") (eq (substr .tag 0 1) ".") }}
{{ $data_filter = .tag }}
{{ $data_filter := "" }}
{{ with .filter }}
{{ $data_filter = . }}
{{ else }}
{{ if or (eq (substr .tag 0 1) "*") (eq (substr .tag 0 1) ".") }}
{{ $data_filter = .tag }}
{{ else }}
{{ $data_filter = printf ".js-id-%s" (lower (replace .tag " " "-")) }}
{{ end }}
{{ end }}
<a href="#" data-filter="{{ $data_filter | safeHTMLAttr }}" class="btn btn-primary btn-lg{{ if eq $idx $filter_default }} active{{ end }}">{{ .name }}</a>
{{ end }}
@@ -77,7 +90,7 @@
{{ $query = sort $query $sort_by $sort_order }}
{{ range $index, $item := $query }}
{{ $js_tag_classes := delimit (apply (apply $item.Params.tags "replace" "." " " "-") "printf" "js-id-%s" ".") " " }}
{{ $js_tag_classes := delimit (apply (apply (apply $item.Params.tags "replace" "." " " "-") "printf" "js-id-%s" ".") "lower" ".") " " }}
{{ if in (slice "masonry" 3) $view }}
<div class="project-card project-item isotope-item {{ $js_tag_classes | safeHTMLAttr }}">
{{else}}