gethomepage/homepage local-remote href slider

custom.js

// -----------------
// Slider to switch between local/remote addresses.
// Allows you to change the domains of the href targets to the current domain (e.g. when using a VPN).
// -----------------

// these domain (href) will be changed to the current browser domain
// prevents changing links to other services/servers which should not be changed
const host = "pi-server.local"; // TODO: change this

const updateLocation = () => {
    const serviceWidgetsLink = document.getElementsByClassName("service-title-text");
    let browserAddr = window.location.href.split(":");
    browserAddr = browserAddr[1].slice(2, -1);
    for (let i = 0; i < serviceWidgetsLink.length; i++) {
        let href = serviceWidgetsLink[i].href;
        let split = href.split(":");
        if (split.length < 3) {
            console.error(`No valid url: ${href}`);
            continue;
        }
        let currServiceAddr = split[1].slice(2, href.length);
        if (currServiceAddr === host) {
            // change domain to current browser
            split[1] = "//" + browserAddr;
            serviceWidgetsLink[i].href = split.join(":");
        } else if (currServiceAddr === browserAddr) {
            // switch back to original domain
            split[1] = "//" + host;
            serviceWidgetsLink[i].href = split.join(":");
        }
    }
};

const sliderOFF = new DOMParser().parseFromString(
    '<svg id="sliderOFF" stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="text-theme-800 dark:text-theme-200 w-8 h-8 cursor-pointer" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M17 7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h10c2.76 0 5-2.24 5-5s-2.24-5-5-5zM7 15c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"></path></svg>',
    "text/html"
).getElementById("sliderOFF");
const sliderON = new DOMParser().parseFromString(
    '<svg id="sliderON" stroke="currentColor" fill="#75FB4C" stroke-width="0" viewBox="0 0 24 24" class="text-theme-800 dark:text-theme-200 w-8 h-8 cursor-pointer" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M17 7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h10c2.76 0 5-2.24 5-5s-2.24-5-5-5zm0 8c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"></path></svg>',
    "text/html"
).getElementById("sliderON");
const iconHome = new DOMParser().parseFromString(
    '<svg id="iconHome" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em" fill="currentColor" class="text-theme-800 dark:text-theme-200 w-5 h-5 m-1.5"><path d="M240-200h120v-200q0-17 11.5-28.5T400-440h160q17 0 28.5 11.5T600-400v200h120v-360L480-740 240-560v360Zm-80 0v-360q0-19 8.5-36t23.5-28l240-180q21-16 48-16t48 16l240 180q15 11 23.5 28t8.5 36v360q0 33-23.5 56.5T720-120H560q-17 0-28.5-11.5T520-160v-200h-80v200q0 17-11.5 28.5T400-120H240q-33 0-56.5-23.5T160-200Zm320-270Z"/></svg>',
    "text/html"
).getElementById("iconHome");
const iconAway = new DOMParser().parseFromString(
    '<svg id="iconAway" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em" fill="currentColor" class="text-theme-800 dark:text-theme-200 w-5 h-5 m-1.5"><path d="M436-360 371-72q-3 14-14.5 23T330-40q-20 0-32-15t-8-34l113-573q6-29 27-43.5t44-14.5q23 0 42.5 10t31.5 30l40 64q18 29 46.5 52.5T700-529v-41q0-13 8.5-21.5T730-600q13 0 21.5 8.5T760-570v500q0 13-8.5 21.5T730-40q-13 0-21.5-8.5T700-70v-376q-48-11-89-35t-71-59l-24 120 72 68q6 6 9 13.5t3 15.5v243q0 17-11.5 28.5T560-40q-17 0-28.5-11.5T520-80v-200l-84-80Zm-178-82-46-9q-16-3-25-16.5t-6-30.5l30-157q6-34 36-51.5t65-10.5q17 3 25.5 16.5T343-670l-38 196q-3 17-16.5 26t-30.5 6Zm282-298q-33 0-56.5-23.5T460-820q0-33 23.5-56.5T540-900q33 0 56.5 23.5T620-820q0 33-23.5 56.5T540-740Z"/></svg>',
    "text/html"
).getElementById("iconAway");

// create slider container element
const changeSlider = document.createElement("div");
changeSlider.setAttribute("id", "location");
changeSlider.setAttribute("class", "rounded-full flex self-end ml-3");
changeSlider.appendChild(iconHome);
changeSlider.appendChild(sliderOFF);
changeSlider.appendChild(iconAway);

// append to footer
const footer = document.querySelector("#style");
footer.appendChild(changeSlider);

// event listener
changeSlider.addEventListener("click", () => {
    updateLocation();
    if (sliderON.parentElement === changeSlider) {
        sliderON.replaceWith(sliderOFF);
    } else {
        sliderOFF.replaceWith(sliderON);
    }
});

Screenshots

When the slider is OFF (home, 1st img) the addresses from your homepage file will be used as href.
When it is ON (remote, 2nd img) the addresses will be changed to your browser's current domain while retaining all other url parts like scheme, post and subdirectory.

How to

1. Add your local address (href in services.yaml) to be changed to the current browser domain in the in line 8 (see code comments).
   The addresses should just contain the domain part of the url, everything before and after the domain will be retained as-is:
   
   This can also be an IP address.
   href: http://<enter_this_as_host>:8081
2. Paste code to your custom.js file.
3. Enjoy your homepage away from home!