Add note about guestbook comment field supporting HTML

src/_bundle/css/comments.css

@@ -110,7 +110,7 @@ gw-comment-card.collapsed .comment-header-right time { display: none; }
 
 .comment-header {
     display: grid;
-    grid-template-columns: 0fr max-content 1fr;
+    grid-template-columns: 0fr auto 1fr;
     gap: 0.4em;
     align-items: baseline;
 }
@@ -136,4 +136,5 @@ gw-comment-card.collapsed .comment-header-right time { display: none; }
 .commenter-name {
     font-size: 1.1em;
     font-weight: 700;
+    overflow-wrap: break-word;
 }

src/_bundle/js/comments.js

@@ -1,36 +1,13 @@
 /**
- * Author: Vera Konigin
- * Site: https://groundedwren.neocities.org
- * Contact: vera@groundedwren.com
- *
- * File Description: Comments Control
-*/
+ * @file Comments control
+ * @author Vera Konigin vera@groundedwren.com
+ * https://groundedwren.neocities.org
+ */
 
-/**
- * By default, any JavaScript code written is defined in the global namespace, which means it's accessible directly under the "window" element.
- * If you have a lot of scripts, this can lead to clutter and naming collisions (what if two different scripts use a variable called "i"? They can inadvertently mess each other up).
- * To get around this, we define the registerNamespace function in the global namespace, which just confines all the code in the function passed to it to a property under window.
- * That property is represented as the "path" parameter. It is passed to the function for ease of access.
-*/
-function registerNamespace(path, nsFunc)
-{
-    var ancestors = path.split(".");
-
-    var ns = window;
-    for(var i = 0; i < ancestors.length; i++)
-    {
-        ns[ancestors[i]] = ns[ancestors[i]] || {};
-        ns = ns[ancestors[i]];
-    }
-    nsFunc(ns);
-}
-
-registerNamespace("GW.Controls", function (ns)
-{
-    ns.CommentForm = class CommentForm extends HTMLElement
-    {
+window.GW = window.GW || {};
+(function Controls(ns) {
+	ns.CommentForm = class CommentForm extends HTMLElement {
 		//#region staticProperties
-        static observedAttributes = [];
 		static instanceCount = 0;
 		static instanceMap = {};
 		//#endregion
@@ -59,21 +36,17 @@ registerNamespace("GW.Controls", function (ns)
 		//#endregion
 		//#endregion
 
-        constructor()
-        {
+		constructor() {
 			super();
 			this.instanceId = CommentForm.instanceCount++;
 			CommentForm.instanceMap[this.instanceId] = this;
 		}
 
-        get idKey()
-        {
+		get idKey() {
 			return `gw-comment-form-${this.instanceId}`;
 		}
 
-        //#region HTMLElement implementation
-        connectedCallback()
-        {
+		connectedCallback() {
 			if (this.isInitialized) { return; }
 
 			this.titleText = this.getAttribute("titleText") || "Add a Comment";
@@ -86,10 +59,8 @@ registerNamespace("GW.Controls", function (ns)
 
 			this.isInitialized = true;
 		}
-        //#endregion
 
-        renderContent()
-        {
+		renderContent() {
 			//Markup
 			this.innerHTML = `
 			<form  id="${this.idKey}-form"
@@ -120,19 +91,21 @@ registerNamespace("GW.Controls", function (ns)
 					</div>
 				</div>
 				<div class="comment-box-container">
+					<div class="input-vertical">
 						<label for="${this.idKey}-comment">
 							Comment<span aria-hidden="true">*</span>
 						</label>
 						<textarea  id="${this.idKey}-comment"
 							minlength="1"
-                        maxlength="4000"
+							maxlength="1000"
 							required="true"
 							rows="5"
 						></textarea>
 					</div>
+				</div>
 				<div id="${this.idKey}-banner" class="inline-banner" aria-live="polite">
-                    <gw-icon iconKey="circle-info"></gw-icon>
-                    <p>Comments are manually approved</p>
+					<gw-icon iconKey="circle-info" title="info"></gw-icon>
+					<span>Comments are manually approved</span>
 				</div>
 				<div class="form-footer">
 					<input id="${this.idKey}-reset" type="reset" value="Reset">
@@ -162,13 +135,11 @@ registerNamespace("GW.Controls", function (ns)
 		}
 
 		//#region Handlers
-        registerHandlers()
-        {
+		registerHandlers() {
 			this.formEl.onsubmit = this.onSubmit;
 		}
 
-        onSubmit = (event) =>
-        {
+		onSubmit = (event) => {
 			event.preventDefault();
 
 			const contentObj = {
@@ -176,12 +147,13 @@ registerNamespace("GW.Controls", function (ns)
 				email: this.emailInpt.value,
 				website: this.websiteInpt.value,
 				responseTo: this.respToInpt.value,
-                comment: this.commentInpt.value,
+				comment: (
+					this.commentInpt.value || ""
+				).replaceAll("\n", "<br>").replaceAll("(", "\\("),
 				timestamp: new Date().toUTCString(),
 			};
 			const contentAry = [];
-            for (let contentKey in contentObj)
-            {
+			for (let contentKey in contentObj) {
 				contentAry.push(`${contentKey}=${contentObj[contentKey]}`);
 			}
 
@@ -193,33 +165,33 @@ registerNamespace("GW.Controls", function (ns)
 			);
 			request.setRequestHeader("Content-Type", "application/json");
 
-            request.onreadystatechange = () =>
-            {
+			request.onreadystatechange = () => {
 				if (request.readyState !== XMLHttpRequest.DONE) { return; }
-                if (Math.floor(request.status / 100) !== 2)
-                {
+				if (Math.floor(request.status / 100) !== 2) {
 					console.log(request.responseText);
-
 					this.bannerEl.classList.add("warning");
 					this.bannerEl.innerHTML =
 					`
-                        <gw-icon iconKey="triangle-exclamation"></gw-icon>
+					<gw-icon iconKey="triangle-exclamation" title="warning"></gw-icon>
 					<span>
 						That didn't work.
 						${this.fallbackEmail
-                                ? `<a class="full" href="mailto:${this.fallbackEmail}?subject=Comment on ${document.title}&body=${contentAry.join("; ")}">Send your comment as an email instead</a>.`
+							? `<a class="full" href="mailto:${this.fallbackEmail}?subject=Comment on ${document.title}&body=${contentAry.join("; ")}">Click here to send as an email instead</a>.`
 							: ""
 						}
 					</span>
 					`;
 				}
-                else
-                {
+				else {
 					alert("Your comment has been submitted!");
 				}
 			};
 
-            request.send(JSON.stringify({ content: contentAry.join("; ") }));
+			request.send(JSON.stringify({
+				embeds: [{
+					fields: Object.keys(contentObj).map(key => { return { name: key, value: contentObj[key] }})
+				}]
+			}));
 
 			localStorage.setItem("comment-name", contentObj.name);
 			localStorage.setItem("comment-email", contentObj.email);
@@ -234,12 +206,11 @@ registerNamespace("GW.Controls", function (ns)
 	};
 	customElements.define("gw-comment-form", ns.CommentForm);
 
-    ns.CommentList = class CommentList extends HTMLElement
-    {
+	ns.CommentList = class CommentList extends HTMLElement {
 		//#region staticProperties
-        static observedAttributes = [];
 		static instanceCount = 0;
 		static instanceMap = {};
+		static Data = [];
 		//#endregion
 
 		//#region instance properties
@@ -254,21 +225,18 @@ registerNamespace("GW.Controls", function (ns)
 		//#endregion
 		//#endregion
 
-        constructor()
-        {
+		constructor() {
 			super();
 			this.instanceId = CommentList.instanceCount++;
 			CommentList.instanceMap[this.instanceId] = this;
+			CommentList.Data[this.instanceId] = {};
 		}
 
-        get idKey()
-        {
+		get idKey() {
 			return `gw-comment-list-${this.instanceId}`;
 		}
 
-        //#region HTMLElement implementation
-        connectedCallback()
-        {
+		connectedCallback() {
 			if (this.isInitialized) { return; }
 
 			this.gSpreadsheetId = this.getAttribute("gSpreadsheetId");
@@ -280,10 +248,8 @@ registerNamespace("GW.Controls", function (ns)
 
 			this.isInitialized = true;
 		}
-        //#endregion
 
-        async loadAndRender()
-        {
+		async loadAndRender() {
 			this.innerHTML = `
 			<div class="inline-banner">
 				<gw-icon iconkey="circle-info" title="info"></gw-icon>
@@ -292,12 +258,11 @@ registerNamespace("GW.Controls", function (ns)
 			`
 
 			const sheetReader = new GW.Gizmos.GoogleSheetsReader(this.gSpreadsheetId, this.gSheetId);
-            const sheetData = await sheetReader.loadData();
+			await sheetReader.loadData();
 			this.innerHTML = "";
 
 			const allComments = sheetReader.rowData;
-            if (this.isNewestFirst)
-            {
+			if (this.isNewestFirst) {
 				allComments.reverse();
 			}
 
@@ -307,72 +272,59 @@ registerNamespace("GW.Controls", function (ns)
 			const allCommentsIndex = {};
 			const topLevelCommentIdxs = [];
 			const childCommentIdxs = [];
-            for (let i = 0; i < allComments.length; i++)
-            {
+			for (let i = 0; i < allComments.length; i++) {
 				const comment = allComments[i];
 				allCommentsIndex[comment.ID] = i;
-                if (!comment.ResponseTo)
-                {
+				if (!comment.ResponseTo) {
 					topLevelCommentIdxs.push(i);
 				}
-                else
-                {
+				else {
 					childCommentIdxs.push(i);
 				}
 			}
-            childCommentIdxs.forEach(childIdx =>
-            {
+			childCommentIdxs.forEach(childIdx => {
 				const replyId = allComments[childIdx].ResponseTo;
 				const respondeeComment = allComments[allCommentsIndex[replyId]];
 
-                respondeeComment.childrenIdxs = respondeeComment.childrenIdxs || [];
-                respondeeComment.childrenIdxs.push(childIdx);
+				respondeeComment.ChildIdxs = respondeeComment.ChildIdxs || [];
+				respondeeComment.ChildIdxs.push(childIdx);
 			});
 
 			let commentsToBuild = [];
 			topLevelCommentIdxs.forEach(
-                topCommentIdx => commentsToBuild.push(
-                    {
+				topCommentIdx => commentsToBuild.push({
 					parent: this.containerEl,
-                        parentId: null,
 					comment: allComments[topCommentIdx]
-                    }
-                )
+				})
 			);
 
-            while (commentsToBuild.length > 0)
-            {
-                let { parent, parentId, comment } = commentsToBuild.shift();
-                if (!comment.Timestamp)
-                {
+			while (commentsToBuild.length > 0) {
+				let { parent, comment } = commentsToBuild.shift();
+				if (!comment.Timestamp) {
 					continue;
 				}
+
+				CommentList.Data[this.instanceId][comment.ID] = comment;
+
 				parent.insertAdjacentHTML("beforeend", `
 				<gw-comment-card  id="${this.idKey}-cmt-${comment.ID}"
-                    commentId="${comment.ID || ""}"
-                    replyToId="${parentId || ""}"
-                    numChildren="${(comment.childrenIdxs || []).length}"
-                    commenterName="${comment["Display Name"] || ""}"
-                    isoTimestamp="${comment.Timestamp.toISOString()}"
-                    websiteURL="${comment.Website || ""}"
-                    commentText="${comment.Comment || ""}"
-                    gwCommentFormId="${this.gwCommentFormId || ""}"
+					listInstance=${this.instanceId}
+					commentId=${comment.ID}
+					gwCommentFormId=${this.gwCommentFormId || ""}
 				></gw-comment-card>
 				`);
 
 				const commentEl = document.getElementById(`${this.idKey}-cmt-${comment.ID}`);
-                (comment.childrenIdxs || []).forEach(
+				(comment.ChildIdxs || []).forEach(
 					childIdx => commentsToBuild.push({
 						parent: commentEl.articleEl,
-                        parentId: comment.ID,
 						comment: allComments[childIdx]
 					})
 				);
 			}
 		}
 
-        renderContent()
-        {
+		renderContent() {
 			//Markup
 			this.innerHTML = `
 			<div id="${this.idKey}-container" class="comments-container"">
@@ -384,17 +336,14 @@ registerNamespace("GW.Controls", function (ns)
 		}
 
 		//#region Handlers
-        registerHandlers()
-        {
+		registerHandlers() {
 		}
 		//#endregion
 	};
 	customElements.define("gw-comment-list", ns.CommentList);
 
-    ns.CommentCard = class CommentCard extends HTMLElement
-    {
+	ns.CommentCard = class CommentCard extends HTMLElement {
 		//#region staticProperties
-        static observedAttributes = [];
 		static instanceCount = 0;
 		static instanceMap = {};
 		//#endregion
@@ -402,15 +351,16 @@ registerNamespace("GW.Controls", function (ns)
 		//#region instance properties
 		instanceId;
 		isInitialized;
+
 		commentId;
+		gwCommentFormId;
+
 		replyToId;
 		numChildren;
 		commenterName;
-        isoTimestamp;
 		datetime;
 		websiteURL;
 		commentText;
-        gwCommentFormId;
 
 		//#region element properties
 		articleEl;
@@ -418,33 +368,32 @@ registerNamespace("GW.Controls", function (ns)
 		//#endregion
 		//#endregion
 
-        constructor()
-        {
+		constructor() {
 			super();
 			this.instanceId = CommentCard.instanceCount++;
 			CommentCard.instanceMap[this.instanceId] = this;
 		}
 
-        get idKey()
-        {
+		get idKey() {
 			return `gw-comment-card-${this.instanceId}`;
 		}
 
 		//#region HTMLElement implementation
-        connectedCallback()
-        {
+		connectedCallback() {
 			if (this.isInitialized) { return; }
 
 			this.commentId = this.getAttribute("commentId");
-            this.replyToId = this.getAttribute("replyToId");
-            this.numChildren = this.getAttribute("numChildren");
-            this.commenterName = this.getAttribute("commenterName");
-            this.isoTimestamp = this.getAttribute("isoTimestamp");
-            this.datetime = new Date(this.isoTimestamp);
-            this.websiteURL = this.getAttribute("websiteURL");
-            this.commentText = this.getAttribute("commentText");
 			this.gwCommentFormId = this.getAttribute("gwCommentFormId");
 
+			const commentData = ns.CommentList.Data[this.getAttribute("listInstance")][this.commentId];
+
+			this.replyToId = commentData.ResponseTo;
+			this.numChildren = (commentData.ChildIdxs || []).length;
+			this.commenterName = commentData["Display Name"];
+			this.datetime = commentData.Timestamp;
+			this.websiteURL = commentData.Website;
+			this.commentText = this.parseCommentText(commentData.Comment);
+
 			this.renderContent();
 			this.registerHandlers();
 
@@ -452,12 +401,10 @@ registerNamespace("GW.Controls", function (ns)
 		}
 		//#endregion
 
-        renderContent()
-        {
+		renderContent() {
 			let headerText = this.replyToId
 				? `Comment #${this.commentId} replying to #${this.replyToId}`
 				: `Top level comment #${this.commentId}`;
-
 			headerText += ` with ${this.numChildren} direct ${this.numChildren == 1 ? "reply" : "replies"}`;
 
 			const displayTimestamp = this.datetime.toLocaleString(
@@ -482,7 +429,7 @@ registerNamespace("GW.Controls", function (ns)
 					${commenterNameEl}
 					<div class="comment-header-right">
 						<time id="${this.idKey}-timestamp"
-                            datetime="${this.isoTimestamp}"
+							datetime="${this.datetime.toISOString()}"
 							tabindex="-1"
 						>${displayTimestamp}</time>
 						<button id="${this.idKey}-show" class="show-comment">Show #${this.commentId}</button>
@@ -505,19 +452,16 @@ registerNamespace("GW.Controls", function (ns)
 		}
 
 		//#region Handlers
-        registerHandlers()
-        {
+		registerHandlers() {
 			this.replyBtn.onclick = this.onReply;
 			this.hideBtn.onclick = this.onHide;
 			this.showBtn.onclick = this.onShow;
 		}
 
-        onReply = () =>
-        {
+		onReply = () => {
 			const gwCommentForm = document.getElementById(this.gwCommentFormId);
 			const respToInpt = gwCommentForm.respToInpt;
-            if (!respToInpt)
-            {
+			if (!respToInpt) {
 				alert("Comment form not found");
 				return;
 			}
@@ -526,18 +470,59 @@ registerNamespace("GW.Controls", function (ns)
 			respToInpt.focus();
 		};
 
-        onHide = () =>
-        {
+		onHide = () => {
 			this.classList.add("collapsed");
 			this.showBtn.focus();
 		};
 
-        onShow = () =>
-        {
+		onShow = () => {
 			this.classList.remove("collapsed");
 			this.timestamp.focus();
 		};
 		//#endregion
+
+		parseCommentText(commentString) {
+			let commentText = "";
+			let linkObj = {};
+
+			for(let i = 0; i < commentString.length; i++){
+				let char = commentString.charAt(i);
+				switch (char) {
+					case '[':
+						linkObj = {tStart: i};
+						break;
+					case ']':
+						if(linkObj.tStart !== undefined && linkObj.tStart !== i-1) {
+							linkObj.tEnd = i;
+						}
+						else { linkObj = {}; }
+						break;
+					case '(':
+						if(linkObj.tEnd !== undefined && linkObj.tEnd === i-1) {
+							linkObj.lStart = i;
+						}
+						else { linkObj = {}; }
+						break;
+					case ')':
+						if(linkObj.lStart !== undefined && linkObj.lStart !== i-1) {
+							linkObj.lEnd = i;
+						}
+						else { linkObj = {}; }
+						break;
+				}
+				if(linkObj.lEnd !== undefined) {
+					const linkText = commentString.substring(linkObj.tStart + 1, linkObj.tEnd);
+					const linkURL = commentString.substring(linkObj.lStart + 1, linkObj.lEnd);
+					commentText = commentText.substring(0, commentText.length - (i - linkObj.tStart));
+					commentText += `<a href="${linkURL}" target="_blank">${linkText}</a>`;
+					linkObj = {};
+				}
+				else {
+					commentText += char;
+				}
+			}
+			return commentText;
+		}
 	};
 	customElements.define("gw-comment-card", ns.CommentCard);
-});
+}) (window.GW.Controls = window.GW.Controls || {});

src/pages/guestbook.njk

@@ -12,7 +12,7 @@ eleventyComputed:
 
 <p class="center-text">Guestbook Archive: <a href="https://web.archive.org/web/20240528231121/https%3A%2F%2Fleilukin.123guestbook.com%2F">123Guestbook</a></p>
 
-<p>Feel free to say hi and connect with me!</p>
+<p>Feel free to say hi and connect with me! The comment field supports <a href="https://www.markdownguide.org/basic-syntax/#links">Markdown links</a> and and HTML.</p>
 
 <p>JavaScript is required for this guestbook to function. Special thanks to <a href="https://groundedwren.neocities.org/pages/controls/guestbookDemo">Vera Konigin</a> for this guestbook widget!</p>