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.
 
 
 

199 lines
6.8 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">
  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. <div class="post-content">
  29. {{content}}
  30. </div>
  31. </section>
  32. {{!-- Email subscribe form at the bottom of the page --}}
  33. {{#if @labs.subscribers}}
  34. <section class="subscribe-form">
  35. <h3 class="subscribe-form-title">Subscribe to {{@blog.title}}</h3>
  36. <p>Get the latest posts delivered right to your inbox</p>
  37. {{subscribe_form placeholder="youremail@example.com"}}
  38. </section>
  39. {{/if}}
  40. <footer class="post-full-footer">
  41. {{!-- There are two options for how we display the byline/author-info.
  42. If the post has more than one author, we load a specific template
  43. from includes/byline-multiple.hbs, otherwise, we just use the
  44. default byline. --}}
  45. {{#has author="count:>1"}}
  46. {{> "byline-multiple"}}
  47. {{else}}
  48. {{> "byline-single"}}
  49. {{/has}}
  50. </footer>
  51. {{!--
  52. <section class="post-full-comments">
  53. If you want to embed comments, this is a good place to do it!
  54. </section>
  55. --}}
  56. </article>
  57. </div>
  58. </main>
  59. {{!-- Links to Previous/Next posts --}}
  60. <aside class="read-next outer">
  61. <div class="inner">
  62. <div class="read-next-feed">
  63. {{#if primary_tag}}
  64. {{#get "posts" filter="tags:{{primary_tag.slug}}+id:-{{id}}" limit="3" as |related_posts|}}
  65. {{#if related_posts}}
  66. <article class="read-next-card"
  67. {{#if ../primary_tag.feature_image}}
  68. style="background-image: url({{../primary_tag.feature_image}})"
  69. {{else}}
  70. {{#if @blog.cover_image}}
  71. style="background-image: url({{@blog.cover_image}})"{{/if}}
  72. {{/if}}
  73. >
  74. <header class="read-next-card-header">
  75. <small class="read-next-card-header-sitetitle">&mdash; {{@blog.title}} &mdash;</small>
  76. {{#../primary_tag}}
  77. <h3 class="read-next-card-header-title"><a href="{{url}}">{{name}}</a></h3>
  78. {{/../primary_tag}}
  79. </header>
  80. <div class="read-next-divider">{{> "icons/infinity"}}</div>
  81. <div class="read-next-card-content">
  82. <ul>
  83. {{#foreach related_posts}}
  84. <li><a href="{{url}}">{{title}}</a></li>
  85. {{/foreach}}
  86. </ul>
  87. </div>
  88. <footer class="read-next-card-footer">
  89. <a href="{{#../primary_tag}}{{url}}{{/../primary_tag}}">{{plural meta.pagination.total empty='No posts' singular='% post' plural='See all % posts'}} →</a>
  90. </footer>
  91. </article>
  92. {{/if}}
  93. {{/get}}
  94. {{/if}}
  95. {{!-- If there's a next post, display it using the same markup included from - partials/post-card.hbs --}}
  96. {{#next_post}}
  97. {{> "post-card"}}
  98. {{/next_post}}
  99. {{!-- If there's a previous post, display it using the same markup included from - partials/post-card.hbs --}}
  100. {{#prev_post}}
  101. {{> "post-card"}}
  102. {{/prev_post}}
  103. </div>
  104. </div>
  105. </aside>
  106. {{!-- Floating header which appears on-scroll, included from includes/floating-header.hbs --}}
  107. {{> floating-header}}
  108. {{/post}}
  109. {{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
  110. {{#contentFor "scripts"}}
  111. <script>
  112. // NOTE: Scroll performance is poor in Safari
  113. // - this appears to be due to the events firing much more slowly in Safari.
  114. // Dropping the scroll event and using only a raf loop results in smoother
  115. // scrolling but continuous processing even when not scrolling
  116. $(document).ready(function () {
  117. // Start fitVids
  118. var $postContent = $(".post-full-content");
  119. $postContent.fitVids();
  120. // End fitVids
  121. var progressBar = document.querySelector('#reading-progress');
  122. var header = document.querySelector('.floating-header');
  123. var title = document.querySelector('.post-full-title');
  124. var lastScrollY = window.scrollY;
  125. var lastWindowHeight = window.innerHeight;
  126. var lastDocumentHeight = $(document).height();
  127. var ticking = false;
  128. function onScroll() {
  129. lastScrollY = window.scrollY;
  130. requestTick();
  131. }
  132. function onResize() {
  133. lastWindowHeight = window.innerHeight;
  134. lastDocumentHeight = $(document).height();
  135. requestTick();
  136. }
  137. function requestTick() {
  138. if (!ticking) {
  139. requestAnimationFrame(update);
  140. }
  141. ticking = true;
  142. }
  143. function update() {
  144. var trigger = title.getBoundingClientRect().top + window.scrollY;
  145. var triggerOffset = title.offsetHeight + 35;
  146. var progressMax = lastDocumentHeight - lastWindowHeight;
  147. // show/hide floating header
  148. if (lastScrollY >= trigger + triggerOffset) {
  149. header.classList.add('floating-active');
  150. } else {
  151. header.classList.remove('floating-active');
  152. }
  153. progressBar.setAttribute('max', progressMax);
  154. progressBar.setAttribute('value', lastScrollY);
  155. ticking = false;
  156. }
  157. window.addEventListener('scroll', onScroll, {passive: true});
  158. window.addEventListener('resize', onResize, false);
  159. update();
  160. });
  161. </script>
  162. {{/contentFor}}