post.hbs

{{!< default}}

{{!-- Everything inside the #post tags pulls data from the post --}}
{{#post}}

<div class="progress-container">
	<span class="progress-bar"></span>
</div>

<header class="post-header {{#if feature_image}} has-cover {{/if}}">
	<div class="inner">
		<span class="post-info">
			<span class="post-type">{{t "Article"}}</span>
			{{#if tags}}
			<span class="post-count">{{primary_tag.name}}</span>
			{{/if}}
		</span>
		<h1 class="post-title">{{{title}}}</h1>
		<div class="post-meta">
			<div class="post-meta-avatars">
				{{#foreach authors}}
					{{#if profile_image}}
						<figure class="post-meta-avatar">
							<a href="{{url}}" class="author-avatar">
								<img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" />
							</a>
						</figure>
					{{else}}
						<figure class="post-meta-avatar avatar"></figure>
					{{/if}}
				{{/foreach}}
			</div>
			<h4 class="post-meta-author">{{authors separator=", "}}</h4>
			<time datetime="{{date format='DD-MM-YYYY'}}">{{date format="DD MMM YYYY"}}</time> &bull; {{reading_time minute=(t "1 min read") minutes=(t "% min read")}}
		</div>
		{{#if feature_image}}
		<div class="post-cover cover">
			<img
			srcset="{{img_url feature_image size="s"}} 320w,
              {{img_url feature_image size="m"}} 640w,
              {{img_url feature_image size="l"}} 960w,
              {{img_url feature_image size="xl"}} 1920w"
      src="{{img_url feature_image size="xl"}}"
			alt="{{title}}" />
		</div>
		{{/if}}
	</div>
</header>

<main class="content" role="main">
	<article class="{{post_class}}">
		<div class="inner">

			<section class="post-content">
				{{content}}
			</section>

			<section class="post-footer">

				{{#match @custom.post_share "Native"}}
					<div class="post-share">
						<span class="post-info-label">{{t "Share"}}</span>
						<button aria-label="{{t "Share"}} {{t "Article"}}" class="post-share-button" id="share-button"><i class="icon icon-share" aria-hidden="true">{{> "icons/icon-share"}}</i></button>
					</div>
				{{/match}}

				{{#match @custom.post_share "Default"}}
					<div class="post-share">
						<span class="post-info-label">{{t "Share"}}</span>
						<a title="Twitter" aria-label="Twitter" class="twitter" href="https://twitter.com/share?text={{title}}&url={{url absolute="true"}}" onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;">
							<i class="icon icon-twitter" aria-hidden="true">{{> "icons/icon-twitter"}}</i>
						</a>
						<a title="Facebook" aria-label="Facebook" class="facebook" href="https://www.facebook.com/sharer/sharer.php?u={{url absolute="true"}}" onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;">
							<i class="icon icon-facebook" aria-hidden="true">{{> "icons/icon-facebook"}}</i>
						</a>
						<a title="LinkedIn" aria-label="LinkedIn" class="linkedin" href="https://www.linkedin.com/shareArticle?mini=true&amp;url={{url absolute="true"}}/&amp;title={{title}}" onclick="window.open(this.href, 'linkedin-share', 'width=930,height=720');return false;">
							<i class="icon icon-linkedin" aria-hidden="true">{{> "icons/icon-linkedin"}}</i>
						</a>
						<a title="Email" aria-label="Email" class="email" href="mailto:?subject={{title}}&amp;body={{url absolute="true"}}">
							<i class="icon icon-mail" aria-hidden="true">{{> "icons/icon-mail"}}</i>
						</a>
					</div>
				{{/match}}

				{{#if tags}}
				<aside class="post-tags">
					<span class="post-info-label">{{t "Topic"}}</span>
					{{tags separator=" "}}
				</aside>
				{{/if}}

			</section>

			{{#if @custom.disqus_shortname}}
			<section class="post-comments">
			   <div id="disqus_thread"></div>
			</section>
			{{/if}}

			{{#if comments}}
			<section class="post-comments">
				{{comments}}
			</section>
			{{/if}}

      {{#if @labs.subscribers}}
      <section class="post-subscribe">
				<p>{{t "Get the latest posts delivered right to your inbox."}}</p>
        {{subscribe_form placeholder=(t "Your email address") form_class="post-subscribe-form" input_class="post-subscribe-input" button_class="post-subscribe-button"}}
      </section>
      {{/if}}

			{{!-- Links to Previous/Next posts --}}
			<aside class="post-nav">

				{{!-- If there's a next post, display it using the same markup included from - partials/post-card.hbs --}}
				{{#next_post}}
					<a class="post-nav-next" href="{{url}}">
						<section class="post-nav-teaser">
							<i class="icon icon-arrow-left" aria-label="{{t "Next post"}}">{{> "icons/icon-arrow-left"}}</i>
							<h2 class="post-nav-title">{{title}}</h2>
							<p class="post-nav-excerpt">{{excerpt words="12"}}&hellip;</p>
							<p class="post-nav-meta"><time datetime="{{date format='DD-MM-YYYY'}}">{{date format="DD MMM YYYY"}}</time></p>
						</section>
					</a>
				{{/next_post}}

				{{!-- If there's a previous post, display it using the same markup included from - partials/post-card.hbs --}}
				{{#prev_post}}
					<a class="post-nav-prev" href="{{url}}">
						<section class="post-nav-teaser">
							<i class="icon icon-arrow-right" aria-label="{{t "Previous post"}}">{{> "icons/icon-arrow-right"}}</i>
							<h2 class="post-nav-title">{{title}}</h2>
							<p class="post-nav-excerpt">{{excerpt words="12"}}&hellip;</p>
							<p class="post-nav-meta"><time datetime="{{date format='DD-MM-YYYY'}}">{{date format="DD MMM YYYY"}}</time></p>
						</section>
					</a>
				{{/prev_post}}
				<div class="clear"></div>
			</aside>

		</div>
	</article>
</main>

{{/post}}

{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
{{#contentFor "scripts"}}
<script>
  $(document).ready(function () {
		var viewport = $(window);
		var post = $('.post-content');
		// Responsive videos with fitVids
    post.fitVids();
		// Format code blocks and add line numbers
		function codestyling() {
	    $('pre code').each(function(i, e) {
				// Code highlight
	      hljs.highlightElement(e);
	      // No lines for plain text blocks
	      if (!$(this).hasClass('language-text')) {
	        var code = $(this);
					// Calculate amount of lines
	        var lines = code.html().split(/\n(?!$)/g).length;
	        var numbers = [];
	        if (lines > 1) {
	          lines++;
	        }
	        for (i = 1; i < lines; i++) {
	          numbers += '<span class="line" aria-hidden="true">' + i + '</span>';
	        }
	        code.parent().append('<div class="lines">' + numbers + '</div>');
	      }
	    });
	  }
	  codestyling();
		// Reading progress bar on window top
	  function readingProgress() {
			var postBottom = post.offset().top + post.height();
			var viewportHeight = viewport.height();
      var progress = 100 - (((postBottom - (viewport.scrollTop() + viewportHeight) + viewportHeight / 3) / (postBottom - viewportHeight + viewportHeight / 3)) * 100);
      $('.progress-bar').css('width', progress + '%');
      (progress > 100) ? $('.progress-container').addClass('complete'): $('.progress-container').removeClass('complete');
	  }
	  readingProgress();
		// Trigger reading progress
	  viewport.on({
	    'scroll': function() {
	      readingProgress();
	    },
	    'resize': function() {
	      readingProgress();
	    },
	    'orientationchange': function() {
	      readingProgress();
	    }
	  });

		{{#if @custom.disqus_shortname}}
			var disqus = '{{@custom.disqus_shortname}}';
	    function launchDisqus() {
	      $.ajax({
	        type: "GET",
	        url: "//" + disqus + ".disqus.com/embed.js",
	        dataType: "script",
	        cache: true
	      });
	      $(this).parent().addClass('activated');
	    }
			launchDisqus();
		{{/if}}

		{{#match @custom.post_share "Native"}}
		document.getElementById('share-button').addEventListener('click', async () => {
			try {
				await navigator.share({
					//title: 'Title',
					//text: 'Text',
					url: '{{url absolute="true"}}',
				});
				console.log('Data was shared successfully');
			} catch (err) {
				console.error('error:', err.message);
			}
		});
		{{/match}}
  });
</script>
{{/contentFor}}