Add more icons

assets/images/tab-icons/chemistry.svg

@@ -1,5 +1,7 @@
 <?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;">
-    <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;"/>
+    <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.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

@@ -0,0 +1,9 @@
+<?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

@@ -0,0 +1,12 @@
+<?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,12 +2,14 @@
 <!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)">
-        <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;"/>
+        <g transform="matrix(1.01677,0,0,1.01677,-0.814348,-0.268292)">
-        <g transform="matrix(0.865715,0.145428,-0.145428,0.865715,8.58626,-7.33972)">
+            <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;"/>
-            <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(1.2157,-0.0104971,0.0104971,1.2157,-11.9419,-4.29553)">
+        <g transform="matrix(0.880231,0.147867,-0.147867,0.880231,7.91589,-7.73109)">
-            <path d="M49.627,22.899L49.53,22.351" style="fill:none;stroke:white;stroke-width:2.47px;"/>
+            <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;"/>
+        </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,15 +53,20 @@ async function loadPage(page: string, elem: HTMLElement) {
     await nextAnimationFrame();
 
     // Set as HTML content and run HTML manipulations on it
-    elem.innerHTML = html;
+    const div = document.createElement("div");
+    div.className = elem.className;
+    div.innerHTML = html;
 
     console.log(`${page}: processing`);
-    processHTML(elem, page);
+    processHTML(div, page);
 
     // Save result to cache
-    cache.set(key, elem.outerHTML, CURRENT_VERSION).then(() => {
+    cache.set(key, div.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,3 +1,163 @@
+/* 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;
@@ -73,6 +233,10 @@ 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;
@@ -92,7 +256,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.substr(0, 1) === "#") {
+  if (input[0] === "#") {
     const collen = (input.length - 1) / 3;
     const fact = [17, 1, 0.062272][collen - 1];
     return {

src/sections.ts

@@ -1,13 +1,17 @@
 // @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: null },
+      { page: "Guide_to_medicine", icon: medicine },
       { page: "Guide_to_chemistry", icon: chemistry },
-      { page: "Guide_to_plumbing", icon: null },
+      { page: "Guide_to_plumbing", icon: plumbing },
       { 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 = "df914edcb5522670309ceb8dfd0195dc70fb81d4";
+export const CURRENT_VERSION = "e700bb9c309627b944618152a7d8e936ae7a05db";
 
 function chemistryFixups(root: HTMLElement) {
   // Enable page-specific CSS rules
@@ -147,6 +147,11 @@ 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);