Merge pull request #99 from badele/staticman

Add staticman support (static comments coupled with Github pull request)
2017-11-21 22:02:30 -05:00 · 2017-11-21 22:02:30 -05:00 · b0b43884dc
commit b0b43884dc
parent 729b60b71a d68cf2e04d
16 changed files with 441 additions and 2 deletions
--- a/README.md
+++ b/README.md
@ -63,6 +63,48 @@ Client side highlighting does not require pygments to be installed. This current

 To use this feature, uncomment and fill out the `disqusShortname` parameter in `config.toml`.

+### Staticman support
+
+Add *staticman* configuration section in `config.toml` or `config.yaml`
+
+Sample `config.yaml` configuration
+
+```
+  staticman:
+    api: https://api.staticman.net/v2/entry/<USERNAME>/<REPOSITORY-BLOGNAME>/master/comments
+    pulls: https://github.com/<USERNAME>/<REPOSITORY-BLOGNAME>/pulls
+    recaptcha:
+      sitekey: "6LeGeTgUAAAAAAqVrfTwox1kJQFdWl-mLzKasV0v"
+      secret: "hsGjWtWHR4HK4pT7cUsWTArJdZDxxE2pkdg/ArwCguqYQrhuubjj3RS9C5qa8xu4cx/Y9EwHwAMEeXPCZbLR9eW1K9LshissvNcYFfC/b8KKb4deH4V1+oqJEk/JcoK6jp6Rr2nZV4rjDP9M7nunC3WR5UGwMIYb8kKhur9pAic="
+```
+
+You must also configure the `staticman.yml` in you blog website.
+
+```
+comments:
+  allowedFields: ["name", "email", "website", "comment"]
+  branch            : "master"
+  commitMessage     : "New comment in {options.slug}"
+  path: "data/comments/{options.slug}"
+  filename          : "comment-{@timestamp}"
+  format            : "yaml"
+  moderation        : true
+  requiredFields    : ['name', 'email', 'comment']
+  transforms:
+    email           : md5
+  generatedFields:
+    date:
+      type          : "date"
+      options:
+        format      : "iso8601"
+  reCaptcha:
+    enabled: true
+    siteKey: "6LeGeTgUAAAAAAqVrfTwox1kJQFdWl-mLzKasV0v"
+    secret: "hsGjWtWHR4HK4pT7cUsWTArJdZDxxE2pkdg/ArwCguqYQrhuubjj3RS9C5qa8xu4cx/Y9EwHwAMEeXPCZbLR9eW1K9LshissvNcYFfC/b8KKb4deH4V1+oqJEk/JcoK6jp6Rr2nZV4rjDP9M7nunC3WR5UGwMIYb8kKhur9pAic="
+```
+
+
+
 ### Google Analytics

 To add Google Analytics, simply sign up to [Google Analytics](http://www.google.com/analytics/) to obtain your Google Tracking ID, and add this tracking ID to the `googleAnalytics` parameter in `config.toml`.
--- a/i18n/de.yaml
+++ b/i18n/de.yaml
@ -1,6 +1,8 @@
 # Content
 - id: dateFormat
  translation: "02.01.2006"
+- id: shortdateFormat
+  translation: "2 Jan, 2006 15:04:05"
 - id: postedOnDate
  translation: "Gepostet am {{ .Count }}"
 - id: translationsLabel
@ -37,3 +39,21 @@
  translation: "Suche {{ .Site.Title }}"
 - id: gcseClose
  translation: "Schließen"
+
+# Staticman
+- id: noComment
+  translation: "No comment"
+- id: oneComment
+  translation: "comment"
+- id: moreComment
+  translation: "comments"
+- id: useMarkdown
+  translation: "You can use Markdown syntax"
+- id: yourName
+  translation: "Your name"
+- id: yourEmail
+  translation: "Your email address"
+- id: yourWebsite
+  translation: "You website"
+
+
--- a/i18n/en.yaml
+++ b/i18n/en.yaml
@ -1,6 +1,8 @@
 # Content
 - id: dateFormat
  translation: "January 2, 2006"
+- id: shortdateFormat
+  translation: "Jan 2, 2006 15:04:05"
 - id: postedOnDate
  translation: "Posted on {{ .Count }}"
 - id: translationsLabel
@ -38,3 +40,20 @@
 - id: gcseClose
  translation: "Close"

+# Staticman
+- id: noComment
+  translation: "No comment"
+- id: oneComment
+  translation: "comment"
+- id: moreComment
+  translation: "comments"
+- id: useMarkdown
+  translation: "You can use Markdown syntax"
+- id: yourName
+  translation: "Your name"
+- id: yourEmail
+  translation: "Your email address"
+- id: yourWebsite
+  translation: "You website"
+
+
--- a/i18n/es-ES.yaml
+++ b/i18n/es-ES.yaml
@ -1,6 +1,8 @@
 # Content
 - id: dateFormat
  translation: "2 de enero, 2006"
+- id: shortdateFormat
+  translation: "2 Jan, 2006 15:04:05"
 - id: postedOnDate
  translation: "Publicado el {{ .Count }}"
 - id: translationsLabel
@ -37,3 +39,22 @@
  translation: "Buscar en {{ .Site.Title }}"
 - id: gcseClose
  translation: "Cerrar"
+
+# Staticman
+- id: noComment
+  translation: "No comment"
+- id: oneComment
+  translation: "comment"
+- id: moreComment
+  translation: "comments"
+- id: useMarkdown
+  translation: "You can use Markdown syntax"
+- id: yourName
+  translation: "Your name"
+- id: yourEmail
+  translation: "Your email address"
+- id: yourWebsite
+  translation: "You website"
+
+
+
--- a/i18n/fr.yaml
+++ b/i18n/fr.yaml
@ -1,6 +1,8 @@
 # Content
 - id: dateFormat
  translation: "January 2, 2006"
+- id: shortdateFormat
+  translation: "2 Jan, 2006 15:04:05"
 - id: postedOnDate
  translation: "Posté le {{ .Count }}"
 - id: translationsLabel
@ -37,3 +39,19 @@
  translation: "Rechercher {{ .Site.Title }}"
 - id: gcseClose
  translation: "Fermer"
+
+# Staticman
+- id: noComment
+  translation: "Pas de commentaire"
+- id: oneComment
+  translation: "commentaire"
+- id: moreComment
+  translation: "commentaires"
+- id: useMarkdown
+  translation: "Vous pouvez utiliser la syntaxe Markdown"
+- id: yourName
+  translation: "Votre nom"
+- id: yourEmail
+  translation: "Votre addresse mail"
+- id: yourWebsite
+  translation: "Votre site web"
--- a/i18n/ja.yaml
+++ b/i18n/ja.yaml
@ -1,6 +1,8 @@
 # Content
 - id: dateFormat
  translation: "2006年1月2日"
+- id: shortdateFormat
+  translation: "2 Jan, 2006 15:04:05"
 - id: postedOnDate
  translation: "{{ .Count }}に投稿"
 - id: translationsLabel
@ -36,3 +38,22 @@
 - id: gcseClose
  translation: "閉じる"

+# Staticman
+- id: noComment
+  translation: "No comment"
+- id: oneComment
+  translation: "comment"
+- id: moreComment
+  translation: "comments"
+- id: useMarkdown
+  translation: "You can use Markdown syntax"
+- id: yourName
+  translation: "Your name"
+- id: yourEmail
+  translation: "Your email address"
+- id: yourWebsite
+  translation: "You website"
+
+
+
+
--- a/i18n/pl.yaml
+++ b/i18n/pl.yaml
@ -1,6 +1,8 @@
 # Content
 - id: dateFormat
  translation: "02.01.2006"
+- id: shortdateFormat
+  translation: "2 Jan, 2006 15:04:05"
 - id: postedOnDate
  translation: "Opublikowany {{ .Count }}"
 - id: translationsLabel
@ -38,3 +40,21 @@
 - id: gcseClose
  translation: "Zamknij"

+# Staticman
+- id: noComment
+  translation: "No comment"
+- id: oneComment
+  translation: "comment"
+- id: moreComment
+  translation: "comments"
+- id: useMarkdown
+  translation: "You can use Markdown syntax"
+- id: yourName
+  translation: "Your name"
+- id: yourEmail
+  translation: "Your email address"
+- id: yourWebsite
+  translation: "You website"
+
+
+
--- a/i18n/ru.yaml
+++ b/i18n/ru.yaml
@ -1,6 +1,8 @@
 # Content
 - id: dateFormat
  translation: "Январь 2, 2006"
+- id: shortdateFormat
+  translation: "2 Jan, 2006 15:04:05"
 - id: postedOnDate
  translation: "Опубликовано {{ .Count }}"
 - id: translationsLabel
@ -38,3 +40,22 @@
 - id: gcseClose
  translation: "Закрыть"

+# Staticman
+- id: noComment
+  translation: "No comment"
+- id: oneComment
+  translation: "comment"
+- id: moreComment
+  translation: "comments"
+- id: useMarkdown
+  translation: "You can use Markdown syntax"
+- id: yourName
+  translation: "Your name"
+- id: yourEmail
+  translation: "Your email address"
+- id: yourWebsite
+  translation: "You website"
+
+
+
+
--- a/i18n/zh.yaml
+++ b/i18n/zh.yaml
@ -1,6 +1,8 @@
 # Content
 - id: dateFormat
  translation: "January 2, 2006"
+- id: shortdateFormat
+  translation: "2 Jan, 2006 15:04:05"
 - id: postedOnDate
  translation: "发表于 {{ .Count }}"
 - id: translationsLabel
@ -38,3 +40,21 @@
 - id: gcseClose
  translation: "关闭"

+# Staticman
+- id: noComment
+  translation: "No comment"
+- id: oneComment
+  translation: "comment"
+- id: moreComment
+  translation: "comments"
+- id: useMarkdown
+  translation: "You can use Markdown syntax"
+- id: yourName
+  translation: "Your name"
+- id: yourEmail
+  translation: "Your email address"
+- id: yourWebsite
+  translation: "You website"
+
+
+
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@ -19,12 +19,18 @@
        {{ end }}
      </ul>

+
      {{ if (.Params.comments) | or (and (or (not (isset .Params "comments")) (eq .Params.comments nil)) (.Site.Params.comments)) }}
        {{ if .Site.DisqusShortname }}
          <div class="disqus-comments">
            {{ template "_internal/disqus.html" . }}
          </div>
        {{ end }}
+        {{ if .Site.Params.staticman }}
+          <div class="staticman-comments">
+            {{ partial "staticman-comments.html" . }}
+          </div>
+        {{ end }}
      {{ end }}

    </div>
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@ -58,6 +58,9 @@
 <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
 <script src="{{ "js/main.js" | absURL }}"></script>
+{{- if .Site.Params.staticman }}
+<script src="{{ "js/staticman.js" | absURL }}"></script>
+{{- end }}
 {{- if (not ( .Site.Params.UseChroma )) }}
 <script src="{{ "js/highlight.min.js" | absURL }}"></script>
 <script> hljs.initHighlightingOnLoad(); </script>
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@ -42,6 +42,9 @@
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="{{ "css/main.css" | absURL }}" />
+  {{- if .Site.Params.staticman -}}
+  <link rel="stylesheet" href="{{ "css/staticman.css" | absURL }}" />
+  {{- end -}}
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" />
  {{- if (not ( .Site.Params.UseChroma )) }}
@ -52,6 +55,10 @@
  <link rel="stylesheet" href="{{ "css/syntax.css" | absURL }}" />
  {{- end -}}

+  {{- if .Site.Params.staticman.recaptcha -}}
+  <script src='https://www.google.com/recaptcha/api.js'></script>
+  {{- end -}}
+
 {{- partial "head_custom.html" . }}
 {{- partial "load-photoswipe-theme.html" . }}
 {{ template "_internal/google_analytics_async.html" . }}
--- a/layouts/partials/staticman-comments.html
+++ b/layouts/partials/staticman-comments.html
@ -0,0 +1,90 @@
+<section class="js-comments staticman-comments">
+
+  {{ $slug := replace .URL "/" "" }}
+
+  {{ $comments := index $.Site.Data.comments $slug }}
+  {{ if $comments }}
+    {{ if gt (len $comments) 1  }}
+      <h3>{{ len $comments  }} {{ i18n "moreComment" }}</h3>
+    {{ else }}
+      <h3>{{ len $comments  }} {{ i18n "oneComment" }}</h3>
+    {{ end }}
+  {{ else }}
+    <h3>{{ i18n "noComment" }}</h3>
+  {{ end }}
+
+  {{ $.Scratch.Set "hasComments" 0 }}
+  {{ range $index, $comments := (index $.Site.Data.comments $slug ) }}
+    {{ if not .parent }}
+      {{ $.Scratch.Add "hasComments" 1 }}
+      <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 (default (i18n "shortdateFormat") .Site.Params.dateformat) .date}}</time></a></div>
+        <div class="comment-content"><p>{{ .comment | markdownify }}</p></div>
+      </article>
+    {{ end }}
+  {{ end }}
+
+
+
+<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="">
+
+  {{ 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="{{ i18n "useMarkdown" }}"></textarea>
+  </div>
+  </fieldset>
+
+  <fieldset>
+    <div class="textfield">
+      <input name="fields[name]" type="text" placeholder="{{ i18n "yourName" }}"/>
+    </div>
+  </fieldset>
+
+  <fieldset>
+    <div class="textfield">
+      <input type="email" name="fields[email]"  placeholder="{{ i18n "yourEmail" }}"/>
+    </div>
+  </fieldset>
+
+  <fieldset>
+    <div class="textfield">
+      <input type="text" name="fields[website]"  placeholder="{{ i18n "yourWebsite" }}"/>
+    </div>
+  </fieldset>
+
+  {{ if .Site.Params.staticman.recaptcha }}
+  <fieldset>
+    <div class="g-recaptcha" data-sitekey="{{ .Site.Params.staticman.recaptcha.sitekey }}"></div>
+  </fieldset>
+  {{ end }}
+
+  <fieldset>
+    <button class="button">
+      Submit
+    </button>
+  </fieldset>
+</form>
+</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>
--- a/static/css/staticman.css
+++ b/static/css/staticman.css
@ -0,0 +1,92 @@
+.staticman-comments {
+  padding: 20px 0px 0px 0px;
+}
+
+.staticman-comments .comment-content{
+  border-top: 1px solid #EEEEEE;
+  padding: 4px 0px 30px 0px;
+}
+
+.staticman-comments .comment-content p {
+  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-avatar {
+  float:left;
+  width: 48;
+  height: 48;
+  margin-right: 10px;
+}
+
+.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;
+}
--- a/static/js/staticman.js
+++ b/static/js/staticman.js
@ -0,0 +1,40 @@
+// 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');
+  }
+})(jQuery);
--- a/theme.toml
+++ b/theme.toml
@ -3,7 +3,7 @@ license = "MIT"
 licenselink = "https://github.com/halogenica/Hugo-BeautifulHugo/blob/master/LICENSE"
 description = "A port of Beautiful Jekyll theme"
 tags = ["blog", "company", "portfolio", "projects", "minimal", "responsive"]
-features = ["blog", "themes", "disqus", "minimal", "responsive"]
+features = ["blog", "themes", "disqus", "minimal", "responsive", "staticman"]
 min_version = 0.17

 [author]
@ -15,4 +15,3 @@ min_version = 0.17
    author =  "dattali"
    homepage = "http://deanattali.com/beautiful-jekyll/"
    repo = "https://github.com/daattali/beautiful-jekyll"
-