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.
 
 
 

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