arch-linux-manpages-sidebar-toc.user.js

// ==UserScript==
// @name        Arch Linux Manpages Sidebar TOC
// @namespace   jeffreybosboom.com
// @author      Jeffrey Bosboom
// @description Makes the sidebar about the table of contents (best used with some user CSS)
// @version     1
// @match       https://man.archlinux.org/man/*
// @grant       none
// @inject-into content
// ==/UserScript==

//Compress the package info to leave more space for the TOC.
const info = document.querySelector('section.package-info');
const infoKeys = info.querySelectorAll('dt'), infoValues = info.querySelectorAll('dd');
while (info.firstChild)
    info.lastChild.remove();

const infoStyle = document.createElement('style');
infoStyle.textContent = '.package-info > p {margin: 0px;}';
info.append(infoStyle);

for (let i = 0; i < infoKeys.length; ++i) {
    const p = document.createElement('p');
    p.append(infoKeys[i].textContent + ' ');
    //Copy both text nodes and elements, whatever happens to be there.
    //We preserve order so we have to work from the front.
    while (infoValues[i].firstChild)
        p.append(infoValues[i].firstChild);
    info.append(p);
}


const toc = document.querySelector('nav.toc');
while (toc.firstChild)
    toc.lastChild.remove();

const tocStyle = document.createElement('style');
tocStyle.textContent = '.toc ul {margin: 0px;}';

function linkToItem(link) {
    const listLink = document.createElement('a');
    listLink.href = link.getAttribute('href');
    listLink.textContent = link.textContent;
    const listItem = document.createElement('li');
    listItem.append(listLink);
    return listItem;
}
const list = document.createElement('ul');
const permalinks = Array.from(document.querySelectorAll('h1 a.permalink, h2 a.permalink')).reverse();
while (permalinks.length) {
    list.append(linkToItem(permalinks.pop()));
    const subitems = [];
    while (permalinks.length && permalinks[permalinks.length-1].parentElement.tagName === 'H2')
        subitems.push(linkToItem(permalinks.pop()));
    if (subitems.length) {
        const sublist = document.createElement('ul');
        sublist.append(...subitems);
        list.lastChild.append(sublist);
    }
}
toc.append(tocStyle, list);

document.querySelector('#sidebar details').open = true;

dark-arch-linux-manpages.user.css

/* ==UserStyle==
@name           Dark Arch Linux manpages
@namespace      jeffreybosboom.com
@version        1.0.0
@description    Dark Arch Linux manpages
@author         Jeffrey Bosboom
==/UserStyle== */

@-moz-document domain("man.archlinux.org") {
    :root {
        /* TODO: UserCSS lets us make these customizable? */
        --bg-color: black;
        --highlight-bg-color: #181818;
        --text-color: darkgray;
    }
    
    body {
        background-color: var(--bg-color);
        color: var(--text-color);
    }
    
    table.styled-table, table.styled-table th {
        background-color: var(--bg-color);
        color: var(--text-color);
    }
    table.styled-table tr:hover {
        background-color: var(--highlight-bg-color);
    }
    
    .man-page-content table.tbl {
        background-color: var(--bg-color);
    }
    .man-page-content table.tbl tr:first-child td:not(:only-child) {
        background-color: var(--bg-color);
    }
    .man-page-content table.tbl tr:hover {
        background-color: var(--highlight-bg-color);
    }
    
    pre, code {
        background-color: var(--highlight-bg-color);
        border: 0px;
    }
    
    #sidebar {
        position: sticky;
        align-self: start;
        top: 20px;
        overflow-y: auto;
        max-height: calc(100vh - 20px);
    }
    .other-languages {
        display: none;
    }
    
    .box {
        background-color: var(--bg-color);
        border: 0px;
    }
    
    select {
        background-color: var(--highlight-bg-color);
        color: var(--text-color);
        border: 0px;
    }
    
    input {
        background-color: var(--highlight-bg-color);
        color: var(--text-color);
        border: 0px;
    }
}