Icycoide/RSCC-Page
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Switch to Ametrine

Browse source
This commit is contained in:
root 2025-03-04 04:23:12 +01:00
parent 8d2b031b5a
commit 53353f0a94
76 changed files with 6164 additions and 2645 deletions
Download patch file Download diff file Expand all files Collapse all files

126
public/comments.js
View file

@ -1,21 +1,18 @@
// Taken from https://carlschwan.eu/2020/12/29/adding-comments-to-your-static-blog-with-mastodon/
// Attachment, card, and spoiler code taken from https://github.com/cassidyjames/cassidyjames.github.io/blob/99782788a7e3ba3cc52d6803010873abd1b02b9e/_includes/comments.html#L251-L296
// Based on https://carlschwan.eu/2020/12/29/adding-comments-to-your-static-blog-with-mastodon/
// Attachment, card, and spoiler code is from https://github.com/cassidyjames/cassidyjames.github.io/blob/99782788a7e3ba3cc52d6803010873abd1b02b9e/_includes/comments.html#L251-L296
let blogPostAuthorText = document.getElementById("blog-post-author-text").textContent;
let boostsFromText = document.getElementById("boosts-from-text").textContent;
let dateLocale = document.getElementById("date-locale").textContent;
let favesFromText = document.getElementById("faves-from-text").textContent;
let host = document.getElementById("host").textContent;
let id = document.getElementById("id").textContent;
let lazyAsyncImage = document.getElementById("lazy-async-image").textContent;
let relAttributes = document.getElementById("rel-attributes").textContent;
let dateLocale = document.getElementById("date-locale").textContent;
let host = document.getElementById("host").textContent;
let user = document.getElementById("user").textContent;
let id = document.getElementById("id").textContent;
let articleAuthorText = document.getElementById("article-author-text").textContent;
let loadingText = document.getElementById("loading-text").textContent;
let noCommentsText = document.getElementById("no-comments-text").textContent;
let relAttributes = document.getElementById("rel-attributes").textContent;
let reloadText = document.getElementById("reload-text").textContent;
let sensitiveText = document.getElementById("sensitive-text").textContent;
let user = document.getElementById("user").textContent;
let viewCommentText = document.getElementById("view-comment-text").textContent;
let viewProfileText = document.getElementById("view-profile-text").textContent;
document.getElementById("load-comments").addEventListener("click", loadComments);
@ -25,8 +22,9 @@ function escapeHtml(unsafe) {
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.replace(/"/g, "&quot;")
.replace(/'/g, "&#039;");
.replace(/'/g, "&#x27;");
}
function emojify(input, emojis) {
let output = input;
@ -40,8 +38,9 @@ function emojify(input, emojis) {
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", "24");
img.setAttribute("height", "24");
if (lazyAsyncImage == "true") {
img.setAttribute("decoding", "async");
img.setAttribute("loading", "lazy");
@ -146,39 +145,24 @@ function loadComments() {
avatar.className = "avatar-link";
avatar.setAttribute("href", status.account.url);
avatar.setAttribute("rel", relAttributes);
avatar.setAttribute(
"title",
`${viewProfileText} @${status.account.username}@${instance}`
);
avatar.appendChild(avatarPicture);
comment.appendChild(avatar);
let instanceBadge = document.createElement("a");
instanceBadge.className = "instance";
instanceBadge.setAttribute("href", status.account.url);
instanceBadge.setAttribute(
"title",
`@${status.account.username}@${instance}`
);
instanceBadge.setAttribute("rel", relAttributes);
instanceBadge.textContent = instance;
let display = document.createElement("span");
let display = document.createElement("a");
display.className = "display";
display.setAttribute("href", status.account.url);
display.setAttribute("rel", relAttributes);
display.setAttribute("itemprop", "author");
display.setAttribute("itemtype", "http://schema.org/Person");
display.innerHTML = status.account.display_name;
let header = document.createElement("header");
header.className = "author";
header.appendChild(display);
header.appendChild(instanceBadge);
comment.appendChild(header);
let instanceBadge = document.createElement("span");
instanceBadge.className = "instance";
instanceBadge.textContent = `@${status.account.username}@${instance}`;
let permalink = document.createElement("a");
permalink.setAttribute("href", status.url);
permalink.setAttribute("itemprop", "url");
permalink.setAttribute("title", `${viewCommentText} ${instance}`);
permalink.setAttribute("rel", relAttributes);
permalink.textContent = new Date(
status.created_at
@ -189,9 +173,15 @@ function loadComments() {
let timestamp = document.createElement("time");
timestamp.setAttribute("datetime", status.created_at);
timestamp.classList.add("timestamp");
timestamp.appendChild(permalink);
permalink.classList.add("external");
comment.appendChild(timestamp);
let header = document.createElement("header");
header.appendChild(display);
header.appendChild(instanceBadge);
header.appendChild(timestamp);
comment.appendChild(header);
let main = document.createElement("main");
main.setAttribute("itemprop", "text");
@ -232,7 +222,6 @@ function loadComments() {
mediaElement.setAttribute("src", attachment.preview_url);
if (attachment.description != null) {
mediaElement.setAttribute("alt", attachment.description);
mediaElement.setAttribute("title", attachment.description);
}
@ -254,7 +243,6 @@ function loadComments() {
mediaElement.setAttribute("controls", "");
if (attachment.description != null) {
mediaElement.setAttribute("aria-title", attachment.description);
mediaElement.setAttribute("title", attachment.description);
}
@ -273,7 +261,6 @@ function loadComments() {
mediaElement.setAttribute("loop", "");
if (attachment.description != null) {
mediaElement.setAttribute("aria-title", attachment.description);
mediaElement.setAttribute("title", attachment.description);
}
@ -290,7 +277,6 @@ function loadComments() {
mediaElement.setAttribute("controls", "");
if (attachment.description != null) {
mediaElement.setAttribute("aria-title", attachment.description);
mediaElement.setAttribute("title", attachment.description);
}
@ -315,10 +301,9 @@ function loadComments() {
let boosts = document.createElement("a");
boosts.className = "boosts";
boosts.setAttribute("href", `${status.url}/reblogs`);
boosts.setAttribute("title", `${boostsFromText}`.replace("$INSTANCE", instance));
let boostsIcon = document.createElement("i");
boostsIcon.className = "icon";
boostsIcon.classList.add("ph-bold", "ph-repeat");
boosts.appendChild(boostsIcon);
boosts.insertAdjacentHTML('beforeend', ` ${status.reblogs_count}`);
interactions.appendChild(boosts);
@ -326,13 +311,52 @@ function loadComments() {
let faves = document.createElement("a");
faves.className = "faves";
faves.setAttribute("href", `${status.url}/favourites`);
faves.setAttribute("title", `${favesFromText}`.replace("$INSTANCE", instance));
let favesIcon = document.createElement("i");
favesIcon.className = "icon";
favesIcon.classList.add("ph-bold", "ph-star");
faves.appendChild(favesIcon);
faves.insertAdjacentHTML('beforeend', ` ${status.favourites_count}`);
interactions.appendChild(faves);
if (
status.reactions &&
Array.isArray(status.reactions) &&
status.reactions.length > 0
) {
let reactions = document.createElement("div");
reactions.classList.add("reactions", "overshoot-row");
status.reactions.forEach(reaction => {
let reactionElement = document.createElement("span");
reactionElement.className = "reaction";
if (reaction.url) {
// Custom emoji
let img = document.createElement("img");
img.className = "emoji";
img.setAttribute("src", escapeHtml(reaction.url));
img.setAttribute("title", `${reaction.name}`);
img.setAttribute("width", "24");
img.setAttribute("height", "24");
reactionElement.appendChild(img);
} else {
// Unicode emoji
let emoji = document.createElement("span");
emoji.textContent = reaction.name;
reactionElement.appendChild(emoji);
}
// Append the count
let count = document.createElement("span");
count.textContent = reaction.count;
reactionElement.appendChild(count);
reactions.appendChild(reactionElement);
});
interactions.appendChild(reactions);
}
comment.appendChild(interactions);
if (status.card != null) {
@ -370,21 +394,11 @@ function loadComments() {
if (op === true) {
comment.classList.add("op");
avatar.classList.add("op");
avatar.setAttribute(
"title",
`${blogPostAuthorText}: ` + avatar.getAttribute("title")
);
instanceBadge.classList.add("op");
instanceBadge.setAttribute(
"title",
`${blogPostAuthorText}: ` + instanceBadge.getAttribute("title")
);
instanceBadge.setAttribute("title", articleAuthorText);
}
commentsWrapper.innerHTML += comment.outerHTML;
commentsWrapper.appendChild(comment);
});
}