homebrewery
homebrewery copied to clipboard
naturalcrit
Add SVG for Notification & Render Warning dismissal action
This PR resolves #1965.
The primary impact of this change is to improve usability of Homebrewery on systems that are completely isolated from the Internet; in this case, specifically unable to load the FontAwesome icons across the web.
This PR replaces the X used as the Dismiss icon on notifications and render warnings windows with a SVG, so these windows may still be closed even when the FontAwesome online library is unable to be reached.
Recent reports from Jeddai and Gazook89 are that the notification close icon is also missing when FontAwesome is blocked, which appears to be happening on some local installs due to a cross origin error. This PR should resolve that as well, as - to my understanding - it is essentially the same issue.
Hm.... Is there some chance this can be solved instead by just adding FontAwesome to our repo, but only using the local copy if the CDN download fails? Then we can get the whole icon set working for local users (or users who can't access the CDN), but 99% of everyone else can benefit from the CDN?
Then that also removes having to add a special case code for every single X button that we have to keep track of.
Absolutely - adding FontAwesome to the repo would fix it. However, from memory, FontAwesome adds some ~14MB to the repo, while adding only the cross SVG as a special case adds only a few hundred bytes.
However, from memory, FontAwesome adds some ~14MB to the repo,
I don't think it's quite that big (I remember it being quite large, but maybe that was for the SVG version? What we use is just a font file and come CSS... right? We should check.) But to clarify, my thinking is there should be a way to make that a fallback so 99% of users still get their copy from the CDN, while only local/blocked users have to get the repo copy.
The instructions at https://fontawesome.com/docs/web/setup/packages for installing an offline line are to install this package - https://www.npmjs.com/package/@fortawesome/fontawesome-free - which shows an unpacked size of 17.6MB.
If we can get a slimmed down version - just the icons that we actually use - that I imagine that would be much smaller.
I downloaded FontAwesome 5's "Free for Web" archive. The extracted folder contains 17.6MB of data.
I don't think we need the whole package. If we just look at the CSS file we include and the font files it downloads in the Chrome Network tab, it's only like 120 kb.
https://fontawesome.com/docs/web/setup/host-yourself/webfonts hints how this can work. I.e., download the package, but we only need the CSS file and any relevant font files. I suspect the majority of the file size in the package comes from including SVGs of each glyph, which I think tend to be larger than the font files we need.
Closing this in favor of just self-hosting the whole font file instead of manually picking out individual SVGs.