Render comments via platform-agnostic inclusion (#886)

ashmaroli · web-flow · commit 17714d10aa3e · 2025-04-07T09:55:28.000-07:00
Merge pull request 886
diff --git a/README.md b/README.md
@@ -104,7 +104,7 @@ The title for this section is `Posts` by default and rendered with an `<h2>` tag
 
 Refers to snippets of code within the `_includes` directory that can be inserted in multiple layouts (and another include-file as well) within the same theme-gem.
 
-  - `disqus_comments.html` &mdash; Code to markup disqus comment box.
+  - `comments.html` &mdash; Markup to render comments (via Disqus; active only when Jekyll environment is set to `production`).
   - `footer.html` &mdash; Defines the site's footer section.
   - `google-analytics.html` &mdash; Inserts Google Analytics module (active only in production environment).
   - `head.html` &mdash; Code-block that defines the `<head></head>` in *default* layout.
@@ -272,22 +272,20 @@ You can *add* custom metadata to the `<head />` of your layouts by creating a fi
 
 ### Enabling comments (via Disqus)
 
-Optionally, if you have a Disqus account, you can tell Jekyll to use it to show a comments section below each post.
-
-:warning: `url`, e.g. `https://example.com`, must be set in you config file for Disqus to work.
-
-To enable it, after setting the url field, you also need to add the following lines to your Jekyll site:
+Optionally, if you have a Disqus account, you can render a comments section below each post with the following configuration:
 
 ```yaml
-  disqus:
-    shortname: my_disqus_shortname
+url: "https://my_domain.com"
+disqus:
+  shortname: my_disqus_shortname
 ```
 
 You can find out more about Disqus' shortnames [here](https://help.disqus.com/installation/whats-a-shortname).
 
 Comments are enabled by default and will only appear in production, i.e., `JEKYLL_ENV=production`
 
-If you don't want to display comments for a particular post you can disable them by adding `comments: false` to that post's YAML Front Matter.
+If you don't want to display comments for a particular post you can disable them by adding `comments: false` to that
+post's YAML Front Matter.
 
 ### Author Metadata
 
diff --git a/_includes/comments.html b/_includes/comments.html
@@ -0,0 +1,17 @@
+{% if site.disqus.shortname -%}
+  <script>
+    var disqus_config = function () {
+      this.page.url = '{{ page.url | absolute_url }}';
+      this.page.identifier = '{{ page.id }}';
+    };
+    (function() {
+      var d = document, s = d.createElement('script');
+      s.src = 'https://{{ site.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>
+{% endif -%}
diff --git a/_includes/disqus_comments.html b/_includes/disqus_comments.html
diff --git a/_layouts/post.html b/_layouts/post.html
@@ -36,9 +36,15 @@ <h1 class="post-title p-name" itemprop="name headline">{{ page.title | escape }}
     {{ content }}
   </div>
 
-  {%- if site.disqus.shortname -%}
-    {%- include disqus_comments.html -%}
-  {%- endif -%}
+  {% if jekyll.environment == 'production' -%}
+    {% if page.comments == false -%}
+    <div class="comments-disabled-message">
+      Comments have been disabled for this post.
+    </div>
+    {% else -%}
+      {%- include comments.html -%}
+    {% endif -%}
+  {% endif -%}
 
   <a class="u-url" href="{{ page.url | relative_url }}" hidden></a>
 </article>
diff --git a/_posts/2016-05-20-my-example-post.md b/_posts/2016-05-20-my-example-post.md
@@ -1,6 +1,7 @@
 ---
 layout: post
 author: John Doe
+comments: false
 ---
 
 Eos eu docendi tractatos sapientem, brute option menandri in vix, quando vivendo accommodare te ius. Nec melius fastidii constituam id, viderer theophrastus ad sit, hinc semper periculis cum id. Noluisse postulant assentior est in, no choro sadipscing repudiandae vix. Vis in euismod delenit dignissim. Ex quod nostrum sit, suas decore animal id ius, nobis solet detracto quo te.
diff --git a/_sass/minima/_layout.scss b/_sass/minima/_layout.scss
@@ -259,7 +259,6 @@
   .post-authors { margin-top: 3px }
 }
 
-
 .post-title,
 .post-content h1 {
   margin-bottom: 10px;
@@ -306,6 +305,10 @@
   }
 }
 
+.comments-disabled-message {
+  text-align: center;
+  font-weight: 300;
+}
 
 .social-media-list {
   display: table;

Original file line number	Diff line number	Diff line change
`@@ -259,7 +259,6 @@`
`259`	`259`	`.post-authors { margin-top: 3px }`
`260`	`260`	`}`
`261`	`261`
`262`		`-`
`263`	`262`	`.post-title,`
`264`	`263`	`.post-content h1 {`
`265`	`264`	`margin-bottom: 10px;`
`@@ -306,6 +305,10 @@`
`306`	`305`	`}`
`307`	`306`	`}`
`308`	`307`
	`308`	`+.comments-disabled-message {`
	`309`	`+ text-align: center;`
	`310`	`+ font-weight: 300;`
	`311`	`+}`
`309`	`312`
`310`	`313`	`.social-media-list {`
`311`	`314`	`display: table;`