Change comments section styling
This commit is contained in:
parent
ed2a06f5bb
commit
5be69ec556
GPG Key ID:
94A5AB95422746E5
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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) {
|
|||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,8 +11,21 @@ metadata.layout = "default.html.ejs"
|
|||
<div class="article-content" itemprop="articleBody">
|
||||
<%- content %>
|
||||
</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>
|
||||
<section id="comments-container"></section>
|
||||
|
||||
<script>
|
||||
const permalink = "<%= metadata.permalink %>";
|
||||
|
|
|
|||
Loading…
Reference in New Issue