Comments script

Here’s the App Script for the comment section sheet:

function trunc(text, maxLen) {
  if (text.length > maxLen) {
    return text.slice(0, maxLen);
  }
  return text;
}

function doPost(data) {
  let sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(data.parameter.title)

  if (sheet == null) {
    SpreadsheetApp.getActiveSpreadsheet().insertSheet();
    sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
    sheet.setName(data.parameter.title)

    sheet.appendRow(["datetime","name","message"]);
  }

  const date = new Date();
  const row = [
    `${date.toDateString()} ${date.toTimeString().split("GMT")[0]} CST`,
    trunc(data.parameter.name,32),
    trunc(data.parameter.message,600),
  ];

  sheet.appendRow(row);

  return ContentService
    .createTextOutput(JSON.stringify({'message':'Submitted!'}))
    .setMimeType(ContentService.MimeType.JSON);
}

function doGet(e) {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(e.parameter.title);

  if (sheet == null) {
    const response = ContentService
      .createTextOutput(JSON.stringify({"length" : 0}))
      .setMimeType(ContentService.MimeType.JSON);
    return response;
  }

  const data = sheet.getDataRange().getValues();

  const headers = data.shift();
  const jsonData = data.map(row => {
    let obj = {};
    headers.forEach((header, index) => {
      obj[header] = row[index]
    });
    return obj
  });

  jsonData.reverse();

  const response = ContentService
    .createTextOutput(JSON.stringify(jsonData))
    .setMimeType(ContentService.MimeType.JSON);
  return response;
}

And here’s the JS used to replace <div id="comments"><a href="#comments">[Comments]</a></div> with the comments:

const appURL = "YOUR APP SCRIPT URL";
const commentDiv = document.getElementById("comments");

if (commentDiv) {
  const title = document.querySelector(".post-title").innerHTML.replace("&", "");

  // create comment input box
  commentDiv.innerHTML = '<h1 id="comments">Comments</h1><a href="https://www.possiblyaxolotl.com/terms">ToS & Privacy Policy</a><form id="CommentForm"><input maxlength="32" id="name" placeholder="Name (max size 32 characters)" name="name" required type="text" minlength="2" /><textarea maxlength="600" placeholder="Message (max size 600 characters)" id="message" name="message" required type="text"></textarea><input type="submit" id="submitButton" value="Submit"></form><hr><p id="text">Loading...</p>'

  fetch(appURL + "?title=" + title)
    .then(response => response.json())
    .then(data => {
      console.log(data)
      if (data.length == 0) {
        document.getElementById("text").innerText = "No comments";
      } else {
        document.getElementById("text").outerHTML = "<div id='commentContainer'></div>";
        const commentContainer = document.getElementById("commentContainer");

        data.forEach(item => {
          const comment = document.createElement("div");
          const username = document.createElement("h2");
          const text = document.createElement("p");
          const date = document.createElement("sub");

          const dateTime = new Date(item.datetime);

          let mins = dateTime.getMinutes();
          if (mins < 10) {
              mins = `0${mins}`;
          }

          comment.className = "comment";
          
          text.innerText = item.message
          username.innerText = item.name +" says:"
          date.innerText = `${dateTime.toDateString()} @ ${dateTime.getHours()}:${mins}`

          comment.appendChild(username)
          comment.appendChild(text)
          comment.appendChild(date)

          commentContainer.appendChild(comment)
        })
      }
    });

    document.getElementById("CommentForm").addEventListener("submit", function(event) {
        event.preventDefault();
        const formData = new FormData(event.target);

        formData.append("title", title);
        
        document.getElementById("submitButton").disabled = true;

        fetch(appURL, {
            method:"POST",
            body: new URLSearchParams(formData)
        })
            .then(response => response.json())
            .then(data => {
                window.location.reload()
            });
            
    });
  }

There’s also some additional CSS just to make it look nice too

Back