Instantly share code, notes, and snippets.
-
Save jamiepratt/50912046fca43484e8af46b4b28b7d21 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{{!< default}} | |
{{!-- The tag above means: insert everything in this file | |
into the {body} of the default.hbs template --}} | |
<header class="site-header"> | |
{{> site-header}} | |
</header> | |
{{!-- Everything inside the #post tags pulls data from the post --}} | |
{{#post}} | |
<main id="site-main" class="site-main outer"> | |
<div class="inner"> | |
<article class="post-full {{post_class}} {{#unless feature_image}}no-image{{/unless}}"> | |
<header class="post-full-header"> | |
{{#if primary_tag}} | |
<section class="post-full-tags"> | |
{{#primary_tag}} | |
<a href="{{url}}">{{name}}</a> | |
{{/primary_tag}} | |
</section> | |
{{/if}} | |
<h1 class="post-full-title">{{title}}</h1> | |
{{#if custom_excerpt}} | |
<p class="post-full-custom-excerpt">{{custom_excerpt}}</p> | |
{{/if}} | |
<div class="post-full-byline"> | |
<section class="post-full-byline-content"> | |
<ul class="author-list"> | |
{{#foreach authors}} | |
<li class="author-list-item"> | |
<div class="author-card"> | |
{{#if profile_image}} | |
<img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" /> | |
{{else}} | |
<div class="author-profile-image">{{> "icons/avatar"}}</div> | |
{{/if}} | |
<div class="author-info"> | |
{{#if bio}} | |
<div class="bio"> | |
<h2>{{name}}</h2> | |
<p>{{bio}}</p> | |
<p><a href="{{url}}">More posts</a> by {{name}}.</p> | |
</div> | |
{{else}} | |
<h2>{{name}}</h2> | |
<p>Read <a href="{{url}}">more posts</a> by this author.</p> | |
{{/if}} | |
</div> | |
</div> | |
{{#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> | |
<section class="post-full-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 format="D MMM YYYY"}}</time> | |
<span class="byline-reading-time"><span class="bull">•</span> {{reading_time}}</span> | |
</div> | |
</section> | |
</section> | |
</div> | |
</header> | |
{{#if access}} | |
{{!-- if the user has access to this post, show it to them --}} | |
{{#if feature_image}} | |
<figure class="post-full-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="(max-width: 800px) 400px, | |
(max-width: 1170px) 1170px, | |
2000px" | |
src="{{img_url feature_image size="xl"}}" | |
alt="{{title}}" | |
/> | |
</figure> | |
{{/if}} | |
<section class="post-full-content"> | |
<div class="post-content"> | |
{{content}} | |
</div> | |
</section> | |
<section class="post-full-comments"> | |
<div id='discourse-comments'></div> | |
<script type="text/javascript"> | |
DiscourseEmbed = { discourseUrl: 'https://discourse.designedbyselection.org/', | |
discourseEmbedUrl: '{{url absolute="true"}}' }; | |
(function() { | |
var d = document.createElement('script'); d.type = 'text/javascript'; d.async = true; | |
d.src = DiscourseEmbed.discourseUrl + 'javascripts/embed.js'; | |
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d); | |
})(); | |
</script> | |
</section> | |
{{else}} | |
{{!-- if the user does not have access, show them an upgrade CTA --}} | |
<section class="post-full-content"> | |
<div class="post-content"> | |
<p>You don't have access to this post on <strong>{{@site.title}}</strong> at the moment, but if you upgrade your account you'll be able to see the whole thing, as well as all the other posts in the archive! Subscribing only takes a few seconds and will give you immediate access.</p> | |
</div> | |
<aside class="post-upgrade-cta"> | |
<div class="post-upgrade-cta-content"> | |
{{#if @member}} | |
<h2>This post is for paying subscribers only</h2> | |
{{else}} | |
<h2>This post is for subscribers only</h2> | |
{{/if}} | |
<a class="button large primary" href="/signup/">Subscribe now</a> | |
<p><small>Already have an account? <a href="/signin/">Sign in</a></small></p> | |
</div> | |
</aside> | |
</section> | |
{{/if}} | |
</article> | |
</div> | |
</main> | |
{{!-- Links to Previous/Next posts --}} | |
<aside class="read-next outer"> | |
<div class="inner"> | |
<div class="read-next-feed"> | |
{{#if primary_tag}} | |
{{#get "posts" filter="tags:{{primary_tag.slug}}+id:-{{id}}" limit="3" as |related_posts|}} | |
{{#if related_posts}} | |
<article class="read-next-card"> | |
<header class="read-next-card-header"> | |
{{#../primary_tag}} | |
<h3><span>More in</span> <a href="{{url}}">{{name}}</a></h3> | |
{{/../primary_tag}} | |
</header> | |
<div class="read-next-card-content"> | |
<ul> | |
{{#foreach related_posts}} | |
<li> | |
<h4><a href="{{url}}">{{title}}</a></h4> | |
<div class="read-next-card-meta"> | |
<p><time datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time> – | |
{{reading_time}}</p> | |
</div> | |
</li> | |
{{/foreach}} | |
</ul> | |
</div> | |
<footer class="read-next-card-footer"> | |
<a href="{{#../primary_tag}}{{url}}{{/../primary_tag}}">{{plural meta.pagination.total empty='No posts' singular='% post' plural='See all % posts'}} | |
→</a> | |
</footer> | |
</article> | |
{{/if}} | |
{{/get}} | |
{{/if}} | |
{{!-- If there's a next post, display it using the same markup included from - partials/post-card.hbs --}} | |
{{#next_post}} | |
{{> "post-card"}} | |
{{/next_post}} | |
{{!-- If there's a previous post, display it using the same markup included from - partials/post-card.hbs --}} | |
{{#prev_post}} | |
{{> "post-card"}} | |
{{/prev_post}} | |
</div> | |
</div> | |
</aside> | |
{{!-- Floating header which appears on-scroll, included from includes/floating-header.hbs --}} | |
{{!-- {{> floating-header}} --}} | |
{{/post}} | |
{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}} | |
{{#contentFor "scripts"}} | |
<script> | |
// NOTE: Scroll performance is poor in Safari | |
// - this appears to be due to the events firing much more slowly in Safari. | |
// Dropping the scroll event and using only a raf loop results in smoother | |
// scrolling but continuous processing even when not scrolling | |
$(document).ready(function () { | |
// Start fitVids | |
var $postContent = $(".post-full-content"); | |
$postContent.fitVids(); | |
// End fitVids | |
var nav = document.querySelector('.site-nav-main'); | |
var title = document.querySelector('.post-full-title'); | |
var lastScrollY = window.scrollY; | |
var lastWindowHeight = window.innerHeight; | |
var lastDocumentHeight = $(document).height(); | |
var ticking = false; | |
function onScroll() { | |
lastScrollY = window.scrollY; | |
requestTick(); | |
} | |
function onResize() { | |
lastWindowHeight = window.innerHeight; | |
lastDocumentHeight = $(document).height(); | |
requestTick(); | |
} | |
function requestTick() { | |
if (!ticking) { | |
requestAnimationFrame(update); | |
} | |
ticking = true; | |
} | |
function update() { | |
var trigger = title.getBoundingClientRect().top + window.scrollY; | |
var triggerOffset = title.offsetHeight + 35; | |
var progressMax = lastDocumentHeight - lastWindowHeight; | |
// show/hide post title | |
if (lastScrollY >= trigger + triggerOffset) { | |
nav.classList.add('nav-post-title-active'); | |
} else { | |
nav.classList.remove('nav-post-title-active'); | |
} | |
ticking = false; | |
} | |
window.addEventListener('scroll', onScroll, {passive: true}); | |
window.addEventListener('resize', onResize, false); | |
update(); | |
// Hover on avatar | |
var hoverTimeout; | |
$('.author-list-item').hover(function () { | |
var $this = $(this); | |
clearTimeout(hoverTimeout); | |
$('.author-card').removeClass('hovered'); | |
$(this).children('.author-card').addClass('hovered'); | |
}, function () { | |
var $this = $(this); | |
hoverTimeout = setTimeout(function () { | |
$this.children('.author-card').removeClass('hovered'); | |
}, 800); | |
}); | |
}); | |
</script> | |
{{/contentFor}} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment