Merge pull request #1412 from maxstanley/vendor-fa

Vendor Font-Awesome
mermaid-js · Jun 16, 2024 · 6fbc5da · 6fbc5da
2 parents 81cc401 + 7ce93ea
commit 6fbc5da
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 16 deletions.
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
   },
   "devDependencies": {
     "@cypress/snapshot": "2.1.7",
+    "@fortawesome/fontawesome-free": "^6.5.1",
     "@sveltejs/adapter-static": "3.0.1",
     "@sveltejs/kit": "2.5.9",
     "@sveltejs/vite-plugin-svelte": "^3.0.1",

diff --git a/src/app.html b/src/app.html
@@ -15,12 +15,6 @@
     <link rel="mask-icon" href="%sveltekit.assets%/favicon.svg" color="#000000" />
     <meta name="theme-color" content="#6366F1" />
     <link rel="manifest" href="%sveltekit.assets%/manifest.json" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
-      integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
-      crossorigin="anonymous"
-      referrerpolicy="no-referrer" />
     %sveltekit.head%
   </head>
   <body style="overflow: hidden">

diff --git a/src/app.postcss b/src/app.postcss
@@ -1,3 +1,5 @@
+@import '@fortawesome/fontawesome-free/css/all.min.css';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

diff --git a/src/lib/components/Actions.svelte b/src/lib/components/Actions.svelte
@@ -8,6 +8,9 @@
   import { logEvent } from '$lib/util/stats';
   import dayjs from 'dayjs';
   import { toBase64 } from 'js-base64';
+  import { version as FAVersion } from '@fortawesome/fontawesome-free/package.json';
+
+  const FONT_AWESOME_URL = `https://cdnjs.cloudflare.com/ajax/libs/font-awesome/${FAVersion}/css/all.min.css`;
 
   const { krokiRendererUrl, rendererUrl } = env;
   type Exporter = (context: CanvasRenderingContext2D, image: HTMLImageElement) => () => void;
@@ -28,7 +31,10 @@
     const svgString = svg.outerHTML
       .replaceAll('<br>', '<br/>')
       .replaceAll(/<img([^>]*)>/g, (m, g: string) => `<img ${g} />`);
-    return toBase64(svgString);
+
+    return toBase64(`<?xml version="1.0" encoding="UTF-8"?>
+<?xml-stylesheet href="${FONT_AWESOME_URL}" type="text/css"?>
+${svgString}`);
   };
 
   const exportImage = async (event: Event, exporter: Exporter) => {
@@ -72,15 +78,6 @@
   const getSvgElement = () => {
     const svgElement = document.querySelector('#container svg')?.cloneNode(true) as HTMLElement;
     svgElement.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
-    const fontAwesomeCdnUrl = [...document.head.querySelectorAll('link')]
-      .map((link) => link.href)
-      .find((url) => url.includes('font-awesome'));
-    if (fontAwesomeCdnUrl == null) {
-      return svgElement;
-    }
-    const styleElement = document.createElement('style');
-    styleElement.textContent = `@import url("${fontAwesomeCdnUrl}");'`;
-    svgElement.prepend(styleElement);
     return svgElement;
   };
 

diff --git a/yarn.lock b/yarn.lock
@@ -300,6 +300,11 @@
     "@floating-ui/dom" "^1.2.1"
     vue-demi "^0.13.11"
 
+"@fortawesome/fontawesome-free@^6.5.1":
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-6.5.1.tgz#55cc8410abf1003b726324661ce5b0d1c10de258"
+  integrity sha512-CNy5vSwN3fsUStPRLX7fUYojyuzoEMSXPl7zSLJ8TgtRfjv24LOnOWKT2zYwaHZCJGkdyRnTmstR0P+Ah503Gw==
+
 "@headlessui-float/vue@^0.11.3":
   version "0.11.4"
   resolved "https://registry.yarnpkg.com/@headlessui-float/vue/-/vue-0.11.4.tgz#3689dab096f01d97d74e79c0a22445aa9f03ab78"