weflock/post.hbs
Badri Sunderarajan 5e23bb65e6 Limit related posts to primary tag
If we matched by all tags, the "latest posts" were getting hogged
by a small set of posts that had many tags. Now, since we're more
restrictive, we end up throwing up new posts every time! Also, we
are allowing posts with the primary tag matching *any* of the
current post's tags; it doesn't just have to match the current
posts's primary tag.
2023-03-15 14:37:58 +05:30

129 lines
No EOL
4.8 KiB
Handlebars

{{!< default}}
{{!-- The tag above means: insert everything in this file
into the {body} tag of the default.hbs template --}}
{{#post}}
{{!-- Everything inside the #post block pulls data from the post --}}
<main id="site-main" class="site-main">
<article class="article {{post_class}}">
<header class="article-header gh-canvas">
{{#if primary_tag}}
<section class="article-tag">
<a href="{{primary_tag.url}}">{{primary_tag.name}}</a>
</section>
{{/if}}
<h1 class="article-title">{{title}}</h1>
{{#if custom_excerpt}}
<p class="article-excerpt">{{custom_excerpt}}</p>
{{/if}}
<div class="article-byline">
<section class="article-byline-content">
<ul class="author-list">
{{#foreach authors}}
<li class="author-list-item">
{{#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}}
</li>
{{/foreach}}
</ul>
<div class="article-byline-meta">
<h4 class="author-name">{{authors}}</h4>
<div class="byline-meta-content">
<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>
</section>
</div>
{{#if feature_image}}
<figure class="article-image">
{{!-- This is a responsive image, it loads different sizes depending on device
https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
<img
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}}"
/>
{{#if feature_image_caption}}
<figcaption>{{feature_image_caption}}</figcaption>
{{/if}}
</figure>
{{/if}}
</header>
<section class="gh-content gh-canvas">
{{content}}
</section>
{{!--
<section class="article-comments gh-canvas">
If you want to embed comments, this is a good place to paste your code!
</section>
--}}
<section class="article-comments gh-canvas">
{{ comments }}
</section>
</article>
</main>
{{!-- A signup call to action is displayed here, unless viewed as a logged-in member --}}
{{#unless @member}}
<section class="footer-cta">
<div class="inner">
<h2>Sign up for more like this.</h2>
<a class="footer-cta-button" href="#/portal">
<div>Enter your email</div>
<span>Subscribe</span>
</a>
{{!-- ^ This looks like a form element, but it's just a link to Portal,
making the form validation and submission much simpler. --}}
</div>
</section>
{{/unless}}
{{/post}}
{{!-- I don't know why we had to have this block outside the
"post" block, but that's the way the cookie crumbled. --}}
{{#is "post"}}
{{!-- Read more links, just above the footer --}}
<aside class="read-more-wrap">
<div class="read-more inner">
{{!-- The {#get} helper below fetches some of the latest posts here
so that people have something else to read when they finish this one.
This query gets the latest 3 posts on the site, but adds a filter to
exclude the post we're currently on from being included. --}}
{{#get "posts" filter="primary_tag:[{{post.tags}}]+id:-{{post.id}}" include="authors" limit="3" as |more_posts|}}
{{#if more_posts}}
{{#foreach more_posts}}
{{> "post-card"}}
{{/foreach}}
{{/if}}
{{/get}}
</div>
</aside>
{{/is}}