itgalaxy / favicons

Favicons generator for Node.js
MIT License
1.19k stars 164 forks source link

Relative paths in generated HTML #453

Closed dttrian closed 4 months ago

dttrian commented 4 months ago

I'm using favicons 7.2.0 for an application that will not be published in the root of the website (e.g. https://www.website.com/) but in a subpath (e.g. https://www.website.com/myapp). In order to have the manifest file correctly generated, I have set the manifestRelativePaths option to true and it works: the path in the manifest.webmanifest file are relative. But when it comes to the generated html that I'll put into my index.html file, I have not found a way to generate relative paths. What I mean is that I obtain something like: <link rel="icon" type="image/x-icon" href="/assets/favicon.ico"> while I would need something like: <link rel="icon" type="image/x-icon" href="assets/favicon.ico">

Is there a way to achieve that through configuration? I tried to modify favicons code by changing this line in relativeTo (helpers.ts): return url.protocol === "resolve:" ? url.pathname : url.toString(); to this code:

  if (url.protocol === "resolve:") {
    return directory.startsWith("/") ? url.pathname : url.pathname.substring(1);
  }
  return url.toString();

and it works for my specific case. If needed I can provide a PR.

andy128k commented 4 months ago

path option allows to change where assets will be located. E. g. path: "/myapp".

dttrian commented 4 months ago

Yes, that's true. Anyway it also means that, if I need to change the path of my webapp, I have to recompile it. In addition, since I'm not using favicons directly but through https://github.com/JohnPremKumar/vite-plugin-favicons-inject, I am unable modify the path option in order to achieve what I need. But, of course, this is not an issue of the favicons project.

At this point, I think I'm only left with the option of creation a fork of both favicons and vite-plugin-favicons-inject, so to support relative links.

Thank you for your support.

andy128k commented 4 months ago

@dttrian You may open an issue for vite-plugin-favicons-inject to let you pass more favicons options. This is what other folks do too. E. g. webpack plugin allows this.

dttrian commented 4 months ago

@andy128k I think that's a bit more complicated than that, since vite-plugin-favicons-inject handles automatically the path option of favicon in order to make it work with vite and, even if I could specify that path directly, that would not completely solve my problem (I need relative paths). Anyway, thank you for the suggestion.