Set up CI with Azure Pipelines

[skip ci]

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: () => {

azure-pipelines.yml

@@ -0,0 +1,40 @@
+# Docker
+# Build and push an image to Azure Container Registry
+# https://docs.microsoft.com/azure/devops/pipelines/languages/docker
+
+trigger:
+- main
+
+resources:
+- repo: self
+
+variables:
+  # Container registry service connection established during pipeline creation
+  dockerRegistryServiceConnection: 'c6da80c0-7d65-4b93-9203-3b91c4f6b5dc'
+  imageRepository: 'reactiveresume'
+  containerRegistry: 'reactiveresume.azurecr.io'
+  dockerfilePath: '$(Build.SourcesDirectory)/Dockerfile'
+  tag: '$(Build.BuildId)'
+
+  # Agent VM image name
+  vmImageName: 'ubuntu-latest'
+
+stages:
+- stage: Build
+  displayName: Build and push stage
+  jobs:
+  - job: Build
+    displayName: Build
+    pool:
+      vmImage: $(vmImageName)
+    steps:
+    - task: Docker@2
+      displayName: Build and push an image to container registry
+      inputs:
+        command: buildAndPush
+        repository: $(imageRepository)
+        dockerfile: $(dockerfilePath)
+        containerRegistry: $(dockerRegistryServiceConnection)
+        arguments: '--platform linux/amd64,linux/arm64'
+        tags: |
+          $(tag)

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);
+    }
+  });
+});