generated from muhtadeetaron/nextjs-template
334 lines
17 KiB
Handlebars
334 lines
17 KiB
Handlebars
{{!--
|
|
Parameters:
|
|
- isPost: Boolean
|
|
--}}
|
|
|
|
{{#if isPost}}
|
|
{{!-- Table of Contents --}}
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.12.3/tocbot.css">
|
|
<link rel="stylesheet" type="text/css" href="{{asset "css/table-of-contents.css"}}" />
|
|
{{/if}}
|
|
|
|
<article class="{{#unless @custom.use_sidebar}}overflow-hidden{{/unless}}{{#unless isPost}} overflow-hidden{{/unless}}" data-post-header-type="{{@custom.post_header_type}}" data-has-feature-image="{{#if feature_image}}true{{else}}false{{/if}}" data-use-sidebar="{{#if isPost}}{{@custom.use_sidebar}}{{else}}false{{/if}}">
|
|
{{#match @page.show_title_and_feature_image}}
|
|
<header class="hero {{#if feature_image}}wide-container{{#match @custom.post_header_type "Featured Image Right"}} vertical-post-header{{/match}}{{#match @custom.post_header_type "Featured Image Left"}} vertical-post-header vertical-post-image-left{{/match}}{{else}}{{#unless @custom.use_sidebar}} narrow-container{{else}} wide-container{{/unless}} no-image-container{{/if}}
|
|
{{#match @custom.post_header_type "Narrow"}}{{#unless @custom.use_sidebar}} narrow-container{{/unless}}{{/match}}{{#unless isPost}} narrow-container{{/unless}}">
|
|
<div class="hero-content">
|
|
<div class="post-hero-text-content section-padding-top">
|
|
{{#if isPost}}
|
|
{{#primary_tag}}
|
|
<a class="post-tag hover-underline" href="{{url}}">{{name}}</a>
|
|
{{/primary_tag}}
|
|
{{/if}}
|
|
|
|
<h1 class="post-heading">{{title}}</h1>
|
|
|
|
<div class="excerpt-and-authors-wrapper">
|
|
{{#if custom_excerpt}}
|
|
<div class="post-excerpt-wrapper{{#unless isPost}}{{#unless feature_image}} full-width-post-excerpt-wrapper{{/unless}}{{/unless}}">
|
|
<p>
|
|
{{custom_excerpt}}
|
|
</p>
|
|
</div>
|
|
{{/if}}
|
|
|
|
{{#if isPost}}
|
|
{{> "components/post-authors" }}
|
|
{{/if}}
|
|
</div>
|
|
</div>
|
|
|
|
{{#if feature_image}}
|
|
<div class="post-main-image-wrapper post-main-image-wrapper-header hover-image-opacity">
|
|
<div class="post-main-image">
|
|
<figure>
|
|
<img
|
|
srcset="{{img_url feature_image size="s" format="webp"}} 320w,
|
|
{{img_url feature_image size="xm" format="webp"}} 440w,
|
|
{{img_url feature_image size="m" format="webp"}} 600w,
|
|
{{img_url feature_image size="l" format="webp"}} 960w,
|
|
{{img_url feature_image size="xl" format="webp"}} 1200w,
|
|
{{img_url feature_image size="xxl" format="webp"}} 2000w"
|
|
src="{{img_url feature_image size="xl"}}"
|
|
alt="{{title}}"
|
|
>
|
|
{{#if feature_image_caption}}
|
|
<figcaption>{{feature_image_caption}}</figcaption>
|
|
{{/if}}
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
{{/if}}
|
|
</div>
|
|
</header>
|
|
{{/match}}
|
|
|
|
<div class="gh-content gh-canvas post-content-and-sidebar{{#match @custom.sidebar_position "Left"}} sidebar-left{{/match}}{{#match @custom.post_header_type "Featured Image Left"}} sidebar-left{{/match}}">
|
|
<div class="post-content-outer narrow-container{{#unless @custom.use_sidebar}} post-content-outer-without-sidebar{{/unless}}{{#unless isPost}} post-content-outer-without-sidebar{{/unless}}">
|
|
{{#if feature_image}}
|
|
{{#if isPost}}
|
|
{{#match @custom.post_header_type "Narrow"}}
|
|
{{#if @custom.use_sidebar}}
|
|
<div class="post-main-image-wrapper post-main-image-wrapper-content hover-image-opacity">
|
|
<div class="post-main-image">
|
|
<figure>
|
|
<img
|
|
srcset="{{img_url feature_image size="s" format="webp"}} 320w,
|
|
{{img_url feature_image size="xm" format="webp"}} 440w,
|
|
{{img_url feature_image size="m" format="webp"}} 600w,
|
|
{{img_url feature_image size="l" format="webp"}} 960w,
|
|
{{img_url feature_image size="xl" format="webp"}} 1200w,
|
|
{{img_url feature_image size="xxl" format="webp"}} 2000w"
|
|
src="{{img_url feature_image size="xl"}}"
|
|
alt="{{title}}"
|
|
>
|
|
{{#if feature_image_caption}}
|
|
<figcaption>{{feature_image_caption}}</figcaption>
|
|
{{/if}}
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
{{/if}}
|
|
{{/match}}
|
|
{{/if}}
|
|
{{/if}}
|
|
|
|
<div class="post-content section-padding-bottom{{#unless feature_image}} post-content-no-image{{/unless}}">
|
|
{{content}}
|
|
|
|
{{#if isPost}}
|
|
{{#if access}}
|
|
<div class="post-share">
|
|
<div class="post-share-heading">
|
|
{{t "Share this article"}}
|
|
</div>
|
|
|
|
<div class="socials post-share-icons">
|
|
<a href="https://www.facebook.com/sharer.php?u={{url absolute='true'}}" target="_blank" rel="noopener" class="social" aria-label="Share on Facebook">
|
|
<div class="social-inner">
|
|
{{> "icons/facebook-icon"}}
|
|
</div>
|
|
</a>
|
|
|
|
|
|
<a href="https://twitter.com/intent/tweet?url={{url absolute='true'}}&text={{encode title}}" target="_blank" rel="noopener" class="social" aria-label="Share on Twitter/X">
|
|
<div class="social-inner">
|
|
{{> "icons/twitter-icon"}}
|
|
</div>
|
|
</a>
|
|
|
|
<a href="https://www.linkedin.com/shareArticle?mini=true&url={{url absolute='true'}}&title={{encode title}}" target="_blank" rel="noopener" class="social" aria-label="Share on Linkedin">
|
|
<div class="social-inner social-inner-smaller">
|
|
{{> "icons/linkedin-icon"}}
|
|
</div>
|
|
</a>
|
|
|
|
<a class="social clipboard-link" href="javascript:" aria-label="Copy Link">
|
|
<div class="social-inner">
|
|
{{> "icons/link-icon"}}
|
|
</div>
|
|
</a>
|
|
|
|
<div class="clipboard-alert">
|
|
<small>{{t "The link has been copied!"}}</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{/if}}
|
|
{{/if}}
|
|
</div>
|
|
|
|
{{#if isPost}}
|
|
{{#if comments}}
|
|
<div class="section-heading">
|
|
<span>{{t "Members Discussion"}}</span>
|
|
<span>{{comment_count empty=(t "No Comments") singular=(t "Comment") plural=(t "Comments") autowrap="false"}}</span>
|
|
</div>
|
|
|
|
<div class="comments-container">
|
|
{{comments title="" count=false}}
|
|
</div>
|
|
{{/if}}
|
|
{{/if}}
|
|
</div>
|
|
|
|
{{#if isPost}}
|
|
{{#if @custom.use_sidebar}}
|
|
<aside class="post-sidebar{{#unless feature_image}} post-content-no-image{{/unless}}{{#match @custom.sidebar_content "Featured Articles"}} sidebar-related-articles{{/match}}">
|
|
{{#match @custom.sidebar_content "Featured Articles"}}
|
|
{{#get 'posts' include='tags,authors' limit='4' filter='id:-{{id}}+featured:true' as |featured|}}
|
|
{{#if featured}}
|
|
<div class="sidebar-articles">
|
|
<div class="section-heading">
|
|
<span>
|
|
{{t "Featured Articles"}}
|
|
</span>
|
|
</div>
|
|
|
|
{{#foreach featured}}
|
|
{{> "components/extra-small-side-card" isPost=true name=title}}
|
|
{{/foreach}}
|
|
</div>
|
|
{{/if}}
|
|
{{/get}}
|
|
|
|
|
|
<div class="hidden-sidebar-newsletter{{#if @custom.use_newsletter_on_homepage_and_post_sidebar}}{{#if @site.members_enabled}}{{#unless @site.members_invite_only}}{{#unless @member}} sidebar-newsletter-container{{/unless}}{{/unless}}{{/if}}{{/if}}">
|
|
{{> "components/newsletter" isForPost=true }}
|
|
</div>
|
|
|
|
{{else}}
|
|
<div class="gh-toc-outer">
|
|
<div class="medium-text toc-heading">{{t "Table of Contents"}}</div>
|
|
<div class="gh-toc"></div>
|
|
</div>
|
|
{{/match}}
|
|
</aside>
|
|
{{/if}}
|
|
{{/if}}
|
|
</div>
|
|
|
|
{{#if isPost}}
|
|
<footer>
|
|
<div class="wide-container section-padding-bottom">
|
|
<div class="related-posts">
|
|
<div class="related-post-wrapper previous-article-horizontal-card">
|
|
{{#prev_post}}
|
|
{{> "components/horizontal-card" isRelatedArticle=true}}
|
|
{{/prev_post}}
|
|
</div>
|
|
|
|
<div class="related-post-line"></div>
|
|
|
|
<div class="related-post-wrapper next-article-horizontal-card">
|
|
{{#next_post}}
|
|
{{> "components/horizontal-card" isRelatedArticle=true isNextArticle=true}}
|
|
{{/next_post}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{#get "posts" limit="6" include="count.posts" filter='id:-{{id}}+tag:[{{primary_tag.slug}}]'}}
|
|
{{#if posts}}
|
|
<section class="footer-slider">
|
|
<div class="wide-container">
|
|
<div class="section-heading">
|
|
<span>
|
|
{{t "Related Articles"}}
|
|
</span>
|
|
|
|
{{#match @custom.use_custom_pages "All Custom Pages"}}
|
|
<a href="{{@site.url}}/archive/" class="section-heading-button">
|
|
{{t "View All"}}
|
|
|
|
<div class="section-heading-arrow">
|
|
{{> "icons/section-heading-arrow"}}
|
|
</div>
|
|
</a>
|
|
{{else}}
|
|
{{plural posts.length empty=(t "No Articles") singular=(t "1 Article") plural=(t "% Articles")}}
|
|
{{/match}}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="slider">
|
|
<div class="slider-outer section-padding-small">
|
|
<div class="slider-inner">
|
|
{{#foreach posts}}
|
|
{{> "components/slide-card" isPost=true}}
|
|
{{/foreach}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{{/if}}
|
|
{{/get}}
|
|
</footer>
|
|
{{/if}}
|
|
</article>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/lightense-images@1.0.17/dist/lightense.min.js"></script>
|
|
<script>
|
|
setLightense();
|
|
</script>
|
|
|
|
<script src="{{asset "js/post-content.js"}}"></script>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
setToggle();
|
|
})
|
|
</script>
|
|
|
|
{{#if isPost}}
|
|
{{#match @custom.sidebar_content "Table Of Contents"}}
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.12.3/tocbot.min.js"></script>
|
|
<script>
|
|
tocbot.init({
|
|
// Where to render the table of contents.
|
|
tocSelector: '.gh-toc',
|
|
// Where to grab the headings to build the table of contents.
|
|
contentSelector: '.gh-content',
|
|
// Which headings to grab inside of the contentSelector element.
|
|
headingSelector: 'h2, h3, h4',
|
|
// Ensure correct positioning
|
|
hasInnerContainers: true,
|
|
ignoreSelector: '.kg-card h2, .kg-card h3, .kg-card h4, .post-upgrade-cta h2'
|
|
});
|
|
</script>
|
|
{{/match}}
|
|
|
|
{{#if @custom.use_sidebar}}
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
stickySidebar();
|
|
})
|
|
|
|
window.addEventListener('resize', debounce(() => {stickySidebar()}, 100));
|
|
</script>
|
|
{{/if}}
|
|
|
|
{{#if access}}
|
|
<script>
|
|
copyUrlToClipboard("post-share-icons");
|
|
|
|
window.addEventListener("load", () => {
|
|
const iframe = document.querySelector('#ghost-comments-root iframe');
|
|
if(!iframe) return;
|
|
|
|
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
|
|
var targetHead = iframe.contentDocument.head;
|
|
|
|
var newLink = document.createElement("link");
|
|
newLink.setAttribute("rel", "stylesheet");
|
|
newLink.setAttribute("type", "text/css");
|
|
newLink.setAttribute("href", "{{asset 'css/comments.css'}}");
|
|
|
|
let section = iframeDoc.querySelector('section');
|
|
section.id = "comments-section"
|
|
|
|
const rootStyles = getComputedStyle(document.documentElement);
|
|
|
|
//initial variables
|
|
iframeDoc.documentElement.style.setProperty('--text-color', rootStyles.getPropertyValue('--text-color'))
|
|
iframeDoc.documentElement.style.setProperty('--background-color', rootStyles.getPropertyValue('--background-color'))
|
|
iframeDoc.documentElement.style.setProperty('--ease-transition', rootStyles.getPropertyValue('--ease-transition'))
|
|
iframeDoc.documentElement.style.setProperty('--font1', rootStyles.getPropertyValue('--font1'))
|
|
iframeDoc.documentElement.style.setProperty('--font2', rootStyles.getPropertyValue('--font2'))
|
|
iframeDoc.documentElement.style.setProperty('--font3', rootStyles.getPropertyValue('--font3'))
|
|
iframeDoc.documentElement.style.setProperty('--font4', rootStyles.getPropertyValue('--font4'))
|
|
iframeDoc.documentElement.style.setProperty('--image-filter', rootStyles.getPropertyValue('--image-filter'))
|
|
|
|
targetHead.appendChild(newLink);
|
|
loadFonts("{{@custom.fonts}}", iframeDoc);
|
|
|
|
const linkElement = document.querySelector('link[href*="fonts.bunny.net/css"]');
|
|
|
|
if(linkElement){
|
|
const clone = linkElement.cloneNode(true);
|
|
targetHead.appendChild(clone);
|
|
}
|
|
});
|
|
</script>
|
|
{{/if}}
|
|
{{/if}} |