benory / 1520s-project-website

Website for The 1520s Project
https://1520s-project.org
Other
1 stars 0 forks source link

Github Repository in Footer #3

Closed benory closed 9 months ago

benory commented 9 months ago

In the _config.yml file, I've included with "Github_username" the repository for the 1520s Project scores, "benory/1520s-project-scores." Jekyll seems to be escaping the slash (/) as "%2F" and omitting the "-scores." Is it possible to link the repository in the footer?

craigsapp commented 9 months ago

Implemented with commit https://github.com/benory/1520s-project-website/commit/0a067b4a2948cc26b3db4e7d29abcb707a9425a1

The problem was that you are indirectly using a built-in jekyll theme which is not stored within the repository. The theme uses a file called social.html which you do not have access to as a result. This file is used to add the social links.

The theme is encoding the URL to escape special characters, which includes /. It is not possible with this configuration to change that behavior. One solution would be to copy the theme files into the repository; however, that would make maintenance of the website complex (i.e., you would have to update the theme files every few years perhaps).

In the solution I use, a function is called after the webpage is loaded which replaces the `%2f encoding for the slash the the actual slash:

document.addEventListener("DOMContentLoaded", function (event) {
        let element = document.querySelector(".social-media-list > li > a");
        if (!element) {
                return;
        }
        let href = element.href;
        href = href.replace(/%2f/ig, "/");
        element.href = href;
});

This code runs a function when the page has finished loading (DOMContentLoaded event). First it finds the URL which is the first link in the first a element in the first li element of a list with class name social-media-list. The code href.replace(/%2f/ig, "/") replaces all %2f with a slash. The i at the end of the regular expression means that either %2F or %2f will be replaced (i means "ignore case") and the g (meaning "global") will replace all cases in the string (even though there is only one case here).

I think this solution will work always, since the social links are probably inserted onto the webpages before the page is sent to the user. If there are problems still, then I can adjust to delay replacement of the slash after a given time, such as one second in order to wait for the social links to be filled in by the theme.