No puede seleccionar más de 25 temas Los temas deben comenzar con una letra o número, pueden incluir guiones ('-') y pueden tener hasta 35 caracteres de largo.

204 líneas
7.6KB

  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. <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">S'abonner à {{@blog.title}}</h3>
  33. <p>Obtenez les derniers articles cueillis le matin même directement dans vos mails</p>
  34. {{subscribe_form placeholder="youremail@example.com"}}
  35. </section>
  36. {{/if}}
  37. <footer class="post-full-footer">
  38. {{!-- Everything inside the #author tags pulls data from the author --}}
  39. {{#author}}
  40. <section class="author-card">
  41. {{#if profile_image}}
  42. <img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" />
  43. {{/if}}
  44. <section class="author-card-content">
  45. <h4 class="author-card-name"><a href="{{url}}">{{name}}</a></h4>
  46. {{#if bio}}
  47. <p>{{bio}}</p>
  48. {{else}}
  49. <p>Lisez <a href="{{url}}">plus d'articles</a> par cet auteur (enfin quand je dis auteur...).</p>
  50. {{/if}}
  51. </section>
  52. </section>
  53. <div class="post-full-footer-right">
  54. <a class="author-card-button" href="{{url}}">Voir</a>
  55. </div>
  56. {{/author}}
  57. </footer>
  58. {{!-- Isso (hardcoded) --}}
  59. <script data-isso="https://isso.von.zone/" src="https://isso.von.zone/js/embed.min.js"></script>
  60. <section id="isso-thread"></section>
  61. </article>
  62. <script src="https://sense.framasoft.org/sense3.js" data-sense3="728x90;adblock,amazon,apple,browser,chrome,degooglisons,facebook,firefox,gafam,google,linux,mac,microsoft,mozilla,referrer,system,twitter,ubuntu,windows"></script>
  63. </div>
  64. </main>
  65. <aside class="read-next outer">
  66. <div class="inner">
  67. <div class="read-next-feed">
  68. {{#if primary_tag}}
  69. {{#get "posts" filter="tags:{{primary_tag.slug}}+id:-{{id}}" limit="3" as |related_posts|}}
  70. {{#if related_posts}}
  71. <article class="read-next-card"
  72. {{#if ../primary_tag.feature_image}}
  73. style="background-image: url({{../primary_tag.feature_image}})"
  74. {{else}}
  75. {{#if @blog.cover_image}}
  76. style="background-image: url({{@blog.cover_image}})"{{/if}}
  77. {{/if}}
  78. >
  79. <header class="read-next-card-header">
  80. <small class="read-next-card-header-sitetitle">&mdash; {{@blog.title}} &mdash;</small>
  81. {{#../primary_tag}}
  82. <h3 class="read-next-card-header-title"><a href="{{url}}">{{name}}</a></h3>
  83. {{/../primary_tag}}
  84. </header>
  85. <div class="read-next-divider">{{> "icons/infinity"}}</div>
  86. <div class="read-next-card-content">
  87. <ul>
  88. {{#foreach related_posts}}
  89. <li><a href="{{url}}">{{title}}</a></li>
  90. {{/foreach}}
  91. </ul>
  92. </div>
  93. <footer class="read-next-card-footer">
  94. <a href="{{#../primary_tag}}{{url}}{{/../primary_tag}}">{{plural meta.pagination.total empty='No posts' singular='% post' plural='See all % posts'}} →</a>
  95. </footer>
  96. </article>
  97. {{/if}}
  98. {{/get}}
  99. {{/if}}
  100. {{!-- If there's a next post, display it using the same markup included from - partials/post-card.hbs --}}
  101. {{#next_post}}
  102. {{> "post-card"}}
  103. {{/next_post}}
  104. {{!-- If there's a previous post, display it using the same markup included from - partials/post-card.hbs --}}
  105. {{#prev_post}}
  106. {{> "post-card"}}
  107. {{/prev_post}}
  108. </div>
  109. </div>
  110. </aside>
  111. {{!-- Floating header which appears on-scroll, included from includes/floating-header.hbs --}}
  112. {{> floating-header}}
  113. {{/post}}
  114. {{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
  115. {{#contentFor "scripts"}}
  116. <script>
  117. // NOTE: Scroll performance is poor in Safari
  118. // - this appears to be due to the events firing much more slowly in Safari.
  119. // Dropping the scroll event and using only a raf loop results in smoother
  120. // scrolling but continuous processing even when not scrolling
  121. $(document).ready(function () {
  122. // Start fitVids
  123. var $postContent = $(".post-full-content");
  124. $postContent.fitVids();
  125. // End fitVids
  126. var progressBar = document.querySelector('progress');
  127. var header = document.querySelector('.floating-header');
  128. var title = document.querySelector('.post-full-title');
  129. var lastScrollY = window.scrollY;
  130. var lastWindowHeight = window.innerHeight;
  131. var lastDocumentHeight = $(document).height();
  132. var ticking = false;
  133. function onScroll() {
  134. lastScrollY = window.scrollY;
  135. requestTick();
  136. }
  137. function onResize() {
  138. lastWindowHeight = window.innerHeight;
  139. lastDocumentHeight = $(document).height();
  140. requestTick();
  141. }
  142. function requestTick() {
  143. if (!ticking) {
  144. requestAnimationFrame(update);
  145. }
  146. ticking = true;
  147. }
  148. function update() {
  149. var trigger = title.getBoundingClientRect().top + window.scrollY;
  150. var triggerOffset = title.offsetHeight + 35;
  151. var progressMax = lastDocumentHeight - lastWindowHeight;
  152. // show/hide floating header
  153. if (lastScrollY >= trigger + triggerOffset) {
  154. header.classList.add('floating-active');
  155. } else {
  156. header.classList.remove('floating-active');
  157. }
  158. progressBar.setAttribute('max', progressMax);
  159. progressBar.setAttribute('value', lastScrollY);
  160. ticking = false;
  161. }
  162. window.addEventListener('scroll', onScroll, {passive: true});
  163. window.addEventListener('resize', onResize, false);
  164. update();
  165. });
  166. </script>
  167. <script src="{{asset "js/highlight.min.js"}}"></script>
  168. <script>hljs.initHighlightingOnLoad();</script>
  169. {{/contentFor}}