Assorted comment tweaks

This commit is contained in:
Shadowfacts 2023-01-05 15:58:08 -05:00
parent ee04ed9124
commit 0884fe7589
4 changed files with 25 additions and 14 deletions

View File

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

View File

@ -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>

View File

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

View File

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