Add Staticman comments support

assets/css/style.css

@@ -3,7 +3,7 @@ Template Name: Meghna Responsive HTML5/CSS3 Business Template
 Author: Themefisher
 Author URI: www.Themefisher.com
 Description: Meghna Responsive HTML5/CSS3 Portfolio Template
-Version: 1.1
+Version: 1.2
 Tags: one-page, single-page, portfolio, custom-colors, post-formats, responsive, html5, css3
 */
 /*=== MEDIA QUERY ===*/
@@ -1568,6 +1568,59 @@ a:hover {
   height: auto;
 }
 
+/* Staticman Comments */
+
+.post-comment {
+  background-color: #292f36;;
+  padding: 20px;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+.post-comment-header {
+  margin-bottom: 20px;
+}
+
+.post-comment-avatar {
+  display: inline-block;
+  vertical-align: middle;
+  border-radius: 50%;
+}
+
+.post-comment-info {
+  display: inline-block;
+  margin-left: 20px;
+  margin-bottom: 0;
+  vertical-align: middle;
+}
+
+.post-comment-field {
+  display: block;
+  font: inherit;
+  padding: 10px;
+  margin-top: 20px;
+  outline-color: #F76C5E;
+  width: 100%;
+}
+
+.post-comment-name {
+  color: #afbac4;
+  font-weight: 500;
+  font-size: 18px;
+}
+
+.post-time {
+  color: #737f8a;
+}
+
+input#e-mail, #hidden_iframe {
+  display: none;
+}
+
+.mb--50 {
+  margin-bottom: -50px;
+}
+
 /*=================================================================
   Footer section
 ==================================================================*/
