From 0884fe7589683137b11e4c80dd008bce0e052b16 Mon Sep 17 00:00:00 2001
From: Shadowfacts <me@shadowfacts.net>
Date: Thu, 5 Jan 2023 15:58:08 -0500
Subject: [PATCH] Assorted comment tweaks

---
 site/css/main.scss         | 28 +++++++++++++++++++---------
 site/layout/article.html   |  3 ++-
 site/layout/default.html   |  2 +-
 site/static/js/comments.js |  6 +++---
 4 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/site/css/main.scss b/site/css/main.scss
index 0da7af6..7b67786 100644
--- a/site/css/main.scss
+++ b/site/css/main.scss
@@ -437,15 +437,26 @@ article {
 		margin-bottom: 0;
 	}
 
-	.comment:not(:last-child) {
-		margin-bottom: 16px;
-	}
+	.comment {
+		display: flex;
+		flex-direction: row;
+		align-items: flex-start;
+		justify-content: flex-start;
 
-	.comment-user-avatar {
-		width: 50px;
-		border-radius: 5px;
-		float: left;
-		margin-right: 10px;
+		&:not(:last-child) {
+			margin-bottom: 16px;
+		}
+
+		.comment-user-avatar {
+			width: 50px;
+			border-radius: 5px;
+			margin: 0;
+			margin-right: 10px;
+		}
+
+		.comment-body > p:first-child {
+			margin-top: 0;
+		}
 	}
 
 	@media (min-width: 768px) {
@@ -463,7 +474,6 @@ article {
 		}
 
 		.comment-children {
-			margin-left: 60px;
 			margin-top: 16px;
 		}
 	}
diff --git a/site/layout/article.html b/site/layout/article.html
index 164deeb..54e1dd3 100644
--- a/site/layout/article.html
+++ b/site/layout/article.html
@@ -69,7 +69,8 @@
 </article>
 
 <script>
-	const permalink = "{{ post.comments_permalink() }}";
+	const articleDomain = "{{ Self::domain() }}";
+	const articlePermalink = "{{ post.comments_permalink() }}";
 </script>
 <script src="/js/comments.js" async></script>
 
diff --git a/site/layout/default.html b/site/layout/default.html
index 72a072f..c907c89 100644
--- a/site/layout/default.html
+++ b/site/layout/default.html
@@ -22,7 +22,7 @@
 	<meta property="twitter:image" content="https://{{ Self::domain() }}shadowfacts.png">
 	<meta property="og:image" content="https://{{ Self::domain() }}shadowfacts.png">
 	{% endblock %}
-	<meta property="og:url" content="https://{{ Self::domain() }}{ self.permalink() }}">
+	<meta property="og:url" content="https://{{ Self::domain() }}{{ self.permalink() }}">
 	<meta property="og:site_name" content="Shadowfacts">
 
 	{% block head %}{% endblock %}
diff --git a/site/static/js/comments.js b/site/static/js/comments.js
index eba6edc..2cb2e51 100644
--- a/site/static/js/comments.js
+++ b/site/static/js/comments.js
@@ -9,10 +9,10 @@ details.addEventListener("toggle", (even) => {
 });
 
 async function fetchComments() {
-	const res = await fetch(`/comments?id=${permalink}`);
+	const res = await fetch(`/comments?id=${articlePermalink}`);
 	const comments = await res.json();
-	const rootId = new URL(permalink, document.location);
-	const tree = buildCommentsTree(comments, rootId)[0];
+	const rootId = new URL(`https://${articleDomain}${articlePermalink}`);
+	const [tree, _] = buildCommentsTree(comments, rootId);
 	const html = renderCommentList(tree);
 	document.getElementById("comments-container").innerHTML += html;
 }