post.hbs

{{!< default}}

{{#post}}

<div class="relative py-16 bg-white overflow-hidden">
  <div class="relative px-4 sm:px-6 lg:px-8">
    <div class="text-lg max-w-4xl mx-auto">
      <h1>
        <span class="block text-base text-emerald-600 font-semibold tracking-wide uppercase">{{#primary_tag}}<a href="{{url}}">{{name}}</a>{{/primary_tag}}</span>
        <span class="mt-2 block text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">{{title}}</span>
      </h1>
      <p class="mt-6 text-xl text-gray-500 leading-8">{{excerpt}}</p>

      <div class="py-4 flex items-center">
          <div class="flex-shrink-0">
                {{#primary_author}}
                <a href="{{url}}">
              <span class="sr-only">{{name}}</span>
              <img class="h-10 w-10 rounded-full" src="{{profile_image}}" alt="">
                </a>
                {{/primary_author}}

          </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>
          {{#if feature_image}}
            <figure class="mt-4">
              <img class="rounded" src="{{img_url feature_image}}" alt="{{ feature_image_alt }}" >
                {{#if feature_image_caption}}
                <figcaption class="text-left">
                  {{ feature_image_caption }}
                </figcaption>
                {{/if}}
            </figure>
          {{/if}}
      </div>
    <div class="mt-6 max-w-4xl prose prose-emerald prose-lg text-gray-600 mx-auto">
      {{content}}
    </div>
  </div>
</div>

{{/post}}