assets/images/tab-icons/chemistry.svg

@@ -1,7 +1,5 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg width="100%" height="100%" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-    <g transform="matrix(0.985093,0,0,0.985093,0.239557,0.23851)">
+    <path d="M12.011,14.392L12.011,3.941C12.011,3.55 12.166,3.174 12.443,2.897C12.72,2.62 13.095,2.465 13.487,2.465L18.654,2.465C19.045,2.465 19.421,2.62 19.698,2.897C19.974,3.174 20.13,3.55 20.13,3.941L20.13,14.392L25.938,24.999C26.458,25.948 26.439,27.101 25.887,28.033C25.335,28.964 24.333,29.535 23.251,29.535L8.89,29.535C7.808,29.535 6.805,28.964 6.254,28.033C5.702,27.101 5.682,25.948 6.202,24.999L12.011,14.392ZM18.13,4.465L14.011,4.465L14.011,14.648C14.011,14.816 13.968,14.981 13.888,15.128C13.888,15.128 10.195,21.871 7.956,25.959C7.776,26.289 7.783,26.69 7.974,27.013C8.166,27.337 8.514,27.535 8.89,27.535L23.251,27.535C23.627,27.535 23.975,27.337 24.166,27.013C24.358,26.69 24.365,26.289 24.184,25.959C21.945,21.871 18.253,15.128 18.253,15.128C18.172,14.981 18.13,14.816 18.13,14.648L18.13,4.465ZM15.452,18.07L19.028,18.07C19.028,18.07 21.911,23.671 23.014,25.813C23.103,25.987 23.096,26.195 22.994,26.363C22.892,26.53 22.71,26.632 22.514,26.632L9.627,26.632C9.431,26.632 9.249,26.53 9.147,26.363C9.045,26.195 9.037,25.987 9.127,25.813C10.229,23.671 13.113,18.07 13.113,18.07L14.328,18.07L11.138,24.285C11.012,24.53 11.109,24.832 11.354,24.958C11.6,25.084 11.901,24.987 12.027,24.741L15.452,18.07Z" style="fill:white;"/>
-        <path d="M12.011,14.392L12.011,3.941C12.011,3.55 12.166,3.174 12.443,2.897C12.72,2.62 13.095,2.465 13.487,2.465L18.654,2.465C19.045,2.465 19.421,2.62 19.698,2.897C19.974,3.174 20.13,3.55 20.13,3.941L20.13,14.392L25.938,24.999C26.458,25.948 26.439,27.101 25.887,28.033C25.335,28.964 24.333,29.535 23.251,29.535L8.89,29.535C7.808,29.535 6.805,28.964 6.254,28.033C5.702,27.101 5.682,25.948 6.202,24.999L12.011,14.392ZM18.13,4.465L14.011,4.465L14.011,14.648C14.011,14.816 13.968,14.981 13.888,15.128C13.888,15.128 10.195,21.871 7.956,25.959C7.776,26.289 7.783,26.69 7.974,27.013C8.166,27.337 8.514,27.535 8.89,27.535L23.251,27.535C23.627,27.535 23.975,27.337 24.166,27.013C24.358,26.69 24.365,26.289 24.184,25.959C21.945,21.871 18.253,15.128 18.253,15.128C18.172,14.981 18.13,14.816 18.13,14.648L18.13,4.465ZM15.486,18.07L19.028,18.07C19.028,18.07 21.911,23.671 23.014,25.813C23.103,25.987 23.096,26.195 22.994,26.363C22.892,26.53 22.71,26.632 22.514,26.632L9.627,26.632C9.431,26.632 9.249,26.53 9.147,26.363C9.045,26.195 9.037,25.987 9.127,25.813C10.229,23.671 13.113,18.07 13.113,18.07L14.362,18.07L11.208,24.214C11.082,24.46 11.179,24.761 11.424,24.887C11.67,25.013 11.971,24.916 12.097,24.671L15.486,18.07Z" style="fill:white;"/>
-    </g>
 </svg>

assets/images/tab-icons/medicine.svg

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
-    <g transform="matrix(1,0,0,1,0,-32)">
-        <g transform="matrix(1.19866,0,0,1.19866,-3.89177,-9.82562)">
-            <path d="M20.099,44.738L26.446,44.738L26.446,51.746L20.099,51.746L20.099,58.093L13.091,58.093L13.091,51.746L6.744,51.746L6.744,44.738L13.091,44.738L13.091,38.391L20.099,38.391L20.099,44.738Z" style="fill:none;stroke:white;stroke-width:2.5px;"/>
-        </g>
-    </g>
-</svg>

