EbookFoundation / free-programming-books

:books: Freely available programming books
https://ebookfoundation.github.io/free-programming-books/
Creative Commons Attribution 4.0 International
332.26k stars 61k forks source link

[Enhancement] Small JS snippet to easily spot dead links #11094

Open xplshn opened 5 months ago

xplshn commented 5 months ago

Could we add this snippet to easily spot dead links? It will send a HEAD to every link in the page and if it is not 200, 403, 405, it will append this to the link: "[status: statusCode]", it is all client side and isn't noticeable, not even in web pages with lots of links, its what I have on my website too. :)

        // Function to check the status of a URL
        function checkLinkStatus(link, callback) {
            var proxyUrl = 'https://corsproxy.org/?';
            var targetUrl = encodeURIComponent(link.href);
            var xhr = new XMLHttpRequest();
            xhr.open('HEAD', proxyUrl + targetUrl, true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState ===  4) {
                    callback(xhr.status);
                }
            };
            xhr.send();
        }

        // Function to update link text with status code
        function updateLinkText(link, statusCode) {
            // Check if a status span already exists for this link
            var existingStatusSpan = link.nextElementSibling;
            if (existingStatusSpan && existingStatusSpan.classList.contains('status_code')) {
                // Update the existing status span
                existingStatusSpan.textContent = ' [status: ' + statusCode + ']';
            } else {
                // Create a new span element with the class 'status_code'
                var statusSpan = document.createElement('span');
                statusSpan.className = 'status_code';

                // Check the status code and set the text content of the span
                if (statusCode !==  200) {
                    if (statusCode !==  0) {
                        if (statusCode !==  403) {
                            if (statusCode !==  405) {
                                statusSpan.textContent = ' [status: ' + statusCode + ']';
                            }
                        }
                    }
                }

                // Insert the status span after the link
                link.parentNode.insertBefore(statusSpan, link.nextSibling);
            }
        }

        // Function to check all links on page load
        function checkAllLinksOnPageLoad() {
            var links = document.querySelectorAll('a');
            links.forEach(function(link) {
                checkLinkStatus(link, function(statusCode) {
                    updateLinkText(link, statusCode);
                });
            });
        }

        // Run the function when the page loads
        window.onload = checkAllLinksOnPageLoad;
github-actions[bot] commented 3 months ago

This issue has been automatically marked as stale because it has not had recent activity during last 60 days :sleeping:

It will be closed in 30 days if no further activity occurs. To unstale this issue, remove stale label or add a comment with a detailed explanation.

There can be many reasons why some specific issue has no activity. The most probable cause is lack of time, not lack of interest.

Thank you for your patience :heart:

xplshn commented 3 months ago

:(

github-actions[bot] commented 1 month ago

This issue has been automatically marked as stale because it has not had recent activity during last 60 days :sleeping:

It will be closed in 30 days if no further activity occurs. To unstale this issue, remove stale label or add a comment with a detailed explanation.

There can be many reasons why some specific issue has no activity. The most probable cause is lack of time, not lack of interest.

Thank you for your patience :heart:

xplshn commented 1 month ago

:(