Netlify Formsを使ってブログサイトにコメント機能を追加する

<form id="my-form" action="/" name="sampleCommentForm" method="post" netlify-honeypot="bot-field" netlify>
  <p>
    <label>Name: <input type="text" name="name" /></label>
  </p>
  <p>
    <label>Email(任意): <input type="email" name="email" /></label>
  </p>
  <p>
    <label>Message: <textarea name="content"></textarea></label>
  </p>
  <p style="display:none;">
    <label>Bot Field(ここに値が入るとスパム判定する): <input name="bot-field"/></label>
  </p>
  <div>
    <input type="submit" value="Send" />
    <p>※ コメントは承認されると表示されます</p>
    <input type="hidden" name="path" value="index.html" />
  </div>
</form>

<form name="sampleApprovedComments" method="post" netlify netlify-honeypod="bot-field">
  <input type="text" name="name">
  <input type="email" name="email">
  <textarea name="content"></textarea>
  <input type="hidden" name="path">
  <input name="bot-field" />
</form>

var request = require("request")

exports.handler = function(event, context, callback) {
  const body = JSON.parse(event.body)
  const slackURL = process.env.SLACK_WEBHOOK_URL
  const slackPayload = {
    "text": "New comment on " + process.env.URL,
    "attachments": [
      {
        "fallback": "New comment",
        "color": "#444",
        "author_name": body.data.name + ' ' + body.data.email,
        "title": body.data.path,
        "title_link": process.env.URL + body.data.path,
        "text": body.data.content
      },
      {
        "fallback": "Manage comments on " + process.env.URL,
        "callback_id": "comment-action",
        "actions": [
          {
            "type": "button",
            "text": "Approve comment",
            "name": "approve",
            "value": body.id
          },
          {
            "type": "button",
            "style": "danger",
            "text": "Delete comment",
            "name": "delete",
            "value": body.id
          }
        ]
      }]
  }

  request.post({ url: slackURL, json: slackPayload }, function (err, httpResponse, body) {
    let msg = ''
    if (err) {
      msg = 'Post to Slack failed:' + err
    } else {
      msg = 'Post to Slack successful!  Server responded with:' + body
    }
    callback(null, {
      statusCode: 200,
      body: msg
    })
    return console.log(msg)
  })
}

var request = require("request")

function purgeComment(id) {
  var url = `https://api.netlify.com/api/v1/submissions/${id}?access_token=${process.env.NETLIFY_AUTH_TOKEN}`
  request.delete(url, function (err, response, body) {
    if (err) {
      return console.log(err)
    } else {
      return console.log("Comment deleted from queue.")
    }
  })
}

exports.handler = function (event, context, callback) {
  const body = event.body.split("payload=")[1]
  const payload = JSON.parse(unescape(body))
  const method = payload.actions[0].name
  const id = payload.actions[0].value

  if (method == "delete") {
    purgeComment(id)
    callback(null, {
      statusCode: 200,
      body: "Comment deleted"
    })
  } else if (method == "approve") {
    const url = `https://api.netlify.com/api/v1/submissions/${id}?access_token=${process.env.NETLIFY_AUTH_TOKEN}`

    request(url, function (err, response, body) {
      if (!err && response.statusCode === 200) {
        const data = JSON.parse(body).data

        // now we have the data, let's massage it and post it to the approved form
        const payload = {
          'form-name': "sampleApprovedComments",
          'path': data.path,
          'received': new Date(),
          'email': data.email,
          'name': data.name,
          'content': data.content
        }
        const approvedURL = process.env.URL

        console.log("Posting to", approvedURL)
        console.log(payload)

        request.post({
          url: approvedURL,
          headers: {
            "Content-type": "application/x-www-form-urlencoded",
          },
          form: payload
        }, function (err, httpResponse, body) {
          let msg
          if (err) {
            msg = 'Post to approved comments failed:' + err
            console.log(msg)
          } else {
            msg = 'Post to approved comments list successful.'
            console.log(msg)
            purgeComment(id)
          }
          msg = "Comment registered. Site deploying to include it."
          callback(null, {
            statusCode: 200,
            body: msg
          })
          return console.log(msg)
        })
      }
    })
  }
}

[build]
  functions = "functions/"
  publish = "public/"

[[plugins]]
  package = "netlify-plugin-form-submissions"

  [plugins.inputs]
    formNames = "sampleApprovedComments"
    dataDirectory = "public/_data"

{
  "dependencies": {
    "netlify-plugin-form-submissions": "^0.1.4",
    "request": "^2.88.2"
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
// 承認されたコメント一覧を表示
const url = '/_data/sampleApprovedComments_submissions.json'
$.getJSON(url, (json) => {
  for (let i = 0; i < json.length; i++) {
    if (json[i].data.path !== 'index.html') {
      continue
    }
    $('#approvalCommentsList').append(`<li>Name: ${json[i].data.name}, Message: ${json[i].data.content}</li>`)
  }
})

// 送信前に一言感謝
$("#my-form").submit(function(e) {
  alert("Thank you!");
});
</script>

// 日付付与の例
const form = $(".comment-form")
const dt = new Date()
const date = dt.getFullYear()
  + '年' + ('0' + (dt.getMonth() + 1)).slice(-2)
  + '月' + ('0' + dt.getDate()).slice(-2)
  + '日 ' + ('0' + dt.getHours()).slice(-2)
  + '時' + ('0' + dt.getMinutes()).slice(-2)
  + '分'

$('<input>').attr({
  'type': 'hidden',
  'name': 'date',
  'value': date
}).appendTo(form);