tracking changelog last visit + grouping by date

index.js

@@ -2,7 +2,7 @@ const http = require('http');
 const fs = require('fs');
 const path = require('path');
 
-const hostname = '127.0.0.1';
+const hostname = process.argv[3] || '127.0.0.1';
 const port = 3000;
 
 const webflowDomain = process.argv[2] || 'webflow.bitrise.io';

src/js/changelog.js

@@ -13,7 +13,33 @@ const changelogList = new ChangelogList(document.getElementById("changelog-list"
 /** @type {HTMLAnchorElement} */
 const changelogLoadMoreButton = document.getElementById("changelog-load-more-button");
 
+const now = new Date();
+let lastVisitedDate = now;
+
+/** @type {string} */
+const cookieName = "changelogLastVisit";
+const cookiePattern = new RegExp(`${cookieName}=([^;]+);?`);
+const cookieMatch = document.cookie.match(cookiePattern);
+if (cookieMatch) lastVisitedDate = new Date(cookieMatch[1]);
+
+const expires = new Date();
+expires.setMonth(expires.getMonth() + 12);
+document.cookie = `${cookieName}=${now};expires=${expires};`;
+
+const url = new URL(document.location.href);
+const queryLAstVisit = url.searchParams.get("lastVisit");
+if (queryLAstVisit) {
+  lastVisitedDate = new Date();
+  lastVisitedDate.setDate(lastVisitedDate.getDate() - parseInt(queryLAstVisit));
+}
+
+/* -- TEST -- */
+// const testDate = new Date();
+// testDate.setMonth(testDate.getMonth() - 1);
+// lastVisitedDate = testDate;
+/* -- TEST -- */
+
 changelogLoadMoreButton.remove();
 changelogService.loadTopics("/changelog.json").then(topics => {
-  changelogList.render(topics);
-});
+  changelogList.render(topics, lastVisitedDate);
+});

src/js/changelog/ChangelogList.js

@@ -19,6 +19,11 @@ class ChangelogList
     this.readListItemTemplate.id = "";
     this.readListItemTemplate.remove();
 
+    /** @type {HTMLLIElement} */
+    this.timestampListItemTemplate = this.list.querySelector("#changelog-group-timestamp-template");
+    this.timestampListItemTemplate.id = "";
+    this.timestampListItemTemplate.remove();
+
     this.list.append(this.renderLoadingListItem());
     this.list.append(this.renderLoadingListItem());
     this.list.append(this.renderLoadingListItem());
@@ -47,13 +52,24 @@ class ChangelogList
   }
 
   /**
-   * @param {ChangelogTopic[]} topics 
+   * @param {ChangelogTopic[]} topics
+   * @param {Date} lastVisitedDate
    */
-  render(topics) {
+  render(topics, lastVisitedDate) {
     this.list.innerHTML = "";
+    let timestamp = null;
     for (let topic of topics) {
       if (!this.listItems[topic.id]) {
-        const listItem = this.renderListItem(topic);
+
+        if (timestamp != topic.createdAt.toLocaleDateString()) {
+          timestamp = topic.createdAt.toLocaleDateString();
+          const timestampListItem = this.timestampListItemTemplate.cloneNode(true);
+          timestampListItem.innerHTML = timestamp;
+          this.list.append(timestampListItem);
+        }
+
+        const isUnread = topic.createdAt.getTime() > lastVisitedDate.getTime();
+        const listItem = this.renderListItem(topic, isUnread);
         this.listItems[topic.id] = listItem;
         this.list.append(listItem);
       }

src/js/changelog/ChangelogService.js

@@ -19,7 +19,6 @@ async loadTopics(changelogUrl) {
     const url = this.apiBase + changelogUrl + "?_=" + chacheBuster;
     const response = await fetch(url);
     const json = await response.json();
-    console.log(json);
     return json.topic_list.topics.map(data => new ChangelogTopic(data));
   }