Custom Ghost theme for my blog, based on Casper https://www.geber.ga
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

224 lines
8.2 KiB

  1. {{!< default}}
  2. {{!-- The tag above means: insert everything in this file
  3. into the {body} of the default.hbs template --}}
  4. <header class="site-header outer">
  5. <div class="inner">
  6. {{> "site-nav"}}
  7. </div>
  8. </header>
  9. {{!-- Everything inside the #post tags pulls data from the post --}}
  10. {{#post}}
  11. <main id="site-main" class="site-main outer" role="main">
  12. <div class="inner">
  13. <article class="post-full {{post_class}} {{#unless feature_image}}no-image{{/unless}}">
  14. <header class="post-full-header">
  15. <section class="post-full-meta">
  16. <time class="post-full-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMMM YYYY"}}</time>
  17. {{#primary_tag}}
  18. <span class="date-divider">/</span> <a href="{{url}}">{{name}}</a>
  19. {{/primary_tag}}
  20. </section>
  21. <h1 class="post-full-title">{{title}}</h1>
  22. </header>
  23. {{#if feature_image}}
  24. <figure class="post-full-image" style="background-image: url({{feature_image}})">
  25. </figure>
  26. {{/if}}
  27. <section class="post-full-content">
  28. {{content}}
  29. </section>
  30. {{!-- Email subscribe form at the bottom of the page --}}
  31. {{#if @labs.subscribers}}
  32. <section class="subscribe-form">
  33. <h3 class="subscribe-form-title">Subscribe to {{@blog.title}}</h3>
  34. <p>Get the latest posts delivered right to your inbox</p>
  35. {{subscribe_form placeholder="youremail@example.com"}}
  36. </section>
  37. {{/if}}
  38. <footer class="post-full-footer">
  39. {{!-- Everything inside the #author tags pulls data from the author --}}
  40. {{#author}}
  41. <section class="author-card">
  42. {{#if profile_image}}
  43. <img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" />
  44. {{/if}}
  45. <section class="author-card-content">
  46. <h4 class="author-card-name"><a href="{{url}}">{{name}}</a></h4>
  47. {{#if bio}}
  48. <p>{{bio}}</p>
  49. {{else}}
  50. <p>Read <a href="{{url}}">more posts</a> by this author.</p>
  51. {{/if}}
  52. </section>
  53. </section>
  54. <div class="post-full-footer-right">
  55. <a class="author-card-button" href="{{url}}">Read More</a>
  56. </div>
  57. {{/author}}
  58. </footer>
  59. <script data-isso="https://isso.angristan.xyz/" src="https://isso.angristan.xyz/js/embed.min.js"></script>
  60. <section id="isso-thread"></section>
  61. {{!--
  62. If you use Disqus comments, just uncomment this block.
  63. The only thing you need to change is "test-apkdzgmqhj" - which
  64. should be replaced with your own Disqus site-id.
  65. <section class="post-full-comments">
  66. <div id="disqus_thread"></div>
  67. <script>
  68. var disqus_config = function () {
  69. this.page.url = '{{url absolute="true"}}';
  70. this.page.identifier = 'ghost-{{comment_id}}';
  71. };
  72. (function() {
  73. var d = document, s = d.createElement('script');
  74. s.src = 'https://test-apkdzgmqhj.disqus.com/embed.js';
  75. s.setAttribute('data-timestamp', +new Date());
  76. (d.head || d.body).appendChild(s);
  77. })();
  78. </script>
  79. </section>
  80. --}}
  81. </article>
  82. </div>
  83. </main>
  84. {{!-- Links to Previous/Next posts --}}
  85. <aside class="read-next outer">
  86. <div class="inner">
  87. <div class="read-next-feed">
  88. {{#if primary_tag}}
  89. {{#get "posts" filter="tags:{{primary_tag.slug}}+id:-{{id}}" limit="3" as |related_posts|}}
  90. {{#if related_posts}}
  91. <article class="read-next-card"
  92. {{#if ../primary_tag.feature_image}}
  93. style="background-image: url({{../primary_tag.feature_image}})"
  94. {{else}}
  95. {{#if @blog.cover_image}}
  96. style="background-image: url({{@blog.cover_image}})"{{/if}}
  97. {{/if}}
  98. >
  99. <header class="read-next-card-header">
  100. <small class="read-next-card-header-sitetitle">&mdash; {{@blog.title}} &mdash;</small>
  101. {{#../primary_tag}}
  102. <h3 class="read-next-card-header-title"><a href="{{url}}">{{name}}</a></h3>
  103. {{/../primary_tag}}
  104. </header>
  105. <div class="read-next-divider">{{> "icons/infinity"}}</div>
  106. <div class="read-next-card-content">
  107. <ul>
  108. {{#foreach related_posts}}
  109. <li><a href="{{url}}">{{title}}</a></li>
  110. {{/foreach}}
  111. </ul>
  112. </div>
  113. <footer class="read-next-card-footer">
  114. <a href="{{#../primary_tag}}{{url}}{{/../primary_tag}}">{{plural meta.pagination.total empty='No posts' singular='% post' plural='See all % posts'}} →</a>
  115. </footer>
  116. </article>
  117. {{/if}}
  118. {{/get}}
  119. {{/if}}
  120. {{!-- If there's a next post, display it using the same markup included from - partials/post-card.hbs --}}
  121. {{#next_post}}
  122. {{> "post-card"}}
  123. {{/next_post}}
  124. {{!-- If there's a previous post, display it using the same markup included from - partials/post-card.hbs --}}
  125. {{#prev_post}}
  126. {{> "post-card"}}
  127. {{/prev_post}}
  128. </div>
  129. </div>
  130. </aside>
  131. {{!-- Floating header which appears on-scroll, included from includes/floating-header.hbs --}}
  132. {{> floating-header}}
  133. {{/post}}
  134. {{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
  135. {{#contentFor "scripts"}}
  136. <script>
  137. // NOTE: Scroll performance is poor in Safari
  138. // - this appears to be due to the events firing much more slowly in Safari.
  139. // Dropping the scroll event and using only a raf loop results in smoother
  140. // scrolling but continuous processing even when not scrolling
  141. $(document).ready(function () {
  142. // Start fitVids
  143. var $postContent = $(".post-full-content");
  144. $postContent.fitVids();
  145. // End fitVids
  146. var progressBar = document.querySelector('progress');
  147. var header = document.querySelector('.floating-header');
  148. var title = document.querySelector('.post-full-title');
  149. var lastScrollY = window.scrollY;
  150. var lastWindowHeight = window.innerHeight;
  151. var lastDocumentHeight = $(document).height();
  152. var ticking = false;
  153. function onScroll() {
  154. lastScrollY = window.scrollY;
  155. requestTick();
  156. }
  157. function onResize() {
  158. lastWindowHeight = window.innerHeight;
  159. lastDocumentHeight = $(document).height();
  160. requestTick();
  161. }
  162. function requestTick() {
  163. if (!ticking) {
  164. requestAnimationFrame(update);
  165. }
  166. ticking = true;
  167. }
  168. function update() {
  169. var trigger = title.getBoundingClientRect().top + window.scrollY;
  170. var triggerOffset = title.offsetHeight + 35;
  171. var progressMax = lastDocumentHeight - lastWindowHeight;
  172. // show/hide floating header
  173. if (lastScrollY >= trigger + triggerOffset) {
  174. header.classList.add('floating-active');
  175. } else {
  176. header.classList.remove('floating-active');
  177. }
  178. progressBar.setAttribute('max', progressMax);
  179. progressBar.setAttribute('value', lastScrollY);
  180. ticking = false;
  181. }
  182. window.addEventListener('scroll', onScroll, {passive: true});
  183. window.addEventListener('resize', onResize, false);
  184. update();
  185. });
  186. </script>
  187. {{/contentFor}}