Join Url paths with forward slashes instead of OS (#934)

* Join web paths with forward slashes instead of OS

- On Windows, the contents images had back slashes in paths intended for
  web pages and messed up the path processing.

* Use joinUrlPath consistently

* Normalize parts

Author: chrisvire

convert/convertBooks.ts

@@ -8,7 +8,12 @@ import { freeze, postQueries, queries } from '../sab-proskomma-tools';
 import { SABProskomma } from '../src/lib/sab-proskomma';
 import type { ConfigTaskOutput } from './convertConfig';
 import { convertMarkdownsToMilestones } from './convertMarkdown';
-import { createHashedFile, createOutputDir, getHashedNameFromContents } from './fileUtils';
+import {
+    createHashedFile,
+    createOutputDir,
+    getHashedNameFromContents,
+    joinUrlPath
+} from './fileUtils';
 import { hasAudioExtension, hasImageExtension } from './stringUtils';
 import { Promisable, Task, TaskOutput } from './Task';
 import { verifyGlossaryEntries } from './verifyGlossaryEntries';
@@ -246,11 +251,11 @@ function updateImgTags(
             } else {
                 const imagePath = createHashedFile(
                     context.dataDir,
-                    `illustrations/${fileName}`,
+                    joinUrlPath('illustrations', fileName),
                     context.verbose
                 );
 
-                return match.replace(/src=["'][^"']*["']/, `src="${base}/${imagePath}"`);
+                return match.replace(/src=["'][^"']*["']/, `src="${joinUrlPath(base, imagePath)}"`);
             }
         }
     );

convert/convertContents.ts

@@ -3,7 +3,7 @@ import path from 'path';
 import { ScriptureConfig } from '$config';
 import jsdom from 'jsdom';
 import { ConfigTaskOutput, parseLangAttribute } from './convertConfig';
-import { createHashedFile, createOutputDir, deleteOutputDir } from './fileUtils';
+import { createHashedFile, createOutputDir, deleteOutputDir, joinUrlPath } from './fileUtils';
 import { Task, TaskOutput } from './Task';
 
 type ContentItem = {
@@ -215,12 +215,12 @@ export function convertContents(
                 scriptureConfig.bookCollections?.some((collection) => {
                     if (verbose) console.log(`Searching for ${linkTarget} in ${collection.id}`);
                     const book = collection.books.find((x) => x.id === linkTarget);
-                    if (book && book.type) {
+                    if (book && book.type && linkTarget) {
                         // We found a book and the book.type is not default (i.e. undefined)
                         if (verbose)
                             console.log(`Found ${linkTarget} in ${collection.id} as ${book.type}`);
                         linkType = book.type;
-                        linkLocation = `${linkType}/${collection.id}/${linkTarget}`;
+                        linkLocation = joinUrlPath(linkType, collection.id, linkTarget);
                         return true;
                     }
                 });

convert/convertManifest.ts

@@ -1,6 +1,6 @@
 import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'fs';
 import path from 'path';
-import { createHashedFile, createHashedFileFromContents } from './fileUtils';
+import { createHashedFile, createHashedFileFromContents, joinUrlPath } from './fileUtils';
 import { Task, TaskOutput } from './Task';
 
 export interface ManifestTaskOutput extends TaskOutput {
@@ -55,7 +55,7 @@ export function convertManifest(dataDir: string, verbose: number) {
                         throw new Error(`Required icon file ${iconPath} does not exist!`);
                     }
 
-                    line = line.replace(srcMatch[0], `"src": "./${finalName}"`);
+                    line = line.replace(srcMatch[0], `"src": "${joinUrlPath('.', finalName)}"`);
                 }
                 return line;
             })

convert/convertStyles.ts

@@ -1,7 +1,7 @@
 import { copyFileSync, existsSync, readdirSync, readFileSync, writeFileSync } from 'fs';
 import path from 'path';
 import { ConfigTaskOutput } from 'convertConfig';
-import { createOutputDir } from './fileUtils';
+import { createOutputDir, joinUrlPath } from './fileUtils';
 import { compareVersions } from './stringUtils';
 import { Task, TaskOutput } from './Task';
 
@@ -99,7 +99,7 @@ export function convertStyles(dataDir: string, configData: ConfigTaskOutput, ver
                                 );
                             }
                         }
-                        line = line.replace('/fonts', `$assets/${finalPath}`);
+                        line = line.replace('/fonts', joinUrlPath('$assets', finalPath));
                     }
                     return line;
                 })

convert/fileUtils.ts

@@ -1,6 +1,6 @@
 import { createHash } from 'crypto';
 import { copyFileSync, existsSync, mkdirSync, readFileSync, rmSync, writeFileSync } from 'fs';
-import { basename, extname, join } from 'path';
+import { basename, extname, join, posix } from 'path';
 
 export function getHashedName(dataDir: string, src: string) {
     const fullPath = join(dataDir, src);
@@ -31,7 +31,7 @@ export function getHashedNameFromContents(contents: string, src: string) {
 export function createHashedFile(dataDir: string, src: string, verbose: number, destPrefix = '') {
     const fullPath = join(dataDir, src);
 
-    const hashedPath = join(destPrefix, getHashedName(dataDir, src));
+    const hashedPath = joinUrlPath(destPrefix, getHashedName(dataDir, src));
     const dest = join('static', hashedPath);
 
     if (hashedPath && !existsSync(dest)) {
@@ -50,7 +50,7 @@ export function createHashedFileFromContents(
     verbose: number,
     destPrefix = ''
 ) {
-    const hashedPath = join(destPrefix, getHashedNameFromContents(contents, src));
+    const hashedPath = joinUrlPath(destPrefix, getHashedNameFromContents(contents, src));
     const dest = join('static', hashedPath);
 
     if (!existsSync(dest)) {
@@ -75,3 +75,9 @@ export function deleteOutputDir(dirPath: string) {
         rmSync(dirPath, { recursive: true });
     }
 }
+
+export function joinUrlPath(...parts: string[]) {
+    // Always use posix style paths for URLs
+    const normalized = parts.map((part) => part.replace(/\\/g, '/'));
+    return posix.join(...normalized);
+}