Merge pull request #28 from hawkeye116477/master

Add Staticman comments, translations for blog and update assets

assets/css/style.css

 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 ===*/
   background: #57cbcc;
 }
 
+hr {
+  border-top: 1px solid rgba(255,255,255,.1);
+}
+
 figure {
   margin: 0;
 }
   height: auto;
 }
 
+/* Staticman Comments */
+
+#staticman-form:before {
+  display: block;
+  height: 90px;
+  margin-top: -90px;
+  visibility: hidden;
+  content: "";
+}
+
+@media (max-width: 768px) {
+  #staticman-form:before {
+    display: block;
+    height: 80px;
+    margin-top: -80px;
+    visibility: hidden;
+    content: "";
+  }
+}
+
+.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;
+}
+
 /*=================================================================
   Footer section
 ==================================================================*/
 .resp-sharing-button--telegram:hover {
   background-color: #4B97D1;}
 
-.social-share {
-    padding-top: 20px;
-}
-
 /*# sourceMappingURL=maps/style.css.map */

assets/js/script.js

 	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;
+        }
+    });
+});

assets/js/scroll-behavior-polyfill.js

 // https://www.jsdelivr.com/package/npm/scroll-behavior-polyfill?path=dist
 /*!
-	scroll-behavior-polyfill 2.0.4
+	scroll-behavior-polyfill 2.0.6
     license: MIT (https://github.com/wessberg/scroll-behavior-polyfill/blob/master/LICENSE.md)
     Copyright © 2019 Frederik Wessberg <frederikwessberg@hotmail.com>
 */
      */
     var SUPPORTS_SCROLL_BEHAVIOR = "scrollBehavior" in document.documentElement.style;
 
+    
+
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation. All rights reserved.
     Licensed under the Apache License, Version 2.0 (the "License"); you may not use
         return value;
     }
 
