TWHL+: Userscript + uBlock Origin filter combo Created 2 weeks ago2024-06-26 04:39:25 UTC by kimilil kimilil

Created 2 weeks ago2024-06-26 04:39:25 UTC by kimilil kimilil

Posted 2 weeks ago2024-06-26 04:39:25 UTC Post #348925
This is a combination of userscript and uBlock Origin filters I wrote for my personal use, that I figure could be useful to other members.

Features:

  • The header search bar can can be made to search the vault and wiki specifically
  • Hide TFC section of entity guide pages
  • Place long lists in wiki entity guide pages into columns
  • Move table of contents of long wiki pages to a fixed location off to the sides
  • Ability to make wiki pages narrower to help improve readability
  • Add button to list pages linking to/from the current wiki page
  • Improved appearance for those using Dark Reader browser extension
  • Use monospace font on large edit boxes (and tab size of 4, sorry but 8 is too much!)
  • Make wiki edit page span the width of the browser
You need to have both uBlock Origin and a userscript extension installed, and install both parts, otherwise some features from the userscript won't work properly.

uBlock Origin filters

To use this requires uBlock Origin. Other adblockers not tested, they may not have cosmetic filtering feature uBO uses.
! exclamation mark at start of line marks a line comment
! similarly you can comment out entries below by prefixing with !

! 26/12/2023 https://twhl.info

! these 2 lines remove the background for a better Dark Reader result
||twhl.info/images/body-background.png$image
twhl.info##body:style(background-image:none !important)

! this makes textareas use monospaced font
! trust me, you're going to need this!
twhl.info##textarea:style(font-family:monospace !important)

! this compresses entity guide's attribute value lists into 3 columns
twhl.info##[id^="Attributes"] + ul > li > ul:style(columns:3)
twhl.info##[id^="Attributes"] + .card + ul > li > ul:style(columns:3)

! this compresses Render FX list into 6 columns
twhl.info##[id^="Attributes"] + ul > li:has-text(/^Render FX/) > ul:style(columns:6 !important)
twhl.info##[id^="Attributes"] + .card + ul > li:has-text(/^Render FX/) > ul:style(columns:6 !important)

! this hides the bloated TFC entity guide panels below most entity guide pages
twhl.info##[id^="Team_Fortress_Classic_only"]:upward(1):style(display:none !important)

! 2024-05-23 resize game icons in articles down from 32px
twhl.info##.inline img[src^="https://twhl.info/images/games/"]:style(width:20px)

! 2024-06-22 make overflowing card scrollable
twhl.info##.card:style(overflow:auto)

! 2024-02-14 https://twhl.info
! === wiki edit pages ===
! makes edit page fullwidth
twhl.info##form[action="https://twhl.info/wiki/edit"]:upward(1):style(max-width:100vw !important)
twhl.info##form[action="https://twhl.info/wiki/create"]:upward(1):style(max-width:100vw !important)
! reset original width for preview
twhl.info##.wikicode-input>:last-child:style(max-width:1140px; margin:auto)
! 2024-05-08 added fira code for code blocks
twhl.info##code, kbd, pre, samp:style(font-family:Fira Code,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace !important)
! 2024-06-10 side-by-side editor-preview adjust size of preview card
twhl.info##.full-screen-wikicode-editor .form-group:last-child .card:style(max-height: calc(100vh - 60px))

How To Install

  1. Copy the text in the code block above
  2. Open the uBlock Origin dashboard
    • Click uBO icon on toolbar > Icon with gears
  3. Go to My filters page
  4. Paste the copied text at the end of the text area
  5. Save the filter list

Userscript

Developed and tested on Tampermonkey. Since this doesn't use any GM_* features it should theoretically work on other userscript extensions like Greasemonkey. Again, no guarantees.
// ==UserScript==
// @name         TWHL+
// @namespace    http://twhl.info/user/7776
// @version      0.1
// @description  The Whole Half-Life made wholesome
// @author       kimilil
// @match        https://twhl.info/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=twhl.info
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    const root = document.documentElement;
    const searchMap = {
        all: {action: "/search/index", method: "GET"},
        vault: {action: "/vault/index", method: "GET"},
        wikitext: {action: "/wiki-special/query-search", method: "GET"}
    }
    const doCustomSearch = (targetForm, action, method) => {
        targetForm.action = action;
        targetForm.method = method;
        targetForm.requestSubmit();
    }

    for (const searchForm of [document.querySelector(".header-desktop form.navbar-search-inline")]) {
        searchForm.querySelector(".input-group").insertAdjacentHTML('beforeend',
`
<div class="input-group-append">
  <button type="button" class="btn dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Search options</span>
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <h6 class="dropdown-header">Search in:</h6>
    <a class="dropdown-item" href="#" data-searchin="all">All of TWHL</a>
    <a class="dropdown-item" href="#" data-searchin="vault">Vault</a>
    <a class="dropdown-item" href="#" data-searchin="wikitext">Wiki text (exact)</a>
  </div>
</div>`);

        for (const item in searchMap) {
            searchForm.querySelector(`[data-searchin="${item}"]`)
            .addEventListener('click', e => doCustomSearch(
                searchForm,
                searchMap[item].action,
                searchMap[item].method) )
        }
    }

    // wiki pages
    if (location.pathname.match(/\/wiki\//)) {
        //const title = decodeURIComponent(location.pathname.split("/").pop()).replace(/_/g," ")
        // Adds a button that shows what links to/from it
        const title = document.querySelector("h1").innerText
        .replace(/^\s?(?:Edit\:|History of|(Upload:)?\s+)/i,"$1")
        .split("\n")[0].trim();
        document.querySelector(".wiki-navigation .btn-group:first-child")
            .insertAdjacentHTML('beforeend', `
              <a class="btn btn-light" href="https://twhl.info/wiki-special/query-links?title=${encodeURIComponent(title)}">
                <span class="fa fa-link"></span> Links
              </a>
            `);

        // checkbox to narrow the page
        document.querySelector(".breadcrumb .no-breadcrumb")
            .insertAdjacentHTML("afterbegin", `
            <label class="mr-2">Narrow page <input type="checkbox" id="twhlx-narrowpage"></label>
            `)
        document.querySelector("#twhlx-narrowpage")
        .addEventListener("change", (e) => root.style.setProperty('--page-pad', (e.target.checked ? 10 : 0) + "rem"))

        // setup --page-pad defaults and make wiki pages use it
        root.style.setProperty('--page-pad', "0rem")
        document.querySelector(".wiki").style.padding = "0 var(--page-pad)"
    }
})();

How to Install (Tampermonkey)

  1. Copy the code above
  2. Open dashboard
  3. Press the tab with "+" to create a new script
  4. Paste the script
  5. Save the script

License and DISCLAIMER

The MIT License. Full Text.

DISCLAIMER

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Preview

uBO Filters

BeforeBefore
AfterAfter

userscript

Enhanced searchEnhanced search
Improved wiki experienceImproved wiki experience
Posted 2 weeks ago2024-06-26 04:52:31 UTC Post #348926
The decision to use uBO filters was me discovering it can do cosmetic CSS adjustments in the first place. It saved me having to install a userstyle browser extension. And it's quite more powerful than vanilla CSS too. Related journal entry.
You must be logged in to post a response.