Change comments section styling

This commit is contained in:
Shadowfacts 2019-08-18 17:15:31 -04:00
parent ed2a06f5bb
commit 5be69ec556
Signed by: shadowfacts
GPG Key ID: 94A5AB95422746E5
3 changed files with 81 additions and 46 deletions

View File

@ -44,44 +44,6 @@ article {
color: var(--content-text-color); color: var(--content-text-color);
border-bottom: 1px solid var(--accent-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 { .article-title {
margin-top: 20px; margin-top: 20px;
margin-bottom: 0; margin-bottom: 0;
@ -136,12 +98,69 @@ article {
h1 { font-size: 1.8rem; } h1 { font-size: 1.8rem; }
h2 { font-size: 1.6rem; } 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 { #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 { .comment-user-avatar {
width: 50px; width: 50px;

View File

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

View File

@ -11,8 +11,21 @@ metadata.layout = "default.html.ejs"
<div class="article-content" itemprop="articleBody"> <div class="article-content" itemprop="articleBody">
<%- content %> <%- content %>
</div> </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> </article>
<section id="comments-container"></section>
<script> <script>
const permalink = "<%= metadata.permalink %>"; const permalink = "<%= metadata.permalink %>";