+    
+
     var HALF = 0.5;
     /**
      * The easing function to use when applying the smooth scrolling
         var timeLapsed = 0;
         var distanceX = endX - startX;
         var distanceY = endY - startY;
-        var speed = Math.max(Math.abs(distanceX / 1000 * SCROLL_TIME), Math.abs(distanceY / 1000 * SCROLL_TIME));
+        var speed = Math.max(Math.abs((distanceX / 1000) * SCROLL_TIME), Math.abs((distanceY / 1000) * SCROLL_TIME));
         requestAnimationFrame(function animate(timestamp) {
             timeLapsed += timestamp - startTime;
-            var percentage = Math.max(0, Math.min(1, speed === 0 ? 0 : (timeLapsed / speed)));
-            var positionX = Math.floor(startX + (distanceX * ease(percentage)));
-            var positionY = Math.floor(startY + (distanceY * ease(percentage)));
+            var percentage = Math.max(0, Math.min(1, speed === 0 ? 0 : timeLapsed / speed));
+            var positionX = Math.floor(startX + distanceX * ease(percentage));
+            var positionY = Math.floor(startY + distanceY * ease(percentage));
             method(positionX, positionY);
             if (positionX !== endX || positionY !== endY) {
                 requestAnimationFrame(animate);
         return Date.now();
     }
 
+    
+
     var ELEMENT_ORIGINAL_SCROLL = Element.prototype.scroll;
 
     var WINDOW_ORIGINAL_SCROLL = window.scroll;
                 startTime: startTime,
                 startX: startX,
                 startY: startY,
-                endX: Math.floor(kind === "scrollBy"
-                    ? startX + x
-                    : x),
-                endY: Math.floor(kind === "scrollBy"
-                    ? startY + y
-                    : y),
+                endX: Math.floor(kind === "scrollBy" ? startX + x : x),
+                endY: Math.floor(kind === "scrollBy" ? startY + y : y),
                 method: getOriginalScrollMethodForKind("scrollTo", window).bind(window)
             };
         }
                 startTime: startTime,
                 startX: startX,
                 startY: startY,
-                endX: Math.floor(kind === "scrollBy"
-                    ? startX + x
-                    : x),
-                endY: Math.floor(kind === "scrollBy"
-                    ? startY + y
-                    : y),
+                endX: Math.floor(kind === "scrollBy" ? startX + x : x),
+                endY: Math.floor(kind === "scrollBy" ? startY + y : y),
                 method: getOriginalScrollMethodForKind("scrollTo", element).bind(element)
             };
         }
         if ("nodeType" in currentElement && currentElement.nodeType === 1) {
             return currentElement.parentNode;
         }
-        if ("ShadowRoot" in window && (currentElement instanceof window.ShadowRoot)) {
+        if ("ShadowRoot" in window && currentElement instanceof window.ShadowRoot) {
             return currentElement.host;
         }
         else if (currentElement === document) {
     function isScrollable(element) {
         if (element.clientHeight < element.scrollHeight || element.clientWidth < element.scrollWidth) {
             var style = getComputedStyle(element, null);
-            return (canOverflow(style.overflowY) ||
-                canOverflow(style.overflowX));
+            return canOverflow(style.overflowY) || canOverflow(style.overflowX);
         }
         return false;
     }
     function findNearestRoot(target) {
         var currentElement = target;
         while (currentElement != null) {
-            if ("ShadowRoot" in window && (currentElement instanceof window.ShadowRoot)) {
+            if ("ShadowRoot" in window && currentElement instanceof window.ShadowRoot) {
                 // Assume this is a ShadowRoot
                 return currentElement;
             }
                 return;
             var hrefAttributeValue = e.target.getAttribute("href");
             // Only work with HTMLAnchorElements that navigates to a specific ID
-            if (hrefAttributeValue == null || !hrefAttributeValue.startsWith("#"))
+            if (hrefAttributeValue == null || !hrefAttributeValue.startsWith("#")) {
                 return;
+            }
             // Find the nearest root, whether it be a ShadowRoot or the document itself
             var root = findNearestRoot(e.target);
             // Attempt to match the selector from that root. querySelector' doesn't support IDs that start with a digit, so work around that limitation
-            var elementMatch = hrefAttributeValue.match(ID_WITH_LEADING_DIGIT_REGEXP) != null
-                ? root.getElementById(hrefAttributeValue.slice(1))
-                : root.querySelector(hrefAttributeValue);
+            var elementMatch = hrefAttributeValue.match(ID_WITH_LEADING_DIGIT_REGEXP) != null ? root.getElementById(hrefAttributeValue.slice(1)) : root.querySelector(hrefAttributeValue);
             // If no selector could be found, don't proceed
             if (elementMatch == null)
                 return;
          *   └───────────┘
          *    ┗ ━ ━ ━ ━ ┛
          */
