post.hbs

{{#post}}
{{#if primary_tag.accent_color}}
{{#contentFor "themecolor"}}{{primary_tag.accent_color}}{{/contentFor}}
{{else}}
{{#contentFor "themecolor"}}{{@site.accent_color}}{{/contentFor}}
{{/if}}

{{#contentFor "scripts"}}
<script type="application/javascript" defer>
window.addEventListener("load", () => {
    ObserveHeaders();
});
</script>
{{/contentFor}}

{{#if feature_image}}
{{~#contentFor "preload"~}}
<link rel="preload" as="image" imagesrcset="{{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" href="{{img_url feature_image size="s"}}" imagesizes="50vw" />
{{~/contentFor~}}
{{/if}}
{{!< default}}
<div class="gh-outer">
    <main class="gh-inner main-content grid-content">
        <aside class="nav-sidebar sidebar-left">
            <h4>{{{t "Table of Contents"}}}</h4>
            <hr/>
        </aside>
        <div class="article-content">
            <article class="gh-article {{post_class}}">
            {{#primary_tag}}
                <div class="primary-tag{{#if accent_color }} gradient-effect{{else}} default-color{{/if}}" style="background-color: {{#if accent_color }}{{accent_color}}{{/if}};"></div>
            {{/primary_tag}}
            {{#if feature_image}}
                <header class="gh-article-header">
                    {{> components/tag-label}}
                    <div class="read-time"><i class="las la-clock"></i> {{reading_time minute=(t "1 min read") minutes=(t "% min read")}}</div>
                    <time class="gh-card-date" datetime="{{date published_at format="YYYY-MM-DD"}}"><i class="las la-calendar"></i> {{date published_at}}</time>
                    <h1 class="gh-article-title">{{title}}</h1>
                </header>                    
                <figure class="article-image">
                    <div class="aspect-ratio">
                    {{#if feature_image}}
                        <img class="aspect-ratio-in"
                            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="(min-width: 1400px) 1400px, 92vw"
                            src="{{img_url feature_image size="xl"}}"
                            alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"/>
                    {{else}}
                        <div class="aspect-ratio-in{{#if accent_color}}{{else}} gh-gardient-btn{{/if}}" style="background-color: {{#if accent_color}}{{accent_color}}{{/if}};"></div>
                    {{/if}}
                    </div>
                    {{#if feature_image_caption}}
                    <figcaption>{{feature_image_caption}}</figcaption>
                    {{/if}}
                </figure>
            {{/if}}
                <section class="gh-content">
                    {{#if custom_excerpt}}
                        <p class="gh-article-excerpt">{{custom_excerpt}}</p>
                        <hr />
                    {{/if}}
                {{content}}
                {{#unless feature_image}}
                    <header class="gh-article-header">
                        <h1 class="gh-article-title">{{title}}</h1>
                        {{#if custom_excerpt}}
                        <p class="gh-article-excerpt">{{custom_excerpt}}</p>
                        {{/if}}
                    </header>
                {{/unless}}

                </section>
                {{> article-footer showNavigation=true}}
            </article>
        </div>
        <aside class="sidebar sidebar-right">
            <section id="related-posts">
                <h4>{{t "Related posts" }}</h4>
                <div class="grid grid-auto">
                    {{#get "posts" include="tags,authors" limit="3" filter="id:-{{id}}+tag:{{primary_tag.slug}}" as |related|}}
                    {{#foreach related}}
                    {{> components/post-card showExcerp=false}}
                    {{else}}
                    <p>{{t "No posts"}}</p>
                    {{/foreach}}
                    {{/get}}
                </div>
            </section>
        </aside>
    </main>
    <div class="author-line full-width">
        <div class="gh-outer author-line-inner grid-auto-full-two-columns">
            <div class="newsletter">
                {{> newsletter}}
            </div>
            <div class="author">
                {{> primary-author}}
            </div>
        </div>
    </div>
{{> comments}}
{{/post}}
</div>