post.hbs

{{!< default}}

{{#post}}

<article id="article" class="article bg-primary-50 {{post_class}}">

	<header class="article-header">

		<div class="max-w-screen bg-slate-500 rounded-lg py-12 text-left">

		{{#if feature_image}}
			<figure class="article-image">
				<img class="site-header-cover"
						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="{{title}}"
				/>
			</figure>
		{{/if}}
			<div class="w-full py-4 mx-auto relative mt-4 md:mt-12 z-10 article-header-content">

				{{#if primary_tag}}
				{{#primary_tag}}
				<section class="article-tag">
					<a class="badge badge-primary" href="{{url}}" style="background-color: {{accent_color}};">{{name}}</a>
				</section>
				{{/primary_tag}}
				{{/if}}
				<h1>{{title}}</h1>
				{{#if custom_excerpt}}
				<p class="block">{{custom_excerpt}}</p>
				{{/if}}

				<div class="article-byline">
					<section class="article-byline-content">
						{{#if @custom.show_author}}
						<div class="flex items-center author-list gap-2 md:gap-6">
							<div class="authors">
							{{#foreach authors}}
								{{#if profile_image}}
								<a href="{{url}}" class="author-avatar">
									<img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" />
								</a>
								{{else}}
								<a href="{{url}}" class="author-avatar author-profile-image">{{> "icons/avatar"}}</a>
								{{/if}}
							{{/foreach}}
							</div>
							<div class="article-byline-meta grid grid-flow-row gap-1 md:gap-4">
								<h4 class="author-name text-sm md:text-xl tracking-widest">{{authors}}</h4>
								<div class="byline-meta-content text-xs md:text-base">
										<time class="byline-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time>
										<span class="byline-reading-time"><span class="bull">&bull;</span> {{reading_time}}</span>
								</div>
							</div>
						</div>
						{{else}}
						<div class="rauthor-list">
							<div class="article-byline-meta">
									<div class="byline-meta-content text-xs md:text-base">
											<time class="byline-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time>
											<span class="byline-reading-time"><span class="bull">&bull;</span> {{reading_time}}</span>
									</div>
							</div>
						</div>
						{{/if}}
					</section>
        </div>
			</div>
		</div>
	</header>

	<section class="article-content container max-w-6xl mx-auto relative px-6 xl:px-0 py-10 md:py-20">
    {{content}}
	</section>
</article>
{{#if @custom.subscribe_post_banner}}
	{{> "subscribe-banner"}}
{{else}}
	{{> "subscribe-none"}}
{{/if}}

{{#if primary_tag}}
<section id="more">
	<aside class="container max-w-6xl mx-auto relative grid md:grid-cols-3 gap-6">
		{{#primary_tag}}
		<div class="card tag-card text-primary-50">
			<img src="{{feature_image}}" class="card-img" alt="">
			<div class="card-img-overlay">
				<a href="{{url}}" class="text-primary-50">
					<div class="h-full relative">
						<h5 class="card-title">{{name}}</h5>
						<p class="card-text">{{description}}</p>

						<span class="btn btn-light w-full">
						{{#get "posts" filter="tag:{{slug}}" limit="all" as |all_in_tags pages|}}
							{{pages.total}} {{plural pages.total empty="" singular="article" plural="articles"}} &raquo;
						{{/get}}
						</span>
					</div>
					</a>
			</div>
		</div>
		{{/primary_tag}}
		{{#get "posts" filter="id:-{{comment_id}}+tag:{{primary_tag.slug}}" include="authors" limit="2" as |more_posts|}}
			{{#if more_posts}}
				{{#foreach more_posts}}
					{{> "post-card"}}
				{{/foreach}}
			{{/if}}
		{{/get}}
	</aside>
</section>
{{/if}}

{{/post}}