@@ -2307,8 +2360,4 @@ background-color: #FF6600
 .resp-sharing-button--telegram:hover {
   background-color: #4B97D1;}
 
-.social-share {
-    padding-top: 20px;
-}
-
 /*# sourceMappingURL=maps/style.css.map */

assets/js/script.js

@@ -293,4 +293,23 @@ function initialize() {
 	map.setMapTypeId('roadatlas');
 }
 
-google.maps.event.addDomListener(window, "load", initialize);
+google.maps.event.addDomListener(window, "load", initialize);
+
+/* ========================================================================= */
+/*	Staticman comments reply
+/* ========================================================================= */
+function changeValue(elementName, newValue){
+	document.getElementsByName(elementName)[0].value=newValue;
+};
+
+/* ========================================================================= */
+/*	Honeypot
+/* ========================================================================= */
+$(document).ready(function() {
+    $('form').submit(function() {
+        if ($('input[type="text"]#e-mail').val().length > 0) {
+            $('form').attr('action', '/');
+            return false;
+        }
+    });
+});

exampleSite/config.toml

@@ -1,9 +1,10 @@
 baseURL = "http://example.org/"
 languageCode = "en-us"
+DefaultContentLanguage = "en"
 title = "Meghna"
-
 theme = "meghna-hugo"
 
+
 # Menu
 [menu]
     [[menu.nav]]

exampleSite/data/blog.yml

@@ -2,3 +2,7 @@ enable : true
 heading : Latest
 headingSpan : Posts
 sharing : true
+staticmanComments:
+  enable: false
+  notifications: true
+  api: https://dev.staticman.net/v3/entry/github/themefisher/meghna-hugo/master/comments

exampleSite/data/comments/.keep

@@ -0,0 +1 @@
+ 

exampleSite/staticman.yml

@@ -0,0 +1,77 @@
+# Name of the property. You can have multiple properties with completely
+# different config blocks for different sections of your site.
+# For example, you can have one property to handle comment submission and
+# another one to handle posts.
+comments:
+  # (*) REQUIRED
+  #
+  # Names of the fields the form is allowed to submit. If a field that is
+  # not here is part of the request, an error will be thrown.
+  allowedFields: ["name", "email", "message", "reply_to"]
+
+  # (*) REQUIRED
+  #
+  # Name of the branch being used. Must match the one sent in the URL of the
+  # request.
+  branch: "master"
+
+  # Text to use as the commit message or pull request title. Accepts placeholders.
+  commitMessage: "Add Staticman data"
+
+  # (*) REQUIRED
+  #
+  # Destination path (filename) for the data files. Accepts placeholders.
+  filename: "entry{@timestamp}"
+
+  # The format of the generated data files. Accepted values are "json", "yaml"
+  # or "frontmatter"
+  format: "yaml"
+
+  # List of fields to be populated automatically by Staticman and included in
+  # the data file. Keys are the name of the field. The value can be an object
+  # with a `type` property, which configures the generated field, or any value
+  # to be used directly (e.g. a string, number or array)
+  generatedFields:
+    date:
+      type: date
+      options:
+        format: "timestamp-seconds"
+
+  # Whether entries need to be appproved before they are published to the main
+  # branch. If set to `true`, a pull request will be created for your approval.
+  # Otherwise, entries will be published to the main branch automatically.
+  moderation: true
+
+  # Name of the site. Used in notification emails.
+  name: "Meghna Theme"
+
+  # Notification settings. When enabled, users can choose to receive notifications
+  # via email when someone adds a reply or a new comment. This requires an account
+  # with Mailgun, which you can get for free at http://mailgun.com.
+  #notifications:
+    # Enable notifications
+    #enabled: true
+
+    # (!) ENCRYPTED
+    #
+    # Mailgun API key
+    #apiKey: "1q2w3e4r"
+
+    # (!) ENCRYPTED
+    #
+    # Mailgun domain (encrypted)
+    #domain: "4r3e2w1q"
+
+  # (*) REQUIRED
+  #
+  # Destination path (directory) for the data files. Accepts placeholders.
+  path: "data/comments/{options.slug}"
+
+  # Names of required fields. If any of these isn't in the request or is empty,
+  # an error will be thrown.
+  requiredFields: ["name", "email", "message"]
+
+  # List of transformations to apply to any of the fields supplied. Keys are
+  # the name of the field and values are possible transformation types.
+  transforms:
+    email: md5

i18n/en.yaml

@@ -0,0 +1,30 @@
+- id: comments
+  translation: Comments
+- id: permalinkComment
+  translation: Permalink to this comment
+- id: replyTo
+  translation: Reply to
+- id: replyToThread
+  translation: Reply to thread
+- id: noComments
+  translation: No comments yet. Your comment may be the first.
+- id: emailUseGravatarNotifications
+  translation: Your email address is used for <a href="https://gravatar.com" target="_blank" rel="noopener">Gravatar</a> image and notifications about new comments only.
+- id: emailUseGravatar
+  translation: Your email address is used for <a href="https://gravatar.com" target="_blank" rel="noopener">Gravatar</a> image only.
+- id: tellSomething
+  translation: Tell something
+- id: thanksForComment
+  translation: Thank you
+- id: commentSent
+  translation: Your comment has been sent and will be published after approval
+- id: nickname
+  translation: Nickname
+- id: comment
+  translation: Comment
+- id: commentPlaceholder
+  translation: Feel free to use Markdown.
+- id: commentNotify
+  translation: Notify me of new comments on this post
+- id: addComment
+  translation: Add comment

i18n/pl.yaml

@@ -0,0 +1,30 @@
+- id: comments
+  translation: Komentarze
+- id: permalinkComment
+  translation: Link do tego komentarza
+- id: replyTo
+  translation: Odpowiedz
+- id: replyToThread
+  translation: Odpowiedz na wątek
+- id: noComments
+  translation: Na razie brak komentarzy. Twój może być pierwszy.
+- id: emailUseGravatarNotifications
+  translation: Twój adres e-mail jest używany jedynie do obrazu <a href="https://gravatar.com" target="_blank" rel="noopener">Gravatar</a> i powiadomień o nowych komentarzach.
+- id: emailUseGravatar
+  translation: Twój adres e-mail jest używany jedynie do obrazu <a href="https://gravatar.com" target="_blank" rel="noopener">Gravatar</a>.
+- id: tellSomething
+  translation: Powiedz coś
+- id: thanksForComment
+  translation: Dziękujemy
+- id: commentSent
+  translation: Twój komentarz został przesłany i zostanie opublikowany po zatwierdzeniu
+- id: nickname
+  translation: Pseudonim
+- id: comment
+  translation: Komentarz
+- id: commentPlaceholder
+  translation: Nie krępuj się używać Markdown.
+- id: commentNotify
+  translation: Powiadom mnie o nowych komentarzach do tego wpisu
+- id: addComment
+  translation: Dodaj komentarz

layouts/_default/single.html

@@ -19,6 +19,7 @@
                     {{ if .Site.Data.blog.sharing}}
                         {{ partial "share_post" . }}
                     {{ end }}
+                    {{ partial "post_comments" . }}
                 </div>
             </div>
         </div>

layouts/partials/contact.html

@@ -30,6 +30,8 @@
             <div class="col-lg-6 wow fadeInUp" data-wow-duration="500ms" data-wow-delay="300ms">
                 <form id="contact-form" class="form-meghna" method="post" action="sendmail.php" role="form">
 
+                    <input name="e-mail" type="text" id="e-mail" autocomplete="off">
+
                     <div class="form-group">
                         <input type="text" placeholder="Your Name" class="form-control" name="name" id="name">
                     </div>

layouts/partials/footer.html

@@ -52,6 +52,8 @@
 		{{"<!-- Scroll behavior polyfill -->" | safeHTML}}
 		{{ $scroll := resources.Get "js/scroll-behavior-polyfill.js" | minify}}
 		<script src="{{ $scroll.Permalink }}"></script>
+		{{"<!-- Sweet Alert -->" | safeHTML}}
+		<script type="text/javascript" src="{{ "plugins/sweet-alert/sweetalert.min.js" | absURL}}"></script>
 		{{"<!-- Custom js -->" | safeHTML}}
 		{{ $script := resources.Get "js/script.js" | minify}}
 		<script src="{{ $script.Permalink }}"></script>

layouts/partials/post_comments.html

@@ -0,0 +1,108 @@
+{{ if .Site.Data.blog.staticmanComments.enable }}
+<section class="mt-5">
+    <h3>{{ i18n "comments" }}</h3>
+    {{ $postSlug := .File.BaseFileName }}
+    {{ $.Scratch.Add "entryId" $postSlug }}
+    {{ $comments := index $.Site.Data.comments ($.Scratch.Get "entryId") }}
+
+    {{ $.Scratch.Set "hasComments" 0 }}
+    {{ range $comments }}
+    {{ $.Scratch.Add "hasComments" 1 }}
+    {{ if not .reply_to }}
+    {{ $.Scratch.Set "parentId" ._id }}
+    {{ $.Scratch.Set "parentName" .name }}
+    {{ $.Scratch.Set "hasReplies" 0 }}
+    <div id="commentid-{{ ._id }}" class="post-comment">
+        <div class="post-comment-header">
+            <img class="post-comment-avatar" src="https://www.gravatar.com/avatar/{{ .email }}?s=70&pg&d=identicon">
+            <p class="post-comment-info">
+                <span class="post-comment-name">{{ .name }}</span>
+                <br>
+                <a href="#commentid-{{ ._id }}" title="{{ i18n "permalinkComment" }}">
+                    <time class="post-time">{{ dateFormat "02.01.2006, 15:04" .date }}</time>
+                </a>
+            </p>
+        </div>
+        {{ .message | markdownify }}
+        <div class="clearfix">
+            <div class="post-comment-reply-button float-right mt-1">
+                <a id="{{ ._id }}" class="btn btn-info btn-sm" href="#staticman-form" onclick="changeValue('fields[reply_to]', '{{ ._id }}')">{{ i18n "replyTo" }} {{ .name }}</a>
+            </div>
+        </div>
+    </div>
+    {{ range $comments }}
+    {{ if eq .reply_to ( $.Scratch.Get "parentId" ) }}
+    {{ $.Scratch.Add "hasReplies" 1 }}
+    <div id="commentid-{{ ._id }}" class="post-comment ml-5">
+        <div class="post-comment-header">
+            <img class="post-comment-avatar" src="https://www.gravatar.com/avatar/{{ .email }}?s=70&pg&d=identicon">
+            <p class="post-comment-info">
+                    <span class="post-comment-name">{{ .name }} </span>
+                    <br>
+                    <i><span class="tf-ion-forward"></span> <span>{{ ( $.Scratch.Get "parentName" ) }}</span></i>
+                    <br>
+                <a href="#commentid-{{ ._id }}" title="{{ i18n "permalinkComment" }}">
+                    <time class="post-time">{{ dateFormat "02.01.2006, 15:04" .date }}</time>
+                </a>
+            </p>
+        </div>
+        {{ .message | markdownify }}
+        {{ if gt ($.Scratch.Get "hasReplies") 0 }}
+        <div class="clearfix">
+            <div class="post-comment-reply-button float-right mt-1">
+                <a id="{{ ._id }}" class="btn btn-info btn-sm" href="#staticman-form" onclick="changeValue('fields[reply_to]', '{{ ._id }}')">{{ i18n "replyToThread" }}</a>
+            </div>
+        </div>
+        {{ end }}
+    </div>
+    {{ end }}
+    {{ end }}
+    {{ end }}
+    {{ end }}
+
+
+    {{ if eq ($.Scratch.Get "hasComments") 0 }}
+    <p class="mb--50">{{ i18n "noComments" }}</p>
+    {{ end }}
+</section>
+<div class="clearfix"></div>
+<section id="staticman-form" class="pt-4">
+    <h3 class="pt-5">{{ i18n "tellSomething" }}</h3>
+    <script>var submitted=false;</script>
+    <iframe name="hidden_iframe" id="hidden_iframe" onload='if(submitted){swal("{{ i18n "thanksForComment" }}!", "{{ i18n "commentSent" }} 😊", "success");}'></iframe>
+    <form class="form-control-meghna" method="POST" action="{{ .Site.Data.blog.staticmanComments.api }}" target="hidden_iframe" onsubmit="submitted=true;">
+        <input type="hidden" name="options[slug]" value="{{ .File.BaseFileName }}">
+        <input type="hidden" name="options[origin]" value="{{ $.Permalink }}#comments">
+        <input type="hidden" name="fields[reply_to]" value="">
+        <div class="form-group">
+            <label for="nick" class="font-weight-bold">{{ i18n "nickname" }}</label>
+            <input class="form-control" id="nick" name="fields[name]" type="text" required="required"/>
+        </div>
+
+        <div class="form-group">
+            <label for="mail" class="font-weight-bold">Email</label>
+            <input type="email" class="form-control" id="mail" name="fields[email]" type="text" required="required"/>
+            <small id="mailHelp" class="form-text text-muted">{{ if .Site.Data.blog.staticmanComments.notifications }} {{ i18n "emailUseGravatarNotifications"  | markdownify }} {{else}} {{ i18n "emailUseGravatar" | markdownify }} {{end}}</small>
+        </div>
+
+        <input name="e-mail" type="text" id="e-mail" autocomplete="off">
+
+        <div class="form-group">
+            <label for="message" class="font-weight-bold">{{ i18n "comment" }}</label>
+            <textarea id="message" name="fields[message]" minlength="5" rows="3" data-min-rows="3" class="form-control" required="required" placeholder="{{ i18n "commentPlaceholder" }}"></textarea>
+        </div>
+        {{ if .Site.Data.blog.staticmanComments.notifications }}
+        <input type="hidden" name="options[parent]" value="{{ .File.BaseFileName }}">
+        <div class="form-group">
+            <div class="custom-control custom-checkbox">
+                <input id="form-submit" name="options[subscribe]" type="checkbox" class="custom-control-input" value="email">
+                <label class="custom-control-label" for="form-submit">{{ i18n "commentNotify" }}</label>
+            </div>
+        </div>
+        {{ end }}
+        <div class="clearfix">
+            <input type="submit" class="btn btn-info" value="{{ i18n "addComment" }}">
+        </div>
+    </form>
+</section>
+{{ end }}

layouts/partials/share_post.html

@@ -1,6 +1,6 @@
 {{ $url := printf "%s" .Permalink | absLangURL }}
 <!-- Sharingbutton Facebook -->
-<div class="social-share">
+<div class="social-share pt-4">
         <h4>Share:</h4>
         <!-- Sharingbutton Facebook -->
         <a class="resp-sharing-button__link" href="https://facebook.com/sharer/sharer.php?u={{ $url }}" target="_blank" rel="noopener" aria-label="">