טוקבקים באתר סטטי באמצעות Staticman

<script>
  function replyTo(parent, name) {
    var e = document.getElementById('commentid-' + parent),
        f = document.getElementById('comment-form'),
        h = document.getElementById('comment-form-header');

    h.innerHTML = 'הגב ל-' + name + ' <a class="cancel-reply" href="#comment-form" onclick="cancelReply()">ביטול</a>';
    e.parentNode.insertBefore(f, e.nextSibling);
    document.getElementsByName('fields[reply_to]')[0].value=parent;
    window.location.href = '#comment-form'
  };

  function cancelReply() {
    var f = document.getElementById('comment-form'),
        h = document.getElementById('comment-form-header');

    h.innerHTML = 'השארת תגובה';
    f.parentNode.insertBefore(f, f.parentNode.lastChild.nextSibling);
    document.getElementsByName('fields[reply_to]')[0].value="";
  };
</script>

{{ $postSlug := .File.ContentBaseName }}
{{ $commentsNum := 0 }}
{{ if isset $.Site.Data.comments $postSlug }}
  {{ .Scratch.Set "comments" (index $.Site.Data.comments $postSlug) }}
  {{ $commentsNum = len (.Scratch.Get "comments") }}
{{ end }}

<h3 class="comments-title"><a href="#comments"><i class="fas fa-comments"></i> {{ $commentsNum }} תגובות</a></h3>
<section class="staticman-comments post-comments">
  {{ if ne $commentsNum 0 }}
    {{ range (.Scratch.Get "comments") }}
      {{ if not .reply_to }}
        <div id="commentid-{{ ._id }}" class="card-simple post-comment">
          <div class="post-comment-header">
            <img class="post-comment-avatar" src="https://www.gravatar.com/avatar/{{ .email }}?s=50&r=pg&d=identicon" alt="{{ .name }}" loading="lazy" width="50" height="50">
            <p class="post-comment-info">
              <span class="post-comment-name">{{ .name }}</span>
              <br>
              <a href="#commentid-{{ ._id }}" title="קישור לתגובה">
              <span class="post-time">{{ dateFormat "02/01/2006" .date }}</span>
              </a>
            </p>
          </div>
          <div class="comment-message">
            {{ .comment | htmlEscape | replaceRE "\n" "<br>" | safeHTML }}
          </div>
          <div class="comment__reply">
            <button id="{{ ._id }}" class="btn btn-primary" onclick="replyTo('{{ ._id }}', '{{ .name }}')">הגב ל-{{ .name }}</button>
          </div>
          {{ partial "partials/comments/comment-replies" (dict "entryId_parent" $postSlug "SiteDataComments_parent" $.Site.Data.comments "parentId" ._id "parentName" .name "context" .) }}
        </div>
      {{ end }}
    {{ end }}
  {{ end }}

  <form id="comment-form" class="post-new-comment" method="post" action="/.netlify/functions/staticman?branch=master">
    {{ if eq $commentsNum 0 }}
      <p>היו הראשונים להשאיר תגובה!</p>
    {{ end }}
    <h3 class="prompt" id="comment-form-header">השארת תגובה</h3>
    <input type="hidden" name="options[redirect]" value="{{ .Permalink }}#comment-submitted">
    <input type="hidden" name="options[redirectError]" value="{{ .Permalink }}#comment-error">
    <input type="hidden" name="options[slug]" value="{{ $postSlug }}">
    <input type="hidden" name="options[parent]" value="{{ $postSlug }}">
    <input type="hidden" id="comment-parent" name="fields[reply_to]" value="">
    <div class="form-group form-inline">
      <input type="text" name="fields[name]" class="form-control w-100" placeholder="שם" required/>
    </div>
    <div class="form-group form-inline">
      <input type="email" name="fields[email]" class="form-control w-100" placeholder="דוא״ל" required/>
    </div>
    <div class="form-group">
      <textarea name="fields[comment]" class="form-control" placeholder="כתיבת תגובה" required rows="5"></textarea>
    </div>
    <input type="submit" class="btn btn-primary px-3 py-2 w-100" value="שליחה">
  </form>
