From 149e68c12771414d21941e8ccd425c60f0c585f2 Mon Sep 17 00:00:00 2001
From: Vincent Tam <sere@live.hk>
Date: Thu, 13 Dec 2018 01:28:45 +0100
Subject: [PATCH] Add Staticman support

---
 exampleSite/config.toml                       |   7 +
 layouts/partials/header.html                  |   3 +
 layouts/partials/header/staticman-css.html    |   1 +
 .../page-single/comment/staticman.html        | 195 ++++++++++++++++++
 .../partials/page-single/post-comment.html    |   2 +
 static/css/staticman.css                      | 120 +++++++++++
 6 files changed, 328 insertions(+)
 create mode 100644 layouts/partials/header/staticman-css.html
 create mode 100644 layouts/partials/page-single/comment/staticman.html
 create mode 100644 static/css/staticman.css

diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 05db08a..d1d9aaf 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -41,6 +41,13 @@ theme = "hyde-hyde"
     # Table of contents
     #toc = none, "hugo", or "tocbot"
 
+[Params.staticman]
+    api = "https://staticman3.herokuapp.com/v3/entry/gitlab/vincenttam/hyde-hyde-demo/master/comments"
+[Params.staticman.recaptcha]
+    sitekey = "6Lcv8G8UAAAAAEqV1Y-XEPum00C_DxhD6O--qkFo"
+    secret = "p5uHlH9hCqpMJaGKXdt5MEWFo7K6fX8hoYUwR3aIafOI6rtItLauaDCkGOucysJtrVZy+sHffioGzMsOU64JFDSyPQgrXujegcOHFRXHhD4fOUuBXSvV+OZ8JhSPTGWaRcQcoiGX4pT5hlebLddOl59b6sn6kU1ODQcEbhP83xVLZlaTWOrNrF5Wvy3TMXpH5gyl1tZEORxADAShMYyUbNR7XZYLEg1DfgIBHfIg3cKwdFt7KVLejFGKIiBYRAZDE2JuHItNmzJ2x9JgSK3E+XnShV5tuWpncnyFonJVHGEky/zRfUVLHobDMcJ/u9nlZqE8u47W+833F1WaIYuwNw=="
+
+
 ## Social Accounts
 [params.social]
     github = "<username>"
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 4bbc0f5..6f9293e 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -11,4 +11,7 @@
     <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144-precomposed.png">
     <link rel="shortcut icon" href="/favicon.png">
     {{ partial "header/feeds.html" . }}
+    {{- if .Site.Params.staticman -}}
+        {{ partial "header/staticman-css.html" . }}
+    {{- end -}}
 </head>
diff --git a/layouts/partials/header/staticman-css.html b/layouts/partials/header/staticman-css.html
new file mode 100644
index 0000000..b2aecfc
--- /dev/null
+++ b/layouts/partials/header/staticman-css.html
@@ -0,0 +1 @@
+<link rel="stylesheet" href="{{ "css/staticman.css" | absURL }}" />
diff --git a/layouts/partials/page-single/comment/staticman.html b/layouts/partials/page-single/comment/staticman.html
new file mode 100644
index 0000000..07329cf
--- /dev/null
+++ b/layouts/partials/page-single/comment/staticman.html
@@ -0,0 +1,195 @@
+<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 }}
+
+    <!-- Display main comments -->
+    {{ $.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>
+
+        <!-- Display comment replies -->
+        {{ 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 }}
+
+<!-- HTML comment form -->
+<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]" rows="12" cols="80" 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>
+
+<!-- Alert user of the submission status -->
+<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
+{{- if .Site.Params.staticman.recaptcha -}}
+  <script src='https://www.google.com/recaptcha/api.js'></script>
+{{- end -}}
+<script type="text/javascript">
+  // 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 }, 500);
+    });
+  })(jQuery);
+</script>
diff --git a/layouts/partials/page-single/post-comment.html b/layouts/partials/page-single/post-comment.html
index a9d2ab7..760706d 100644
--- a/layouts/partials/page-single/post-comment.html
+++ b/layouts/partials/page-single/post-comment.html
@@ -5,5 +5,7 @@
         {{ partial "page-single/comment/graphcomment.html" . }}
     {{ else if .Site.Params.UtterancesRepo }}
         {{ partial "page-single/comment/utterances.html" . }}
+    {{ else if .Site.Params.Staticman }}
+        {{ partial "page-single/comment/staticman.html" . }}
     {{ end }}
 {{ end }}
diff --git a/static/css/staticman.css b/static/css/staticman.css
new file mode 100644
index 0000000..c4ed40f
--- /dev/null
+++ b/static/css/staticman.css
@@ -0,0 +1,120 @@
+.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 {
+    max-width: 100%;
+    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: 48px;
+  height: 48px;
+  margin-right: 10px;
+}
+
+.staticman-comments .comment-author {
+  margin: 0px 0px 0px 58px;
+}
+
+
+.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 58px;
+}
+
+.staticman-comments .js-form {
+  margin-top: 30px;
+}
+
+.staticman-comments .js-form fieldset {
+  padding: unset;
+  border: none;
+}
+
+.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;
+}