Disqus

.gitignore

@@ -25,3 +25,4 @@ dist/
 
 # StayPuft
 partials/custom/nav-external.hbs
+partials/custom/disqus.hbs

README.md

@@ -8,7 +8,7 @@ A programming-oriented theme for [Ghost](https://github.com/TryGhost/Ghost). Thi
 
 * Responsive design.
 * Custom [⚡AMP](https://blog.ghost.org/custom-amp-themes/) theme ([ℹ️](https://themes.ghost.org/docs/amp)).
-* ~~Post comments using [Disqus](http://disqus.com/).~~
+* Post comments using [Disqus](http://disqus.com/).
 * In-site search using [GhostHunter](https://github.com/i11ume/ghostHunter).
 * Support for [Font Awesome](https://github.com/FortAwesome/Font-Awesome).
 * ~~Syntax highlighting using [Prism](https://github.com/LeaVerou/prism/).~~
@@ -32,6 +32,7 @@ If the current version of StayPuft is not compatible with the version of Ghost y
 
 * Clone the repository or download the [latest release](https://github.com/dlecina/StayPuft/releases/latest) and extract it.
 * Copy `partials/custom/nav-external.hbs.example` to `partials/custom/nav-external.hbs` and customize it with your own external links.
+* Copy `partials/custom/disqus.hbs.example` to `partials/custom/disqus.hbs` and customize it with your [Disqus shortname](https://help.disqus.com/installation/whats-a-shortname).
 * Run `yarn zip` in the theme's root directory to create `dist/StayPuft.zip`.
 * Go to your blog's Settings page (typically `/admin` or `/ghost`).
 * In the Design tab, upload and activate StayPuft.

assets/css/staypuft.css

@@ -287,6 +287,11 @@ a.post-card-content-link:hover {
     margin-top: 0;
 }
 
+.post-full-comments {
+    margin: 2em auto;
+    padding: 0 100px 0;
+}
+
 .read-next-card-header {
     padding-top: 0;
 }
@@ -446,6 +451,12 @@ a.post-card-content-link:hover {
 
 }
 
+@media (max-width: 1170px) {
+    .post-full-comments {
+        padding: 0 7vw 0;
+    }
+}
+
 @media (max-width: 650px) {
 
     .tag-template .tag-header.site-header,

page.hbs

@@ -20,6 +20,10 @@ into the {body} of the default.hbs template --}}
         {{content}}
     </section>
 
+    <section class="post-full-comments">
+        {{> "post-comments"}}
+    </section>
+
 </article>
 
 {{/post}}

partials/custom/disqus.hbs.example

@@ -0,0 +1 @@
+var disqus_shortname = 'example'; // required: replace example with your forum shortname

partials/post-comments.hbs

@@ -0,0 +1,18 @@
+<div id="disqus_thread"></div>
+<script>
+    {{> "custom/disqus"}}
+
+    var disqus_config = function () {
+        this.page.identifier = "ghost-{{comment_id}}";
+    };
+
+    (function () {
+        var d = document, s = d.createElement('script');
+        s.src = 'https://' + disqus_shortname + '.disqus.com/embed.js';
+        s.setAttribute('data-timestamp', +new Date());
+        (d.head || d.body).appendChild(s);
+    })();
+</script>
+<noscript>Please enable JavaScript to view the
+    <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a>
+</noscript>

post.hbs

@@ -42,11 +42,9 @@ into the {body} of the default.hbs template --}}
 
     </footer>
 
-    {{!--
     <section class="post-full-comments">
-        If you want to embed comments, this is a good place to do it!
+        {{> "post-comments"}}
     </section>
-    --}}
 
 </article>