Change comments section styling

site/css/main.scss

@@ -44,44 +44,6 @@ article {
 	color: var(--content-text-color);
 	border-bottom: 1px solid var(--accent-color);
 
-	@media (min-width: 768px) {
-		a::before { content: "["; }
-		a::after { content: "](" attr(href) ")"; word-wrap: break-word; }
-		a::before, a::after {
-			color: var(--secondary-ui-text-color);
-			font-family: $monospace;
-			font-size: 14px;
-		}
-		a { text-decoration: none; }
-	}
-	code::before, code::after {
-		content: "`";
-		font-family: $monospace;
-		color: var(--secondary-ui-text-color);
-	}
-	pre {
-		&::before, &::after {
-			content: "```";
-			display: block;
-			background: none;
-			color: var(--secondary-ui-text-color);
-		}
-		code::before, code::after {
-			content: "";
-			display: none;
-		}
-	}
-	strong::before, strong::after {
-		content: "**";
-		font-family: $monospace;
-		color: var(--secondary-ui-text-color);
-	}
-	em::before, em::after {
-		content: "_";
-		font-family: $monospace;
-		color: var(--secondary-ui-text-color);
-	}
-
 	.article-title {
 		margin-top: 20px;
 		margin-bottom: 0;
@@ -136,12 +98,69 @@ article {
 
 		h1 { font-size: 1.8rem; }
 		h2 { font-size: 1.6rem; }
+
+		@media (min-width: 768px) {
+			a::before { content: "["; }
+			a::after { content: "](" attr(href) ")"; word-wrap: break-word; }
+			a::before, a::after {
+				color: var(--secondary-ui-text-color);
+				font-family: $monospace;
+				font-size: 14px;
+			}
+			a { text-decoration: none; }
+		}
+		code::before, code::after {
+			content: "`";
+			font-family: $monospace;
+			color: var(--secondary-ui-text-color);
+		}
+		pre {
+			&::before, &::after {
+				content: "```";
+				display: block;
+				background: none;
+				color: var(--secondary-ui-text-color);
+			}
+			code::before, code::after {
+				content: "";
+				display: none;
+			}
+		}
+		strong::before, strong::after {
+			content: "**";
+			font-family: $monospace;
+			color: var(--secondary-ui-text-color);
+		}
+		em::before, em::after {
+			content: "_";
+			font-family: $monospace;
+			color: var(--secondary-ui-text-color);
+		}
 	}
 }
 
 #comments-container {
-	border-bottom: 1px solid var(--accent-color);
+	border-top: 1px solid var(--accent-color);
-	padding-bottom: 55px;
+	padding: 1rem 0;
+
+	#comments-container-title {
+		display: inline-block;
+		margin: 0;
+		cursor: pointer;
+		vertical-align: middle;
+	}
+
+	#comments-info {
+		margin-top: 0;
+	}
+
+	#comments-js-warning {
+		background-color: var(--atom-hue-5-2);
+		padding: 10px;
+		margin-top: 0;
+		border: 1px solid var(--atom-hue-5);
+		border-radius: 5px;
+	}
 
 	.comment-user-avatar {
 		width: 50px;

site/js/comments.js

@@ -3,17 +3,20 @@ fetchComments();
 async function fetchComments() {
 	const res = await fetch(`/comments?id=${permalink}`);
 	const comments = await res.json();
-	const rootId = new URL(permalink, document.location).toString();
+	const rootId = new URL(permalink, document.location);
 	const tree = buildCommentsTree(comments, rootId)[0];
 	const html = renderCommentList(tree);
-	document.getElementById("comments-container").innerHTML = html;
+	document.getElementById("comments-container").innerHTML += html;
 }
 
 function buildCommentsTree(comments, parent) {
 	console.log(`Building tree for ${parent}`);
-	let [children, rem] = partition(comments, it => it.inReplyTo === parent);
+	let [children, rem] = partition(comments, it => {
+		const inReplyTo = new URL(it.inReplyTo);
+		return inReplyTo.hostname === parent.hostname && inReplyTo.pathname === parent.pathname;
+	});
 	for (const child of children) {
-		const [subChildren, subRem] = buildCommentsTree(rem, child.id);
+		const [subChildren, subRem] = buildCommentsTree(rem, new URL(child.id));
 		rem = subRem;
 		child.children = subChildren;
 	}
@@ -60,4 +63,4 @@ function renderComment(comment) {
 		</div>
 	</div>
 	`;
-}
+}

site/layouts/article.html.ejs

@@ -11,8 +11,21 @@ metadata.layout = "default.html.ejs"
 	<div class="article-content" itemprop="articleBody">
 		<%- content %>
 	</div>
+    <details id="comments-container">
+		<summary>
+			<h2 id="comments-container-title">Comments</h2>
+		</summary>
+        <p id="comments-info">
+			Comments powered by ActivityPub. To respond to this post or to another comment, copy its URL into the search interface of your client for Mastodon, Pleroma, or other compatible software.
+			<a href="/meta/2019/reincarnation#activitypub">Learn more</a>.
+		</p>
+        <noscript>
+			<p id="comments-js-warning">
+				JavaScript is required to display comments.
+			</p>
+		</noscript>
+	</details>
 </article>
-<section id="comments-container"></section>
 
 <script>
 	const permalink = "<%= metadata.permalink %>";