Not a Lemmy script, but I thought it might still be useful for those of you who use Kbin.
The userscript has the following features:
- Downvotes are hidden;
- Heavily downvoted posts fade out;
- The title text of the date also shows in local time;
- Links to the parent, previous, and next comment in comments;
- Some of the sidebar items are removed; and
- Hovering over usernames is disabled.
I tried to make the sections cleanly delineated, so that unwanted features can be easily edited out.
// ==UserScript==
// @name Kbin script
// @namespace https://beehaw.org/u/brie
// @match https://kbin.social/*
// @grant none
// @version 1.1
// @author @brie@beehaw.org
// @description Changes some aspects of comment display
// @run-at document-start
// @license AGPL-3.0-only
// ==/UserScript==
// Custom style
document.head.appendChild(document.createElement('style')).textContent = `\
/* Some color tweaks */
.theme--dark {
--kbin-success-color: #38fa9f;
}
/* Hide sidebar sections */
.related-magazines,
.active-users,
.posts.section,
.entries.section {
display: none;
}
/* Hide downvotes */
.comment span[data-subject-target="downvoteCounter"] {
display: none;
}
`;
window.addEventListener("DOMContentLoaded", () => {
// Rewrite community links to magazine links
for (const link of document.querySelectorAll(`a[href^="/c/"]`)) link.setAttribute("href", `/m/${link.getAttribute("href").slice(3)}`);
const siblings = new Map();
for (const comment of document.querySelectorAll(`.comment`)) {
// Fade out heavily downvoted posts (inspired by Hacker-News).
const upvotes = comment.querySelector(`span[data-subject-target="favCounter"]`)?.textContent | 0;
const downvotes = comment.querySelector(`span[data-subject-target="downvoteCounter"]`)?.textContent | 0;
const boosts = comment.querySelector(`span[data-subject-target="upvoteCounter"]`)?.textContent | 0;
const score = (upvotes + 3) / (downvotes + 1);
if (score < 1) {
comment.style.setProperty("color", `color-mix(in srgb, var(--kbin-section-text-color) ${score*100}%, transparent)`);
comment.style.setProperty("background", `color-mix(in srgb, var(--kbin-section-bg) ${score*100}%, var(--kbin-bg))`);
}
// Show downvotes in the title text
comment.querySelector(`.vote__down > button`)?.setAttribute("title", `Reduce (${downvotes})`);
// Show local date
const timeago = comment.querySelector(`.timeago`);
if (timeago) {
const datetime = timeago.getAttribute("datetime");
if (datetime) timeago.setAttribute("title", `\
${new Date(datetime)}
${datetime}`);
}
// HN-style navigation
const header = comment.querySelector(`:scope > header`);
const parent = comment.getAttribute("data-subject-parent-value");
if (parent) {
const toParent = document.createElement("a");
toParent.href = `#entry-comment-${parent}`;
toParent.textContent = "parent"
header?.appendChild(toParent);
}
const sibling = siblings.get(parent);
siblings.set(parent, comment);
if (sibling) {
const prev = document.createElement("a");
prev.href = `#${sibling.getAttribute("id")}`;
prev.textContent = "prev";
if (parent) header?.appendChild(document.createTextNode(" "));
header?.appendChild(prev);
const next = document.createElement("a");
next.href = `#${comment.getAttribute("id")}`;
next.textContent = "next";
const siblingHeader = sibling.querySelector(`:scope > header`)
if (siblingHeader) {
siblingHeader.appendChild(document.createTextNode(" "));
siblingHeader.appendChild(next);
}
}
}
// Neuter the hover actions
for (const el of document.querySelectorAll(`[data-action="mouseover->kbin#mention"]`)) {
el.removeAttribute("data-action");
}
});
