taking commento for a spin

layouts/_default/single.html

@@ -19,6 +19,7 @@
       <div id="content">
 {{ .Content }}
       </div>
+      <div id="commento"></div>
     </div>
 
 {{ partial "blog-footer.html" . }}

layouts/partials/blog-footer.html

@@ -2,4 +2,5 @@
       <div id="copyright"><a href="https://web.archive.org/web/20010501000000*/jakejarvis.com" title="View Old Versions on Wayback Machine" id="wayback" target="_blank" rel="noopener noreferrer nofollow">&copy; 2001 &ndash;</a> {{ now.Format "2006" }} <a rel="me author" href="{{ .Site.BaseURL }}" title="Jake Jarvis">Jake Jarvis</a>.</div>
       <div id="panda"><a href="https://nationalzoo.si.edu/webcams/panda-cam#maincontent" title="Live Panda Party!" target="_blank" rel="noopener noreferrer nofollow"><span>&#x1F43C;</span></a></div>
       <div id="poweredby"><a href="https://github.com/gohugoio/hugo" title="Hugo on GitHub" id="hugo" target="_blank" rel="noopener noreferrer nofollow">Powered by Hugo.</a> <a href="https://git.jarv.is/jake/jarv.is" title="View Source Code Repository" id="source" target="_blank" rel="noopener">View source.</a></div>
-    </div>
+    </div>
+    {{ if .IsPage }}<script async defer src="https://commento.jarv.is/js/commento.js"></script>{{ end }}

layouts/partials/header.html

@@ -35,6 +35,7 @@
     <link rel="icon" type="image/png" href="{{ "favicon-16.png" | absURL }}" sizes="16x16">
     <link rel="shortcut icon" href="{{ "favicon.ico" | absURL }}">
     <link rel="dns-prefetch" href="https://stats.jarv.is">
+    <link rel="dns-prefetch" href="https://commento.jarv.is">
     <link rel="stylesheet" href="{{ "style.css" | absURL }}">
     <link rel="author" href="https://plus.google.com/+jakejarvis/posts">
     <link rel="author" href="{{ "humans.txt" | absURL }}">

static/style.css

@@ -531,6 +531,10 @@ body#notes a:hover {
     white-space: pre;
   }
 
+  body#notes div#single div.meta {
+    font-size: 15px !important;
+  }
+
   body#notes div#content code {
     white-space: normal;
   }
@@ -629,7 +633,7 @@ body#notes div#footer div#panda span {
 
 /* Single Post */
 
-body#notes div#content, body#notes div#content p {
+body#notes div#single div#content, body#notes div#single div#content p {
   line-height: 1.7;
   object-fit: contain;
 }
@@ -689,13 +693,13 @@ body#notes div#single div.meta div.tags span.tag a {
   border: none;
 }
 
-body#notes div#content img {
+body#notes div#single div#content img {
   max-width: 100%;
   margin: 0 auto;
   display: block;
   object-fit: scale-down;
 }
-body#notes div#content img + em {
+body#notes div#single div#content img + em {
   display: block;
   text-align: center;
   font-size: 15px;
@@ -703,13 +707,13 @@ body#notes div#content img + em {
   margin-top: 5px;
 }
 
-body#notes div#content blockquote {
+body#notes div#single div#content blockquote {
   border-left: 6px solid #0087be;
   margin-left: 6px;
   padding-left: 15px;
 }
 
-body#notes div#content code {
+body#notes div#single div#content code {
   font-family: monospace;
   background: #f4f4f4;
   padding: 0.2em;
@@ -717,7 +721,7 @@ body#notes div#content code {
   font-size: 16px;
 }
 
-body#notes div#content pre code {
+body#notes div#single div#content pre code {
   padding: 1em 1.5em;
   line-height: 1.6;
   page-break-inside: avoid;
@@ -729,28 +733,46 @@ body#notes div#content pre code {
   object-fit: scale-down;
 }
 
-body#notes div#content hr {
+body#notes div#single div#content hr {
   width: 60%;
   margin: 10px auto;
   border: 1px solid #ccc;
 }
 
-body#notes div#content div.embed.video-player {
+body#notes div#single div#content div.embed.video-player {
   position: relative;
   padding-bottom: 56.25%;
   height: 0;
   overflow: hidden;
 }
 
-body#notes div#content div.embed.video-player iframe.youtube-player {
+body#notes div#single div#content div.embed.video-player iframe.youtube-player {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border: none;
+  margin-bottom: 10px;
+  display: inline-block;
 }
 
+body#notes div#single div#commento {
+  border-top: 1px solid #cccccc;
+  padding-top: 20px;
+  margin-top: 20px;
+}
+
+body#notes div#single div#commento .commento-name {
+  max-width: none !important;
+  border: none;
+}
+
+body#notes div#single div#commento div#commento-footer {
+  display: none;
+}
+
+
 
 /* Archive List */
 

worker.js

@@ -1,5 +1,5 @@
 let newHeaders = {
-  "Content-Security-Policy": "default-src 'none'; script-src 'self' stats.jarv.is 'sha256-QwZM+dNl2R1KcXo8ORmpT3mqAVwIBbEcJBmWYurBNv4='; style-src 'self'; img-src 'self' data: https:; font-src 'self'; object-src 'self'; media-src 'self'; base-uri 'none'; form-action 'self'; frame-src 'self' www.youtube.com www.youtube-nocookie.com; frame-ancestors 'self'; worker-src 'none'; connect-src 'self' jarvis.report-uri.com stats.jarv.is; upgrade-insecure-requests; report-uri https://jarvis.report-uri.com/r/d/csp/enforce; report-to default",
+  "Content-Security-Policy": "default-src 'none'; script-src 'self' stats.jarv.is commento.jarv.is 'sha256-QwZM+dNl2R1KcXo8ORmpT3mqAVwIBbEcJBmWYurBNv4='; style-src 'self' 'unsafe-inline' commento.jarv.is; img-src 'self' data: https:; font-src 'self' commento.jarv.is; object-src 'self'; media-src 'self'; base-uri 'none'; form-action 'self'; frame-src 'self' www.youtube.com www.youtube-nocookie.com; frame-ancestors 'self'; worker-src 'none'; connect-src 'self' jarvis.report-uri.com stats.jarv.is commento.jarv.is; upgrade-insecure-requests; report-uri https://jarvis.report-uri.com/r/d/csp/enforce; report-to default",
   "Report-To": "{\"group\":\"default\",\"max_age\":604800,\"endpoints\":[{\"url\":\"https://jarvis.report-uri.com/a/d/g\"}]}",
   "NEL": "{\"report_to\":\"default\",\"max_age\":604800}",
 //  "Strict-Transport-Security" : "max-age=1000",