From f2fa804b22c9ff32a5a1984e772010d86061bd53 Mon Sep 17 00:00:00 2001
From: Vincent Tam <sere@live.hk>
Date: Tue, 11 Dec 2018 23:13:08 +0100
Subject: [PATCH 1/3] Add Staticman support

---
 layouts/_default/single.html             |   7 +-
 layouts/partials/footer.html             |   5 +-
 layouts/partials/header.html             |   5 +-
 layouts/partials/staticman-comments.html | 125 +++++++++++++++++++++++
 static/css/staticman.css                 | 108 ++++++++++++++++++++
 static/js/staticman.js                   |  62 +++++++++++
 6 files changed, 309 insertions(+), 3 deletions(-)
 create mode 100644 layouts/partials/staticman-comments.html
 create mode 100644 static/css/staticman.css
 create mode 100644 static/js/staticman.js

diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 672c82e..d7543a7 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -12,6 +12,11 @@
     {{ end }}
   </p>
   <div class="lh-copy post-content">{{ .Content }}</div>
+  {{ if .Site.Params.staticman }}
+    <div class="staticman-comments">
+      {{ partial "staticman-comments.html" . }}
+    </div>
+  {{ end }}
 </main>
 {{ partial "table-of-contents" . }}
 
@@ -23,4 +28,4 @@
   {{ with .NextInSection }}{{ if . }}<a href="{{ .Permalink }}">next post</a>{{ end }}{{ end }}
   </p>
 </div>
-{{ end }}
\ No newline at end of file
+{{ end }}
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 9ac7566..6ee7c8f 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -2,4 +2,7 @@
   <hr class="dn db-l ml0-l gray w3"><br>
   Powered by <a href="https://gohugo.io/" target="_blank" class="link gray dim">Hugo</a>, based on the <a href="https://github.com/lingxz/er" target="_blank" class="link gray dim">Er</a> theme. <br>
   {{ with .Site.Copyright }}{{ . }}{{end}}
-</footer>
\ No newline at end of file
+</footer>
+{{- if .Site.Params.staticman }}
+  <script src="{{ "js/staticman.js" | absURL }}"></script>
+{{- end }}
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 3ae224a..2cbd5a9 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -8,6 +8,9 @@
 <style type="text/css">{{ partial "css/variables.css" . | safeCSS }}</style>
 <link href='{{ "css/tachyons.min.css" | relURL }}' rel="stylesheet">
 <link href='{{ "css/styles.css" | relURL }}' rel="stylesheet">
+{{- if .Site.Params.staticman -}}
+  <link rel="stylesheet" href="{{ "css/staticman.css" | absURL }}" />
+{{- end -}}
 
 <!-- Icon -->
 <link rel="icon" 
@@ -19,4 +22,4 @@
 type="image/x-icon"/>
 
 <link href='{{ "/feed.xml" | relURL }}' rel="alternate" type="application/atom+xml" title="{{ .Site.Title }}" />