assets/images/tab-icons/plumbing.svg

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-    <g transform="matrix(1,0,0,1,-32,-32)">
-        <g transform="matrix(0.905401,0,0,0.905401,3.99306,4.1967)">
-            <path d="M48.046,48.061L48,48C46.963,48.911 47.032,50.686 46.122,49.65L36.819,39.058C35.908,38.021 36.01,36.44 37.047,35.53C38.084,34.619 39.665,34.722 40.575,35.758L49.878,46.35C50.789,47.387 49.037,47.089 48,48C48,48 54.988,44.183 59.854,48C64.72,51.817 56,58.592 56,58.592C56,58.592 49.34,65.104 46.301,59.718C43.436,54.639 47.565,48.719 48.046,48.061Z" style="fill:none;stroke:white;stroke-width:2.21px;"/>
-        </g>
-        <g transform="matrix(0.905401,0,0,0.905401,3.13106,3.32535)">
-            <path d="M50.116,61.604C50.116,61.604 50.632,51.968 60.976,51.393C61.618,51.358 62.111,50.807 62.075,50.165C62.039,49.523 61.489,49.031 60.847,49.066C48.34,49.761 47.788,61.488 47.788,61.488C47.756,62.13 48.251,62.678 48.894,62.71C49.536,62.742 50.084,62.247 50.116,61.604Z" style="fill:none;stroke:white;stroke-width:1.1px;"/>
-        </g>
-    </g>
-</svg>

assets/images/tab-icons/unknown.svg

@@ -2,14 +2,12 @@
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg width="100%" height="100%" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
     <g transform="matrix(1,0,0,1,-32,0)">
-        <g transform="matrix(1.01677,0,0,1.01677,-0.814348,-0.268292)">
+        <path d="M59.485,9.925C59.485,6.912 57.039,4.465 54.025,4.465L43.105,4.465C40.091,4.465 37.644,6.912 37.644,9.925L37.644,22.075C37.644,25.088 40.091,27.535 43.105,27.535L54.025,27.535C57.039,27.535 59.485,25.088 59.485,22.075L59.485,9.925Z" style="fill:none;stroke:white;stroke-width:3px;"/>
-            <path d="M59.485,9.925C59.485,6.912 57.039,4.465 54.025,4.465L43.105,4.465C40.091,4.465 37.644,6.912 37.644,9.925L37.644,22.075C37.644,25.088 40.091,27.535 43.105,27.535L54.025,27.535C57.039,27.535 59.485,25.088 59.485,22.075L59.485,9.925Z" style="fill:none;stroke:white;stroke-width:2.95px;"/>
+        <g transform="matrix(0.865715,0.145428,-0.145428,0.865715,8.58626,-7.33972)">
+            <path d="M44.849,14.354C44.849,12.303 46.514,10.638 48.565,10.638C50.616,10.638 52.281,12.303 52.281,14.354C52.281,16.405 50.616,18.07 48.565,18.07C47.395,18.07 49.01,21.846 49.01,21.846" style="fill:none;stroke:white;stroke-width:3.42px;"/>
         </g>
-        <g transform="matrix(0.880231,0.147867,-0.147867,0.880231,7.91589,-7.73109)">
+        <g transform="matrix(1.2157,-0.0104971,0.0104971,1.2157,-11.9419,-4.29553)">
-            <path d="M44.849,14.354C44.849,12.303 46.514,10.638 48.565,10.638C50.616,10.638 52.281,12.303 52.281,14.354C52.281,16.405 50.616,18.07 48.565,18.07C47.395,18.07 49.01,21.846 49.01,21.846" style="fill:none;stroke:white;stroke-width:3.36px;"/>
+            <path d="M49.627,22.899L49.53,22.351" style="fill:none;stroke:white;stroke-width:2.47px;"/>
-        </g>
-        <g transform="matrix(1.23609,-0.0106731,0.0106731,1.23609,-12.9565,-4.63585)">
-            <path d="M49.627,22.899L49.53,22.351" style="fill:none;stroke:white;stroke-width:2.43px;"/>
         </g>
     </g>
 </svg>

src/TabManager.ts

