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.addEventListener("DOMContentLoaded", function () {
		//responsive videos
		const sources = [
			'.post-content iframe[src*="youtube.com"]',
			'.post-content iframe[src*="youtube-nocookie.com"]',
			'.post-content iframe[src*="player.vimeo.com"]',
			'.post-content iframe[src*="kickstarter.com"][src*="video.html"]',
			'.post-content object',
			'.post-content embed',
		];
		reframe(document.querySelectorAll(sources.join(',')));
	});

	{{#if @custom.disqus_shortname}}
		var disqus = '{{@custom.disqus_shortname}}';

		function launchDisqus() {
			// Dynamically load the Disqus embed script
			var script = document.createElement('script');
			script.type = 'text/javascript';
			script.src = '//' + disqus + '.disqus.com/embed.js';
			script.async = true;
			script.setAttribute('data-timestamp', +new Date());
			script.onload = function() {
				console.log('Disqus script loaded successfully.');
			};

			// Append the script to the document head
			document.head.appendChild(script);

			// Add the 'activated' class to the parent of the triggering element
			var parent = document.querySelector('.disqus-button'); // Replace with the correct triggering element
			if (parent) {
				parent.classList.add('activated');
			}
		}

		// Execute the function
		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}}


	document.addEventListener("DOMContentLoaded", function () {
		// Format code blocks and add line numbers
		function codestyling() {
			// Select all `pre code` elements
			document.querySelectorAll('pre code').forEach(function (codeBlock) {
			// Code highlight
			hljs.highlightElement(codeBlock);

			// Skip plain text blocks
			if (!codeBlock.classList.contains('language-text')) {
				// Calculate the number of lines
				var lines = codeBlock.innerHTML.split(/\n(?!$)/g).length;
				if (lines > 1) lines++; // Account for extra line

				// Generate line numbers
				var numbers = Array.from({ length: lines - 1 }, (_, i) => {
				return `<span class="line" aria-hidden="true">${i + 1}</span>`;
				}).join('');

				// Create and append the lines container
				var linesContainer = document.createElement('div');
				linesContainer.className = 'lines';
				linesContainer.innerHTML = numbers;
				codeBlock.parentNode.appendChild(linesContainer);
			}
			});
		}
		codestyling();
	});

	document.addEventListener("DOMContentLoaded", function () {
		var post = document.querySelector('.post-content');
		var progressBar = document.querySelector('.progress-bar');
		var progressContainer = document.querySelector('.progress-container');

		// Helper to calculate the element's position relative to the document
		function getOffsetTop(element) {
			var rect = element.getBoundingClientRect();
			return rect.top + window.scrollY;
		}

		// Reading progress bar on window top
		function readingProgress() {
			if (!post || !progressBar || !progressContainer) return;

			var postBottom = getOffsetTop(post) + post.offsetHeight;
			var viewportHeight = window.innerHeight;
			var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

			// Calculate progress
			var progress = 100 - (((postBottom - (scrollTop + viewportHeight) + viewportHeight / 3) / 
								(postBottom - viewportHeight + viewportHeight / 3)) * 100);

			// Update progress bar width
			progressBar.style.width = Math.min(progress, 100) + '%';

			// Add or remove the 'complete' class
			if (progress > 100) {
				progressContainer.classList.add('complete');
			} else {
				progressContainer.classList.remove('complete');
			}
		}

		// Initial call
		readingProgress();

		// Throttle function to optimize scroll and resize events
		function throttle(callback, delay) {
			var lastCall = 0;
			return function () {
			var now = Date.now();
			if (now - lastCall >= delay) {
				lastCall = now;
				callback();
			}
			};
		}

		// Attach scroll, resize, and orientationchange events
		var optimizedReadingProgress = throttle(readingProgress, 50);
		window.addEventListener('scroll', optimizedReadingProgress);
		window.addEventListener('resize', optimizedReadingProgress);
		window.addEventListener('orientationchange', optimizedReadingProgress);
	});

</script>
{{/contentFor}}