Handle about images without creating duplicate files (#922)

* Revert "Add caching support for illustrations in the about page (#919)"

This reverts commit efe42b7.

* Rewrite about img src at load

* Replace only src attribute

Author: FyreByrd

convert/convertAbout.ts

@@ -1,53 +1,20 @@
-import * as fs from 'fs';
+import { copyFile } from 'fs';
 import path from 'path';
-import { createHashedFile } from './fileUtils';
 import { Task, TaskOutput } from './Task';
 
-const base = process.env.BUILD_BASE_PATH || '';
-
 export interface AboutTaskOutput extends TaskOutput {
     taskName: 'ConvertAbout';
 }
-
-// Function to check if an image is missing
-function isImageMissing(imageSource: string, dataDir: string): boolean {
-    return !fs.existsSync(path.join(dataDir, 'illustrations', imageSource));
-}
-
-function updateImgTags(text: string, dataDir: string, verbose: number): string {
-    return text.replace(
-        /<img\b[^>]*\bsrc=["']([^"']*\/)?([^"']*)["'][^>]*>/gi,
-        (_match, _path, fileName) => {
-            // If the image is missing in the "illustrations" folder, filter out the entire tag
-            if (isImageMissing(fileName, dataDir)) {
-                return '';
-            } else {
-                fs.mkdirSync(path.join('static', 'illustrations'), { recursive: true });
-                const imagePath = createHashedFile(dataDir, `illustrations/${fileName}`, verbose);
-
-                return `<img src="${base}/${imagePath}">`;
-            }
-        }
-    );
-}
-
 /**
- * Copies about.partial.html to static folder with image tag processing
+ * Copies about.partial.html to static folder
  */
 export function convertAbout(dataDir: string, verbose: number) {
     const srcFile = path.join(dataDir, 'about.partial.html');
     const dstFile = path.join('src/gen-assets', 'about.partial.html');
-
-    // Read the file content
-    const content = fs.readFileSync(srcFile, 'utf8');
-
-    // Apply the updateImgTags filter
-    const processedContent = updateImgTags(content, dataDir, verbose);
-
-    // Write the processed content to the destination
-    fs.writeFileSync(dstFile, processedContent, 'utf8');
-
-    if (verbose) console.log(`copied and processed ${srcFile} to ${dstFile}`);
+    copyFile(srcFile, dstFile, function (err: any) {
+        if (err) throw err;
+        if (verbose) console.log(`copied ${srcFile} to ${dstFile}`);
+    });
 }
 export class ConvertAbout extends Task {
     public triggerFiles: string[] = ['about.partial.html'];

convert/convertBooks.ts

@@ -239,7 +239,7 @@ function updateImgTags(
 ): string {
     return text.replace(
         /<img\b[^>]*\bsrc=["']([^"']*\/)?([^"']*)["'][^>]*>/gi,
-        (_match, _path, fileName) => {
+        (match, _path, fileName) => {
             // If the image is missing in the "illustrations" folder, filter out the entire tag
             if (isImageMissing(fileName)) {
                 return '';
@@ -250,7 +250,7 @@ function updateImgTags(
                     context.verbose
                 );
 
-                return `<img src="${base}/${imagePath}">`;
+                return match.replace(/src=["'][^"']*["']/, `src="${base}/${imagePath}"`);
             }
         }
     );

src/routes/about/+page.js

@@ -1,7 +1,25 @@
-import { base } from '$app/paths';
+const illustrations = import.meta.glob('./*', {
+    eager: true,
+    import: 'default',
+    base: '/src/gen-assets/illustrations'
+});
+
+function updateImgTags(/** @type {string} */ text) {
+    return text.replace(
+        /<img\b[^>]*\bsrc=["']([^"']*\/)?([^"']*)["'][^>]*>/gi,
+        (match, _path, fileName) => {
+            const img = illustrations[`./${fileName}`];
+            if (!img) {
+                console.error(`Error loading about illustration: could not find image ${fileName}`);
+                return match; // keep original tag instead of dropping it
+            }
+            return match.replace(/src=["'][^"']*["']/, `src="${img}"`);
+        }
+    );
+}
 
 /** @type {import('./$types').PageLoad} */
-export async function load({ fetch }) {
+export async function load() {
     const url = await import('$assets/about.partial.html?raw');
-    return { partial: url.default };
+    return { partial: updateImgTags(url.default ?? '') };
 }