Implement comments
Based on https://berglyd.net/blog/2023/03/mastodon-comments/ Scripts are loaded only on blog posts. DOMPurify comes from the 0.3.1 release (dist/ on their GitHub repo)
This commit is contained in:
parent
a4d6b3c3e7
commit
8876c53ecb
5 changed files with 99 additions and 0 deletions
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
layout: simple_page.njk
|
||||
load_comments_script: true
|
||||
---
|
||||
|
||||
<h1>{{ title }}</h1>
|
||||
|
|
@ -16,3 +17,10 @@ layout: simple_page.njk
|
|||
|
||||
|
||||
{{ content | safe }}
|
||||
|
||||
{% if comment_status %}
|
||||
<hr>
|
||||
<h3>comentarios · <a href="https://hachyderm.io/@sofiaritz/{{ comment_status }}">ver en el servidor</a></h3>
|
||||
<button data-status="{{ comment_status }}" id="comment-load-btn">Cargar comentarios</button>
|
||||
<section id="comment-section"></section>
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,11 @@
|
|||
<title>{% if title %} {{ title }} - {% endif %}sofi web</title>
|
||||
<link rel="stylesheet" href="/css/app.css" type="text/css">
|
||||
<link rel="stylesheet" href="/css/navbar.css" type="text/css">
|
||||
<link rel="stylesheet" href="/css/comments.css" type="text/css">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300;1,300&family=Rubik:ital,wght@0,400;0,500;1,400;1,500&display=swap" type="text/css">
|
||||
{% if load_comments_script %}
|
||||
<script src="/assets/scripts/dompurify.js"></script>
|
||||
{% endif %}
|
||||
</head>
|
||||
<body>
|
||||
<a class="__hidden" href="https://hachyderm.io/@sofiaritz" rel="me">Mastodon</a>
|
||||
|
|
@ -50,5 +54,43 @@
|
|||
{{ content | safe }}
|
||||
</main>
|
||||
</div>
|
||||
{% if load_comments_script %}
|
||||
<script>
|
||||
document.getElementById("comment-load-btn").addEventListener("click", async (e) => {
|
||||
let status_url = `https://hachyderm.io/api/v1/statuses/${e.target.getAttribute("data-status")}/context`
|
||||
let comments = await (await fetch(status_url)).json()
|
||||
|
||||
for (let comment of comments["descendants"]) {
|
||||
let date = new Date(comment.created_at).toLocaleDateString("es-ES", {
|
||||
day: "2-digit",
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
})
|
||||
let sanitize = DOMPurify.sanitize
|
||||
let comment_html =
|
||||
`
|
||||
<div class="comment">
|
||||
<div class="comment-author">
|
||||
<img class="comment-author-image" src="${sanitize(comment.account.avatar)}">
|
||||
<div class="comment-author-data">
|
||||
<span class="comment-author-name">${sanitize(comment.account.display_name)}</span>
|
||||
<a href="${sanitize(comment.account.url)}">${sanitize(comment.account.acct)}</a>
|
||||
<time>${date}</time>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comment-content">
|
||||
${sanitize(comment.content)}
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
document.getElementById("comment-section").innerHTML += comment_html
|
||||
}
|
||||
|
||||
e.target.remove()
|
||||
})
|
||||
</script>
|
||||
{% endif %}
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
46
css/comments.css
Normal file
46
css/comments.css
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
/* TODO(sofia@git.sofiaritz.com): Improve button */
|
||||
|
||||
#comment-load-btn {
|
||||
margin-bottom: 50px;
|
||||
display: block;
|
||||
padding: 5px;
|
||||
color: white;
|
||||
|
||||
transition: all 150ms;
|
||||
background-color: #dc3f99;
|
||||
border: solid 3px;
|
||||
border-color: #f38cc2 #dc158d #dc158d #f38cc2;
|
||||
}
|
||||
|
||||
#comment-load-btn:hover {
|
||||
cursor: pointer;
|
||||
border-color: #d76d9c #ff0088 #ff0088 #d76d9c;
|
||||
}
|
||||
|
||||
.comment {
|
||||
background-color: #221130;
|
||||
border: #382e60 solid 1px;
|
||||
border-radius: 7px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.comment-author {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
padding: 5px;
|
||||
background-color: #382e60;
|
||||
}
|
||||
|
||||
.comment-author-image {
|
||||
border-radius: 3px;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.comment-author-data {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.comment-content {
|
||||
padding: 3px 10px;
|
||||
}
|
||||
2
static/assets/scripts/dompurify.js
Normal file
2
static/assets/scripts/dompurify.js
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -6,6 +6,7 @@ tags:
|
|||
- experimentos
|
||||
- note taking
|
||||
date: 2023-03-12
|
||||
# comment_status: "109965950074102272"
|
||||
---
|
||||
|
||||
## motivación
|
||||
|
|
|
|||
Reference in a new issue