mirror of
https://codeberg.org/sofiaritz/website.git
synced 2023-09-06 01:24:41 +00:00
115 lines
4.5 KiB
Plaintext
115 lines
4.5 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<link rel="icon" href="/favicon.ico">
|
|
<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>
|
|
<h1 class="top-title">sofi web</h1>
|
|
<div class="page-container">
|
|
<nav>
|
|
<div class="navbar">
|
|
{% if english %}
|
|
<div>
|
|
<i>me</i>
|
|
<ul>
|
|
<li><a href="/en">home and about me</a></li>
|
|
<li><a href="/en/contact">contact</a></li>
|
|
</ul>
|
|
</div>
|
|
{% else %}
|
|
<div>
|
|
<i>yo</i>
|
|
<ul>
|
|
<li><a href="/">inicio y sobre mí</a></li>
|
|
<li><a href="/contact">contacto</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<i>mi cabeza</i>
|
|
<ul>
|
|
<li><a href="/weblog">weblog</a></li>
|
|
<li><a href="/recommendations">recomendaciones</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<i>creaciones</i>
|
|
<ul>
|
|
<li><a href="/projects">proyectos</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<i>sitios</i>
|
|
<ul>
|
|
<li><a href="/links">enlaces</a></li>
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div>
|
|
<i>global</i>
|
|
<ul>
|
|
<li><a href="/">español</a></li>
|
|
<li><a href="/en">english</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<main>
|
|
{{ 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>
|