Add related posts component
This commit is contained in:
parent
3b95d248cb
commit
86dff5d2a9
|
@ -0,0 +1,50 @@
|
|||
{% assign maxRelated = 4 %} <!-- Maximum number of related posts to output -->
|
||||
{% assign minCommonTags = 1 %} <!-- Minimum number of common tags that have to match -->
|
||||
{% assign maxRelatedCounter = 0 %}
|
||||
|
||||
{% capture related_posts %}
|
||||
{% for post in site.posts %}
|
||||
{% assign sameTagCount = 0 %}
|
||||
{% assign commonTags = '' %}
|
||||
|
||||
{% for tag in post.tags %}
|
||||
{% if post.url != page.url %}
|
||||
{% if page.tags contains tag %}
|
||||
{% assign sameTagCount = sameTagCount | plus: 1 %}
|
||||
{% assign commonTags = commonTags %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if sameTagCount >= minCommonTags %}
|
||||
|
||||
<!-- Post item template -->
|
||||
{% include post-list-item.html %}
|
||||
{% assign maxRelatedCounter = maxRelatedCounter | plus: 1 %}
|
||||
|
||||
{% if maxRelatedCounter >= maxRelated %}
|
||||
{% break %}
|
||||
{% endif %}
|
||||
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endcapture %}
|
||||
|
||||
<!-- Render component if there are one or more related posts -->
|
||||
{% if maxRelatedCounter >= 1 %}
|
||||
<div class="related-posts bg-slate-100">
|
||||
<div class="related-posts__wrapper section-container">
|
||||
<h1 class="related-posts__title">Keep<br>Reading</h1>
|
||||
|
||||
<!-- Show related posts -->
|
||||
<ul class="post-list">
|
||||
{{ related_posts }}
|
||||
</ul>
|
||||
|
||||
<!-- Decorative arrows -->
|
||||
<svg class="related-posts__arrow svg-icon"><use xlink:href="{{ '/assets/images/icons/icon-sprite.svg#arrow-right' | relative_url }}"></use></svg>
|
||||
<svg class="related-posts__arrow svg-icon"><use xlink:href="{{ '/assets/images/icons/icon-sprite.svg#arrow-right' | relative_url }}"></use></svg>
|
||||
<svg class="related-posts__arrow svg-icon"><use xlink:href="{{ '/assets/images/icons/icon-sprite.svg#arrow-right' | relative_url }}"></use></svg>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
|
@ -22,7 +22,11 @@ layout: default
|
|||
|
||||
<!-- Related jobs -->
|
||||
{% include related-jobs.html %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Related posts -->
|
||||
{% include related-posts.html %}
|
||||
|
||||
</article>
|
||||
|
|
|
@ -0,0 +1,95 @@
|
|||
////////////////////
|
||||
// Related Posts
|
||||
////////////////////
|
||||
|
||||
.related-posts {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.related-posts__wrapper {
|
||||
@media (min-width: $post-bp) {
|
||||
display: grid;
|
||||
grid-template-columns: 320px 1fr 5%;
|
||||
}
|
||||
}
|
||||
|
||||
.related-posts__title {
|
||||
margin-bottom: 0;
|
||||
line-height: 1;
|
||||
@extend .monospace;
|
||||
|
||||
@media (min-width: $bp-md) {
|
||||
font-size: rem-calc(40px);
|
||||
}
|
||||
|
||||
@media (min-width: $post-bp) {
|
||||
font-size: rem-calc(56px);
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////
|
||||
// Post List Tweaks
|
||||
////////////////////
|
||||
|
||||
.related-posts .post-list {
|
||||
@media (min-width: $bp-md) {
|
||||
display: grid;
|
||||
grid-gap: 0 5%;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
.related-posts .post-list__item {
|
||||
padding-right: 0;
|
||||
|
||||
@media (max-width: $bp-md) {
|
||||
&:first-of-type {
|
||||
margin-top: rem-calc(15px);
|
||||
border-top: 1px solid $border-color;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $bp-md) {
|
||||
&:nth-of-type(3),
|
||||
&:nth-of-type(4) {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////
|
||||
// Arrows
|
||||
////////////////////
|
||||
|
||||
.related-posts__arrow {
|
||||
position: absolute;
|
||||
color: $slate-200;
|
||||
z-index: -1;
|
||||
@extend .hidden-md-down;
|
||||
|
||||
&:nth-of-type(1) {
|
||||
top: -.35em;
|
||||
left: .5em;
|
||||
font-size: 30vmin;
|
||||
}
|
||||
|
||||
&:nth-of-type(2) {
|
||||
bottom: -.35em;
|
||||
left: -.35em;
|
||||
font-size: 34vmin;;
|
||||
}
|
||||
|
||||
&:nth-of-type(3) {
|
||||
bottom: 0;
|
||||
right: -.25em;
|
||||
font-size: 24vmin;;
|
||||
}
|
||||
}
|
|
@ -44,6 +44,7 @@
|
|||
@import "component/post-content";
|
||||
@import "component/featured-post-hero";
|
||||
@import "component/pagination";
|
||||
@import "component/related-posts";
|
||||
|
||||
// Import the syntax highlighting theme, see:
|
||||
// https://richleland.github.io/pygments-css/
|
||||
|
|
Loading…
Reference in New Issue