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++) {
        // widgets might not have an href property set in homepage config
        if (!serviceWidgetsLink[i].getAttribute("href")) {continue;}
        let href = serviceWidgetsLink[i].href;
        let split = href.split(":");
        if (split.length < 3) {
            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);
    }
});

Thanks for the update @Binocularbath and glad to hear it works for you now!

Thank you for sharing the script! It's really great