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">
	<div class="inner">

		<h1 class="post-title">{{{title}}}</h1>
		<div class="post-meta">
			<div class="post-meta-avatars">
				{{#foreach authors}}
					<figure class="post-meta-avatar avatar">
						{{#if profile_image}}
						<a href="{{url}}" class="author-avatar">
								<img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" />
						</a>
						{{/if}}
					</figure>
				{{/foreach}}
			</div>
			<h4 class="post-meta-author">{{authors separator=", "}}</h4>
			<time datetime="{{date format='YYYY-MM-DD'}}">{{date format="YYYY-MM-DD"}}</time> &bull; {{reading_time minute=(t "1 min read") minutes=(t "% min read")}}  &bull; <span id="twikoo_visitors">0</span>°
		</div>
</header>

<main class="content" role="main">
	<article class="{{post_class}}">
		<div class="inner">
			
			<section class="post-content">
				{{#has tag="#post-toc"}}
				<div id="post-toc" class="post-toc"></div>
				{{/has}}
				{{content}}
				<h3 fr-fix-stroke="true" data-koenig-dnd-droppable="true" class="footer_history">{{t "History"}}</h3>
				<ul data-koenig-dnd-droppable="true">
					<li>{{t "Created"}} {{date created_at format="YYYY-MM-DD  HH:mm"}} </li>
					<li>{{t "Published"}} {{date published_at format="YYYY-MM-DD  HH:mm"}} </li>
					{{#match published_at "!=" updated_at}}<li>{{t "Updated"}} {{date updated_at format="YYYY-MM-DD  HH:mm"}} </li>{{/match}}
				</ul>
			</section>

			<section class="post-footer">

				<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"></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"></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"></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"></i>
					</a>
				</div>

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

			</section>




      {{#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"}}"></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='YYYY-MM-DD'}}">{{date format="YYYY-MM-DD"}}</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"}}"></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='YYYY-MM-DD'}}">{{date format="YYYY-MM-DD"}}</time></p>
						</section>
					</a>
				{{/prev_post}}
				<div class="clear"></div>
			</aside>


		<section class="post-comments">
			{{#if @custom.disqus_shortname}}
         	<div id="tcomment"></div>
        	<script>twikoo.init({ envId: '{{@custom.disqus_shortname}}', el: '#tcomment' })</script>
    	{{/if }}
			</section>

		</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
	
	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}}
		$('.post-comments').css({
			'display': 'block'
		});
		var disqus = '{{@custom.disqus_shortname}}';
	$('#show-disqus').on('click', function() {
		$.ajax({
		type: "GET",
		url: "//" + disqus + ".disqus.com/embed.js",
		dataType: "script",
		cache: true
		});
		$(this).parent().addClass('activated');
	});
	{{/if}}
  });
</script>
{{/contentFor}}