Merge pull request 'deps: update @swc/helpers to 0.5.19' (#76) from dependencies/update--swc-helpers into main

## Summary

- Allows `fonts.googleapis.com` in `style-src` and `fonts.gstatic.com` in `font-src` so the browser can load Google Fonts
- Adds preconnect hints and the Google Fonts import (Griffy, Kalam, Creepster, Henny Penny) to `index.html`
- Sets the body font to Kalam and heading font to Griffy, with utility classes for Creepster and Henny Penny
- Disables Angular's `inlineCritical` optimisation, which was causing the stylesheet to be deferred via `onload="this.media='all'"` — an inline event handler blocked by the strict `script-src` CSP, preventing the heading font rules from ever applying to screen media

## Test plan

- [ ] Rebuild and reload the app
- [ ] Verify headings render in Griffy
- [ ] Verify body text renders in Kalam
- [ ] Check DevTools Styles tab confirms the `h1-h6` font-family rule is matched

✨ This PR was created with help from Hikari~ 🌸

Reviewed-on: #77
Co-authored-by: Hikari <hikari@nhcarrigan.com>
Co-committed-by: Hikari <hikari@nhcarrigan.com>

api/src/app/app.ts

@@ -22,8 +22,8 @@ export async function app(fastify: FastifyInstance, opts: AppOptions) {
       });
     }
 
