Add comments

layouts/_default/single.html

@@ -4,14 +4,15 @@
     {{ partial "content.html" . }}
   </div>
 
+  {{ partial "share.html" . }}
+  {{ partial "comments.html" . }}
+  {{ partial "related-content.html" . }}
+
   {{ with .Scratch.Get "unsplash_data" }}
     <div class="container text-center my-4">
       <small><a href="#header">Header</a> photo by <a href="{{ .user.links.html }}">{{ .user.name }}</a> on <a href="{{ .links.html }}">Unsplash</a>.</small>
     </div>
   {{ end }}
-
-  {{ partial "share.html" . }}
-  {{ partial "related-content.html" . }}
 </div>
 {{ end }}
 

layouts/partials/comments.html

@@ -0,0 +1,5 @@
+<div class="container">
+  <div id="commento"></div>
+</div>
+
+<script async defer src="https://commento.theorangeone.net/js/commento.js"></script>

static/src/scss/style.scss

@@ -386,3 +386,32 @@ a.no-color-change {
     max-width: 75%;
   }
 }
+
+// Override styles for commento
+#commento {
+  .commento-profile-button {
+    fill: $body-color;
+  }
+
+  .commento-name,
+  #commento-mod-tools-lock-button,
+  .commento-login-text,
+  .commento-anonymous-checkbox-container label {
+    color: $body-color;
+  }
+
+  #commento-textarea-root,
+  #commento-guest-details-input-root,
+  .commento-textarea-container textarea {
+    background-color: $black;
+    color: $body-color;
+  }
+
+  .commento-card {
+    border-top: 1px solid transparentize($black, 0.4);
+
+    p {
+      color: $body-color;
+    }
+  }
+}