name-color, honestly it WORKS :D

serverside/name-color.ts

@@ -51,18 +51,26 @@ async function update_name_color(name: string) {
 }
 
 function cssify({ requester }: { requester?: string }): string {
+    const preamble = `/* customized: ${
+        Object.entries(colors)
+            .filter(([_, { color }]) => color)
+            .map(([name, _]) => name)
+            .join(", ")
+    } */\n/* look, i don't like !important either, but i think it's a better choice than some lame .spec.ific.ity.hack.ing */\n\n`;
+
     let vars = `:root {\n`;
     if (requester && colors[requester]) {
         vars += `--name-color: var(--name-color-${requester});\n`;
     }
-    let classes = ".name { color: var(--name-color); }\n";
+    let classes = "";
     for (const [name, { color }] of Object.entries(colors)) {
         if (!color) continue;
         vars += `--name-color-${name}: ${color};\n`;
-        classes += `.name-${name}{--name-color:var(--name-color-${name})}`;
+        classes +=
+            `a[href$='${name}']{color: var(--name-color-${name}) !important;}\n`;
     }
-    vars += "}\n";
-    return vars + classes;
+    vars += "}\n\n";
+    return preamble + vars + classes;
 }
 
 // TODO: ONE BIG REQUEST/RESPONSE DUHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHh

userscripts/name-color.js

@@ -1,21 +1,61 @@
 // ==UserScript==
-// @name         Custom Coloring of Names for Cohost
+// @name         name-color: cohost edition!
 // @namespace    https://terezi.pyrope.net
 // @version      2024-07-10
-// @description  looks in profiles for `name-color: `
+// @description  colors names based on `name-color:` statements in profiles. there are no other editions
 // @author       mehbark
 // @match        https://*.cohost.org/*
 // @icon         https://www.google.com/s2/favicons?sz=64&domain=cohost.org
 // @grant        none
 // ==/UserScript==
 
-const REGEX = /name-color: (rgb\([^()]+\)|[0-9a-fA-F]+)/;
+const mentionee = elem => elem.href.split("/").at(-1);
 
-(async function() {
-  'use strict';
-  const resp = await fetch("https://cohost.org/mehbark");
-  if (!resp.ok) return;
-  const body = await resp.text();
-  console.log(body);
-  console.log(body.match(REGEX));
-})();
+function doit() {
+    "use strict";
+
+    // not just literal mentions btw
+    const mentions = [
+        ...document.querySelectorAll("a[href^='https://cohost.org/']"),
+    ].filter(
+        a =>
+            !(
+                a.href.includes("/rc/") ||
+                // sorry, @post
+                a.href.includes("/post/") ||
+                // sorry, @tagged
+                a.href.includes("/tagged/") ||
+                // sorry, @ask
+                a.href.endsWith("/ask") ||
+                a.href.endsWith("/")
+            )
+    );
+
+    const names = [...new Set(mentions.map(mentionee))];
+
+    const requester = document
+        .querySelector("header")
+        .querySelector("span")
+        .innerText.slice(1);
+
+    const url = new URL("https://pyrope.net/name-color/style.css");
+
+    url.searchParams.append("requester", requester);
+    for (const name of names) {
+        url.searchParams.append("name", name);
+    }
+
+    let style = document.head.querySelector("#name-color-stylesheet");
+    if (!style) {
+        style = document.createElement("link");
+        style.id = "name-color-stylesheet";
+        style.rel = "stylesheet";
+        document.head.appendChild(style);
+    }
+    style.href = url.toString();
+}
+
+new MutationObserver(doit).observe(document, {
+    subtree: true,
+    childList: true,
+});