</section>

<div id="comment-submitted" class="dialog">
  <h3>תודה!</h3>
  <p>התגובה נשלחה ותפורסם ברגע שתאושר.</p>
  <p><a href="#" class="btn btn-primary">אוקיי</a></p>
</div>
<div id="comment-error" class="dialog">
  <h3>אופס!</h3>
  <p>שליחת התגובה נכשלה. אנא נסו שוב.</p>
  <p><a href="#" class="btn btn-primary">אוקיי</a></p>
</div>

{{ range $index, $comments := (index $.SiteDataComments_parent $.entryId_parent ) }}
  {{ if eq .reply_to $.parentId }}
  <div id="commentid-{{ ._id }}" class="card-simple post-comment reply">
    <div class="post-comment-header">
      <img class="post-comment-avatar" src="https://www.gravatar.com/avatar/{{ .email }}?s=50&r=pg&d=identicon" alt="{{ .name }}" loading="lazy" width="50" height="50">
      <p class="post-comment-info">
        <span class="post-comment-name">{{ .name }}<br><i><small>בתגובה ל-{{ $.parentName }}</i></small></span>
        <br>
        <a href="#commentid-{{ ._id }}" title="קישור לתגובה">
          <span class="post-time">{{ dateFormat "02/01/2006" .date }}</span>
        </a>
      </p>
    </div>
    <div class="comment-message">
      {{ .comment | htmlEscape | replaceRE "\n" "<br>" | safeHTML }}
    </div>
    <div class="comment__reply">
      <button id="{{ ._id }}" class="btn btn-primary" onclick="replyTo('{{ $.parentId }}', '{{ $.parentName }}')">הגב לשרשור</button>
    </div>
  </div>
  {{ end }}
{{ end }}

#comments {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}

.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-info .post-comment-name {
  font-size: 1rem;
  font-weight: 500;
}

.post-comment-info .post-time {
  font-size: 0.7rem;
  font-weight: normal;
  letter-spacing: 0.03em;
  color: rgba(0, 0, 0, 0.54);
}

.comment-message {
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

.comments-title a {
  color: unset;
}

.cancel-reply {
  font-size: 0.9rem;
}

.reply {
  background: $sta-background;
}

.dialog {
  display: none;
  position: fixed;
  background-color: rgb(247, 247, 247);
  padding: 25px;
  padding-top: 20%;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
}

.dialog:target {
  display: block;
}

{
  "dependencies": {
    "@staticman/netlify-functions": "^1.7.0"
  },
  "name": "my-site",
  "version": "0.1.0"
}

const { processEntry } = require("@staticman/netlify-functions");
const queryString = require("querystring");

exports.handler = (event, context, callback) => {
  const repo = process.env.REPO;
  const [username, repository] = repo.split("/");
  const bodyData = queryString.parse(event.body);

  event.queryStringParameters = {
    ...event.queryStringParameters,
    ...bodyData,
    username,
    repository,
  };

  const config = {
    origin: event.headers.origin,
    sites: {
      [repo]: {
        allowedFields: ["name", "email", "comment", "reply_to"],
        branch: "master",
        commitMessage: "Add comment by {fields.name} in {options.slug}",
        filename: "comment-{@timestamp}",
        format: "yml",
        generatedFields: {
          date: {
            type: "date",
            options: {
              format: "iso8601",
            },
          },
        },
        moderation: true,
        path: "data/comments/{options.slug}",
        requiredFields: ["name", "email", "comment"],
        transforms: {
          email: "md5"
        },
      },
    },
  };

  return processEntry(event, context, callback, config);
};

akismet: {
  enabled: true,
  author: "name",
  authorEmail: "email",
  content: "comment",
  type: "comment",
},