From 06048b6db92941ed819528f4b9d9fc47a0edfd9a Mon Sep 17 00:00:00 2001
From: martin <74269598+martabal@users.noreply.github.com>
Date: Tue, 1 Oct 2024 04:08:25 +0200
Subject: [PATCH] feat: preload fonts (#13068)

---
 server/src/constants.ts |  1 -
 web/src/app.html        |  2 ++
 web/src/hooks.server.ts | 12 ++++++++++++
 3 files changed, 14 insertions(+), 1 deletion(-)
 create mode 100644 web/src/hooks.server.ts

diff --git a/server/src/constants.ts b/server/src/constants.ts
index e0a4fe8cef..8115101ca0 100644
--- a/server/src/constants.ts
+++ b/server/src/constants.ts
@@ -23,7 +23,6 @@ export const ONE_HOUR = Duration.fromObject({ hours: 1 });
 export const envName = (process.env.IMMICH_ENV || 'production').toUpperCase();
 export const isDev = () => process.env.IMMICH_ENV === 'development';
 export const APP_MEDIA_LOCATION = process.env.IMMICH_MEDIA_LOCATION || './upload';
-export const WEB_ROOT = process.env.IMMICH_WEB_ROOT || '/usr/src/app/www';
 const HOST_SERVER_PORT = process.env.IMMICH_PORT || '2283';
 export const DEFAULT_EXTERNAL_DOMAIN = 'http://localhost:' + HOST_SERVER_PORT;
 
diff --git a/web/src/app.html b/web/src/app.html
index ff6a8bf580..d76e52c859 100644
--- a/web/src/app.html
+++ b/web/src/app.html
@@ -13,6 +13,8 @@
     <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96.png" />
     <link rel="icon" type="image/png" sizes="144x144" href="/favicon-144.png" />
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180.png" />
+    <link rel="preload" as="font" type="font/ttf" href="%app.font%" />
+    <link rel="preload" as="font" type="font/ttf" href="%app.monofont%" />
     %sveltekit.head%
     <style>
       /* prevent FOUC */
diff --git a/web/src/hooks.server.ts b/web/src/hooks.server.ts
new file mode 100644
index 0000000000..1606f92796
--- /dev/null
+++ b/web/src/hooks.server.ts
@@ -0,0 +1,12 @@
+import overpass from '$lib/assets/fonts/overpass/Overpass.ttf?url';
+import overpassMono from '$lib/assets/fonts/overpass/OverpassMono.ttf?url';
+import type { Handle } from '@sveltejs/kit';
+
+// only used during the build to replace the variables from app.html
+export const handle = (async ({ event, resolve }) => {
+  return resolve(event, {
+    transformPageChunk: ({ html }) => {
+      return html.replace('%app.font%', overpass).replace('%app.monofont%', overpassMono);
+    },
+  });
+}) satisfies Handle;