feat: Rewrite comments thingy from https://carlschwan.eu/2020/12/29/adding-comments-to-your-static-blog-with-mastodon/
This commit is contained in:
daudix
@ -72,7 +72,7 @@ show_powered_by = true
|
||||
# Link to website source
|
||||
show_source = true
|
||||
|
||||
# Based on https://github.com/cassidyjames/cassidyjames.github.io/blob/75cd2a202de7a1026de1ea00a4ef1d5b2675c7ff/_config.yaml#L35-L74
|
||||
# Based on https://carlschwan.eu/2020/12/29/adding-comments-to-your-static-blog-with-mastodon/
|
||||
#
|
||||
# Mastodon-powered commenting.
|
||||
# Values can be overridden in front-matter, e.g.
|
||||
@ -86,9 +86,3 @@ host = "mstdn.social"
|
||||
# Used to determine who the original/verified poster is;
|
||||
# role may be expanded in the future (e.g. for moderation).
|
||||
user = "Daudix"
|
||||
# Optional; required to fetch more than 60 replies to any given blog post.
|
||||
# Application access token with read:statuses scope; NOTE: IF INCLUDED, ANYONE
|
||||
# WILL BE ABLE TO READ THE ASSOCIATED ACCOUNT'S PRIVATE STATUSES. It is highly
|
||||
# recommended to use a dedicated bot/API account to create an application with
|
||||
# scope read:statuses.
|
||||
token = "jTNX9pAV8XEPBby0cPWF6CmGY60kkIy4vidggfxXmoQ"
|
||||
|
||||
@ -1,45 +1,43 @@
|
||||
.instance.op::before,
|
||||
.reblogs::before,
|
||||
.favourites::before {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
display: inline-block;
|
||||
font-family: "bootstrap-icons" !important;
|
||||
font-style: normal;
|
||||
font-variant: normal;
|
||||
font-weight: normal !important;
|
||||
line-height: 1;
|
||||
text-transform: none;
|
||||
vertical-align: -0.125em;
|
||||
}
|
||||
|
||||
section#comments {
|
||||
#comments-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.comment {
|
||||
display: grid;
|
||||
column-gap: 1rem;
|
||||
grid-template-areas:
|
||||
"avatar name"
|
||||
"avatar time"
|
||||
"avatar post"
|
||||
"...... card"
|
||||
"avatar name "
|
||||
"avatar time "
|
||||
"avatar post "
|
||||
"...... interactions";
|
||||
grid-template-columns: min-content;
|
||||
justify-items: start;
|
||||
margin: 2rem 0 2rem 0;
|
||||
|
||||
&.comment-reply {
|
||||
border-left: 0.25rem solid var(--fg-muted-2);
|
||||
border-radius: 0.2rem;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.avatar-link {
|
||||
grid-area: avatar;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
position: relative;
|
||||
width: 4rem;
|
||||
|
||||
.avatar {
|
||||
all: unset;
|
||||
background-color: var(--fg-muted-1);
|
||||
background-position: 50%;
|
||||
background-size: cover;
|
||||
border-radius: var(--rounded-corner);
|
||||
box-shadow: var(--shadow);
|
||||
display: block;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
transition: var(--transition);
|
||||
width: 100%;
|
||||
|
||||
@ -57,9 +55,8 @@ section#comments {
|
||||
|
||||
.author {
|
||||
align-items: center;
|
||||
cursor: default;
|
||||
display: flex;
|
||||
font-weight: bold;
|
||||
font-weight: 600;
|
||||
gap: 0.25rem;
|
||||
grid-area: name;
|
||||
|
||||
@ -68,7 +65,6 @@ section#comments {
|
||||
border-radius: 999px;
|
||||
color: var(--fg-color);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
padding: 0.25rem 0.75rem;
|
||||
text-decoration: none;
|
||||
transition: var(--transition);
|
||||
@ -78,8 +74,12 @@ section#comments {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(var(--active));
|
||||
}
|
||||
|
||||
&.op {
|
||||
background-color: unset;
|
||||
background-color: transparent;
|
||||
color: var(--primary-color);
|
||||
|
||||
&:hover {
|
||||
@ -87,116 +87,52 @@ section#comments {
|
||||
}
|
||||
|
||||
&::before {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
content: "\F4B5";
|
||||
display: inline-block;
|
||||
font-family: "bootstrap-icons" !important;
|
||||
font-style: normal;
|
||||
font-variant: normal;
|
||||
font-weight: normal !important;
|
||||
line-height: 1;
|
||||
margin-inline-end: 0.25rem;
|
||||
margin-inline-start: -0.25rem;
|
||||
text-transform: none;
|
||||
vertical-align: -0.125em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
time {
|
||||
@extend small;
|
||||
.emoji {
|
||||
display: inline;
|
||||
height: 1.25rem;
|
||||
vertical-align: middle;
|
||||
width: 1.25rem;
|
||||
}
|
||||
|
||||
time {
|
||||
color: var(--fg-muted-5);
|
||||
font-size: 0.8rem;
|
||||
grid-area: time;
|
||||
|
||||
&.edited::after {
|
||||
content: " *";
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
grid-area: post;
|
||||
justify-self: stretch;
|
||||
|
||||
p:first-child {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
color: inherit;
|
||||
grid-area: card;
|
||||
max-width: 400px;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
figure {
|
||||
border-radius: var(--rounded-corner);
|
||||
background-color: var(--fg-muted-1);
|
||||
box-shadow: var(--shadow);
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
overflow: hidden;
|
||||
transition: var(--transition);
|
||||
|
||||
img {
|
||||
all: unset;
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-0.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
figcaption {
|
||||
color: var(--fg-color);
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
margin: 0;
|
||||
padding: 1rem;
|
||||
text-align: left;
|
||||
|
||||
h5 {
|
||||
font-weight: 600;
|
||||
all: unset;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 400;
|
||||
color: var(--fg-muted-5);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
* {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Hide the card from the shared post
|
||||
&:first-of-type .card {
|
||||
display: none;
|
||||
}
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
grid-area: interactions;
|
||||
margin-top: 1rem;
|
||||
|
||||
.reblogs,
|
||||
.favourites {
|
||||
.faves {
|
||||
background-color: transparent;
|
||||
border-radius: var(--rounded-corner);
|
||||
font-size: 1rem;
|
||||
color: var(--red-fg);
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-weight: 400;
|
||||
padding: 0.5rem 1rem;
|
||||
@ -204,6 +140,7 @@ section#comments {
|
||||
transition: var(--transition);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--red-bg);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@ -212,58 +149,20 @@ section#comments {
|
||||
}
|
||||
|
||||
&::before {
|
||||
margin-inline-end: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.reblogs {
|
||||
color: var(--orange-fg);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--orange-bg);
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "\F813";
|
||||
}
|
||||
}
|
||||
|
||||
.favourites {
|
||||
color: var(--red-fg);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--red-bg);
|
||||
}
|
||||
|
||||
&::before {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
content: "\F417";
|
||||
display: inline-block;
|
||||
font-family: "bootstrap-icons" !important;
|
||||
font-style: normal;
|
||||
font-variant: normal;
|
||||
font-weight: normal !important;
|
||||
line-height: 1;
|
||||
margin-inline-end: 0.25rem;
|
||||
text-transform: none;
|
||||
vertical-align: -0.125em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.emoji {
|
||||
all: unset;
|
||||
display: inline;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.invisible {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ellipsis::after {
|
||||
content: "…";
|
||||
}
|
||||
|
||||
details {
|
||||
summary {
|
||||
color: var(--yellow-fg);
|
||||
}
|
||||
|
||||
margin-top: 1rem;
|
||||
background-color: var(--yellow-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,8 @@
|
||||
background-color: white;
|
||||
float: right;
|
||||
height: 155px;
|
||||
margin: 3rem 0 0 0;
|
||||
margin-left: 1rem;
|
||||
margin-top: 3rem;
|
||||
padding: 15px;
|
||||
width: 155px;
|
||||
|
||||
|
||||
@ -1,134 +1,152 @@
|
||||
<!--
|
||||
Based on https://github.com/cassidyjames/cassidyjames.github.io/blob/99782788a7e3ba3cc52d6803010873abd1b02b9e/_includes/comments.html
|
||||
which were inspired by https://codeberg.org/jwildeboer/jwildeboersource/src/commit/45f9750bb53b9f0f6f28399ce4d21785a3bb7d22/_includes/fediverse_comments.html
|
||||
-->
|
||||
<!-- Taken from the https://carlschwan.eu/2020/12/29/adding-comments-to-your-static-blog-with-mastodon/ -->
|
||||
|
||||
{% if page.extra.comments.host %}
|
||||
{% set host = page.extra.comments.host %}
|
||||
{% set host = page.extra.comments.host %}
|
||||
{% else %}
|
||||
{% set host = config.extra.comments.host %}
|
||||
{% endif %}
|
||||
|
||||
{% if page.extra.comments.domain %}
|
||||
{% set domain = page.extra.comments.domain %}
|
||||
{% elif config.extra.comments.domain %}
|
||||
{% set domain = config.extra.comments.domain %}
|
||||
{% else %}
|
||||
{% set domain = host %}
|
||||
{% set host = config.extra.comments.host %}
|
||||
{% endif %}
|
||||
|
||||
{% if page.extra.comments.user %}
|
||||
{% set username = page.extra.comments.user %}
|
||||
{% set username = page.extra.comments.user %}
|
||||
{% else %}
|
||||
{% set username = config.extra.comments.user %}
|
||||
{% endif %}
|
||||
|
||||
{% if page.extra.comments.token %}
|
||||
{% set token = page.extra.comments.token %}
|
||||
{% else %}
|
||||
{% set token = config.extra.comments.token %}
|
||||
{% set username = config.extra.comments.user %}
|
||||
{% endif %}
|
||||
|
||||
{% set id = page.extra.comments.id %}
|
||||
|
||||
{% if config.extra.comments.verified %}
|
||||
{% set verified = config.extra.comments.verified | jsonify %}
|
||||
{% else %}
|
||||
{% set verified = "[]" %}
|
||||
{% endif %}
|
||||
|
||||
<section id="comments" class="article comments">
|
||||
<img id="qrcode" class="no-hover pixels" src="https://api.qrserver.com/v1/create-qr-code/?data=https://{{ host }}/@{{ username }}/{{ id }}">
|
||||
|
||||
<section id="comments">
|
||||
<img id="qrcode" class="no-hover pixels"
|
||||
src="https://api.qrserver.com/v1/create-qr-code/?data=https://{{ host }}/@{{ username }}/{{ id }}">
|
||||
<h2>Comments</h2>
|
||||
<p>Comment on this blog post by publicly replying to <a href="https://{{ host }}/@{{ username }}/{{ id }}">this Mastodon post</a> using a Mastodon or other ActivityPub/Fediverse account. Known non-private replies are displayed below.</p>
|
||||
<p>
|
||||
You can respond to this <a href="https://{{ host }}/@{{ username }}/{{ id }}">post</a> with an account on the
|
||||
Fediverse (e.g Mastodon, Akkoma, Sharkey).
|
||||
</p>
|
||||
<p>
|
||||
<small>
|
||||
Since Fediverse is decentralized, you can use your existing account hosted by a Mastodon or a compatible server if
|
||||
you
|
||||
don't have an account on this one. Known non-private replies are displayed below.
|
||||
</small>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a id="load-comments" class="inline-button" onclick="loadComments()">Load comments…</a>
|
||||
</p>
|
||||
<div id="comments-wrapper">
|
||||
<p><small>Press the button below to load comments if they exist, if not, be the first!</small></p>
|
||||
<noscript><p>Loading comments relies on JavaScript. Try enabling JavaScript and reloading, or visit <a href="https://{{ host }}/@{{ username }}/{{ id }}">the original post</a> on Mastodon.</p></noscript>
|
||||
<a onclick="loadComments()" class="inline-button">Load comments…</a>
|
||||
<noscript>
|
||||
<p>
|
||||
Loading comments relies on JavaScript. Try enabling JavaScript and
|
||||
reloading, or visit
|
||||
<a href="https://{{ host }}/@{{ username }}/{{ id }}">
|
||||
the original post
|
||||
</a>
|
||||
on Mastodon.
|
||||
</p>
|
||||
</noscript>
|
||||
</div>
|
||||
<noscript>You need JavaScript to view the comments.</noscript>
|
||||
<script type="text/javascript">
|
||||
function escapeHtml(unsafe) {
|
||||
return unsafe
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/"/g, """)
|
||||
.replace(/'/g, "'");
|
||||
}
|
||||
function emojify(input, emojis) {
|
||||
let output = input;
|
||||
|
||||
<script>
|
||||
// loadComments();
|
||||
emojis.forEach((emoji) => {
|
||||
let picture = document.createElement("picture");
|
||||
|
||||
let source = document.createElement("source");
|
||||
source.setAttribute("srcset", escapeHtml(emoji.url));
|
||||
source.setAttribute("media", "(prefers-reduced-motion: no-preference)");
|
||||
|
||||
let img = document.createElement("img");
|
||||
img.className = "emoji";
|
||||
img.setAttribute("src", escapeHtml(emoji.static_url));
|
||||
img.setAttribute("alt", `:${emoji.shortcode}:`);
|
||||
img.setAttribute("title", `:${emoji.shortcode}:`);
|
||||
img.setAttribute("width", "20");
|
||||
img.setAttribute("height", "20");
|
||||
|
||||
picture.appendChild(source);
|
||||
picture.appendChild(img);
|
||||
|
||||
output = output.replace(`:${emoji.shortcode}:`, picture.outerHTML);
|
||||
});
|
||||
|
||||
return output;
|
||||
}
|
||||
|
||||
function loadComments() {
|
||||
const HOST = "{{ host }}";
|
||||
const DOMAIN = "{{ domain }}";
|
||||
const USERNAME = "{{ username }}";
|
||||
const TOKEN = "{{ token }}";
|
||||
const VERIFIED = "{{ verified }}";
|
||||
const ID = "{{ id }}";
|
||||
|
||||
const SUPPORTED_MEDIA = [
|
||||
"image",
|
||||
"gifv",
|
||||
];
|
||||
|
||||
const STATUS_URL = `https://${ HOST }/api/v1/statuses/${ ID }`;
|
||||
|
||||
const REQUEST_HEADERS = new Headers();
|
||||
if(TOKEN != ""){
|
||||
REQUEST_HEADERS.append("Authorization", "Bearer " + TOKEN);
|
||||
}
|
||||
|
||||
const requestOptions = {
|
||||
method: "GET",
|
||||
headers: REQUEST_HEADERS,
|
||||
mode: "cors",
|
||||
cache: "default",
|
||||
};
|
||||
|
||||
const STATUS_REQUEST = new Request(STATUS_URL, requestOptions);
|
||||
const CONTEXT_REQUEST = new Request(STATUS_URL + "/context", requestOptions);
|
||||
|
||||
let commentsWrapper = document.getElementById("comments-wrapper");
|
||||
|
||||
fetch(STATUS_REQUEST).then((response) => {
|
||||
return response.json();
|
||||
}).then((status) => {
|
||||
fetch(CONTEXT_REQUEST).then((response) => {
|
||||
document.getElementById("load-comments").innerHTML = "Loading…";
|
||||
fetch("https://{{ host }}/api/v1/statuses/{{ id }}/context")
|
||||
.then(function (response) {
|
||||
return response.json();
|
||||
}).then((data) => {
|
||||
let descendants = data['descendants'];
|
||||
if(
|
||||
})
|
||||
.then(function (data) {
|
||||
let descendants = data["descendants"];
|
||||
if (
|
||||
descendants &&
|
||||
Array.isArray(descendants) &&
|
||||
descendants.length > 0
|
||||
) {
|
||||
commentsWrapper.innerHTML = "";
|
||||
descendants.unshift(status);
|
||||
|
||||
descendants.forEach((status) => {
|
||||
if( status.account.display_name.length > 0 ) {
|
||||
status.account.display_name = escapeHtml(status.account.display_name);
|
||||
descendants.forEach(function (status) {
|
||||
console.log(descendants);
|
||||
if (status.account.display_name.length > 0) {
|
||||
status.account.display_name = escapeHtml(
|
||||
status.account.display_name
|
||||
);
|
||||
status.account.display_name = emojify(
|
||||
status.account.display_name,
|
||||
status.account.emojis
|
||||
);
|
||||
} else {
|
||||
status.account.display_name = status.account.username;
|
||||
};
|
||||
}
|
||||
|
||||
let instance = "";
|
||||
if( status.account.acct.includes("@") ) {
|
||||
if (status.account.acct.includes("@")) {
|
||||
instance = status.account.acct.split("@")[1];
|
||||
} else {
|
||||
instance = DOMAIN;
|
||||
instance = "{{ host }}";
|
||||
}
|
||||
|
||||
const isReply = status.in_reply_to_id !== "{{ id }}";
|
||||
|
||||
let op = false;
|
||||
if (status.account.acct == "{{ username }}") {
|
||||
op = true;
|
||||
}
|
||||
|
||||
status.content = emojify(status.content, status.emojis);
|
||||
|
||||
let avatarSource = document.createElement("source");
|
||||
avatarSource.setAttribute("srcset", escapeHtml(status.account.avatar));
|
||||
avatarSource.setAttribute("media", "(prefers-reduced-motion: no-preference)");
|
||||
avatarSource.setAttribute(
|
||||
"srcset",
|
||||
escapeHtml(status.account.avatar)
|
||||
);
|
||||
avatarSource.setAttribute(
|
||||
"media",
|
||||
"(prefers-reduced-motion: no-preference)"
|
||||
);
|
||||
|
||||
let avatarImg = document.createElement("img");
|
||||
avatarImg.className = "avatar";
|
||||
avatarImg.setAttribute("src", escapeHtml(status.account.avatar_static));
|
||||
avatarImg.setAttribute(
|
||||
"src",
|
||||
escapeHtml(status.account.avatar_static)
|
||||
);
|
||||
avatarImg.setAttribute(
|
||||
"alt",
|
||||
`@${ status.account.username }@${ instance } avatar`
|
||||
`@${status.account.username}@${instance} avatar`
|
||||
);
|
||||
|
||||
let avatarPicture = document.createElement("picture");
|
||||
@ -141,7 +159,7 @@ which were inspired by https://codeberg.org/jwildeboer/jwildeboersource/src/comm
|
||||
avatar.setAttribute("rel", "external nofollow");
|
||||
avatar.setAttribute(
|
||||
"title",
|
||||
`View profile at @${ status.account.username }@${ instance }`
|
||||
`View profile at @${status.account.username}@${instance}`
|
||||
);
|
||||
avatar.appendChild(avatarPicture);
|
||||
|
||||
@ -150,7 +168,7 @@ which were inspired by https://codeberg.org/jwildeboer/jwildeboersource/src/comm
|
||||
instanceBadge.setAttribute("href", status.account.url);
|
||||
instanceBadge.setAttribute(
|
||||
"title",
|
||||
`@${ status.account.username }@${ instance }`
|
||||
`@${status.account.username}@${instance}`
|
||||
);
|
||||
instanceBadge.setAttribute("rel", "external nofollow");
|
||||
instanceBadge.textContent = instance;
|
||||
@ -169,9 +187,11 @@ which were inspired by https://codeberg.org/jwildeboer/jwildeboersource/src/comm
|
||||
let permalink = document.createElement("a");
|
||||
permalink.setAttribute("href", status.url);
|
||||
permalink.setAttribute("itemprop", "url");
|
||||
permalink.setAttribute("title", `View comment at ${ instance }`);
|
||||
permalink.setAttribute("title", `View comment at ${instance}`);
|
||||
permalink.setAttribute("rel", "external nofollow");
|
||||
permalink.textContent = new Date(status.created_at).toLocaleString('en-IE', {
|
||||
permalink.textContent = new Date(
|
||||
status.created_at
|
||||
).toLocaleString("en-IE", {
|
||||
dateStyle: "long",
|
||||
timeStyle: "short",
|
||||
});
|
||||
@ -180,150 +200,33 @@ which were inspired by https://codeberg.org/jwildeboer/jwildeboersource/src/comm
|
||||
timestamp.setAttribute("datetime", status.created_at);
|
||||
timestamp.appendChild(permalink);
|
||||
|
||||
if(status.edited_at != null) {
|
||||
timestamp.classList.add("edited");
|
||||
timestamp.setAttribute(
|
||||
"title",
|
||||
"Edited " + new Date(status.edited_at).toLocaleString('en-IE', {
|
||||
dateStyle: "long",
|
||||
timeStyle: "short",
|
||||
})
|
||||
)
|
||||
};
|
||||
|
||||
let main = document.createElement("main");
|
||||
main.setAttribute("itemprop", "text");
|
||||
|
||||
if(status.sensitive == true || status.spoiler_text != "") {
|
||||
let summary = document.createElement("summary");
|
||||
if(status.spoiler_text == "") {
|
||||
status.spoiler_text == "Sensitive";
|
||||
}
|
||||
summary.innerHTML = status.spoiler_text;
|
||||
|
||||
let spoiler = document.createElement("details");
|
||||
spoiler.appendChild(summary);
|
||||
spoiler.innerHTML += status.content;
|
||||
|
||||
main.appendChild(spoiler);
|
||||
} else {
|
||||
main.innerHTML = status.content;
|
||||
}
|
||||
main.innerHTML = status.content;
|
||||
|
||||
let interactions = document.createElement("footer");
|
||||
|
||||
if(status.reblogs_count > 0) {
|
||||
let reblogs = document.createElement("a");
|
||||
reblogs.setAttribute("href", status.url + "/reblogs");
|
||||
reblogs.className = "reblogs";
|
||||
reblogs.setAttribute("title", "Boosts");
|
||||
reblogs.textContent = status.reblogs_count;
|
||||
|
||||
interactions.appendChild(reblogs);
|
||||
}
|
||||
|
||||
if(status.favourites_count > 0) {
|
||||
let favourites = document.createElement("a");
|
||||
favourites.setAttribute("href", status.url + "/favourites");
|
||||
favourites.className = "favourites";
|
||||
favourites.setAttribute("title", "Favorites");
|
||||
favourites.textContent = status.favourites_count;
|
||||
|
||||
interactions.appendChild(favourites);
|
||||
}
|
||||
let faves = document.createElement("a");
|
||||
faves.className = "faves";
|
||||
faves.setAttribute("href", `${status.url}/favourites`);
|
||||
faves.setAttribute("title", `Favorites from ${instance}`);
|
||||
faves.textContent = status.favourites_count;
|
||||
interactions.appendChild(faves);
|
||||
|
||||
let comment = document.createElement("article");
|
||||
comment.id = `comment-${ status.id }`;
|
||||
comment.className = "comment";
|
||||
comment.id = `comment-${status.id}`;
|
||||
comment.className = isReply ? "comment comment-reply" : "comment";
|
||||
comment.setAttribute("itemprop", "comment");
|
||||
comment.setAttribute("itemtype", "http://schema.org/Comment");
|
||||
comment.appendChild(avatar);
|
||||
comment.appendChild(header);
|
||||
comment.appendChild(timestamp);
|
||||
comment.appendChild(main);
|
||||
|
||||
let attachments = status.media_attachments;
|
||||
if(
|
||||
attachments &&
|
||||
Array.isArray(attachments) &&
|
||||
attachments.length > 0
|
||||
) {
|
||||
attachments.forEach((attachment) => {
|
||||
if( SUPPORTED_MEDIA.includes(attachment.type) ){
|
||||
let media = document.createElement("a");
|
||||
media.className = "card";
|
||||
media.setAttribute("href", attachment.url);
|
||||
media.setAttribute("rel", "external nofollow");
|
||||
|
||||
let mediaElement;
|
||||
switch(attachment.type){
|
||||
case "image":
|
||||
mediaElement = document.createElement("img");
|
||||
mediaElement.setAttribute("src", attachment.preview_url);
|
||||
|
||||
if(attachment.description != null) {
|
||||
mediaElement.setAttribute("alt", attachment.description);
|
||||
mediaElement.setAttribute("title", attachment.description);
|
||||
}
|
||||
|
||||
media.appendChild(mediaElement);
|
||||
break;
|
||||
|
||||
case "gifv":
|
||||
mediaElement = document.createElement("video");
|
||||
mediaElement.setAttribute("src", attachment.url);
|
||||
mediaElement.setAttribute("autoplay", "");
|
||||
mediaElement.setAttribute("playsinline", "");
|
||||
mediaElement.setAttribute("loop", "");
|
||||
|
||||
if(attachment.description != null) {
|
||||
mediaElement.setAttribute("aria-title", attachment.description);
|
||||
mediaElement.setAttribute("title", attachment.description);
|
||||
}
|
||||
|
||||
media.appendChild(mediaElement);
|
||||
break;
|
||||
}
|
||||
|
||||
comment.appendChild(media);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
} else if(
|
||||
status.card != null &&
|
||||
status.card.image != null &&
|
||||
!status.card.url.startsWith("{{ get_url(path='') }}")
|
||||
) {
|
||||
let cardImg = document.createElement("img");
|
||||
cardImg.setAttribute("src", status.card.image);
|
||||
|
||||
let cardTitle = document.createElement("h5");
|
||||
cardTitle.innerHTML = status.card.title;
|
||||
|
||||
let cardDescription = document.createElement("p");
|
||||
cardDescription.innerHTML = status.card.description;
|
||||
|
||||
let cardCaption = document.createElement("figcaption");
|
||||
cardCaption.appendChild(cardTitle);
|
||||
cardCaption.appendChild(cardDescription);
|
||||
|
||||
let cardFigure = document.createElement("figure");
|
||||
cardFigure.appendChild(cardImg);
|
||||
cardFigure.appendChild(cardCaption);
|
||||
|
||||
let card = document.createElement("a");
|
||||
card.className = "card";
|
||||
card.setAttribute("href", status.card.url);
|
||||
card.setAttribute("rel", "external nofollow");
|
||||
card.appendChild(cardFigure);
|
||||
|
||||
comment.appendChild(card);
|
||||
if (status.favourites_count > 0) {
|
||||
comment.appendChild(interactions);
|
||||
}
|
||||
|
||||
comment.appendChild(interactions);
|
||||
|
||||
if(status.account.acct == USERNAME) {
|
||||
if (op === true) {
|
||||
comment.classList.add("op");
|
||||
|
||||
avatar.classList.add("op");
|
||||
@ -337,64 +240,14 @@ which were inspired by https://codeberg.org/jwildeboer/jwildeboersource/src/comm
|
||||
"title",
|
||||
"Blog post author: " + instanceBadge.getAttribute("title")
|
||||
);
|
||||
} else if( VERIFIED.includes(status.account.acct) ) {
|
||||
comment.classList.add("verified");
|
||||
|
||||
avatar.classList.add("verified");
|
||||
avatar.setAttribute(
|
||||
"title",
|
||||
avatar.getAttribute("title") + " (verified by site owner)"
|
||||
);
|
||||
|
||||
instanceBadge.classList.add("verified");
|
||||
instanceBadge.setAttribute(
|
||||
"title",
|
||||
instanceBadge.getAttribute("title") + " (verified by site owner)"
|
||||
);
|
||||
}
|
||||
|
||||
commentsWrapper.innerHTML += comment.outerHTML;
|
||||
});
|
||||
}
|
||||
let loadCommentsButton = document.getElementById("load-comments");
|
||||
loadCommentsButton.remove();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function emojify(input, emojis) {
|
||||
let output = input;
|
||||
|
||||
emojis.forEach(emoji => {
|
||||
let picture = document.createElement("picture");
|
||||
|
||||
let source = document.createElement("source");
|
||||
source.setAttribute("srcset", escapeHtml(emoji.url));
|
||||
source.setAttribute("media", "(prefers-reduced-motion: no-preference)");
|
||||
|
||||
let img = document.createElement("img");
|
||||
img.className = "emoji";
|
||||
img.setAttribute("src", escapeHtml(emoji.static_url));
|
||||
img.setAttribute("alt", `:${ emoji.shortcode }:`);
|
||||
img.setAttribute("title", `:${ emoji.shortcode }:`);
|
||||
img.setAttribute("width", "20");
|
||||
img.setAttribute("height", "20");
|
||||
|
||||
picture.appendChild(source);
|
||||
picture.appendChild(img);
|
||||
|
||||
output = output.replace(`:${ emoji.shortcode }:`, picture.outerHTML);
|
||||
});
|
||||
|
||||
return output;
|
||||
}
|
||||
|
||||
function escapeHtml(unsafe) {
|
||||
return unsafe
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/'/g, "'")
|
||||
.replace(/"/g, """)
|
||||
;
|
||||
}
|
||||
</script>
|
||||
</section>
|
||||
Reference in New Issue
Block a user