[LOCAL]: Cannot close notifications when FontAwesome not available

[G-Ambatte]

As reported via Gitter, the icons that are used to close the notifications and warnings are loaded from FontAwesome. When FontAwesome is not available for any reason, these icons do not appear and thus cannot be clicked, meaning that the notifications and warnings cannot be closed, and the brew Preview is covered.

To ensure that the FontAwesome icons are always available, Homebrewery might switch to using the locally hosted package - Font Awesome - Free NPM package. It would also seem like an appropriate time to review any other web hosted fonts, such as Open Sans, hosted by Google Fonts. While initial investigation into Google Fonts did not reveal a WOFF version of Open Sans, the font does have a permissive license and a WOFF version was located at FontSquirrel.

[calculuschild]

I'm ok grabbing the Google fonts, but not sold on Fontawesome. It is a HUGE package, and bundling it into the site means users will need to redownload it every time we make an update.

Having the main site functional is the priority, and the only case where FontAwesome wouldn't be available is if the user has no internet access, in which case they can't access the site anyway.

Unfortunately, private installations without internet access is too rare a use case to justify embedding Fontawesome if the cost is impractical bloating for our other hundreds of thousands of users.

We'll need to see how efficiently it compresses down before going forward on this. If it seems pretty minimal then that's fine.

[calculuschild]

We also need to consider that we actually load FontAwesome twice, once for the main site, and again in the iframe of the brewrenderer. Bundling it with an NPM package would mean the iframe no longer has access to it.

But if we can get it as a separate bundle that we can load in as a static file (and if it's now huge) that might work.

[ericscheid]

A simpler solution is to use CSS to set a min-width and min-height so at least there's a rectangle that could be clicked.

[ericscheid]

Also, we only use a small subset of the entire font-awesome font .. is there some way we could render particular glyphs to svg and use those where needed? (IIRC, the latest FA code does SVG in some manner)

Update: FA has done the hard work: https://fontawesome.com/v5.15/how-to-use/on-the-web/advanced/svg-sprites

And because of Same Site Policy implications, the fa-sprites.svg file would need to be hosted on the same domain as the calling page, so that'll work out of the box for local, including no-internet-local.

[G-Ambatte]

I was just thinking along those lines - the FA website has the option to grab the SVG of the icons; even if we only grabbed the vital ones - notification closing X, for example.

[G-Ambatte]

This link - https://github.com/naturalcrit/homebrewery/blob/279352377bbd533f1062af29f8328dc9a618c1ad/client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx#L81 - is the location of the FontAwesome parts of the notification window that seem to be the immediate source of the issue.

[calculuschild]

We could go the svg route for vital ones. But also remember we occasionally use Fontawesome directly in the brews, and I imagine users will expect all the icons to still work there. So we can't make everything svg or those will break.

[calculuschild]

These are probably the steps that will cause the least pain for a local no-internet install of FontAwesome:

cloud.mongodb.com/v2#/org/5f7f2ec8ac5c6d14a6be4bed/support

[ericscheid]

[SVG] But also remember we occasionally use Fontawesome directly in the brews, and I imagine users will expect all the icons to still work there. So we can't make everything svg or those will break.

An example of which is on the homepage:

**You can enable V3 via the <span class="fa fa-info-circle" style="text-indent:0"></span> Properties button!**

This can continue to be supported by linking FA as a font in CSS, same as any other custom font that a brew author might want. The only tricky bit here is we don't want to do a global search/replace throughout all THB source code because some of that source code is actually brew content.

(Although, in practice, we've generally hewed to <i class="fa ..."></i> for UI usage, and <span class="fa..." /> in brew content usage. Still, exercise caution when search/replace.)

[5e-Cleric]

What about using some sort of fallback icons? i believe that can be made, if we just threw an onerror attribute into the markup for the icon, maybe just for very important ones.

[calculuschild]

I think the best path is to simply host the whole font-awesome font and accompanying CSS file ourselves. The download size is about 17 MB, but we only need the .woff2 font file (~90kb) and the CSS file (~30kb). If the NPM package is the easiest way to do that, let's do that (instructions). I was mistaken about the package size, since it appears most of it is just copies of the raw SVGs that wouldn't actually be sent to our users.

https://fontawesome.com/docs/web/setup/host-yourself/webfonts gives pretty clear instructions on how to do this if we don't use the NPM package.

I'm going to close #2256 in favor of just self-hosting the whole font instead of manually picking out individual SVGs.