diff --git a/site/css/main.scss b/site/css/main.scss index 0021a4d..e6cd091 100644 --- a/site/css/main.scss +++ b/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); - padding-bottom: 55px; + border-top: 1px solid var(--accent-color); + 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; diff --git a/site/js/comments.js b/site/js/comments.js index c4f3048..f71a143 100644 --- a/site/js/comments.js +++ b/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) { `; -} \ No newline at end of file +} diff --git a/site/layouts/article.html.ejs b/site/layouts/article.html.ejs index a1dc21c..c72fa3a 100644 --- a/site/layouts/article.html.ejs +++ b/site/layouts/article.html.ejs @@ -11,8 +11,21 @@ metadata.layout = "default.html.ejs"
<%- content %>
+
+ +

Comments

+
+

+ 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. + Learn more. +

+ +
-