GreaseMonkey user script to display HN comments side by side with the linked article

// ==UserScript==
// @name        HN side-by-side
// @namespace   https://www.shdon.com/
// @description Show Hacker News linked articles and comments side by side.
// @include     https://news.ycombinator.com/*
// @run-at      document-end
// @version     1.0.4
// @grant       none
// ==/UserScript==
var sxs = {
    "vpw" : window.innerWidth,
    "resizing" : false
};

function sxs_mousedown (event)
{
    event.stopPropagation ();
    event.preventDefault ();
    sxs.vpw = window.innerWidth;
    sxs.resizing = true;
}

function sxs_mousemove (event)
{
    if (!sxs.resizing) return;
    event.stopPropagation ();
    event.preventDefault ();

    //Calculate position
    var x = event.clientX;
    var pct = x * 100.0 / sxs.vpw;

    //Adjust elements accordingly
    document.getElementById ('sxs-site').style.flexBasis = pct + '%';
    document.getElementById ('sxs-hn').style.flexBasis = (100.0 - pct) + '%';
}

function sxs_mouseup (event)
{
    if (!sxs.resizing) return;
    event.stopPropagation ();
    event.preventDefault ();
    sxs.resizing = false;
}

function sxs_add_styles ()
{
    //Don't allow double running
    if (document.getElementById ('sxs-styles')) return;

    //Create style
    var css = document.createElement ('STYLE');
    css.id = 'sxs-styles';
    css.type = 'text/css';
    css.innerHTML = `
        html:has(#sxs-site) { height: 100vh; margin: 0; overflow: hidden; padding: 0; width: 100vw; }
        body:has(#sxs-site) { display: flex; flex-direction: row; height: 100vh; margin: 0; overflow: hidden; padding: 0; width: 100vw; }
        #sxs-site { border: 0; flex: 1 1 50%; }
        #sxs-divider { background: #CCC; border-inline: 1px solid #000; cursor: ew-resize; flex: 0 0 4px; overflow: visible; position: relative; }
        .sxs-link { display: inline-block; font-size: 80%; font-weight: bold; margin-left: 1ex; }
        #sxs-site ~ center { flex: 1 1 50%; margin: 0; overflow: auto; padding: 8px; }
        #sxs-close { background: #CCC; border: 1px solid #111; border-radius: 50%; color: #111; height: 1.5em; left: 50%; line-height: 1.5em; position: absolute; text-align: center; top: 8px; transform: translateX(-50%); transition: background 0.5s ease; width: 1.5em; z-index: 1; }
        #sxs-close:hover { background: #EEE; }
        @media (prefers-color-scheme: dark) {
            #sxs-divider { background: #222; border-color: #EEE; }
            #sxs-close { background: #222; border-color: #EEE; color: #FFF; }
            #sxs-close:hover { background: #444; }
        }
    `;
    document.head.append (css);
}

function sxs_activate ()
{
    //Don't allow double running
    if (document.getElementById ('sxs-site')) return;

    //Get the URL
    var sxs_url = document.querySelector('.titleline a').href;

    //Create a divider
    var div = document.createElement ('DIV');
    div.id = 'sxs-divider';
    div.addEventListener ('mousedown', sxs_mousedown);
    document.body.prepend (div);

    //Create the iframe
    var ifr = document.createElement ('IFRAME');
    ifr.id = 'sxs-site';
    ifr.scrolling = 'auto';
    ifr.src = sxs_url;
    document.body.prepend (ifr);

    //Place the main HN comments side by side
    var hn = document.body.querySelector (':scope > center');
    hn.id = 'sxs-hn';

    //Divider event handlers
    sxs.vpw = window.innerWidth;
    sxs.resizing = false;

    //Add a close button
    var closer = document.createElement ('A');
    closer.id = 'sxs-close';
    closer.innerHTML = '×';
    closer.href = '#0';
    closer.addEventListener ('click', function (event)
    {
        event.stopPropagation ();
        event.preventDefault ();
        sxs_deactivate ();
    });
    div.append (closer);
}

function sxs_deactivate ()
{
    document.getElementById ('sxs-site').remove ();
    document.getElementById ('sxs-divider').remove ();
    document.getElementById ('sxs-close').remove ();
}

(function ()
{
    //Only on suitable pages
    var curpage = window.location.pathname;

    //Make sure styles are available
    sxs_add_styles ();

    //Append SxS link to overview pages
    if ([ '/', '/news', '/newest', '/past', '/show' ].indexOf (curpage) >= 0)
    {
        //Don't allow double running
        if (document.querySelectorAll ('.sxs-link').length) return;

        //Find all titles
        var titles = document.querySelectorAll ('.titleline');
        titles.forEach (function (elem)
        {
            //Get information for link
            var tr = elem.closest ('tr.athing[id]');

            //Check for a link to HN itself
            var a = elem.querySelector (':scope a');
            if (a.attributes['href'].nodeValue.substr (0, 8) === 'item?id=') return;

            //Create a side-by-side link
            var link = document.createElement ('A');
            link.className = 'sxs-link';
            link.innerHTML = 'SxS';
            link.href = 'https://news.ycombinator.com/item?sxs=1&id=' + encodeURIComponent (tr.id);
            elem.append (link);
        });
    }

    //Include an iframe on the page
    var search = window.location.search.substr (1).split ('&');
    if (curpage == '/item')
    {
        if (!document.querySelectorAll ('.sxs-link').length)
        {
            //Allow activation after the fact
            var title = document.querySelector ('.titleline');
            var tr = title.closest ('tr.athing[id]');

            //Check for a link to HN itself
            var a = title.querySelector (':scope a');
            if (a.attributes['href'].nodeValue.substr (0, 8) === 'item?id=') return;

            //Create a side-by-side link
            var link = document.createElement ('A');
            link.className = 'sxs-link';
            link.innerHTML = 'SxS';
            link.href = '#0';
            link.addEventListener ('click', function (event)
            {
                event.stopPropagation ();
                event.preventDefault ();
                sxs_activate ();
            });
            title.append (link);
        }

        if (search.indexOf ('sxs=1') >= 0)
        {
            //Activation by URL parameter
            sxs_activate ();
        }

        document.body.addEventListener ('mousemove', sxs_mousemove);
        document.body.addEventListener ('mouseup', sxs_mouseup);
    }
})();