agtic/keycloak_theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix previous build, improve README

Browse Source
This commit is contained in:
Joseph Garrone 2021-03-26 15:29:17 +01:00
parent 4f733736db
commit 6f133428f8
8 changed files with 99 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
README.md
View File

@ -70,6 +70,10 @@ Here is `yarn add keycloakify` for you 🍸
"keycloak": "yarn build && build-keycloak-theme",
},
```
`"homepage"` must be specified only if the theme is build using
`--external-assets`(#specify-from-where-the-resources-should-be-downloaded) or if
the url path is not `/` (only the url path will be considered so it doesn't matter if the
base url is wrong)
It is mandatory that you specify the url where your app will be available
using the `homepage` field.
@ -88,6 +92,7 @@ page to load faster for first time users but it also implies that:
- If the app is down, your Keycloak login and register pages are down as well.
- Each time the app is updated, the theme must be updated.
- CORS must be enabled for fonts.
- You must know at build time what will be the url of your app (`"homepage"` in `package.json`).
<details>
<summary>Click to expand</summary>

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "keycloakify",
"version": "0.3.10",
"version": "0.3.11",
"description": "Keycloak theme generator for Reacts app",
"repository": {
"type": "git",

53
src/bin/build-keycloak-theme/generateFtl/index.ts
View File

@ -30,25 +30,22 @@ function loadFtlFile(ftlFileBasename: PageId | "template.ftl") {
}
}
export type Mode = {
type: "standalone";
urlPathname: string;
} | {
type: "external assets";
urlPathname: string;
urlOrigin: string;
}
export function generateFtlFilesCodeFactory(
params: {
ftlValuesGlobalName: string;
cssGlobalsToDefine: Record<string, string>;
indexHtmlCode: string;
mode: Mode;
}
urlPathname: string;
} & ({
mode: "standalone";
} | {
mode: "external assets";
urlOrigin: string;
})
) {
const { ftlValuesGlobalName, cssGlobalsToDefine, indexHtmlCode, mode } = params;
const { ftlValuesGlobalName, cssGlobalsToDefine, indexHtmlCode, urlPathname } = params;
const $ = cheerio.load(indexHtmlCode);
@ -57,7 +54,18 @@ export function generateFtlFilesCodeFactory(
const { fixedJsCode } = replaceImportsFromStaticInJsCode({
ftlValuesGlobalName,
"jsCode": $(element).html()!,
mode
...(() => {
switch (params.mode) {
case "standalone": return {
"mode": params.mode
};
case "external assets": return {
"mode": params.mode,
"urlOrigin": params.urlOrigin,
"urlPathname": params.urlPathname,
};
}
})()
});
$(element).text(fixedJsCode);
@ -68,7 +76,18 @@ export function generateFtlFilesCodeFactory(
const { fixedCssCode } = replaceImportsInInlineCssCode({
"cssCode": $(element).html()!,
mode
"urlPathname": params.urlPathname,
...(() => {
switch (params.mode) {
case "standalone": return {
"mode": params.mode
};
case "external assets": return {
"mode": params.mode,
"urlOrigin": params.urlOrigin,
};
}
})()
});
$(element).text(fixedCssCode);
@ -87,18 +106,18 @@ export function generateFtlFilesCodeFactory(
return;
}
switch (mode.type) {
switch (params.mode) {
case "external assets":
$(element).attr(
attrName,
href.replace(/^\//, `${mode.urlOrigin}/`)
href.replace(/^\//, `${params.urlOrigin}/`)
);
break;
case "standalone":
$(element).attr(
attrName,
href.replace(
new RegExp(`^${mode.urlPathname.replace(/\//g, "\\/")}`),
new RegExp(`^${urlPathname.replace(/\//g, "\\/")}`),
"${url.resourcesPath}/build/"
)
);
@ -131,7 +150,7 @@ export function generateFtlFilesCodeFactory(
'<style>',
generateCssCodeToDefineGlobals({
cssGlobalsToDefine,
"urlPathname": mode.urlPathname
urlPathname
}).cssCodeToPrependInHead,
'</style>',
''

30
src/bin/build-keycloak-theme/generateKeycloakThemeResources.ts
View File

@ -6,7 +6,7 @@ import {
replaceImportsInCssCode,
replaceImportsFromStaticInJsCode
} from "./replaceImportFromStatic";
import { generateFtlFilesCodeFactory, pageIds, Mode } from "./generateFtl";
import { generateFtlFilesCodeFactory, pageIds } from "./generateFtl";
import { builtinThemesUrl } from "../install-builtin-keycloak-themes";
import { downloadAndUnzip } from "../tools/downloadAndUnzip";
import * as child_process from "child_process";
@ -20,11 +20,16 @@ export function generateKeycloakThemeResources(
themeName: string;
reactAppBuildDirPath: string;
keycloakThemeBuildingDirPath: string;
mode: Mode;
}
urlPathname: string;
} & ({
mode: "standalone";
} | {
mode: "external assets";
urlOrigin: string;
})
) {
const { themeName, reactAppBuildDirPath, keycloakThemeBuildingDirPath, mode } = params;
const { themeName, reactAppBuildDirPath, keycloakThemeBuildingDirPath, urlPathname } = params;
const themeDirPath = pathJoin(keycloakThemeBuildingDirPath, "src", "main", "resources", "theme", themeName, "login");
@ -45,7 +50,7 @@ export function generateKeycloakThemeResources(
return undefined;
}
if (mode.type === "standalone") {
if (params.mode === "standalone") {
if (/\.css?$/i.test(filePath)) {
@ -67,7 +72,7 @@ export function generateKeycloakThemeResources(
const { fixedJsCode } = replaceImportsFromStaticInJsCode({
"jsCode": sourceCode.toString("utf8"),
ftlValuesGlobalName,
mode
"mode": params.mode
});
return { "modifiedSourceCode": Buffer.from(fixedJsCode, "utf8") };
@ -87,7 +92,18 @@ export function generateKeycloakThemeResources(
"indexHtmlCode": fs.readFileSync(
pathJoin(reactAppBuildDirPath, "index.html")
).toString("utf8"),
mode
urlPathname,
...(() => {
switch (params.mode) {
case "external assets": return {
"mode": params.mode,
"urlOrigin": params.urlOrigin
};
case "standalone": return {
"mode": params.mode
};
}
})()
});
pageIds.forEach(pageId => {

8
src/bin/build-keycloak-theme/index.ts
View File

@ -26,7 +26,7 @@ if (require.main === module) {
keycloakThemeBuildingDirPath,
"reactAppBuildDirPath": pathJoin(reactProjectDirPath, "build"),
"themeName": parsedPackageJson.name,
"mode": (() => {
...(() => {
const url = (() => {
@ -44,16 +44,14 @@ if (require.main === module) {
"/" :
url.pathname.replace(/([^/])$/, "$1/");
return !doUseExternalAssets ?
{
"type": "standalone",
"mode": "standalone",
urlPathname
} as const
:
{
"type": "external assets",
"mode": "external assets",
urlPathname,
"urlOrigin": (() => {

53
src/bin/build-keycloak-theme/replaceImportFromStatic.ts
View File

@ -1,32 +1,29 @@
import * as crypto from "crypto";
type Mode = {
type: "standalone";
} | {
type: "external assets";
urlOrigin: string;
urlPathname: string;
}
export function replaceImportsFromStaticInJsCode(
params: {
ftlValuesGlobalName: string;
jsCode: string;
mode: Mode;
}
} & ({
mode: "standalone";
} | {
mode: "external assets";
urlOrigin: string;
urlPathname: string;
})
): { fixedJsCode: string; } {
const { jsCode, ftlValuesGlobalName, mode } = params;
const { jsCode, ftlValuesGlobalName } = params;
const fixedJsCode = jsCode.replace(
/[a-z]+\.[a-z]+\+"static\//g,
(() => {
switch (mode.type) {
switch (params.mode) {
case "standalone":
return `window.${ftlValuesGlobalName}.url.resourcesPath + "/build/static/`;
case "external assets":
return `"${mode.urlOrigin}${mode.urlPathname}static/`;
return `"${params.urlOrigin}${params.urlPathname}static/`;
}
})()
);
@ -38,22 +35,28 @@ export function replaceImportsFromStaticInJsCode(
export function replaceImportsInInlineCssCode(
params: {
cssCode: string;
mode: Mode;
}
urlPathname: string;
} & ({
mode: "standalone";
} | {
mode: "external assets";
urlOrigin: string;
})
): { fixedCssCode: string; } {
const { cssCode, mode } = params;
const { cssCode, urlPathname } = params;
const fixedCssCode = cssCode.replace(
/url\((\/[^/][^)]+)\)/g,
(...[,group])=> `url(${
(()=>{
switch(mode.type){
case "standalone": return "${url.resourcesPath}/build" + group;
case "external assets": return mode.urlOrigin + group
}
})()
})`
urlPathname === "/" ?
/url\(\/([^/][^)]+)\)/g :
new RegExp(`url\\(${urlPathname}([^)]+)\\)`, "g"),
(...[, group]) => `url(${(() => {
switch (params.mode) {
case "standalone": return "${url.resourcesPath}/build/" + group;
case "external assets": return params.urlOrigin + urlPathname + group
}
})()
})`
);
return { fixedCssCode };

6
src/test/generateKeycloakThemeResources.ts
View File

@ -12,9 +12,7 @@ generateKeycloakThemeResources({
"themeName": "keycloakify-demo-app",
"reactAppBuildDirPath": pathJoin(sampleReactProjectDirPath, "build"),
"keycloakThemeBuildingDirPath": pathJoin(sampleReactProjectDirPath, "build_keycloak_theme"),
"mode": {
"type": "standalone",
"urlPathname": "/keycloakify-demo-app/"
}
"mode": "standalone",
"urlPathname": "/keycloakify-demo-app/"
});

2
src/test/replaceImportFromStatic.ts
View File

@ -20,7 +20,7 @@ const { fixedJsCode } = replaceImportsFromStaticInJsCode({
}[e] + ".chunk.js"
}
`,
"mode": { "type": "standalone" }
"mode": "standalone"
});
console.log({ fixedJsCode });