Merge pull request #2437 from Sahilbhatane/main

fix(artboard): bypass Google Fonts for local system fonts and post PAGE_LOADED immediately; add utils docstrings and unit tests for isLocalFont issue #2435

apps/artboard/src/pages/artboard.tsx

@@ -1,3 +1,4 @@
+import { isLocalFont } from "@reactive-resume/utils";
 import { useEffect, useMemo } from "react";
 import { Helmet } from "react-helmet-async";
 import { Outlet } from "react-router";
@@ -18,6 +19,18 @@ export const ArtboardPage = () => {
   }, [metadata.typography.font]);
 
   useEffect(() => {
+    const family = metadata.typography.font.family;
+    if (isLocalFont(family)) {
+      let frame = 0;
+      frame = requestAnimationFrame(() => {
+        const width = window.document.body.offsetWidth;
+        const height = window.document.body.offsetHeight;
+        const message = { type: "PAGE_LOADED", payload: { width, height } };
+        window.postMessage(message, "*");
+      });
+      return () => { cancelAnimationFrame(frame); };
+    }
+
     webfontloader.load({
       google: { families: [fontString] },
       active: () => {

libs/utils/src/namespaces/fonts.ts

@@ -6,6 +6,21 @@ export type Font = {
   files: Record<string, string>;
 };
 
+/**
+ * Known system fonts we consider available locally without fetching from Google Fonts.
+ * Extend this list when adding more system-safe families to the app.
+ */
+export const localFonts = ["Arial", "Cambria", "Garamond", "Times New Roman"];
+
+/**
+ * Checks whether a font family is a local/system font.
+ *
+ * Input: font family name (case-insensitive)
+ * Output: true if present in localFonts, otherwise false
+ */
+export const isLocalFont = (family: string): boolean =>
+  localFonts.some((f) => f.toLowerCase() === family.toLowerCase());
+
 export const fonts: Font[] = [
   {
     family: "Roboto",

libs/utils/src/namespaces/tests/fonts.test.ts

@@ -0,0 +1,25 @@
+import { describe, expect, it } from "vitest";
+
+import { isLocalFont, localFonts } from "../fonts";
+
+describe("isLocalFont", () => {
+  it("returns true for known local fonts (case-insensitive)", () => {
+    expect(isLocalFont("Arial")).toBe(true);
+    expect(isLocalFont("arial")).toBe(true);
+    expect(isLocalFont("Times New Roman")).toBe(true);
+    expect(isLocalFont("times new roman")).toBe(true);
+  });
+
+  it("returns false for non-local fonts", () => {
+    expect(isLocalFont("Roboto")).toBe(false);
+    expect(isLocalFont("Open Sans")).toBe(false);
+  });
+});
+
+describe("localFonts", () => {
+  it("includes the expected base set", () => {
+    for (const f of ["Arial", "Cambria", "Garamond", "Times New Roman"]) {
+      expect(localFonts).toContain(f);
+    }
+  });
+});