[BUG] Broken style when deployed to sub-folder about compose

[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.