Add icons

assets/images/Contents.json

@@ -0,0 +1,6 @@
+{
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

assets/images/icons-manifest/Contents.json

@@ -0,0 +1,43 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "icon48.png",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "icon72.png",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "icon96.png",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "icon144.png",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "icon168.png",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "icon192.png",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "icon.svg",
+      "scale" : "x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

assets/images/icons-manifest/icon.svg

@@ -0,0 +1,24 @@
+<?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 256 256" 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,0,16.7611)">
+        <path d="M128,69.365C159.824,56.815 192.806,54.31 226.392,57.032L226.392,194.673C188.3,191.7 156.928,192.959 132.741,198.741L128,199.958L123.259,198.741C99.072,192.959 67.7,191.7 29.608,194.673L29.608,57.032C63.194,54.31 96.176,56.815 128,69.365Z" style="fill:white;"/>
+        <path d="M128.002,65.181C143.724,59.02 159.737,55.253 175.972,53.306C192.689,51.302 209.641,51.24 226.758,52.514L230.925,52.851L230.925,57.032C230.925,57.032 231.078,91.442 231.498,125.852C231.918,160.269 232.603,194.673 232.603,194.673L232.603,201.388L225.908,200.866C209.112,199.826 193.659,199.644 179.575,200.215C162.453,200.909 147.395,202.774 134.599,205.979L129.864,207.219L128,207.698C128,207.698 121.398,205.989 121.519,206.019C108.601,202.799 93.543,200.954 76.424,200.275C62.342,199.717 46.891,199.91 30.099,200.962L23.3,201.492L23.3,194.673C23.3,194.673 23.958,160.269 24.373,125.852C24.788,91.442 24.96,57.032 24.96,57.032L24.96,52.745L29.233,52.399C46.357,51.148 63.314,51.232 80.034,53.256C96.271,55.222 112.284,59.002 128.002,65.181ZM221.837,61.214C206.726,60.085 191.737,60.075 176.919,61.658C160.864,63.373 145.011,66.949 129.426,72.982L128,73.544L126.574,72.982C110.985,66.965 95.131,63.405 79.075,61.708C64.296,60.146 49.348,60.175 34.28,61.315C34.34,71.574 34.516,98.713 34.844,125.852C35.146,150.959 35.578,176.059 35.79,187.801C54.31,186.278 71.206,185.797 86.424,186.485C100.773,187.133 113.641,188.849 125.059,191.478L128.009,192.227L131.004,191.474C142.363,188.872 155.231,187.173 169.579,186.538C184.824,185.864 201.752,186.358 220.309,187.901C220.529,176.204 220.978,151.032 221.286,125.852C221.618,98.624 221.783,71.395 221.837,61.214Z"/>
+    </g>
+    <g transform="matrix(0.748999,0,0,1,31.9805,-4.5567)">
+        <path d="M128,220.699C105.002,213.385 105.05,191.856 31.338,194.673L31.338,43.957C85.07,42.387 97.675,56.551 128.865,69.008C160.054,56.551 172.659,42.387 226.392,43.957L226.392,194.673C152.68,191.856 152.728,213.385 129.729,220.699L129.729,221.276L128.865,220.988L128,221.276L128,220.699Z" style="fill:white;"/>
+        <path d="M122.806,223.17C116.873,220.868 112.247,217.685 107.224,214.279C101.097,210.124 94.24,205.622 82.236,202.605C70.929,199.764 55.209,198.261 31.655,199.33L25.112,199.58L25.112,194.673C25.112,194.673 24.376,156.995 24.545,119.315C24.714,81.63 25.788,43.957 25.788,43.957L25.788,39.959L31.121,39.803C49.495,39.493 63.188,40.919 74.464,43.395C96.27,48.183 108.87,57.029 128.868,65.469C148.872,57.054 161.488,48.233 183.29,43.46C194.561,40.992 208.243,39.563 226.604,39.876L231.845,40.029L231.845,43.957C231.845,43.957 233.055,81.629 233.279,119.315C233.504,156.995 232.743,194.673 232.743,194.673L232.743,199.679L226.068,199.424C202.534,198.348 186.827,199.846 175.527,202.677C163.533,205.682 156.674,210.168 150.547,214.313C145.518,217.716 140.886,220.896 134.95,223.195L134.95,227.297L128.849,225.256L122.801,227.273L122.806,223.17ZM220.822,47.869C201.241,47.432 187.609,49.333 176.309,52.63C159.917,57.413 148.306,64.898 130.809,71.739L128.865,72.516L126.92,71.739C109.412,64.921 97.782,57.462 81.387,52.692C70.109,49.41 56.514,47.509 36.992,47.939C37.27,58.582 37.994,88.945 38.13,119.315C38.263,148.935 37.837,178.554 37.647,189.87C59.678,189.586 74.832,191.53 85.978,194.511C99.752,198.196 107.607,203.429 114.556,208.333C119.111,211.547 123.168,214.632 128.82,216.701C134.503,214.628 138.565,211.528 143.131,208.299C150.08,203.384 157.934,198.137 171.719,194.439C182.848,191.454 197.976,189.509 219.953,189.776C219.758,178.388 219.328,148.852 219.504,119.315C219.686,88.876 220.51,58.446 220.822,47.869Z"/>
+    </g>
+    <g transform="matrix(-1,-1.22465e-16,7.14844e-17,-0.583715,257.074,251.36)">
+        <path d="M126.194,66.126C126.572,64.584 127.463,63.499 128.5,63.499C129.529,63.499 130.413,64.566 130.796,66.089L137.982,67.782C137.982,67.782 130.472,69.873 130.114,88.114C130.074,90.152 130.011,90.444 129.939,89.612L129.735,94.603C129.008,113.282 128.5,134.834 128.5,134.834C128.5,134.834 127.992,113.282 127.265,94.603C127.122,90.931 126.969,87.378 126.82,84.124C125.547,69.559 119.165,67.782 119.165,67.782L126.194,66.126Z"/>
+    </g>
+    <g transform="matrix(1,0,0,0.592595,-0.0738322,22.2962)">
+        <path d="M129.157,66.091L129.148,65.701L137.982,67.782C137.982,67.782 130.472,69.873 130.114,88.114C130.074,90.152 130.011,90.444 129.939,89.612L129.735,94.603C129.008,113.282 128.5,134.834 128.5,134.834C128.5,134.834 127.992,113.282 127.265,94.603C127.122,90.931 126.969,87.379 126.82,84.124C125.547,69.559 119.165,67.782 119.165,67.782L128,65.701L127.991,66.069C128.376,66.019 128.778,66.026 129.157,66.091Z"/>
+    </g>
+    <g transform="matrix(0.491507,0,0,0.491507,35.6204,36.941)">
+        <path d="M104.26,279.309L104.26,92.146L71.496,92.146L71.496,66.804L159.14,66.804L159.14,92.144L126.376,92.146L126.376,279.309L104.26,279.309Z"/>
+    </g>
+    <g transform="matrix(0.465141,0,0,0.491507,61.3465,36.9401)">
+        <path d="M242.188,66.942C259.654,68.302 268.504,79.852 268.504,101.33L268.504,129.131L247.379,129.131L247.379,109.174C247.379,98.671 241.346,92.147 231.631,92.147L213.759,92.147C203.899,92.147 198.009,98.512 198.009,109.174L198.009,236.938C198.009,247.601 203.899,253.966 213.759,253.966L231.629,253.966C241.491,253.966 247.379,247.601 247.379,236.939L247.379,193.575L230.499,193.575L230.499,168.23L268.503,168.23L268.503,244.785C268.503,267.695 258.435,279.309 238.579,279.309L205.817,279.309C195.943,279.309 188.452,276.504 183.552,270.972C178.469,265.237 175.892,256.426 175.892,244.783L175.892,101.33C175.892,89.687 178.469,80.876 183.552,75.14C188.45,69.61 195.942,66.806 205.816,66.806L238.58,66.806L242.188,66.942Z"/>
+    </g>
+</svg>

index.html

@@ -3,6 +3,8 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="manifest" href="/manifest.webmanifest" />
+    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
     <link
       rel="preload"
       href="assets/fonts/iosevka/iosevka-aile.css"
@@ -24,7 +26,7 @@
     />
     <link rel="stylesheet" href="style/main.scss" />
     <link rel="stylesheet" href="style/bgus.scss" />
-    <title>/tg/ Handbook</title>
+    <title>/tg/station Handbook</title>
   </head>
   <body>
     <div class="bgimage">

lib/userscript.ts

@@ -1,5 +1,6 @@
 import { darken, ColorFmt, lighten } from "./darkmode";
 import searchBox from "./search";
+import { findParent } from "./utils";
 
 export default function userscript(root: HTMLElement, docname: string): void {
   root.querySelectorAll(".mw-editsection").forEach((editLink) => {
@@ -45,6 +46,15 @@ export default function userscript(root: HTMLElement, docname: string): void {
     }
   });
 
+  // Fixup spacing on top quotes
+  root
+    .querySelectorAll<HTMLImageElement>("table .floatright > a > img")
+    .forEach((img) => {
+      const row = findParent(img, (el) => el instanceof HTMLTableRowElement);
+      const td = document.createElement("td");
+      row.appendChild(td);
+    });
+
   // Group headers and content so stickies don't overlap
   root.querySelectorAll("h3,h2").forEach((h3) => {
     const parent = h3.parentNode;
@@ -60,17 +70,16 @@ export default function userscript(root: HTMLElement, docname: string): void {
     div.className = "mw-headline-cont";
   });
 
+  // Move id from header to container, if one is found
   root.querySelectorAll<HTMLElement>(".mw-headline").forEach((span) => {
     // Find nearest container
-    let parent = span.parentElement;
-    while (parent !== null) {
-      if (parent.classList.contains("mw-headline-cont")) {
-        parent.id = span.id;
-        span.id += "-span";
-        parent.dataset.name = span.innerText;
-        return;
-      }
-      parent = parent.parentElement;
+    const container = findParent(span, (el) =>
+      el.classList.contains("mw-headline-cont")
+    );
+    if (container) {
+      container.id = span.id;
+      span.id += "-span";
+      container.dataset.name = span.innerText;
     }
   });
 
@@ -216,10 +225,10 @@ export default function userscript(root: HTMLElement, docname: string): void {
     root
       .querySelectorAll<HTMLElement>("div[data-name] .wikitable.sortable tr")
       .forEach((row) => {
-        let sectionEl = row.parentElement;
-        while (!sectionEl.dataset.name) {
-          sectionEl = sectionEl.parentElement;
-        }
+        const sectionEl = findParent(
+          row,
+          (sel) => "name" in sel.dataset && sel.dataset.name !== ""
+        );
         const section = sectionEl.dataset.name;
         if (row.querySelector("td") === null) {
           // Remove unused rows if found

lib/utils.ts

@@ -0,0 +1,15 @@
+export function findParent(
+  base: HTMLElement,
+  matchFn: (candidate: HTMLElement) => boolean
+): HTMLElement | null {
+  let parent = base.parentElement;
+  while (parent != null) {
+    if (matchFn(parent)) {
+      break;
+    }
+    parent = parent.parentElement;
+  }
+  return parent;
+}
+
+export default { findParent };

manifest.webmanifest

@@ -0,0 +1,40 @@
+{
+  "name": "/tg/station Handbook",
+  "short_name": "tgstationHandbook",
+  "start_url": ".",
+  "display": "standalone",
+  "background_color": "#384e68",
+  "description": "A prettier client for the /tg/station Wiki",
+  "icons": [
+    {
+      "src": "assets/images/icons-manifest/icon48.png",
+      "sizes": "48x48",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/images/icons-manifest/icon72.png",
+      "sizes": "72x72",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/images/icons-manifest/icon96.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/images/icons-manifest/icon144.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/images/icons-manifest/icon168.png",
+      "sizes": "168x168",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/images/icons-manifest/icon192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    }
+  ]
+}