From d439963e4d565f762c65db4919e644c9649441bb Mon Sep 17 00:00:00 2001 From: Max Stanley Date: Sat, 2 Mar 2024 14:19:34 +0000 Subject: [PATCH 1/7] Vendor Font-Awesome --- package.json | 1 + src/app.html | 9 +++------ yarn.lock | 5 +++++ 3 files changed, 9 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 130dff6c0..256db7125 100644 --- 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.0", "@sveltejs/vite-plugin-svelte": "^3.0.1", diff --git a/src/app.html b/src/app.html index bcb8056af..efd064344 100644 --- a/src/app.html +++ b/src/app.html @@ -15,12 +15,9 @@ - + %sveltekit.head% diff --git a/yarn.lock b/yarn.lock index 7628fa881..31f22cbad 100644 --- a/yarn.lock +++ b/yarn.lock @@ -267,6 +267,11 @@ resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.56.0.tgz#ef20350fec605a7f7035a01764731b2de0f3782b" integrity sha512-gMsVel9D7f2HLkBma9VbtzZRehRogVRfbr++f06nL2vnCGCNlzOD+/MUov/F4p8myyAHspEhVobgjpX64q5m6A== +"@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== + "@humanwhocodes/config-array@^0.11.13": version "0.11.13" resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.13.tgz#075dc9684f40a531d9b26b0822153c1e832ee297" From e5e60457234dc3fed24e9b21e5d8bc87e3707602 Mon Sep 17 00:00:00 2001 From: Max Stanley Date: Sat, 2 Mar 2024 14:27:08 +0000 Subject: [PATCH 2/7] Fix indentation --- src/app.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app.html b/src/app.html index efd064344..1fc875190 100644 --- a/src/app.html +++ b/src/app.html @@ -16,7 +16,7 @@ %sveltekit.head% From fe3e283b3e2d9e654e142ee5ba71a65431376260 Mon Sep 17 00:00:00 2001 From: Max Stanley Date: Sat, 2 Mar 2024 14:44:52 +0000 Subject: [PATCH 3/7] Move FA CSS to app.postcss --- src/app.html | 3 --- src/app.postcss | 4 +++- src/lib/components/Actions.svelte | 8 +------- 3 files changed, 4 insertions(+), 11 deletions(-) diff --git a/src/app.html b/src/app.html index 1fc875190..e81d6f3bc 100644 --- a/src/app.html +++ b/src/app.html @@ -15,9 +15,6 @@ - %sveltekit.head% diff --git a/src/app.postcss b/src/app.postcss index 73ce33f00..1e49e5947 100644 --- a/src/app.postcss +++ b/src/app.postcss @@ -1,7 +1,9 @@ +@import '@fortawesome/fontawesome-free/css/all.min.css'; + @tailwind base; @tailwind components; @tailwind utilities; - + .input { @apply flex-1 rounded border-2 border-solid border-primary; } diff --git a/src/lib/components/Actions.svelte b/src/lib/components/Actions.svelte index 3cd45914e..d43dcf0f8 100644 --- a/src/lib/components/Actions.svelte +++ b/src/lib/components/Actions.svelte @@ -72,14 +72,8 @@ 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}");'`; + styleElement.textContent = "@import '@fortawesome/fontawesome-free/css/all.min.css';"; svgElement.prepend(styleElement); return svgElement; }; From 74be138670d6b45fcc1f95214366e835919f5d29 Mon Sep 17 00:00:00 2001 From: Max Stanley Date: Sat, 2 Mar 2024 16:09:08 +0000 Subject: [PATCH 4/7] Add #681 TODO --- src/lib/components/Actions.svelte | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/lib/components/Actions.svelte b/src/lib/components/Actions.svelte index d43dcf0f8..5b2c20238 100644 --- a/src/lib/components/Actions.svelte +++ b/src/lib/components/Actions.svelte @@ -72,9 +72,7 @@ const getSvgElement = () => { const svgElement = document.querySelector('#container svg')?.cloneNode(true) as HTMLElement; svgElement.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink'); - const styleElement = document.createElement('style'); - styleElement.textContent = "@import '@fortawesome/fontawesome-free/css/all.min.css';"; - svgElement.prepend(styleElement); + // TODO(#681) - Render Font Awesome Icons in SVG return svgElement; }; From 5a74e15a2245455f4a646e1b272b790f067aba73 Mon Sep 17 00:00:00 2001 From: Max Stanley Date: Sat, 2 Mar 2024 16:10:35 +0000 Subject: [PATCH 5/7] Remove whitespace --- src/app.postcss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app.postcss b/src/app.postcss index 1e49e5947..1e8e278c1 100644 --- a/src/app.postcss +++ b/src/app.postcss @@ -3,7 +3,7 @@ @tailwind base; @tailwind components; @tailwind utilities; - + .input { @apply flex-1 rounded border-2 border-solid border-primary; } From ab2a0244715f5fd3ee86f66a60aca908a75f2e6c Mon Sep 17 00:00:00 2001 From: Max Stanley Date: Sat, 2 Mar 2024 16:13:04 +0000 Subject: [PATCH 6/7] Formatting --- src/app.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app.html b/src/app.html index e81d6f3bc..827bd6bc6 100644 --- a/src/app.html +++ b/src/app.html @@ -17,7 +17,7 @@ %sveltekit.head% - +
%sveltekit.body%
From 2d3f233b5d7de88e89b0e8d8d9acbecb81c3609e Mon Sep 17 00:00:00 2001 From: Max Stanley Date: Sat, 2 Mar 2024 16:34:35 +0000 Subject: [PATCH 7/7] Include FA Stylesheet in SVG --- src/lib/components/Actions.svelte | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/lib/components/Actions.svelte b/src/lib/components/Actions.svelte index 5b2c20238..9c0bd1c4c 100644 --- 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('
', '
') .replaceAll(/]*)>/g, (m, g: string) => ``); - return toBase64(svgString); + + return toBase64(` + +${svgString}`); }; const exportImage = async (event: Event, exporter: Exporter) => { @@ -72,7 +78,6 @@ const getSvgElement = () => { const svgElement = document.querySelector('#container svg')?.cloneNode(true) as HTMLElement; svgElement.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink'); - // TODO(#681) - Render Font Awesome Icons in SVG return svgElement; };