author.hbs

{{!< default}}

<div class="bg-white pt-16 pb-20 px-4 sm:px-6 lg:pt-24 lg:pb-28 lg:px-8">
  <div class="relative max-w-lg mx-auto divide-y-2 divide-gray-200 lg:max-w-6xl">
    <div>
      {{#author}}
      <h2 class="text-3xl tracking-tight font-extrabold text-gray-900 sm:text-4xl">
          <p>
            Author has {{plural ../pagination.total empty='zero post' singular='% post only' plural='% posts'}}
          </p>
      </h2>
          <div class="mt-4 flex flex-col lg:flex lg:flex-row">
            <div>
                <img class="rounded-full h-24 w-24 mr-4" src="{{img_url profile_image}}" alt="{{name}}">
            </div>
            <div class="py-2 lg:py-4">
                <p class="text-2xl text-gray-500 font-bold text-left">{{name}}</p>
                <p class="mt-1 text-base text-gray-500 text-left">{{bio}}</p>
            </div>
          </div>
      {{/author}}
    </div>
    <div class="mt-12 grid gap-16 pt-12 lg:grid-cols-3 lg:gap-x-5 lg:gap-y-12">
        {{#foreach posts}}
      <div>
        <div>
          <a href="{{url}}" class="inline-block">
            <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-green-100 text-green-800">
              {{#primary_tag}}
                {{name}}
              {{/primary_tag}}
            </span>
          </a>
        </div>
        <a href="{{url}}" class="block mt-4">
          <p class="text-xl font-semibold text-gray-900">
            {{title}}
          </p>
          <p class="mt-3 text-base text-gray-500">
            {{excerpt}}
          </p>
        </a>
        <div class="mt-6 flex items-center">
          <div class="flex-shrink-0">
            <a href="#">
                {{#primary_author}}
              <span class="sr-only">{{name}}</span>
              <img class="h-10 w-10 rounded-full" src="{{profile_image}}" alt="">
                {{/primary_author}}
            </a>
          </div>
          <div class="ml-3">
            <p class="text-sm font-medium text-gray-900">
                {{#primary_author}}
                    <a href="{{url}}">
                        {{name}}
                    </a>
                {{/primary_author}}
            </p>
            <div class="flex space-x-1 text-sm text-gray-500">
              <time datetime="{{date format='YYYY-MM-DD'}}">
                {{date format="DD MMMM YYYY"}}
              </time>
              <span aria-hidden="true">
                &middot;
              </span>
              <span>
                {{reading_time}}
              </span>
            </div>
          </div>
        </div>
      </div>

      {{/foreach}}

     </div>

    {{pagination}}

    </div>
  </div>
</div>