post.hbs

{{!< default}}

{{#post}}
    <article class="{{post_class}}">
        <header class="wrapper">
            <article class="w-full">
                <div class="flex justify-between text-gray-400 text-sm uppercase mb-5">
                    <time datetime="{{date format="YYYY-MM-DD"}}">{{date format="DD MMM YYYY"}}</time>
                    <span>{{reading_time minute=(t "1 min read") minutes=(t "% min read")}}</span>
                </div>

                <h1 class="text-5xl font-bold mb-5 leading-tight">{{title}}</h1>

                {{#if tags}}
                    <div>
                        <span class="hidden md:inline-block">
                            <a class="button bg-gray-100 mr-2 mb-5 tag" disabled="true"><i class="fas fa-tags"></i></a>
                        </span>
                        {{#foreach tags}}
                            {{> tag}}
                        {{/foreach}}
                    </div>
                {{/if}}

                {{#if custom_excerpt}}
                    <p class="mb-5">{{custom_excerpt}}</p>
                {{/if}}
            </article>

            {{#if feature_image}}
                <img class="w-full pt-5"
                     srcset="{{img_url feature_image size="s"}} 300w,
                            {{img_url feature_image size="m"}} 600w,
                            {{img_url feature_image size="l"}} 1000w,
                            {{img_url feature_image size="xl"}} 2000w"
                     sizes="(max-width: 1000px) 400px, 800px"
                     src="{{img_url feature_image size="m"}}"
                     alt="{{title}}"
                     loading="lazy"
                />
            {{/if}}
        </header>

        <div class="grid w-screen left-0 my-10 content">
            {{content}}
        </div>
    </article>

    <div class="wrapper">
        <h2 class="text-4xl font-bold py-5">{{t "Next up"}}</h2>

        <aside class="flex flex-wrap">
            {{#get "posts" filter="id:-{{id}}" limit="3" include="tags" as |more_posts|}}
                {{#if more_posts}}
                    {{#foreach more_posts}}
                        {{> "post-card"}}
                    {{/foreach}}
                {{/if}}
            {{/get}}
        </aside>
    </div>

{{/post}}