Simple Comment System with Webflow Logic

In this video we'll take a look at how to build a simple comment system with Webflow CMS and Logic. It has a limited feature set but is a great way to get familiar with Logic, CMS, and some custom Javascript. It's also would work great for a small personal site that's in early growth stage, after which you could easily transition to a more robust service and implement via your own backend. As a bonus we'll see how to use ChatGPT to generate code that takes a time since unix epoch timestamp value (1680060062) and convert it to a human readable time format like "22 minutes ago".

Watch the Tutorial on YouTubeGet the Project Cloneable

Inside <head> tag

<style>
[wb-comment-item] {
	visibility: hidden
}
</style>

Inside </body> tag

<script>
// get page slug
const pageSlug = blogPostSlugData.slug;

// setting form slug to page slug value
const slugInput = document.querySelector("#blog-post-slug");
slugInput.value = pageSlug;

const commentItems = document.querySelectorAll("[wb-comment-item]");
commentItems.forEach((commentItem) => {
  const commentSlugEl = commentItem.querySelector("[wb-comment-slug]");
  const commentSlug = commentSlugEl.getAttribute("wb-comment-slug");
  if (commentSlug !== pageSlug) {
    commentItem.remove();
  } else {
    commentItem.removeAttribute("wb-comment-item");
    const timestampEl = commentItem.querySelector("[wb-comment-timestamp]");
    const timestamp = timestampEl.getAttribute("wb-comment-timestamp");
    const readableTime = humanReadableTime(timestamp);
    timestampEl.textContent = readableTime;
  }
});

function humanReadableTime(timestamp) {
  const seconds = Math.floor((new Date() - timestamp) / 1000);

  if (seconds < 5) {
    return "Just now";
  } else if (seconds < 60) {
    return `${seconds} seconds ago`;
  } else if (seconds < 3600) {
    const minutes = Math.floor(seconds / 60);
    return `${minutes} minute${minutes === 1 ? "" : "s"} ago`;
  } else if (seconds < 86400) {
    const hours = Math.floor(seconds / 3600);
    return `${hours} hour${hours === 1 ? "" : "s"} ago`;
  } else if (seconds < 2592000) {
    const days = Math.floor(seconds / 86400);
    return `${days} day${days === 1 ? "" : "s"} ago`;
  } else if (seconds < 31536000) {
    const months = Math.floor(seconds / 2592000);
    return `${months} month${months === 1 ? "" : "s"} ago`;
  } else {
    const years = Math.floor(seconds / 31536000);
    return `${years} year${years === 1 ? "" : "s"} ago`;
  }
}
</script>