Temporarily enable disqus just to see what happens

_config.yml

@@ -1,4 +1,7 @@
-# gems
+#
+# Jekyll configuration
+#
+
 whitelist:
   - jekyll-redirect-from
   - jekyll-github-metadata
@@ -7,7 +10,6 @@ plugins:
   - jekyll-redirect-from
   - jekyll-github-metadata
 
-# files
 exclude:
   - Makefile
   - README.md
@@ -17,7 +19,10 @@ exclude:
   - vendor
   - _deprecated
 
+#
 # Markdown
+#
+
 highlighter: false
 markdown: kramdown
 kramdown:
@@ -27,6 +32,10 @@ kramdown:
   syntax_highlighter_opts:
     disable: true
 
+#
+# Defaults
+#
+
 defaults:
   - scope:
       path: ""
@@ -44,15 +53,25 @@ defaults:
         - elixir
         - ruby
 
+#
 # Site info
+#
+
 url: http://ricostacruz.com/cheatsheets
 title: Cheatsheets
 
+#
 # Google analytics
+#
+#
 analytics:
   hostname: ricostacruz.com
   id: "UA-20473929-1"
 
+#
+# Categories
+#
+
 category_names:
   - Ansible
   - Apps
@@ -78,3 +97,9 @@ category_names:
 
 # https://help.github.com/articles/repository-metadata-on-github-pages/
 repository: rstacruz/cheatsheets
+
+#
+# Disqus comments: uncomment to disable disqus
+#
+
+disqus_host: devhints.disqus.com

_includes/2017/comments-area.html

@@ -0,0 +1,10 @@
+<section class='comments-area'>
+  <div class='container'>
+    <div class='comments-section'>
+      <div class='comments'>
+        <div id='disqus_thread'></div>
+        <noscript data-js-disqus='{"host":"{{ site.disqus_host }}","url":"{{ site.url }}{{ include.page.url | remove: '.html' }}","identifier": "{{ include.page.url | remove: '.html' | remove_first: '/' }}"}'></noscript>
+      </div>
+    </div>
+  </div>
+</section>

_layouts/2017/sheet.html

@@ -26,6 +26,10 @@ type: article
   </main>
 </div>
 
+{% if site.disqus_host %}
+{% include 2017/comments-area.html page=page %}
+{% endif %}
+
 <div class='pre-footer'><i class='icon'></i></div>
 
 {% include 2017/search-footer.html %}

_sass/2017/components/comments-area.scss

@@ -0,0 +1,16 @@
+/*
+ * Disqus
+ */
+
+.comments-area {
+  & {
+    margin: 32px 0;
+  }
+
+  & > .container {
+    @include gutter(padding-left);
+    @include gutter(padding-right);
+    max-width: $area-width;
+    margin: 0 auto;
+  }
+}

_sass/2017/components/comments-section.scss

@@ -0,0 +1,25 @@
+/*
+ * Disqus
+ */
+
+.comments-section {
+  & {
+    display: flex;
+  }
+
+  // Mobile: full width
+  @media (max-width: 480px) {
+    & > .comments {
+      flex: 1 0 100%;
+      width: 100%;
+    }
+  }
+
+  // Desktop: partial width
+  @media (min-width: 481px) {
+    & > .comments {
+      flex: 0 1 66%;
+      min-width: 300px;
+    }
+  }
+}

_sass/2017/style.scss

@@ -17,6 +17,8 @@
 @import './components/attribute-peg';
 @import './components/back-button';
 @import './components/body-area';
+@import './components/comments-area';
+@import './components/comments-section';
 @import './components/h2-section';
 @import './components/h3-section';
 @import './components/h3-section-list';

assets/2017/script.js

@@ -1,5 +1,5 @@
 /*
- * Wrapping
+ * Behavior: Wrapping
  */
 
 $(function () {
@@ -8,7 +8,7 @@ $(function () {
 })
 
 /*
- * Isotope
+ * Behavior: Isotope
  */
 
 $(function () {
@@ -21,7 +21,7 @@ $(function () {
 })
 
 /*
- * Search
+ * Behavior: Search
  */
 
 $(function () {
@@ -50,6 +50,10 @@ $(function () {
   })
 })
 
+/*
+ * Behavior: search input
+ */
+
 $(function () {
   $('[data-js-search-input]').each(function () {
     const $this = $(this)
@@ -83,6 +87,35 @@ $(function () {
   })
 })
 
+/*
+ * Behavior: Disqus
+ */
+
+$(function () {
+  $('[data-js-disqus]').each(function () {
+    const $this = $(this)
+    const data = $this.data('js-disqus')
+
+    window.disqus_config = function () {
+      this.page.url = data.url
+      this.page.identifier = data.identifier
+    }
+
+    injectDisqus(data.host)
+  })
+})
+
+/*
+ * Helper: injects disqus
+ */
+
+function injectDisqus (host) {
+  var d = document, s = d.createElement('script')
+  s.src = 'https://' + host + '/embed.js'
+  s.setAttribute('data-timestamp', +new Date())
+  ;(d.head || d.body).appendChild(s)
+}
+
 /*
  * Helper for splitting to words
  */