-    // Log unauthorized access attempts
-    if (error.statusCode === 401 || error.statusCode === 403) {
+    // Log unauthorized access attempts (exclude /api/auth/me as 401s there are expected during token refresh)
+    if ((error.statusCode === 401 || error.statusCode === 403) && request.url !== '/api/auth/me') {
       await AuditService.log({
         action: AuditAction.unauthorizedAccess,
         category: AuditCategory.security,

api/src/app/plugins/helmet.ts

@@ -14,11 +14,11 @@ const helmetPlugin: FastifyPluginAsync = async (app) => {
       directives: {
         defaultSrc: ["'self'"],
         // Angular uses inline styles for component encapsulation, so we need to allow them
-        styleSrc: ["'self'", "'unsafe-inline'"],
+        styleSrc: ["'self'", "'unsafe-inline'", "https://fonts.googleapis.com"],
         imgSrc: ["'self'", "data:", "https:"],
         scriptSrc: ["'self'"],
         connectSrc: ["'self'", process.env.FRONTEND_URL ?? "http://localhost:4200"],
-        fontSrc: ["'self'", "data:"],
+        fontSrc: ["'self'", "data:", "https://fonts.gstatic.com"],
         objectSrc: ["'none'"],
         baseUri: ["'self'"],
         formAction: ["'self'"],

api/src/app/services/book.service.ts

@@ -36,10 +36,6 @@ export class BookService {
     if (!validateStringLength(data.notes, MAX_LENGTHS.NOTES)) {
       throw new Error(`Notes must be ${MAX_LENGTHS.NOTES} characters or less.`);
     }
-    if (!validateStringLength(data.coverImage, MAX_LENGTHS.URL)) {
-      throw new Error(`Cover image URL must be ${MAX_LENGTHS.URL} characters or less.`);
-    }
-
     // Validate rating
     if (!validateRating(data.rating)) {
       throw new Error("Rating must be an integer between 0 and 10.");
@@ -47,7 +43,11 @@ export class BookService {
 
     if (data.coverImage) {
       if (data.coverImage.startsWith("data:")) {
-        const sizeInBytes = data.coverImage.length * 0.75;
+        const base64Data = data.coverImage.split(",")[1];
+        if (!base64Data) {
+          throw new Error("Invalid image data URL format.");
+        }
+        const sizeInBytes = base64Data.length * 0.75;
         if (sizeInBytes > MAX_LENGTHS.DATA_URL) {
           throw new Error("Cover image must be under 5MB.");
         }

api/src/app/services/manga.service.ts

@@ -33,10 +33,6 @@ export class MangaService {
     if (!validateStringLength(data.notes, MAX_LENGTHS.NOTES)) {
       throw new Error(`Notes must be ${MAX_LENGTHS.NOTES} characters or less.`);
     }
-    if (!validateStringLength(data.coverImage, MAX_LENGTHS.URL)) {
-      throw new Error(`Cover image URL must be ${MAX_LENGTHS.URL} characters or less.`);
-    }
-
     // Validate rating
     if (!validateRating(data.rating)) {
       throw new Error("Rating must be an integer between 0 and 10.");
@@ -45,7 +41,11 @@ export class MangaService {
     // Validate cover image URL
     if (data.coverImage) {
       if (data.coverImage.startsWith("data:")) {
-        const sizeInBytes = data.coverImage.length * 0.75;
+        const base64Data = data.coverImage.split(",")[1];
+        if (!base64Data) {
+          throw new Error("Invalid image data URL format.");
+        }
+        const sizeInBytes = base64Data.length * 0.75;
         if (sizeInBytes > MAX_LENGTHS.DATA_URL) {
           throw new Error("Cover image must be under 5MB.");
         }

api/src/app/services/music.service.ts

@@ -33,10 +33,6 @@ export class MusicService {
     if (!validateStringLength(data.notes, MAX_LENGTHS.NOTES)) {
       throw new Error(`Notes must be ${MAX_LENGTHS.NOTES} characters or less.`);
     }
-    if (!validateStringLength(data.coverArt, MAX_LENGTHS.URL)) {
-      throw new Error(`Cover art URL must be ${MAX_LENGTHS.URL} characters or less.`);
-    }
-
     // Validate rating
     if (data.rating !== undefined && !validateRating(data.rating)) {
       throw new Error("Rating must be an integer between 0 and 10.");
@@ -45,7 +41,11 @@ export class MusicService {
     // Validate cover art URL
     if (data.coverArt) {
       if (data.coverArt.startsWith("data:")) {
-        const sizeInBytes = data.coverArt.length * 0.75;
+        const base64Data = data.coverArt.split(",")[1];
+        if (!base64Data) {
+          throw new Error("Invalid image data URL format.");
+        }
+        const sizeInBytes = base64Data.length * 0.75;
         if (sizeInBytes > MAX_LENGTHS.DATA_URL) {
           throw new Error("Cover image must be under 5MB.");
         }

api/src/app/services/show.service.ts

@@ -30,10 +30,6 @@ export class ShowService {
     if (!validateStringLength(data.notes, MAX_LENGTHS.NOTES)) {
       throw new Error(`Notes must be ${MAX_LENGTHS.NOTES} characters or less.`);
     }
-    if (!validateStringLength(data.coverImage, MAX_LENGTHS.URL)) {
-      throw new Error(`Cover image URL must be ${MAX_LENGTHS.URL} characters or less.`);
-    }
-
     // Validate rating
     if (!validateRating(data.rating)) {
       throw new Error("Rating must be an integer between 0 and 10.");
@@ -42,7 +38,11 @@ export class ShowService {
     // Validate cover image URL
     if (data.coverImage) {
       if (data.coverImage.startsWith("data:")) {
-        const sizeInBytes = data.coverImage.length * 0.75;
+        const base64Data = data.coverImage.split(",")[1];
+        if (!base64Data) {
+          throw new Error("Invalid image data URL format.");
+        }
+        const sizeInBytes = base64Data.length * 0.75;
         if (sizeInBytes > MAX_LENGTHS.DATA_URL) {
           throw new Error("Cover image must be under 5MB.");
         }

apps/frontend/project.json

@@ -25,6 +25,11 @@
       },
       "configurations": {
         "production": {
+          "optimization": {
+            "styles": {
+              "inlineCritical": false
+            }
+          },
           "budgets": [
             {
               "type": "initial",

apps/frontend/src/app/services/global-error-handler.service.ts

@@ -12,6 +12,11 @@ export class GlobalErrorHandler implements ErrorHandler {
   private toast = inject(ToastService);
 
   handleError(error: Error): void {
+    if (error.name === 'ChunkLoadError' || error.message.includes('Loading chunk')) {
+      window.location.reload();
+      return;
+    }
+
     console.error('Global error caught:', error);
 
     // Show user-friendly error message

apps/frontend/src/index.html

@@ -8,6 +8,9 @@
     <meta name="description" content="Naomi's curated collection of games, books, music, shows, manga, and art. Browse, engage, and suggest new additions!" />
     <meta name="theme-color" content="#9d4edd" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Creepster&family=Griffy&family=Henny+Penny&family=Kalam:wght@300;400;700&display=swap" rel="stylesheet" />
     <script defer src="https://analytics.nhcarrigan.com/js/pa-YUXAn1vhhRttySUAw_LMN.js"></script>
     <script>
       window.plausible=window.plausible||function(){(plausible.q=plausible.q||[]).push(arguments)},plausible.init=plausible.init||function(i){plausible.o=i||{}};

apps/frontend/src/styles.scss

@@ -38,7 +38,7 @@
 body {
   margin: 0;
   padding: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  font-family: 'Kalam', cursive;
   font-size: 14pt;
   line-height: 1.6;
   color: var(--foreground);
@@ -75,10 +75,30 @@ body::after {
   pointer-events: none;
 }
 
+@keyframes wiggle {
+  0%, 100% { transform: rotate(-2deg); }
+  50% { transform: rotate(2deg); }
+}
+
 h1, h2, h3, h4, h5, h6 {
   margin-top: 0;
   line-height: 1.2;
   color: var(--witch-purple);
+  font-family: 'Griffy', cursive;
+}
+
+h1 {
+  animation: wiggle 4s ease-in-out infinite;
+  display: inline-block;
+}
+
+.witchy-accent,
+.spooky-title {
+  font-family: 'Creepster', cursive;
+}
+
+.mystical-text {
+  font-family: 'Henny Penny', cursive;
 }
 
 a {
@@ -121,6 +141,7 @@ select:focus {
 
 // Button base styles
 button {
+  font-family: inherit;
   transition: all 0.3s;
 }
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@library/source",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "license": "MIT",
   "scripts": {
     "dev": "nx run-many --target=build --all && NODE_ENV=production op run --env-file=dev.env -- node dist/api/main.js",
@@ -31,7 +31,7 @@
     "@fastify/csrf-protection": "7.1.0",
     "@fastify/helmet": "13.0.2",
     "@fastify/jwt": "10.0.0",
-    "@fastify/oauth2": "8.1.2",
+    "@fastify/oauth2": "8.2.0",
     "@fastify/rate-limit": "10.3.0",
     "@fastify/sensible": "6.0.4",
     "@fastify/static": "9.0.0",
@@ -44,8 +44,8 @@
     "dompurify": "3.3.1",
     "fastify": "5.7.3",
     "fastify-plugin": "5.0.1",
-    "jsdom": "28.0.0",
-    "marked": "17.0.1",
+    "jsdom": "28.1.0",
+    "marked": "17.0.3",
     "rxjs": "7.8.2"
   },
   "devDependencies": {
@@ -70,13 +70,13 @@
     "@schematics/angular": "21.1.2",
     "@swc-node/register": "1.9.2",
     "@swc/core": "1.5.29",
-    "@swc/helpers": "0.5.18",
+    "@swc/helpers": "0.5.19",
     "@types/dompurify": "3.2.0",
     "@types/jest": "30.0.0",
     "@types/jsdom": "27.0.0",
     "@types/jsonwebtoken": "9.0.10",
     "@types/node": "20.19.9",
-    "@typescript-eslint/utils": "8.54.0",
+    "@typescript-eslint/utils": "8.56.0",
     "angular-eslint": "21.1.0",
     "cypress": "15.9.0",
     "esbuild": "0.19.12",
@@ -91,6 +91,6 @@
     "ts-node": "10.9.1",
     "tslib": "2.8.1",
     "typescript": "5.9.3",
-    "typescript-eslint": "8.54.0"
+    "typescript-eslint": "8.56.0"
   }
 }