Assorted comment tweaks

site/css/main.scss

@@ -437,17 +437,28 @@ article {
 		margin-bottom: 0;
 	}
 
-	.comment:not(:last-child) {
+	.comment {
+		display: flex;
+		flex-direction: row;
+		align-items: flex-start;
+		justify-content: flex-start;
+
+		&:not(:last-child) {
 			margin-bottom: 16px;
 		}
 
 		.comment-user-avatar {
 			width: 50px;
 			border-radius: 5px;
-		float: left;
+			margin: 0;
 			margin-right: 10px;
 		}
 
+		.comment-body > p:first-child {
+			margin-top: 0;
+		}
+	}
+
 	@media (min-width: 768px) {
 		.comments-list {
 			padding-left: 0px;
@@ -463,7 +474,6 @@ article {
 		}
 
 		.comment-children {
-			margin-left: 60px;
 			margin-top: 16px;
 		}
 	}

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>
 

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 %}

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;
 }