tag.hbs

{{!< default}}


{{#tag}}
  <section class="px-4 sm:px-6{{#if feature_image}} mb-8{{/if}}" data-tag>
    <div class="max-w-xl mx-auto py-16 md:py-20 flex flex-col gap-3 items-center justify-center text-center">
      {{#if feature_image}}
        <figure class="rounded-full h-full relative">
          {{> image
            image_type="tag"
            image_class="w-full object-cover w-20 h-20 rounded-full aspect-square"
            image_url=feature_image
            size_xs=true
            size_s=true
            size_m=true
            sizes="(max-width: 600px) 100px, 160px"
            loading="eager"
          }}
        </figure>
      {{/if}}
      <h1 class="font-semibold tracking-tight text-2xl md:text-3xl lg:text-4xl xl:text-5xl">{{name}}</h1>
      {{#if description}}
        <p class="font-light text-lg text-typ-tone">{{description}}</p>
      {{/if}}
    </div>
  </section>
{{/tag}}

{{!-- Featured tags list --}}
{{#match @custom.featured_tags_layout "list"}}
  <section class="px-4 sm:px-6" data-featured-tags>
    <div class="max-w-container mx-auto">
      {{> featured-tags-list }}
    </div>
  </section>
{{/match}}

{{!-- Posts --}}
<section class="px-4 sm:px-6 mb-24" data-feed-section="{{posts.length}}">
  <div class="max-w-container mx-auto">
    <h2 class="text-sm font-semibold uppercase text-typ-tone border-b border-brd mb-6 pb-2.5{{#if @custom.featured_tags}}{{#match @custom.featured_tags_layout "list"}} sr-only{{/match}}{{/if}}">{{t "Latest"}}</h2>

    {{!-- Feed --}}
    {{> post-feed}}
    
    {{!-- Pagination --}}
    {{> pagination}}
  </div>
</section>