Support comment img/video attachments (fixes #30)

sass/_comments.scss

@@ -37,6 +37,7 @@
 				"avatar name        "
 				"avatar time        "
 				"avatar post        "
+				"avatar media       "
 				"...... interactions";
 			column-gap: 1rem;
 			justify-items: start;
@@ -137,6 +138,20 @@
 				}
 			}
 
+			.attachments {
+				display: grid;
+				grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
+				grid-area: media;
+				gap: 1rem;
+				gap: 0.5rem;
+				margin-top: 1rem;
+
+				img,
+				video {
+					margin: 0;
+				}
+			}
+
 			footer {
 				display: flex;
 				grid-area: interactions;

sass/_media.scss

@@ -80,6 +80,7 @@ img {
 
 		&:hover {
 			transform: scale(1.1);
+			z-index: 1;
 			box-shadow: var(--shadow-raised);
 			border-radius: 0;
 		}

templates/partials/comments.html

@@ -1,4 +1,5 @@
 {#- Taken from https://carlschwan.eu/2020/12/29/adding-comments-to-your-static-blog-with-mastodon/ -#}
+{#- Attachment code taken from https://github.com/cassidyjames/cassidyjames.github.io/blob/99782788a7e3ba3cc52d6803010873abd1b02b9e/_includes/comments.html#L251-L296 -#}
 
 {%- if page.extra.comments.host -%}
 	{%- set host = page.extra.comments.host -%}
@@ -194,6 +195,51 @@
 							main.setAttribute("itemprop", "text");
 							main.innerHTML = status.content;
 
+							let attachments = status.media_attachments;
+							let SUPPORTED_MEDIA = ["image", "gifv"];
+							let media = document.createElement("div");
+							media.className = "attachments";
+							if (
+								attachments &&
+								Array.isArray(attachments) &&
+								attachments.length > 0
+							) {
+								attachments.forEach((attachment) => {
+									if (SUPPORTED_MEDIA.includes(attachment.type)) {
+
+										let mediaElement;
+										switch (attachment.type) {
+											case "image":
+												mediaElement = document.createElement("img");
+												mediaElement.setAttribute("src", attachment.preview_url);
+
+												if (attachment.description != null) {
+													mediaElement.setAttribute("alt", attachment.description);
+													mediaElement.setAttribute("title", attachment.description);
+												}
+
+												media.appendChild(mediaElement);
+												break;
+
+											case "gifv":
+												mediaElement = document.createElement("video");
+												mediaElement.setAttribute("src", attachment.url);
+												mediaElement.setAttribute("autoplay", "");
+												mediaElement.setAttribute("playsinline", "");
+												mediaElement.setAttribute("loop", "");
+
+												if (attachment.description != null) {
+													mediaElement.setAttribute("aria-title", attachment.description);
+													mediaElement.setAttribute("title", attachment.description);
+												}
+
+												media.appendChild(mediaElement);
+												break;
+										}
+									}
+								});
+							}
+
 							let interactions = document.createElement("footer");
 
 							let boosts = document.createElement("a");
@@ -227,6 +273,13 @@
 							comment.appendChild(header);
 							comment.appendChild(timestamp);
 							comment.appendChild(main);
+							if (
+								attachments &&
+								Array.isArray(attachments) &&
+								attachments.length > 0
+							) {
+								comment.appendChild(media);
+							}
 							comment.appendChild(interactions);
 
 							if (op === true) {