feat: Adding relative path to current URL support

[Mine02C4]

Related : #6360 #6362 #7621 #8519

Summary

Add a Liquid Filter to convert a path in a Jekyll site to a relative path to the current path, which is the URL that the user agent (browser) is opening. Adding this functionality will allow changing the location of the site or accessing the same site from multiple URLs without a rebuild.

Motivation

The lack of this feature in Jekyll stopped me from adopting it, as it could not meet our requirement of a set of static HTML files accessed by multiple paths(URLs). At that time, I solved the problem by building my own generator. However, I am opening this issue because I think it is more important for the future of this software and society to open a discussion than to just not use it.

The purpose of this issue is to find the existing contribution code and if not, I will write the code.

Support for paths relative to the current URL is necessary for the site to function as a single website. Especially in the case of static content distribution such as Jekyll, there are many situations where a website is referenced by multiple domains or subdirectories. This is, for example, a connection through an authenticated reverse proxy with multiple organizations. This is also a very important feature in terms of the separation of responsibility between web content and web hosting.

At the very least, the ability to function without content editing, even if the baseurl changes, is a minimum requirement for a web site to function. If Jekyll claims to be a static site generator, it needs to have portability to the baseurl without redeployment. Users do not want to generate multiple single HTML pages, but rather a set of files with multiple interlinked pages. I think you will agree that we do not want the files to collapse easily depending on where they are placed or how the web server is configured.

For example, if you change the repository name in GitHub Pages, a typical practical example, you need to redeploy. Also, if you enable a custom domain, you need to redeploy. Even these basics are difficult with Jekyll as it is now.

Of course, I know there are those who say that these things should be done by plugins. But I see it the same as "the ability to use external style sheets should be done by plugins". If you don't have external style sheets, you can do almost the same thing if you write everything inline. It is an equally hard situation when a website can't use relative paths. And the limitation of GitHub Pages, which is a typical use case for Jekyll, is that you can't easily include plugins, making it more important to add functionality to the core of Jekyll. As numerous discussions have already taken place in this repository, a great many people need this feature.

I assume that the critical issues on this subject were the filter names and test coverage. I would welcome any comments on the need for relative paths as a core feature, and any information on existing code (including technical issues).

Guide-level explanation

New Liquid Filter relative_to_current_url added. This filter converts a input URL to a URL relative to the current URL. It is recommended for use when making a site more portable.

Example usage : {{ "/assets/style.css" | relative_to_current_url }}

Example output : ../assets/style.css (When current URL is /sub/path)

Drawbacks

Implementation may involve technical difficulties and increased code complexity.

Unresolved Questions

The URLs generated by relative_url are now relative-URL and path-absolute-URL in the WHATWG URL Standard. On the other hand, the URLs generated by this new feature are relative-URL and path-relative-scheme-less-URL. This may cause a bit of name confusion.

[fauno]

Hi! I wrote the jekyll-relative-urls plugin to achieve this, but instead of using a filter per generated URL, it removes the leading slash from the URL generator and uses a {% base %} Liquid tag that produces the current base tag for the HTML document.

So every URL is written or looks like this page/location/ or assets/css/styles.css and then <head> contains a <base href="../../" /> tag.

[Mine02C4]

Thank you.
The methods are different, but the results I am looking for are exactly the same as your plugin. I think the equivalent of this should be a natural core function for a site generator.

Actually, I am using your plugin as well. But, I just can't use your plugin, which is really great, with GitHub Pages.

https://pages.github.com/versions/

I am very sad 😢