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).

Author: lfrancke

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: "<i class=\"fa-solid fa-arrow-up-right-from-square fa-xs\" style=\"margin-left: 3px; vertical-align: baseline;\"></i>"
+    external-link-icon: "<svg class=\"svg-icon\" style=\"width: 0.75em; height: 0.75em; margin-left: 3px;\" viewBox=\"0 0 512 512\" aria-hidden=\"true\"><path d=\"M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z\"/></svg>"
 # 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

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: "<i class=\"fa-solid fa-arrow-up-right-from-square fa-xs\" style=\"margin-left: 3px; vertical-align: baseline;\"></i>"
+    external-link-icon: "<svg class=\"svg-icon\" style=\"width: 0.75em; height: 0.75em; margin-left: 3px;\" viewBox=\"0 0 512 512\" aria-hidden=\"true\"><path d=\"M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z\"/></svg>"
 # 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

modules/reference/pages/glossary.adoc

@@ -1,5 +1,5 @@
 = Glossary
-:li: pass:[<i class="fa-solid fa-link fa-sm" style="margin-left: 5px; vertical-align: baseline;"></i>]
+:li: pass:[<svg class="svg-icon" style="width: 0.875em; height: 0.875em; margin-left: 5px;" viewBox="0 0 640 512" aria-hidden="true"><path d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"/></svg>]
 :description: Glossary of Stackable terms, including Role, Role Group, and Stacklet, with definitions and links to detailed explanations.
 
 // refined styling for the glossary

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: "<i class=\"fa-solid fa-arrow-up-right-from-square fa-xs\" style=\"margin-left: 3px; vertical-align: baseline;\"></i>"
+    external-link-icon: "<svg class=\"svg-icon\" style=\"width: 0.75em; height: 0.75em; margin-left: 3px;\" viewBox=\"0 0 512 512\" aria-hidden=\"true\"><path d=\"M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z\"/></svg>"
 # 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

supplemental-ui/partials/navbar.hbs

@@ -18,7 +18,7 @@
         <a class="navbar-item" href="{{{ relativize (versioned "home" page "reference/index.html") }}}">CRD Reference</a>
         {{else}}
         <a class="navbar-item" href="{{{ page.attributes.crd-docs }}}" target="_blank">
-            CRD Reference <i class="fa-solid fa-arrow-up-right-from-square fa-sm" style="margin-left: 5px;"></i>
+            CRD Reference <svg class="svg-icon" style="width: 0.875em; height: 0.875em; margin-left: 5px;" viewBox="0 0 512 512" aria-hidden="true"><path d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z"/></svg>
         </a>
         {{/if}}
         <hr class="navbar-divider">
@@ -95,13 +95,13 @@
     <a class="navbar-link" href="#">Community</a>
     <div class="navbar-dropdown">
         <a class="navbar-item" href="https://stackable.tech/en/" target="_blank">
-            Homepage <i class="fa-solid fa-arrow-up-right-from-square fa-sm" style="margin-left: 5px;"></i>
+            Homepage <svg class="svg-icon" style="width: 0.875em; height: 0.875em; margin-left: 5px;" viewBox="0 0 512 512" aria-hidden="true"><path d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z"/></svg>
         </a>
         <a class="navbar-item" href="https://github.com/stackabletech/" target="_blank">
-            GitHub <i class="fa-solid fa-arrow-up-right-from-square fa-sm" style="margin-left: 5px;"></i>
+            GitHub <svg class="svg-icon" style="width: 0.875em; height: 0.875em; margin-left: 5px;" viewBox="0 0 512 512" aria-hidden="true"><path d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z"/></svg>
         </a>
         <a class="navbar-item" href="https://discord.com/invite/7kZ3BNnCAF" target="_blank">
-            Discord <i class="fa-solid fa-arrow-up-right-from-square fa-sm" style="margin-left: 5px;"></i>
+            Discord <svg class="svg-icon" style="width: 0.875em; height: 0.875em; margin-left: 5px;" viewBox="0 0 512 512" aria-hidden="true"><path d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z"/></svg>
         </a>
         <hr class="navbar-divider">
         <a class="navbar-item" href="{{{ relativize (versioned "home" page "contributor/index.html") }}}">Contributing</a>

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: "<i class=\"fa-solid fa-arrow-up-right-from-square fa-xs\" style=\"margin-left: 3px; vertical-align: baseline;\"></i>"
+    external-link-icon: "<svg class=\"svg-icon\" style=\"width: 0.75em; height: 0.75em; margin-left: 3px;\" viewBox=\"0 0 512 512\" aria-hidden=\"true\"><path d=\"M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z\"/></svg>"
 # 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

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)

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 <script src> tags, so every js entry is
@@ -69,7 +69,6 @@ for (const entry of jsEntries) {
           output: {
             format: 'iife',
             entryFileNames: `js/${entry.name}.js`,
-            inlineDynamicImports: true
           }
         }
       }
@@ -89,7 +88,6 @@ await build(
           assetFileNames: (asset) => {
             const name = asset.names[0] ?? '';
             if (name === 'site.css') return 'css/site.css';
-            if (/^fa-.+\.(woff2?|ttf)$/.test(name)) return 'webfonts/[name][extname]';
             if (/\.(woff2?|ttf)$/.test(name)) return 'font/[name][extname]';
             if (/\.(svg|png|gif|ico|jpg)$/.test(name)) return 'img/[name][extname]';
             return 'css/[name][extname]';
@@ -100,9 +98,7 @@ await build(
   })
 );
 
-// webfonts/ ships as-is: the Font Awesome css references it with
-// runtime-relative urls that vite cannot (and must not) rewrite
-for (const dir of ['helpers', 'layouts', 'partials', 'img', 'webfonts']) {
+for (const dir of ['helpers', 'layouts', 'partials', 'img']) {
   cpSync(resolve(src, dir), resolve(staged, dir), { recursive: true });
 }
 for (const file of ['NOTICE', 'LICENSE']) {

ui/src/css/base.css

@@ -148,3 +148,13 @@ body ::-webkit-scrollbar-thumb {
 .justify-between {
   justify-content: space-between;
 }
+
+/* Inline svg icons; the path data comes from Font Awesome Free (CC BY 4.0,
+ * see ../../NOTICE). Sizes deviating from 1em are set inline at the usage. */
+.svg-icon {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  fill: currentcolor;
+  vertical-align: -0.125em;
+}

ui/src/css/site.css

@@ -19,6 +19,5 @@
 @import "admonition.css";
 @import "end-of-life-banner.css";
 @import "link-bar.css";
-@import "vendor/fontawesome.css";
 @import "@asciidoctor/tabs/dist/css/tabs.css";
 @import "tabs.css";