docs/layouts/guides/landing.html

{{ define "left" }}
{{ partial "sidebar/mainnav.html" . }}
<div class="p-4 flex flex-col gap-4 text-sm">
  <div>
    <span class="icon-svg">{{ partialCached "icon" "filter_alt" "filter_alt" }}</span>
    <span>Filters</span>
  </div>
  <div class="space-y-4"
    x-data="{
      selected: { products: [], subjects: [], languages: [], levels: [], },
      toggleFilter(taxonomy, term) {
        this.selected[taxonomy].includes(term)
          ? this.selected[taxonomy] = this.selected[taxonomy].filter(el => el != term)
          : this.selected[taxonomy].push(term);

        // Update URL
        const url = new URL(window.location.href);
        if (this.selected[taxonomy].length > 0) {
          url.searchParams.set(taxonomy, this.selected[taxonomy].join('~'));
        } else {
          url.searchParams.delete(taxonomy);
        }
        window.history.replaceState({}, '', url);

        this.$dispatch('guide-filter', { filters: this.selected });
      },
      
      init() {
        const url = new URL(window.location.href);
        for (const [key, value] of url.searchParams.entries()) {
          if (value) {
            this.selected[key] = value.split('~');
          }
        }
      }
    }">
    {{ template "taxofilters" site.Taxonomies.products }}
    {{ template "taxofilters" site.Taxonomies.subjects }}
    {{ template "taxofilters" site.Taxonomies.levels }}
    {{ template "taxofilters" site.Taxonomies.languages }}
  </div>
</div>
{{ end }}

{{ define "taxofilters" }}
{{- $taxonomy := .Page.Data.Plural }}
<fieldset class="flex flex-col gap-2">
  <div>{{ humanize $taxonomy }}</div>
  {{- range . }}
  {{- $term := .Page.Data.Term }}
  <div class="pl-2 flex gap-2">
    {{- $id := anchorize (fmt.Printf "%s-%s" $taxonomy $term) }}
    <input value="{{$term}}" type="checkbox" id="{{ $id }}"
      @change="toggleFilter('{{$taxonomy}}','{{$term}}')"
      :checked="selected['{{$taxonomy}}'].includes('{{$term}}')">
    <label class="select-none" for="{{ $id }}">{{ .Page.LinkTitle }}</label>
  </div>
  {{ end }}
</fieldset>
{{ end }}

{{ define "main" }}
<div class="flex gap-8 w-full">
  <article class="prose min-w-0 max-w-none dark:prose-invert">
    {{- partial "breadcrumbs.html" . }}
    <h1 data-pagefind-weight="10" class="scroll-mt-36">{{ .Title }}</h1>
    {{ .Content }}
    {{- $taxonomies := slice "products" "subjects" "levels" "languages" }}
    <div class="not-prose"
      x-data="{
        filters: { {{ delimit (apply $taxonomies "fmt.Printf" "%s: []," "." ) "" }} },

        noFilters() {
          return Object.values(this.filters).every(arr=> Array.isArray(arr) && arr.length === 0);
        },

        showItem(taxonomies) {
          if (this.noFilters()) return true;
          let match = false;

          for (const taxonomy in this.filters) {
            const selectedTerms = this.filters[taxonomy];
            if (selectedTerms.length > 0) {
              const itemTerms = taxonomies[taxonomy] || [];
              // Check if all selected terms are included in the item's terms
              const hasAnyTerms = selectedTerms.some(term => itemTerms.includes(term));
              if (hasAnyTerms) {
                match = true;
                break;
              }
            }
          }
          return match;
        },

        init() {
          const url = new URL(window.location.href);
          for (const [key, value] of url.searchParams.entries()) {
            if (value) {
              this.filters[key] = value.split('~');
            }
          }
        }
      }"
      x-cloak
      @guide-filter.window="filters = $event.detail.filters; window.scrollTo({ top: 0 });">
      <div x-ref="container" class="pt-4 grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
        {{- $featured := where .Pages "Params.featured" true }}
        {{- with $featured }}
          {{- range . }}
            {{- $opts := dict "page" . "taxonomies" $taxonomies }}
            {{- $filters := partial "utils/filter-terms.html" $opts }}
            <div x-show="showItem({{ jsonify $filters }});" class="flex flex-col h-full">
              <div class="text-xs font-semibold text-gray-light dark:text-gray-dark tracking-wider uppercase">Featured</div>
              <a class="hover:underline" href="{{ .Permalink }}">
                {{- $img := resources.Get (.Params.image | default "/images/thumbnail.webp") }}
                {{- $img = $img.Process "resize 600x" }}
                <img class="h-48 w-full object-cover rounded shadow" src="{{ $img.Permalink }}">
                <p class="text-xl leading-snug my-4">{{ .Title }}</p>
              </a>
              <p class="flex-grow text-sm">{{ .Summary }}</p>
              <hr class="text-divider-light dark:text-divider-dark">
              {{ template "guide-metadata" . }}
            </div>
            {{- end }}
          {{- end }}
          {{- range (collections.Complement $featured .Pages) }}
            {{- $opts := dict "page" . "taxonomies" $taxonomies }}
            {{- $filters := partial "utils/filter-terms.html" $opts }}
            <a href="{{ .Permalink }}" x-show="showItem({{ jsonify $filters }});" x-transition
               class="group flex flex-col justify-between p-4 rounded border-2
                      border-gray-light-100 bg-white dark:bg-gray-dark-200
                      dark:border-gray-dark-400 drop-shadow transition
                      hover:-translate-y-1 hover:border-blue-light-400
                      dark:hover:border-blue-dark-500">
              <div>
                <div class="text-lg mb-4 group-hover:underline">{{ .Title }}</div>
                <div
                  class="text-sm line-clamp-5 group-hover:text-black dark:group-hover:text-white text-gray-light dark:text-gray-dark">
                  {{- .Summary }}
                </div>
              </div>
              <div>
                <hr class="text-divider-light dark:text-divider-dark">
                {{ template "guide-metadata" . }}
              </div>
            </a>
        {{- end }}
      </div>
      </ul>
  </article>
</div>
{{ end }}

{{- define "guide-metadata" }}
<div class="flex items-center text-sm justify-between text-gray-light dark:text-gray-dark">
  <div class="flex gap-2">
    {{- $taxoterms := .GetTerms "languages" }}
    {{- $taxoterms = $taxoterms | append (.GetTerms "levels") }}
    {{- $taxoterms = $taxoterms | append (.GetTerms "subjects") }}
    {{- range $taxoterms }}
    <span>{{- .Page.LinkTitle }}</span>
    {{- end }}
  </div>
  {{- with .Params.time }}
    <div class="flex gap-2">
      <span class="icon-svg">{{ partialCached "icon" "schedule" "schedule" }}</span>
      <span>{{ . }}</span>
    </div>
  {{- end }}
</div>
{{- end }}