-{{ template "_internal/google_analytics_async.html" . }}
\ No newline at end of file
+{{ template "_internal/google_analytics_async.html" . }}
diff --git a/layouts/partials/staticman-comments.html b/layouts/partials/staticman-comments.html
new file mode 100644
index 0000000..0739061
--- /dev/null
+++ b/layouts/partials/staticman-comments.html
@@ -0,0 +1,125 @@
+<section class="js-comments staticman-comments">
+
+  {{ $slug := replace .URL "/" "" }}
+
+  {{ if .Site.Data.comments }}
+    {{ $comments := index $.Site.Data.comments $slug }}
+    {{ if $comments }}
+      {{ if gt (len $comments) 1 }}
+        <h3>{{ len $comments }} comments</h3>
+      {{ else }}
+        <h3>{{ len $comments }} comment</h3>
+      {{ end }}
+    {{ else }}
+      <h3>No comment</h3>
+    {{ end }}
+
+    {{ $.Scratch.Set "hasComments" 0 }}
+    {{ range $comments }}
+      {{ if not .replyThread }}
+        {{ $.Scratch.Add "hasComments" 1 }}
+        {{ $.Scratch.Set "hasReplies" 0 }}
+        {{ $.Scratch.Set "threadID" ._id }}
+        <article id="comment-{{ $.Scratch.Get "hasComments" }}" class="static-comment">
+          <img class="comment-avatar" src="https://www.gravatar.com/avatar/{{ .email }}?s=48">
+          {{ if .website }}
+          <h4 class="comment-author"><a rel="external nofollow" href="{{ .website }}">{{ .name }}</a></h4>
+          {{ else }}
+          <h4 class="comment-author">{{ .name }}</h4>
+          {{ end }}
+          <div class="comment-timestamp"><a href="#comment-{{ $.Scratch.Get "hasComments" }}" title="Permalink to this comment"><time datetime="{{ .date }}">{{ dateFormat "02 Jan 2006" .date }}</time></a></div>
+          <div class="comment-content"><p>{{ .comment | markdownify }}</p></div>
+          <div class="comment-reply-btn">
+            <a id="{{ ._id }}" class="btn" href="#comment-form" title="{{ ._id }}">Reply to this comment</a>
+          </div>
+        </article>
+
+        {{ range $comments }}
+          {{ if eq .replyThread ($.Scratch.Get "threadID") }}
+            {{ $.Scratch.Add "hasReplies" 1 }}
+            <article id="comment-{{ $.Scratch.Get "hasComments" }}r{{ $.Scratch.Get "hasReplies" }}" class="static-comment static-comment-reply">
+              <img class="comment-avatar" src="https://www.gravatar.com/avatar/{{ .email }}?s=48">
+              {{ if .website }}
+              <h4 class="comment-author"><a rel="external nofollow" href="{{ .website }}">{{ .name }}</a></h4>
+              {{ else }}
+              <h4 class="comment-author">{{ .name }}</h4>
+              {{ end }}
+              <h5 class="comment-reply-target"><a href="#{{ .replyID }}"><i class="fas fa-reply"></i> {{ .replyName }}</a></h5>
+              <div class="comment-timestamp"><a href="#comment-{{ $.Scratch.Get "hasComments" }}r{{ $.Scratch.Get "hasReplies" }}" title="Permalink to this comment"><time datetime="{{ .date }}">{{ dateFormat "02 Jan 2006" .date }}</time></a></div>
+              <div class="comment-content"><p>{{ .comment | markdownify }}</p></div>
+              <div class="comment-reply-btn">
+                <a id="{{ ._id }}" class="btn" href="#comment-form" title="{{ $.Scratch.Get "threadID" }}">Reply to this message</a>
+              </div>
+            </article>
+          {{ end }}
+        {{ end }}
+      {{ end }}
+    {{ end }}
+  {{ end }}
+
+
+
+<form id="comment-form" class="js-form form" method="post" action="{{ .Site.Params.staticman.api }}">
+  <input type="hidden" name="options[slug]" value="{{ replace .URL "/" "" }}">
+  <input type="hidden" name="options[parent]" value="">
+  <input type="hidden" name="fields[replyThread]" value="">
+  <input type="hidden" name="fields[replyID]" value="">
+  <input type="hidden" name="fields[replyName]" value="">
+
+  {{ if .Site.Params.staticman.recaptcha }}
+  <input type="hidden" name="options[reCaptcha][siteKey]" value="{{ .Site.Params.staticman.recaptcha.sitekey }}">
+  <input type="hidden" name="options[reCaptcha][secret]"  value="{{ .Site.Params.staticman.recaptcha.secret }}">
+  {{ end }}
+
+  <fieldset>
+  <div class="textfield">
+    <textarea name="fields[comment]" type="text" placeholder="You can use Markdown syntax"></textarea>
+  </div>
+  </fieldset>
+
+  <fieldset>
+    <div class="textfield">
+      <input name="fields[name]" type="text" placeholder="Your name"/>
+    </div>
+  </fieldset>
+
+  <fieldset>
+    <div class="textfield">
+      <input type="email" name="fields[email]"  placeholder="Your email"/>
+    </div>
+  </fieldset>
+
+  <fieldset>
+    <div class="textfield">
+      <input type="text" name="fields[website]"  placeholder="Your website"/>
+    </div>
+  </fieldset>
+
+  {{ if .Site.Params.staticman.recaptcha }}
+  <fieldset>
+    <div class="g-recaptcha" data-sitekey="{{ .Site.Params.staticman.recaptcha.sitekey }}"></div>
+  </fieldset>
+  {{ end }}
+
+  <fieldset>
+    <button type="submit" class="button">
+      Submit
+    </button>
+    <button type="reset" value="Reset">
+      Reset
+    </button>
+  </fieldset>
+</form>
+<!-- hyphen causes error in KaTeX's renderMathInElement -->
+<div id="commentPreview" class="comment-preview"></div>
+</section>
+
+<article class="modal">
+  <div class="title">
+    <h2 class="js-modal-title"></h2>
+  </div>
+  <div class="js-modal-text"></div>
+  <div>
+    <button class="js-close-modal">Close</button>
+  </div>
+</article>
diff --git a/static/css/staticman.css b/static/css/staticman.css
new file mode 100644
index 0000000..6ffbbe5
--- /dev/null
+++ b/static/css/staticman.css
@@ -0,0 +1,108 @@
+.staticman-comments {
+  padding: 20px 0px 0px 0px;
+}
+
+.staticman-comments .comment-content {
+  border-top: 1px solid #EEEEEE;
+  padding: 4px 0px 4px 0px;
+}
+
+.staticman-comments .comment-content > * {
+  padding: 5px 0px 5px 0px;
+  margin: 5px 58px 0px 58px;
+}
+
+.staticman-comments .textfield {
+    width: 420px;
+    max-width: 100%;
+    padding: 0.5rem 0;
+    width: 100%;
+}
+
+.staticman-comments input {
+    border: 1px solid rgba(0,0,0,0.12);
+    padding: 4px 5px;
+    width: 100%;
+}
+
+
+.staticman-comments .g-recaptcha {
+    padding: 0.5rem 0;
+}
+
+.staticman-comments textarea {
+    border: 1px solid rgba(0,0,0,0.12);
+    padding: 4px 5px;
+    vertical-align: top;
+    height: 10em;
+    width: 100%;
+}
+
+.staticman-comments .comment-preview {
+    margin-top: 20px;
+}
+
+.staticman-comments .comment-avatar {
+  float: left;
+  width: 48;
+  height: 48;
+  margin-right: 10px;
+}
+
+.staticman-comments .comment-timestamp {
+  margin-left: 58px;
+}
+
+
+.staticman-comments .static-comment-reply {
+  margin-left: 2em;
+}
+
+.staticman-comments .comment-reply-btn a {
+  margin: 0px 0px 14px 46px;
+}
+
+.staticman-comments .show-modal {
+	overflow: hidden;
+	position: relative;
+}
+
+.staticman-comments .show-modal:before {
+	position: absolute;
+	content: '';
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 999;
+	background-color: rgba(0, 0, 0, 0.85);
+}
+
+.show-modal .modal {
+	display: block;
+}
+
+.modal {
+	display: none;
+	position: fixed;
+	width: 300px;
+	top: 50%;
+	left: 50%;
+	margin-left: -150px;
+	margin-top: -150px;
+	min-height: 0;
+	height: 30%;
+	z-index: 9999;
+	padding: 0.5rem;
+ 	border: 1px solid rgba(0,0,0,0.25);
+ 	background-color: rgba(220,220,220,0.9);
+ 	height: 10em;
+}
+
+form--loading:before {
+	content: '';
+}
+
+.form--loading .form__spinner {
+	display: block;
+}
diff --git a/static/js/staticman.js b/static/js/staticman.js
new file mode 100644
index 0000000..b874723
--- /dev/null
+++ b/static/js/staticman.js
@@ -0,0 +1,62 @@
+// Static comments
+// from: https://github.com/eduardoboucas/popcorn/blob/gh-pages/js/main.js
+(function ($) {
+  var $comments = $('.js-comments');
+
+  $('.js-form').submit(function () {
+    var form = this;
+
+    $(form).addClass('form--loading');
+
+    $.ajax({
+      type: $(this).attr('method'),
+      url: $(this).attr('action'),
+      data: $(this).serialize(),
+      contentType: 'application/x-www-form-urlencoded',
+      success: function (data) {
+        showModal('Perfect !', 'Thanks for your comment! It will show on the site once it has been approved. .');
+        $(form).removeClass('form--loading');
+      },
+      error: function (err) {
+        console.log(err);
+        showModal('Error', 'Sorry, there was an error with the submission!');
+        $(form).removeClass('form--loading');
+      }
+    });
+
+    return false;
+  });
+
+  $('.js-close-modal').click(function () {
+    $('body').removeClass('show-modal');
+  });
+
+  function showModal(title, message) {
+    $('.js-modal-title').text(title);
+    $('.js-modal-text').html(message);
+
+    $('body').addClass('show-modal');
+  }
+
+  $('.comment-reply-btn a').click(function (){
+    $('input[name="fields[replyThread]"]').val(this.title);
+    $('input[name="fields[replyID]"]').val(this.id);
+    authorTag = $(this).parents('.static-comment').children('h4.comment-author');
+    $('input[name="fields[replyName]"]').val(authorTag.text());
+    $('.js-form fieldset button.button').text('Submit reply');
+  });
+
+  $('.js-form fieldset button[type="reset"]').click(function (){
+    $('input[name="fields[replyThread]"]').val("");
+    $('input[name="fields[replyID]"]').val("");
+    $('input[name="fields[replyName]"]').val("");
+    $('.js-form fieldset button.button').text('Submit');
+  });
+
+
+  $('.comment-reply-target a[href^="#"]').click(function (){
+    targetPostID = $(this).attr('href');
+    targetID = "#" + $(targetPostID).parents('.static-comment').attr('id');
+    $('html, body').animate({ scrollTop: $(targetID).offset().top-$('nav').height() }, 500);
+  });
+})(jQuery);

