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
|
layout: simple_page.njk
|
||||||
|
load_comments_script: true
|
||||||
---
|
---
|
||||||
|
|
||||||
<h1>{{ title }}</h1>
|
<h1>{{ title }}</h1>
|
||||||
|
|
@ -16,3 +17,10 @@ layout: simple_page.njk
|
||||||
|
|
||||||
|
|
||||||
{{ content | safe }}
|
{{ 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>
|
<title>{% if title %} {{ title }} - {% endif %}sofi web</title>
|
||||||
<link rel="stylesheet" href="/css/app.css" type="text/css">
|
<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/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">
|
<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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<a class="__hidden" href="https://hachyderm.io/@sofiaritz" rel="me">Mastodon</a>
|
<a class="__hidden" href="https://hachyderm.io/@sofiaritz" rel="me">Mastodon</a>
|
||||||
|
|
@ -50,5 +54,43 @@
|
||||||
{{ content | safe }}
|
{{ content | safe }}
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</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>
|
</body>
|
||||||
</html>
|
</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
|
- experimentos
|
||||||
- note taking
|
- note taking
|
||||||
date: 2023-03-12
|
date: 2023-03-12
|
||||||
|
# comment_status: "109965950074102272"
|
||||||
---
|
---
|
||||||
|
|
||||||
## motivación
|
## motivación
|
||||||
|
|
|
||||||
Reference in a new issue