From c68ab8d10f568d583199ae09ab4cabe9de466b04 Mon Sep 17 00:00:00 2001 From: Lars Francke Date: Thu, 16 Jul 2026 09:26:05 +0200 Subject: [PATCH] perf: Replace Font Awesome with inline svg icons Font Awesome shipped 137 kB of css and eight webfont files for seven glyphs: the external-link arrow, the search magnifier, the glossary link icon and four social icons in the footer. Those are inline svgs now (path data from Font Awesome Free 6.2.1, CC BY 4.0, attributed in ui/NOTICE), sized and colored via a small .svg-icon utility class. site.css shrinks from 146 kB to 48 kB and the webfonts/ directory disappears from the bundle. The fa-* checklist selectors in doc.css stay: they come from upstream and draw the check marks with css content, independent of any icon font. Also removes the inlineDynamicImports rollup option (vite 8 warns it is redundant for non-code-split builds). --- antora-playbook.yml | 2 +- local-antora-playbook.yml | 2 +- modules/reference/pages/glossary.adoc | 2 +- only-dev-antora-playbook.yml | 2 +- supplemental-ui/partials/navbar.hbs | 8 +- truly-local-playbook.yml | 2 +- ui/NOTICE | 4 +- ui/build.mjs | 10 +- ui/src/css/base.css | 10 + ui/src/css/site.css | 1 - ui/src/css/vendor/fontawesome.css | 7946 ---------------------- ui/src/partials/footer-content.hbs | 8 +- ui/src/partials/header.hbs | 2 +- ui/src/webfonts/fa-brands-400.ttf | Bin 186124 -> 0 bytes ui/src/webfonts/fa-brands-400.woff2 | Bin 107656 -> 0 bytes ui/src/webfonts/fa-regular-400.ttf | Bin 62320 -> 0 bytes ui/src/webfonts/fa-regular-400.woff2 | Bin 25236 -> 0 bytes ui/src/webfonts/fa-solid-900.ttf | Bin 397420 -> 0 bytes ui/src/webfonts/fa-solid-900.woff2 | Bin 150516 -> 0 bytes ui/src/webfonts/fa-v4compatibility.ttf | Bin 10140 -> 0 bytes ui/src/webfonts/fa-v4compatibility.woff2 | Bin 4568 -> 0 bytes 21 files changed, 29 insertions(+), 7970 deletions(-) delete mode 100644 ui/src/css/vendor/fontawesome.css delete mode 100644 ui/src/webfonts/fa-brands-400.ttf delete mode 100644 ui/src/webfonts/fa-brands-400.woff2 delete mode 100644 ui/src/webfonts/fa-regular-400.ttf delete mode 100644 ui/src/webfonts/fa-regular-400.woff2 delete mode 100644 ui/src/webfonts/fa-solid-900.ttf delete mode 100644 ui/src/webfonts/fa-solid-900.woff2 delete mode 100644 ui/src/webfonts/fa-v4compatibility.ttf delete mode 100644 ui/src/webfonts/fa-v4compatibility.woff2 diff --git a/antora-playbook.yml b/antora-playbook.yml index bef842f29..5559e0243 100644 --- a/antora-playbook.yml +++ b/antora-playbook.yml @@ -311,7 +311,7 @@ asciidoc: attributes: base-repo: https://github.com/stackabletech # an external icon. Create a link opening in a new tab like this: http://my-url.com[Text {external-link-icon}^] - external-link-icon: "" + external-link-icon: "" # the default caching directory is ./.cache/antora # Antora caches the git repos, this can sometimes lead to stale content # use 'make clean' to remove the build and cache directory diff --git a/local-antora-playbook.yml b/local-antora-playbook.yml index 864ef6172..9f6255f10 100644 --- a/local-antora-playbook.yml +++ b/local-antora-playbook.yml @@ -296,7 +296,7 @@ asciidoc: attributes: base-repo: https://github.com/stackabletech # an external icon. Create a link opening in a new tab like this: http://my-url.com[Text {external-link-icon}^] - external-link-icon: "" + external-link-icon: "" # the default caching directory is ./.cache/antora # Antora caches the git repos, this can sometimes lead to stale content # use 'make clean' to remove the build and cache directory diff --git a/modules/reference/pages/glossary.adoc b/modules/reference/pages/glossary.adoc index 3d70efe00..a0f9cc132 100644 --- a/modules/reference/pages/glossary.adoc +++ b/modules/reference/pages/glossary.adoc @@ -1,5 +1,5 @@ = Glossary -:li: pass:[] +:li: pass:[] :description: Glossary of Stackable terms, including Role, Role Group, and Stacklet, with definitions and links to detailed explanations. // refined styling for the glossary diff --git a/only-dev-antora-playbook.yml b/only-dev-antora-playbook.yml index a46379e80..000e84231 100644 --- a/only-dev-antora-playbook.yml +++ b/only-dev-antora-playbook.yml @@ -107,7 +107,7 @@ asciidoc: attributes: base-repo: https://github.com/stackabletech # an external icon. Create a link opening in a new tab like this: http://my-url.com[Text {external-link-icon}^] - external-link-icon: "" + external-link-icon: "" # the default caching directory is ./.cache/antora # Antora caches the git repos, this can sometimes lead to stale content # use 'make clean' to remove the build and cache directory diff --git a/supplemental-ui/partials/navbar.hbs b/supplemental-ui/partials/navbar.hbs index be0b18fb5..06c084621 100644 --- a/supplemental-ui/partials/navbar.hbs +++ b/supplemental-ui/partials/navbar.hbs @@ -18,7 +18,7 @@ CRD Reference {{else}} - CRD Reference + CRD Reference {{/if}}
@@ -95,13 +95,13 @@ Community
- Homepage + Homepage - GitHub + GitHub - Discord + Discord
Contributing diff --git a/truly-local-playbook.yml b/truly-local-playbook.yml index ed811a021..048126073 100644 --- a/truly-local-playbook.yml +++ b/truly-local-playbook.yml @@ -72,7 +72,7 @@ asciidoc: attributes: base-repo: https://github.com/stackabletech # an external icon. Create a link opening in a new tab like this: http://my-url.com[Text {external-link-icon}^] - external-link-icon: "" + external-link-icon: "" # the default caching directory is ./.cache/antora # Antora caches the git repos, this can sometimes lead to stale content # use 'make clean' to remove the build and cache directory diff --git a/ui/NOTICE b/ui/NOTICE index e9b0f5deb..96bdacb01 100644 --- a/ui/NOTICE +++ b/ui/NOTICE @@ -9,8 +9,8 @@ header comments; this file preserves the attributions and is included in the published bundle. - Font Awesome Free 6.2.1 (https://fontawesome.com) - Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License - https://fontawesome.com/license/free + The inline svg icon path data is derived from Font Awesome Free icons + (CC BY 4.0). https://fontawesome.com/license/free - highlight.js (https://highlightjs.org) BSD 3-Clause License, (c) 2006 Ivan Sagalaev and contributors - Asciidoctor Tabs (https://github.com/asciidoctor/asciidoctor-tabs) diff --git a/ui/build.mjs b/ui/build.mjs index 38421e882..7abc3460a 100644 --- a/ui/build.mjs +++ b/ui/build.mjs @@ -1,5 +1,5 @@ // Builds the Antora UI bundle (https://docs.antora.org/antora-ui-default/): -// css/, js/, js/vendor/, font/, webfonts/, img/, helpers/, layouts/, partials/ +// css/, js/, js/vendor/, font/, img/, helpers/, layouts/, partials/ // zipped as build/ui-bundle.zip (the path the playbooks reference). // // The scripts are consumed as classic