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.
 
 
 

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