sofia/website-cb-mirror
1
0
Fork 0
mirror of https://codeberg.org/sofiaritz/website.git synced 2023-09-06 01:24:41 +00:00
Code Issues Projects Releases Packages Wiki Activity

Implement comments

Browse source 
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:
Sofía Aritz 2023-03-17 00:41:51 +01:00
parent a4d6b3c3e7
commit 8876c53ecb
5 changed files with 99 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
_includes/post.njk
View file

@ -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 %}

42
_includes/simple_page.njk
View file

@ -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
View 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
View file

File diff suppressed because one or more lines are too long

1
weblog/note-taking-experiment.md
View file

@ -6,6 +6,7 @@ tags:
- experimentos
- note taking
date: 2023-03-12
# comment_status: "109965950074102272"
---
## motivación