Added commenting system, updated readme accordingly, and also updated styles slightly

README.md

@@ -13,4 +13,13 @@ This is the code behind timstallard.me.uk, which is built using Docpad.
 2. Run `docpad generate --env=static`
 3. Copy contactsubmit/conf.example.php to contactsubmit/conf.php, and update options as required
 
+### Setting up commenting system
+1. These instructions are written for systemd-based Ubuntu, but should work fine on Debian as well. For security reasons, the installation of isso should be done under another user account - I made an account called isso.
+2. This site uses the Isso commenting system - to start, follow the install instructions on the [isso](https://posativ.org/isso/docs/install/) site
+3. Add a /etc/isso.conf file with the required options
+4. Make the directory and file /var/lib/isso and /var/log/isso.log, and make both of these owned by the isso user
+5. Copy the systemd service and socket files from [here](https://github.com/jgraichen/debian-isso/tree/master/debian), to /lib/systemd/systemd, and add the socket as a requirement of the service
+6. Enable the isso service
+7. Configure your reverse proxy, and set the isso_url variable in docpad.js
+
 © Tim Stallard 2016

docpad.js

@@ -60,6 +60,11 @@ var docpadConfig = {
 			]);
 		}
 	},
+	templateData: {
+		site: {
+			isso_url: "https://comments.timstallard.me.uk/"
+		}
+	},
 	environments: {
 		static: {
 			plugins: {

src/documents/script.js

@@ -3,7 +3,6 @@ var smoothState;
 $(document).ready(function(){
   var options = {
     prefetch: true, 
-    debug: true,
     onStart: {
       duration: 400,
       render: function (container, url) {

src/documents/styles.css.scss

@@ -81,7 +81,7 @@ body{
     padding-top: 10px;
     padding-bottom: 20px;
     >div{
-      width: 80%;
+      width: 90%;
       max-width: 1100px;
       margin-left: auto;
       margin-right: auto;
@@ -137,7 +137,7 @@ body{
   padding-top: 20px;
   padding-bottom: 20px;
   text-align: center;
-  width: 80%;
+  width: 90%;
   margin-left: auto;
   margin-right: auto;
   h3{
@@ -433,7 +433,7 @@ body{
 
 #content[data-slug="blog"]{ //main page
   .post{
-    width: 80%;
+    width: 90%;
     max-width: 800px;
     margin-left: auto;
     margin-right: auto;
@@ -474,11 +474,13 @@ body{
 }
 
 #content[data-slug^="blog"]{ //posts and main page
-  .blogpost{
+  .blogpost, #isso-thread{
     width: 100%;
     max-width: 800px;
     margin-left: auto;
     margin-right: auto;
+  }
+  .blogpost{
     line-height: 1.55;
   }
 }

src/layouts/blogpost.html.ejs

@@ -9,3 +9,5 @@ layout: contentpage
 <div class="blogpost">
   <%- content %>
 </div>
+<script src="<%- site.isso_url %>js/embed.min.js" data-isso="<%- site.isso_url %>"></script>
+<section id="isso-thread"></section>