From c34f4a7ecb53e67180579ca886ab2878376eabe7 Mon Sep 17 00:00:00 2001
From: Vincent Tam <VincentTam@users.noreply.github.com>
Date: Wed, 12 Dec 2018 01:06:25 +0100
Subject: [PATCH 2/3] Update footer.html

---
 layouts/partials/footer.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 6ee7c8f..1fa31ea 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -4,5 +4,6 @@
   {{ with .Site.Copyright }}{{ . }}{{end}}
 </footer>
 {{- if .Site.Params.staticman }}
+  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
   <script src="{{ "js/staticman.js" | absURL }}"></script>
 {{- end }}

From 4b1974caf0293d4b3c759177958c2fed7697160a Mon Sep 17 00:00:00 2001
From: Vincent Tam <sere@live.hk>
Date: Wed, 12 Dec 2018 01:26:47 +0100
Subject: [PATCH 3/3] Fixed reCAPTCHA mismatch

---
 layouts/partials/header.html | 4 ++++
 static/js/recaptcha.js       | 1 +
 2 files changed, 5 insertions(+)
 create mode 100644 static/js/recaptcha.js

diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 2cbd5a9..3edf848 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -11,6 +11,10 @@
 {{- if .Site.Params.staticman -}}
   <link rel="stylesheet" href="{{ "css/staticman.css" | absURL }}" />
 {{- end -}}
+{{- if .Site.Params.staticman.recaptcha -}}
+  <script src='https://www.google.com/recaptcha/api.js'></script>
+{{- end -}}
+
 
 <!-- Icon -->
 <link rel="icon" 
diff --git a/static/js/recaptcha.js b/static/js/recaptcha.js
new file mode 100644
index 0000000..9e00f8f
--- /dev/null
+++ b/static/js/recaptcha.js
@@ -0,0 +1 @@
+/* PLEASE DO NOT COPY AND PASTE THIS CODE. */(function() {if (!window['___grecaptcha_cfg']) { window['___grecaptcha_cfg'] = {}; };if (!window['___grecaptcha_cfg']['render']) { window['___grecaptcha_cfg']['render'] = 'onload'; };window['__google_recaptcha_client'] = true;var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;po.src = 'https://www.gstatic.com/recaptcha/api2/r20171115120512/recaptcha__en.js'; var elem = document.querySelector('script[nonce]');var nonce = elem && (elem['nonce'] || elem.getAttribute('nonce'));if (nonce) { po.setAttribute('nonce', nonce); }var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);})();
\ No newline at end of file