post.hbs

{{!< default}}
{{!-- The tag above means: insert everything in this file into the body of the default.hbs template --}}

{{#post}}

<main class="gh-main">

    <article class="gh-article {{post_class}}">

        <header class="gh-article-header gh-canvas">

            {{#if primary_tag}}
                <a class="gh-article-tag" href="{{primary_tag.url}}">{{primary_tag.name}}</a>
            {{/if}}
            <h1 class="gh-article-title is-title">{{title}}</h1>
            {{#if custom_excerpt}}
                <p class="gh-article-excerpt is-body">{{custom_excerpt}}</p>
            {{/if}}

            <div class="gh-article-meta">
                <div class="gh-article-author-image">
                    {{#foreach authors}}
                        {{#if profile_image}}
                            <a href="{{url}}">
                                <picture>
                                    <source 
                                        srcset="{{img_url profile_image size="xs" format="avif"}} 1x,
                                                {{img_url profile_image size="s" format="avif"}} 2x"
                                        type="image/avif"
                                    >
                                    <!-- Serve the WebP format if the browser supports it -->
                                    <source 
                                        srcset="{{img_url profile_image size="xs" format="webp"}} 1x,
                                                {{img_url profile_image size="s" format="webp"}} 2x"
                                        type="image/webp"
                                    >
                                    <!-- Serve original file format as a fallback -->
                                    <img 
                                        class="author-profile-image"
                                        srcset="{{img_url profile_image size="xs"}} 1x,
                                                {{img_url profile_image size="s"}} 2x"
                                        src="{{img_url profile_image size="xs"}}"
                                        alt="{{name}}"
                                        width="50px"
                                        height="50px"
                                        loading="eager"
                                    >
                                </picture>
                            </a>
                        {{else}}
                            <a href="{{url}}">{{> "icons/avatar"}}</a>
                        {{/if}}
                    {{/foreach}}
                </div>
                <div class="gh-article-meta-wrapper">
                    <h2 class="gh-article-author-name">{{authors}}</h2>
                    <div class="gh-article-meta-content">
                        <time class="gh-article-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time>
                        {{#if reading_time}}
                            <span class="gh-article-meta-length"><span class="bull">—</span> {{reading_time minute=(t "A minute read") minutes=(t "% minutes read")}}</span>
                        {{/if}}
                    </div>
                </div>
            </div>

            {{> "feature-image"}}

        </header>

        <section class="gh-content gh-canvas is-body">
            {{content}}
        </section>

        <p class="print print-notice">{{t "Article printed at {date}. Please see {url} for the latest version." date=(date "") url=(url absolute="true")}}</p>

    </article>

    {{#if comments}}
        <div class="gh-comments gh-canvas">
            {{comments}}
        </div>
    {{/if}}

</main>

{{/post}}

{{#get "posts" include="authors" filter="id:-{{post.id}}+tag:-hash-termin+tag:-hash-pressemitteilung" limit="4" as |next|}}
    {{#if next}}
        <section class="gh-container is-grid gh-outer gh-recommended-posts">
            <div class="gh-container-inner gh-inner">
                <h2 class="gh-container-title">{{t "Read more"}}</h2>
                <div class="gh-feed">
                    {{#foreach next}}
                        {{> "post-card" lazyLoad=true}}
                    {{/foreach}}
                </div>
            </div>
        </section>
    {{/if}}
{{/get}}