-        if ((elementEdgeStart < scrollingEdgeStart &&
-            elementEdgeEnd > scrollingEdgeEnd) ||
-            (elementEdgeStart > scrollingEdgeStart && elementEdgeEnd < scrollingEdgeEnd)) {
+        if ((elementEdgeStart < scrollingEdgeStart && elementEdgeEnd > scrollingEdgeEnd) || (elementEdgeStart > scrollingEdgeStart && elementEdgeEnd < scrollingEdgeEnd)) {
             return 0;
         }
         /**
          *        └───────────┘   └───────────┘
          *    ┗ ━ ━ ━ ━ ┛         ┗ ━ ━ ━ ━ ┛
          */
-        if ((elementEdgeStart <= scrollingEdgeStart && elementSize <= scrollingSize) ||
-            (elementEdgeEnd >= scrollingEdgeEnd && elementSize >= scrollingSize)) {
+        if ((elementEdgeStart <= scrollingEdgeStart && elementSize <= scrollingSize) || (elementEdgeEnd >= scrollingEdgeEnd && elementSize >= scrollingSize)) {
             return elementEdgeStart - scrollingEdgeStart - scrollingBorderStart;
         }
         /**
          *        ┗ ━ ━ ━ ━ ┛         ┗ ━ ━ ━ ━ ┛
          *
          */
-        if ((elementEdgeEnd > scrollingEdgeEnd && elementSize < scrollingSize) ||
-            (elementEdgeStart < scrollingEdgeStart && elementSize > scrollingSize)) {
+        if ((elementEdgeEnd > scrollingEdgeEnd && elementSize < scrollingSize) || (elementEdgeStart < scrollingEdgeStart && elementSize > scrollingSize)) {
             return elementEdgeEnd - scrollingEdgeEnd + scrollingBorderEnd;
         }
         return 0;
         // and viewport dimensions on window.innerWidth/Height
         // https://www.quirksmode.org/mobile/viewports2.html
         // https://bokand.github.io/viewport/index.html
-        var viewportWidth = window.visualViewport != null
-            ? visualViewport.width
-            : innerWidth;
-        var viewportHeight = window.visualViewport != null
-            ? visualViewport.height
-            : innerHeight;
+        var viewportWidth = window.visualViewport != null ? visualViewport.width : innerWidth;
+        var viewportHeight = window.visualViewport != null ? visualViewport.height : innerHeight;
         var viewportX = window.scrollX != null ? window.scrollX : window.pageXOffset;
         var viewportY = window.scrollY != null ? window.scrollY : window.pageYOffset;
         var _a = target.getBoundingClientRect(), targetHeight = _a.height, targetWidth = _a.width, targetTop = _a.top, targetRight = _a.right, targetBottom = _a.bottom, targetLeft = _a.left;
         // These values mutate as we loop through and generate scroll coordinates
-        var targetBlock = block === "start" || block === "nearest"
-            ? targetTop
-            : block === "end"
-                ? targetBottom
-                : targetTop + targetHeight / 2; // block === 'center
-        var targetInline = inline === "center"
-            ? targetLeft + targetWidth / 2
-            : inline === "end"
-                ? targetRight
-                : targetLeft; // inline === 'start || inline === 'nearest
+        var targetBlock = block === "start" || block === "nearest" ? targetTop : block === "end" ? targetBottom : targetTop + targetHeight / 2; // block === 'center
+        var targetInline = inline === "center" ? targetLeft + targetWidth / 2 : inline === "end" ? targetRight : targetLeft; // inline === 'start || inline === 'nearest
         var _b = scroller.getBoundingClientRect(), height = _b.height, width = _b.width, top = _b.top, right = _b.right, bottom = _b.bottom, left = _b.left;
         var frameStyle = getComputedStyle(scroller);
         var borderLeft = parseInt(frameStyle.borderLeftWidth, 10);
         var inlineScroll = 0;
         // The property existance checks for offset[Width|Height] is because only HTMLElement objects have them, but any Element might pass by here
         // @TODO find out if the "as HTMLElement" overrides can be dropped
-        var scrollbarWidth = "offsetWidth" in scroller
-            ? scroller.offsetWidth -
-                scroller.clientWidth -
-                borderLeft -
-                borderRight
-            : 0;
-        var scrollbarHeight = "offsetHeight" in scroller
-            ? scroller.offsetHeight -
-                scroller.clientHeight -
-                borderTop -
-                borderBottom
-            : 0;
+        var scrollbarWidth = "offsetWidth" in scroller ? scroller.offsetWidth - scroller.clientWidth - borderLeft - borderRight : 0;
+        var scrollbarHeight = "offsetHeight" in scroller ? scroller.offsetHeight - scroller.clientHeight - borderTop - borderBottom : 0;
         if (scrollingElement === scroller) {
             // Handle viewport logic (document.documentElement or document.body)
             if (block === "start") {
                     : arg;
             // Find the nearest ancestor that can be scrolled
             var _a = __read(findNearestAncestorsWithScrollBehavior(this), 2), ancestorWithScroll = _a[0], ancestorWithScrollBehavior = _a[1];
-            var behavior = normalizedOptions.behavior != null
-                ? normalizedOptions.behavior
-                : ancestorWithScrollBehavior;
+            var behavior = normalizedOptions.behavior != null ? normalizedOptions.behavior : ancestorWithScrollBehavior;
             // If the behavior isn't smooth, simply invoke the original implementation and do no more
             if (behavior !== "smooth") {
                 // Assert that 'scrollIntoView' is actually defined

exampleSite/config.toml

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

exampleSite/data/blog.yml

 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

+ 

exampleSite/data/en/blog.yml

+heading : Latest
+headingSpan : Posts

exampleSite/data/pl/blog.yml

+heading : Najnowsze
+headingSpan : wpisy

exampleSite/staticman.yml

+# 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

+- 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
+- id: readMore
+  translation: Read more
+- id: viewAllPost
+  translation: View All Post
+- id: share
+  translation: Share

i18n/pl.yaml

+- 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
+- id: readMore
+  translation: Czytaj więcej
+- id: viewAllPost
+  translation: Wyświetl wszystkie wpisy
+- id: share
+  translation: Podziel się

layouts/_default/list.html

                     <div class="content">
                         <h3><a href="{{ .Permalink }}">{{ .Title }}</a></h3>
                         <p>{{ .Summary }}</p>
-                        <a class="btn btn-transparent" href="{{ .Permalink }}">Read more</a>
+                        <a class="btn btn-transparent" href="{{ .Permalink }}">{{ i18n "readMore" }}</a>
                     </div>
                 </div>
             </article>

layouts/_default/single.html

                     {{ if .Site.Data.blog.sharing}}
                         {{ partial "share_post" . }}
                     {{ end }}
+                    {{ partial "post_comments" . }}
                 </div>
             </div>
         </div>

layouts/partials/blog.html

 {{ if .Site.Data.blog.enable}}
 {{"<!-- Start Blog Section -->" | safeHTML}}
+{{ $data := index .Site.Data .Site.Language.Lang }}
 <section id="blog" class="section">
     <div class="container">
         <div class="row">
             <div class="col-lg-12">
                 {{"<!-- section title -->" | safeHTML}}
                 <div class="title text-center wow fadeInDown">
-                    <h2> {{ with .Site.Data.blog.heading }} {{ . }} {{ end }} <span class="color"> {{ with .Site.Data.blog.headingSpan }} {{ . }} {{ end }} </span></h2>
+                    <h2> {{ with $data.blog.heading }} {{ . }} {{ end }} <span class="color"> {{ with $data.blog.headingSpan }} {{ . }} {{ end }} </span></h2>
                     <div class="border-meghna"></div>
                 </div>
             </div>
                     <div class="content">
                         <h3><a href="{{ .Permalink }}">{{ .Title }}</a></h3>
                         <p>{{ .Summary }}</p>
-                        <a class="btn btn-transparent" href="{{ .Permalink }}">Read more</a>
+                        <a class="btn btn-transparent" href="{{ .Permalink }}">{{ i18n "readMore" }}</a>
                     </div>
                 </div>
             </article>
             {{ end }}
 
             <div class="all-post text-center col-lg-12">
-                <a class="btn btn-main" href="/blog">View All Post</a>
+                <a class="btn btn-main" href="/blog">{{ i18n "viewAllPost" }}</a>
             </div>
         </div>
     </div>
 </section>
 {{"<!-- /blog -->" | safeHTML}}
-{{ end }}
+{{ end }}

layouts/partials/contact.html

             <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

 
 		{{"<!-- Main jQuery -->" | safeHTML}}
 		<script type="text/javascript" src="{{ "plugins/jquery/dist/jquery.min.js" | absURL}}"></script>
-		{{"<!-- Bootstrap 4.2 + Popper -->" | safeHTML}}
-		{{ $bs := resources.Get "js/bootstrap.bundle.js" | minify}}
-		<script type="text/javascript" src="{{ $bs.Permalink }}"></script>
+		{{"<!-- Bootstrap 4.3 + Popper -->" | safeHTML}}
+		<script type="text/javascript" src="{{ "plugins/bootstrap/dist/js/bootstrap.bundle.min.js" | absURL}}"></script>
 		{{"<!-- Slick Carousel -->" | safeHTML}}
 		<script type="text/javascript" src="{{ "plugins/slick-carousel/slick/slick.min.js" | absURL}}"></script>
 		{{"<!-- Portfolio Filtering -->" | safeHTML}}
 		{{"<!-- 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

+{{ if .Site.Data.blog.staticmanComments.enable }}
+<section class="mt-4">
+    <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>{{ i18n "noComments" }}</p>
+    {{ end }}
+</section>
+<div class="clearfix"></div>
+<section id="staticman-form">
+    <h3>{{ 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

 {{ $url := printf "%s" .Permalink | absLangURL }}
 <!-- Sharingbutton Facebook -->
-<div class="social-share">
-        <h4>Share:</h4>
+<div class="social-share pt-4">
+        <h4>{{ i18n "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="">
             <div class="resp-sharing-button resp-sharing-button--facebook resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">