Merge pull request #1412 from maxstanley/vendor-fa

Vendor Font-Awesome
2024-06-16 13:43:49 +00:00
parent 81cc401bf2 7ce93ea210
commit 6fbc5da142
5 changed files with 15 additions and 16 deletions
@@ -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",
@@ -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">
@@ -1,3 +1,5 @@
+@import '@fortawesome/fontawesome-free/css/all.min.css';
+
@tailwind base;
@tailwind components;
@tailwind utilities;
@@ -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;
  };

@@ -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"