Link Styling

In the making of this site, the one that you are reading now, I used a couple of different techniques that I think work very well. The first is a script that checks if the link is external and adds a class if so. The second is a similar concept - apply a style if the link does not resolve via a HEAD request.

function isItBorked() {
    console.log("Brokedown palace.");
    const links = document.querySelectorAll("a");

    links.forEach(link => {
        fetch(link.href, { method: 'HEAD' })
            .then(response => {
                if (response.status === 404) {
                    link.classList.add("broken-link");
                }
            })
            .catch(error => {
                console.error('Error checking link:', error);
                link.classList.add("broken-link");
            });
    });
}

Now for the fun part: we apply some CSS styles to give a visual indication of the type of link.

.external, .broken-link {
    text-decoration: none;
}

.external::after {
    content: "🌐";
    margin-left: 4px;
}


.broken-link::after {
    content: "⛓️‍💥";
    margin-left: 4px;
}

a.broken-link {
    color:#d63333;
}

The result is that this is the style for internal links. Just a plain jane link.

For external links the link gets a nifty globe emoji.

And broken links get a broken chain and a red color.

To be clear, I didn't invent these ideas. Other sites have been doing this for years (such as WikiPedia), but I think my application of these techniques turned out pretty ok I guess ;).

One small caveat, since I am doing this all in the client - I can't check external links for 404 as it gets fouled up by CORS.