Programming

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      @[email protected]
// @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");
  }
});