[BUG] Broken style when deployed to sub-folder

[mihalyr]

The style is broken when the site is not deployed to the root path.

Reproducer:

hugo new site compose-example
cd compose-example
git init
git submodule add --force https://github.com/onweru/compose/ themes/compose
cp -rav themes/compose/exampleSite/* .

After committing and starting hugo server everything works nicely on the code snippets page:

Now try the same with a different baseURL:

HUGO_BASEURL="http://localhost:1313/compose/example" hugo server

And the worst is when you deploy this theme to a sub-folder in a GitLab pages project where it completely breaks the page with the syntax highlighting examples:

This happens on both Firefox and Chromium, not browser related. My OS is Linux (Fedora 34), not sure what GitLab Pages use.

Hugo version I use locally: v0.80.0/extended

Hugo version in GitLab Pages: hugo_extended:latest

My suspicion is that the theme has some / and points to an absolute path under the root for loading some assets, but haven't tracked it down yet.

[mihalyr]

I've generated the page now with the following:

rm -rf public
HUGO_BASEURL="http://localhost:1313/compose/example" hugo -d public/compose/example

And then started serving this with Python:

cd public
python -m http.server -b localhost 1313

I can see from the server logs that the website is asking for icons at the wrong location - at the root, instead of at the baseURL.

127.0.0.1 - - [07/Mar/2022 12:06:18] "GET /compose/example/icons/next.svg HTTP/1.1" 200 -
127.0.0.1 - - [07/Mar/2022 12:06:18] code 404, message File not found
127.0.0.1 - - [07/Mar/2022 12:06:18] "GET /icons/copy.svg HTTP/1.1" 404 -
127.0.0.1 - - [07/Mar/2022 12:06:18] code 404, message File not found
127.0.0.1 - - [07/Mar/2022 12:06:18] "GET /icons/order.svg HTTP/1.1" 404 -
127.0.0.1 - - [07/Mar/2022 12:06:18] code 404, message File not found
127.0.0.1 - - [07/Mar/2022 12:06:18] "GET /icons/carly.svg HTTP/1.1" 404 -
127.0.0.1 - - [07/Mar/2022 12:06:18] code 404, message File not found
127.0.0.1 - - [07/Mar/2022 12:06:18] "GET /icons/expand.svg HTTP/1.1" 404 -
127.0.0.1 - - [07/Mar/2022 12:06:18] code 404, message File not found
127.0.0.1 - - [07/Mar/2022 12:06:18] "GET /icons/copy.svg HTTP/1.1" 404 -
127.0.0.1 - - [07/Mar/2022 12:06:18] code 404, message File not found
127.0.0.1 - - [07/Mar/2022 12:06:18] "GET /icons/order.svg HTTP/1.1" 404 -
127.0.0.1 - - [07/Mar/2022 12:06:18] code 404, message File not found
127.0.0.1 - - [07/Mar/2022 12:06:18] "GET /icons/carly.svg HTTP/1.1" 404 -
127.0.0.1 - - [07/Mar/2022 12:06:18] code 404, message File not found
127.0.0.1 - - [07/Mar/2022 12:06:18] "GET /icons/expand.svg HTTP/1.1" 404 -
127.0.0.1 - - [07/Mar/2022 12:06:18] code 404, message File not found
127.0.0.1 - - [07/Mar/2022 12:06:18] "GET /icons/copy.svg HTTP/1.1" 404 -
127.0.0.1 - - [07/Mar/2022 12:06:18] code 404, message File not found
127.0.0.1 - - [07/Mar/2022 12:06:18] "GET /icons/order.svg HTTP/1.1" 404 -
127.0.0.1 - - [07/Mar/2022 12:06:18] code 404, message File not found
127.0.0.1 - - [07/Mar/2022 12:06:18] "GET /icons/carly.svg HTTP/1.1" 404 -
127.0.0.1 - - [07/Mar/2022 12:06:18] code 404, message File not found
127.0.0.1 - - [07/Mar/2022 12:06:18] "GET /icons/expand.svg HTTP/1.1" 404 -
127.0.0.1 - - [07/Mar/2022 12:06:18] code 404, message File not found
127.0.0.1 - - [07/Mar/2022 12:06:18] "GET /index.json HTTP/1.1" 404 -

[mihalyr]

I think one of the problems is here where we load svgs from the rootURL: https://github.com/onweru/compose/blob/master/assets/js/functions.js#L177

function loadSvg(file, parent, path = iconsPath) {
  const link = new URL(`${path}${file}.svg`, rootURL).href;

[mihalyr]

This seems to be the reason why search is not working either:

https://github.com/onweru/compose/blob/master/assets/js/search.js#L196

window.addEventListener('load', function() {
  fetch(new URL("index.json", rootURL).href)

https://github.com/onweru/compose/blob/master/assets/js/search.js#L112

          if(searchTerm.length)  {
            window.location.href = new URL(`search/?query=${searchTerm}`, rootURL).href;

[mihalyr]

And rootURL is defined as: https://github.com/onweru/compose/blob/master/assets/js/variables.js#L7

const rootURL = window.location.protocol + "//" + window.location.host;

[mihalyr]

I've tested an easy fix this works for me in variables.js

// rootURL must end with '/' for relative URLs to work properly
const rootURL = '{{ strings.TrimSuffix "/" .Site.BaseURL }}/';

[mihalyr]

I've created a pull request with my proposal #75

[mihalyr]

Just wanted to add that I have a very easy workaround, I can override the variables.js in my local site as well for now.

PS: I am new to Hugo, just trying it the first time for documentation and needed a simple theme without dependencies that looks good, that's how I ended up using your theme. Thank you very much for creating this.