@@ -53,20 +53,15 @@ async function loadPage(page: string, elem: HTMLElement) {
     await nextAnimationFrame();
 
     // Set as HTML content and run HTML manipulations on it
-    const div = document.createElement("div");
+    elem.innerHTML = html;
-    div.className = elem.className;
-    div.innerHTML = html;
 
     console.log(`${page}: processing`);
-    processHTML(div, page);
+    processHTML(elem, page);
 
     // Save result to cache
-    cache.set(key, div.outerHTML, CURRENT_VERSION).then(() => {
+    cache.set(key, elem.outerHTML, CURRENT_VERSION).then(() => {
       console.log(`${page}: saved to cache`);
     });
-
-    elem.replaceWith(div);
-    elem = div;
   } else {
     // Set cached content as HTML
     elem.outerHTML = html;

src/darkmode.ts

@@ -1,163 +1,3 @@
-/* https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
-  $$('#colors_table tbody tr')
-    .map((row) => {
-      const [name, hex] = Array.from(row.children).slice(-3);
-      return [name.innerText.trim().replace(/\s.+/g, ''), hex.innerText.trim()];
-    }).sort((a, b) => [a[0], b[0]].sort()[0] === a[0] ? -1 : 1)
-    .map(([name, hex]) => `${name} : '${hex}',`)
-    .join('\n')
-*/
-const namedColors = {
-  aliceblue: "#f0f8ff",
-  antiquewhite: "#faebd7",
-  aqua: "#00ffff",
-  aquamarine: "#7fffd4",
-  azure: "#f0ffff",
-  beige: "#f5f5dc",
-  bisque: "#ffe4c4",
-  black: "#000000",
-  blanchedalmond: "#ffebcd",
-  blue: "#0000ff",
-  blueviolet: "#8a2be2",
-  brown: "#a52a2a",
-  burlywood: "#deb887",
-  cadetblue: "#5f9ea0",
-  chartreuse: "#7fff00",
-  chocolate: "#d2691e",
-  coral: "#ff7f50",
-  cornflowerblue: "#6495ed",
-  cornsilk: "#fff8dc",
-  crimson: "#dc143c",
-  cyan: "#00ffff",
-  darkblue: "#00008b",
-  darkcyan: "#008b8b",
-  darkgoldenrod: "#b8860b",
-  darkgray: "#a9a9a9",
-  darkgreen: "#006400",
-  darkgrey: "#a9a9a9",
-  darkkhaki: "#bdb76b",
-  darkmagenta: "#8b008b",
-  darkolivegreen: "#556b2f",
-  darkorange: "#ff8c00",
-  darkorchid: "#9932cc",
-  darkred: "#8b0000",
-  darksalmon: "#e9967a",
-  darkseagreen: "#8fbc8f",
-  darkslateblue: "#483d8b",
-  darkslategray: "#2f4f4f",
-  darkslategrey: "#2f4f4f",
-  darkturquoise: "#00ced1",
-  darkviolet: "#9400d3",
-  deeppink: "#ff1493",
-  deepskyblue: "#00bfff",
-  dimgray: "#696969",
-  dimgrey: "#696969",
-  dodgerblue: "#1e90ff",
-  firebrick: "#b22222",
-  floralwhite: "#fffaf0",
-  forestgreen: "#228b22",
-  fuchsia: "#ff00ff",
-  gainsboro: "#dcdcdc",
-  ghostwhite: "#f8f8ff",
-  gold: "#ffd700",
-  goldenrod: "#daa520",
-  gray: "#808080",
-  green: "#008000",
-  greenyellow: "#adff2f",
-  grey: "#808080",
-  honeydew: "#f0fff0",
-  hotpink: "#ff69b4",
-  indianred: "#cd5c5c",
-  indigo: "#4b0082",
-  ivory: "#fffff0",
-  khaki: "#f0e68c",
-  lavender: "#e6e6fa",
-  lavenderblush: "#fff0f5",
-  lawngreen: "#7cfc00",
-  lemonchiffon: "#fffacd",
-  lightblue: "#add8e6",
-  lightcoral: "#f08080",
-  lightcyan: "#e0ffff",
-  lightgoldenrodyellow: "#fafad2",
-  lightgray: "#d3d3d3",
-  lightgreen: "#90ee90",
-  lightgrey: "#d3d3d3",
-  lightpink: "#ffb6c1",
-  lightsalmon: "#ffa07a",
-  lightseagreen: "#20b2aa",
-  lightskyblue: "#87cefa",
-  lightslategray: "#778899",
-  lightslategrey: "#778899",
-  lightsteelblue: "#b0c4de",
-  lightyellow: "#ffffe0",
-  lime: "#00ff00",
-  limegreen: "#32cd32",
-  linen: "#faf0e6",
-  magenta: "#ff00ff",
-  maroon: "#800000",
-  mediumaquamarine: "#66cdaa",
-  mediumblue: "#0000cd",
-  mediumorchid: "#ba55d3",
-  mediumpurple: "#9370db",
-  mediumseagreen: "#3cb371",
-  mediumslateblue: "#7b68ee",
-  mediumspringgreen: "#00fa9a",
-  mediumturquoise: "#48d1cc",
-  mediumvioletred: "#c71585",
-  midnightblue: "#191970",
-  mintcream: "#f5fffa",
-  mistyrose: "#ffe4e1",
-  moccasin: "#ffe4b5",
-  navajowhite: "#ffdead",
-  navy: "#000080",
-  oldlace: "#fdf5e6",
-  olive: "#808000",
-  olivedrab: "#6b8e23",
-  orange: "#ffa500",
-  orangered: "#ff4500",
-  orchid: "#da70d6",
-  palegoldenrod: "#eee8aa",
-  palegreen: "#98fb98",
-  paleturquoise: "#afeeee",
-  palevioletred: "#db7093",
-  papayawhip: "#ffefd5",
-  peachpuff: "#ffdab9",
-  peru: "#cd853f",
-  pink: "#ffc0cb",
-  plum: "#dda0dd",
-  powderblue: "#b0e0e6",
-  purple: "#800080",
-  rebeccapurple: "#663399",
-  red: "#ff0000",
-  rosybrown: "#bc8f8f",
-  royalblue: "#4169e1",
-  saddlebrown: "#8b4513",
-  salmon: "#fa8072",
-  sandybrown: "#f4a460",
-  seagreen: "#2e8b57",
-  seashell: "#fff5ee",
-  sienna: "#a0522d",
-  silver: "#c0c0c0",
-  skyblue: "#87ceeb",
-  slateblue: "#6a5acd",
-  slategray: "#708090",
-  slategrey: "#708090",
-  snow: "#fffafa",
-  springgreen: "#00ff7f",
-  steelblue: "#4682b4",
-  tan: "#d2b48c",
-  teal: "#008080",
-  thistle: "#d8bfd8",
-  tomato: "#ff6347",
-  turquoise: "#40e0d0",
-  violet: "#ee82ee",
-  wheat: "#f5deb3",
-  white: "#ffffff",
-  whitesmoke: "#f5f5f5",
-  yellow: "#ffff00",
-  yellowgreen: "#9acd32",
-};
-
 interface ColorRGB {
   r: number;
   g: number;
@@ -233,10 +73,6 @@ function rgbToHsv({ r, g, b }: ColorRGB): ColorHSV {
 
 // Hacky way to get RGB values FOR SURE!
 function nameToRGB(name: string): ColorRGB {
-  if (namedColors[name]) {
-    return parseColor(namedColors[name]);
-  }
-
   // Create fake div
   const fakeDiv = document.createElement("div");
   fakeDiv.style.color = name;
@@ -256,7 +92,7 @@ function nameToRGB(name: string): ColorRGB {
 // https://stackoverflow.com/questions/11068240/what-is-the-most-efficient-way-to-parse-a-css-color-in-javascript
 function parseColor(input: string): ColorRGB {
   // Hex format
-  if (input[0] === "#") {
+  if (input.substr(0, 1) === "#") {
     const collen = (input.length - 1) / 3;
     const fact = [17, 1, 0.062272][collen - 1];
     return {

src/sections.ts

@@ -1,17 +1,13 @@
 // @ts-expect-error: Parcel image import
 import chemistry from "~/assets/images/tab-icons/chemistry.svg";
-// @ts-expect-error: Parcel image import
-import medicine from "~/assets/images/tab-icons/medicine.svg";
-// @ts-expect-error: Parcel image import
-import plumbing from "~/assets/images/tab-icons/plumbing.svg";
 
 const sections = [
   {
     name: "Medical",
     tabs: [
-      { page: "Guide_to_medicine", icon: medicine },
+      { page: "Guide_to_medicine", icon: null },
       { page: "Guide_to_chemistry", icon: chemistry },
-      { page: "Guide_to_plumbing", icon: plumbing },
+      { page: "Guide_to_plumbing", icon: null },
       { page: "Grenade", text: "nade", icon: null },
       { page: "Guide_to_genetics", icon: null },
       { page: "Infections", text: "virus", icon: null },

src/userscript.ts

@@ -4,7 +4,7 @@ import { findParent } from "./utils";
 
 // This is used for cache busting when userscript changes significantly.
 // Only change it when you made changes to the processHTML part!
-export const CURRENT_VERSION = "e700bb9c309627b944618152a7d8e936ae7a05db";
+export const CURRENT_VERSION = "df914edcb5522670309ceb8dfd0195dc70fb81d4";
 
 function chemistryFixups(root: HTMLElement) {
   // Enable page-specific CSS rules
@@ -147,11 +147,6 @@ export function processHTML(root: HTMLElement, docname: string): void {
   header.appendChild(document.createTextNode(docname.replace(/_/g, " ")));
   root.insertBefore(header, root.firstChild);
 
-  // Lazy load all images
-  root
-    .querySelectorAll<HTMLImageElement>("img")
-    .forEach((elem) => elem.setAttribute("loading", "lazy"));
-
   // Remove edit links
   root.querySelectorAll(".mw-editsection").forEach((editLink) => {
     editLink.parentElement.removeChild(editLink);