Move from Font Awesome Kit to serving our own FA static files

hedyhli commented 6 months ago

Closes #1213.

Motivation:

Show icons in development
Drop dependency on lemon's fa kit
Ensure icons are always shown in production (due to having surpassed kit views limits)
More control over the static assets for font awesome

Notes:

No significant changes in load time of the icons for netlify preview before and after this change
FontAwesome: Webfonts + CSS or SVG + JS?

netlify[bot] commented 6 months ago

Deploy Preview for pydis-static ready!

Name	Link
Latest commit
Latest deploy log	https://app.netlify.com/sites/pydis-static/deploys/65d880afc9fe29df0a4519dd
Deploy Preview	https://deploy-preview-1232--pydis-static.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

coveralls commented 6 months ago

coverage: 100.0%. remained the same when pulling 40036a6a3d7d1cd4ab01d3a16b2b3ce0fa67ad0c on feat/font-awesome-plugin into ae308a45676f1e1d7b06cea2199cc2013d9b1ed4 on main.

wookie184 commented 6 months ago

This seems to make collecting static files quite slow for me. I think this is because a bunch of stuff is being bundled that we don't need.

Before:

python manage.py collectstatic --no-input with no staticfiles directory: ~3 seconds
python manage.py collectstatic --no-input with existing staticfiles directory: ~3 seconds
Size of staticfiles directory: 12MB from ~300 files

After:

python manage.py collectstatic --no-input with no staticfiles directory: ~12 seconds
python manage.py collectstatic --no-input with existing staticfiles directory: ~5 seconds
Size of staticfiles directory: 55MB from ~9800 files

Because of this, starting site locally is pretty slow, especially since it seems we clear staticfiles whenever starting up site with poetry run task start/python manage.py run --debug: https://github.com/python-discord/site/blob/88f2c27e8fd760f12e7b94854cf60c12047ea1d4/manage.py#L111-L116

I wonder if we'd be better off just copying the files we need into the repo instead of using the plugin, since I think we're only actually using about 5 of those 9500 files, and I don't see a way of configuring the plugin to only include what we want.

hedyhli commented 6 months ago

Hmm, I hadn't noticed such a huge difference in startup for me. But having thousands of files that we don't need this way should probably be fixed - most of them are individual SVG files of the icons.

Looks like the only advantage of using this plugin as compared to copying files ourselves is to have automatic upgrades of Font Awesome through poetry/dependabot.

It would've been best if the plugin allows specifying which files to copy, unless there is a way to run scripts automatically every time poetry upgrades the dependency...?

So let's say we just copy the files ourselves without using the plugin. Looking at the changelog, falling behind on versions probably won't affect us too much. Bumping the minor versions periodically doesn't seem too much of a maintenance burden either, but we'll have to remember to do it when needed. It's possible to achieve the same level of automation as dependabot when using the Font Awesome PyPI package, such as adding a script to the CI etc, though I guess keeping it up-to-date is not such a huge priority if it currently already "works".

For now I'm inclined to go for copying the five-ish fives to our own static/ and include the license file there. Perhaps with a readme on instructions of how to upgrade when needed. What do we think?

wookie184 commented 6 months ago

Copying the files into the repo sounds good to me.

An alternative would be to use the the plugin but by extracting just the files we want manually rather than adding the plugin as an app, but I'm not sure exactly how that would work and still download/store lots of files from installing the module, so I think copying into the repo is probably the simpler and most efficient option.

hedyhli commented 6 months ago

Thanks wookie.

I opted for all.min.css because I can't tell whether we would need the regular style as well in the future, and all.css would just include everything we are allowed to use for the free plan.

The latest FA release was added with only the required CSS/font files kept before force-pushing. I think it's safe to just include everything in webfonts since it's just a few files and we'll never know when we might use icons that need them.

(Chris triggered another netlify static build which then succeeded after the first one)

python-discord / site