support homepage with urlPath

src/bin/build-keycloak-theme/generateFtl/index.ts

@@ -13,7 +13,7 @@ export const pageIds = ["login.ftl", "register.ftl", "info.ftl", "error.ftl", "l
 
 export type PageId = typeof pageIds[number];
 
-function loadAdjacentFile(fileBasename: string){
+function loadAdjacentFile(fileBasename: string) {
     return fs.readFileSync(pathJoin(__dirname, fileBasename))
         .toString("utf8");
 };
@@ -34,10 +34,11 @@ export function generateFtlFilesCodeFactory(
         ftlValuesGlobalName: string;
         cssGlobalsToDefine: Record<string, string>;
         indexHtmlCode: string;
+        urlPathname: string;
     }
 ) {
 
-    const { ftlValuesGlobalName, cssGlobalsToDefine, indexHtmlCode } = params;
+    const { ftlValuesGlobalName, cssGlobalsToDefine, indexHtmlCode, urlPathname } = params;
 
     const $ = cheerio.load(indexHtmlCode);
 
@@ -60,11 +61,17 @@ export function generateFtlFilesCodeFactory(
 
             const href = $(element).attr(attrName);
 
-            if (!href?.startsWith("/")) {
+            if (href === undefined) {
                 return;
             }
 
-            $(element).attr(attrName, "${url.resourcesPath}/build" + href);
+            $(element).attr(
+                attrName,
+                href.replace(
+                    new RegExp(`^${urlPathname.replace(/\//g, "\\/")}`),
+                    "${url.resourcesPath}/build/"
+                )
+            );
 
         })
     );
@@ -89,9 +96,10 @@ export function generateFtlFilesCodeFactory(
             ...(Object.keys(cssGlobalsToDefine).length === 0 ? [] : [
                 '',
                 '<style>',
-                generateCssCodeToDefineGlobals(
+                generateCssCodeToDefineGlobals({ 
-                    { cssGlobalsToDefine }
+                    cssGlobalsToDefine,
-                ).cssCodeToPrependInHead,
+                    urlPathname
+                }).cssCodeToPrependInHead,
                 '</style>',
                 ''
             ]),

src/bin/build-keycloak-theme/generateKeycloakThemeResources.ts

@@ -16,13 +16,14 @@ import { isInside } from "../tools/isInside";
 
 export function generateKeycloakThemeResources(
     params: {
+        urlPathname: string;
         themeName: string;
         reactAppBuildDirPath: string;
         keycloakThemeBuildingDirPath: string;
     }
 ) {
 
-    const { themeName, reactAppBuildDirPath, keycloakThemeBuildingDirPath } = params;
+    const { themeName, reactAppBuildDirPath, keycloakThemeBuildingDirPath, urlPathname } = params;
 
     const themeDirPath = pathJoin(keycloakThemeBuildingDirPath, "src", "main", "resources", "theme", themeName, "login");
 
@@ -80,7 +81,8 @@ export function generateKeycloakThemeResources(
         ftlValuesGlobalName,
         "indexHtmlCode": fs.readFileSync(
             pathJoin(reactAppBuildDirPath, "index.html")
-        ).toString("utf8")
+        ).toString("utf8"),
+        urlPathname
     });
 
     pageIds.forEach(pageId => {

src/bin/build-keycloak-theme/index.ts

@@ -6,6 +6,7 @@ import type { ParsedPackageJson } from "./generateJavaStackFiles";
 import { join as pathJoin, relative as pathRelative, basename as pathBasename } from "path";
 import * as child_process from "child_process";
 import { generateDebugFiles, containerLaunchScriptBasename } from "./generateDebugFiles";
+import { URL } from "url";
 
 
 const reactProjectDirPath = process.cwd();
@@ -22,7 +23,16 @@ if (require.main === module) {
     generateKeycloakThemeResources({
         keycloakThemeBuildingDirPath,
         "reactAppBuildDirPath": pathJoin(reactProjectDirPath, "build"),
-        "themeName": parsedPackageJson.name
+        "themeName": parsedPackageJson.name,
+        "urlPathname": (()=>{
+
+            const { homepage } = parsedPackageJson;
+
+            return homepage === undefined ? 
+                "/" : 
+                new URL(homepage).pathname.replace(/([^/])$/, "$1/");
+
+        })()
     });
 
     const { jarFilePath } = generateJavaStackFiles({

src/bin/build-keycloak-theme/replaceImportFromStatic.ts

@@ -11,8 +11,8 @@ export function replaceImportFromStaticInJsCode(
     const { jsCode, ftlValuesGlobalName } = params;
 
     const fixedJsCode = jsCode!.replace(
-        /"static\//g,
+        / [^ ]+"static\//g,
-        `window.${ftlValuesGlobalName}.url.resourcesPath.replace(/^\\//,"") + "/build/static/`
+        ` window.${ftlValuesGlobalName}.url.resourcesPath + "/build/static/`
     );
 
     return { fixedJsCode };
@@ -60,12 +60,13 @@ export function replaceImportFromStaticInCssCode(
 export function generateCssCodeToDefineGlobals(
     params: {
         cssGlobalsToDefine: Record<string, string>;
+        urlPathname: string; 
     }
 ): {
     cssCodeToPrependInHead: string;
 } {
 
-    const { cssGlobalsToDefine } = params;
+    const { cssGlobalsToDefine, urlPathname } = params;
 
     return {
         "cssCodeToPrependInHead": [
@@ -74,7 +75,7 @@ export function generateCssCodeToDefineGlobals(
                 .map(cssVariableName => [
                     `--${cssVariableName}:`,
                     cssGlobalsToDefine[cssVariableName]
-                        .replace(/url\(/g, "url(${url.resourcesPath}/build")
+                        .replace(new RegExp(`url\\(${urlPathname.replace(/\//g,"\\/")}`, "g"),"url(${url.resourcesPath}/build/")
                 ].join(" "))
                 .map(line => `    ${line};`),
             "}"

src/test/generateKeycloakThemeResources.ts

@@ -9,8 +9,9 @@ import {
 setupSampleReactProject();
 
 generateKeycloakThemeResources({
-    "themeName": "onyxia-ui",
+    "themeName": "keycloakify-demo-app",
     "reactAppBuildDirPath": pathJoin(sampleReactProjectDirPath, "build"),
-    "keycloakThemeBuildingDirPath": pathJoin(sampleReactProjectDirPath, "build_keycloak_theme")
+    "keycloakThemeBuildingDirPath": pathJoin(sampleReactProjectDirPath, "build_keycloak_theme"),
+    "urlPathname": "/keycloakify-demo-app/"
 });
 

src/test/replaceImportFromStatic.ts

@@ -45,6 +45,6 @@ const { fixedCssCode, cssGlobalsToDefine } = replaceImportFromStaticInCssCode({
 console.log({ fixedCssCode, cssGlobalsToDefine });
 
 
-const { cssCodeToPrependInHead } = generateCssCodeToDefineGlobals({ cssGlobalsToDefine });
+const { cssCodeToPrependInHead } = generateCssCodeToDefineGlobals({ cssGlobalsToDefine, "urlPathname": "/" });
 
 console.log({ cssCodeToPrependInHead });