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

Things are starting to take form

Browse Source
This commit is contained in:
Joseph Garrone 2021-02-21 18:55:06 +01:00
parent 236ab9dd2b
commit 00f15537a3
10 changed files with 125 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -42,5 +42,4 @@ jspm_packages
/dist
/build
/keycloak_build
/etc_tmp/

3
package-lock.json generated
View File

@ -14,7 +14,8 @@
"devDependencies": {
"@types/node": "^10.0.0",
"denoify": "^0.6.4",
"evt": "^1.8.11",
"evt": "beta",
"scripting-tools": "^0.19.13",
"typescript": "^4.1.5"
}
},

1
package.json
View File

@ -33,6 +33,7 @@
"@types/node": "^10.0.0",
"denoify": "^0.6.4",
"evt": "beta",
"scripting-tools": "^0.19.13",
"typescript": "^4.1.5"
},
"dependencies": {

30
res/index.html
View File

@ -1,30 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="/logo192.png" />
<link rel="manifest" href="/manifest.json" />
<title>React App</title>
<link href="/static/css/main.8c8b27cf.chunk.css" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script>
function f() {
return a.p + "static/js/" + ({}[e] || e) + "." + {
3: "0664cdc0"
}[e] + ".chunk.js"
}
</script>
<script src="/static/js/2.0f3a6c43.chunk.js"></script>
<script src="/static/js/main.94e9b83c.chunk.js"></script>
</body>
</html>

0
res/static/css/main.8c8b27cf.chunk.css
View File

13
res/static/js/2.0f3a6c43.chunk.js
View File

@ -1,13 +0,0 @@
function f() {
return a.p + "static/js/" + ({}[e] || e) + "." + {
3: "0664cdc0"
}[e] + ".chunk.js"
}
function f() {
return a.p + "static/js/" + ({}[e] || e) + "." + {
3: "0664cdc0"
}[e] + ".chunk.js"
}

13
res/static/js/2.0f3a6c43.chunk_another.js
View File

@ -1,13 +0,0 @@
function f() {
return a.p + "static/js/" + ({}[e] || e) + "." + {
3: "0664cdc0"
}[e] + ".chunk.js"
}
function f() {
return a.p + "static/js/" + ({}[e] || e) + "." + {
3: "0664cdc0"
}[e] + ".chunk.js"
}

97
src/bin/generateKeycloakThemeResources.ts Normal file
View File

@ -0,0 +1,97 @@
import { transformCodebase } from "../tools/transformCodebase";
import * as fs from "fs";
import { join as pathJoin } from "path";
import {
replaceImportFromStaticInCssCode,
replaceImportFromStaticInJsCode
} from "./replaceImportFromStatic";
import { generateFtlFilesCodeFactory } from "./generateFtl";
/*
const reactAppBuildDirPath = pathJoin(process.cwd(), "build");
assert(
fs.existsSync(reactAppBuildDirPath),
"Run 'react-script build' first (the build dir should be present)"
);
const keycloakDir = pathJoin(reactAppBuildDirPath, "..", "keycloak_build");
*/
const ftlValuesGlobalName = "keycloakFtlValues";
export function generateKeycloakThemeResources(
params: {
themeName: string;
reactAppBuildDirPath: string;
keycloakThemeBuildingDirPath: string;
}
) {
const { themeName, reactAppBuildDirPath, keycloakThemeBuildingDirPath } = params;
const themeDirPath = pathJoin(keycloakThemeBuildingDirPath, "src", "main", "resources", "theme", themeName, "login");
let allCssGlobalsToDefine: Record<string, string> = {};
transformCodebase({
"destDirPath": pathJoin(themeDirPath, "resources"),
"srcDirPath": reactAppBuildDirPath,
"transformSourceCodeString": ({ filePath, sourceCode }) => {
if (/\.css?$/i.test(filePath)) {
const { cssGlobalsToDefine, fixedCssCode } = replaceImportFromStaticInCssCode(
{ "cssCode": sourceCode.toString("utf8") }
);
allCssGlobalsToDefine = {
...allCssGlobalsToDefine,
...cssGlobalsToDefine
};
return { "modifiedSourceCode": Buffer.from(fixedCssCode, "utf8") };
}
if (/\.js?$/i.test(filePath)) {
const { fixedJsCode } = replaceImportFromStaticInJsCode({
"jsCode": sourceCode.toString("utf8"),
ftlValuesGlobalName
});
return { "modifiedSourceCode": Buffer.from(fixedJsCode, "utf8") };
}
return { "modifiedSourceCode": sourceCode };
}
});
const { generateFtlFilesCode } = generateFtlFilesCodeFactory({
"cssGlobalsToDefine": allCssGlobalsToDefine,
ftlValuesGlobalName,
"indexHtmlCode": fs.readFileSync(
pathJoin(reactAppBuildDirPath, "index.html")
).toString("utf8")
});
(["login.ftl", "register.ftl"] as const).forEach(pageBasename => {
const { ftlCode } = generateFtlFilesCode({ pageBasename });
fs.writeFileSync(
pathJoin(themeDirPath, pageBasename),
Buffer.from(ftlCode, "utf8")
)
});
}

80
src/bin/main.ts
View File

@ -1,80 +0,0 @@
import { transformCodebase } from "../tools/transformCodebase";
import * as fs from "fs";
import { join as pathJoin } from "path";
import { assert } from "evt/tools/typeSafety/assert";
import {
replaceImportFromStaticInCssCode,
replaceImportFromStaticInJsCode
} from "./replaceImportFromStatic";
import { generateFtlFilesCodeFactory } from "./generateFtl";
const reactAppBuildDirPath = pathJoin(process.cwd(), "build");
assert(
fs.existsSync(reactAppBuildDirPath),
"Run 'react-script build' first (the build dir should be present)"
);
const keycloakDir = pathJoin(reactAppBuildDirPath, "..", "keycloak_build");
let allCssGlobalsToDefine: Record<string, string> = {};
const ftlValuesGlobalName = "keycloakFtlValues";
transformCodebase({
"destDirPath": pathJoin(keycloakDir, "login", "resources"),
"srcDirPath": reactAppBuildDirPath,
"transformSourceCodeString": ({ filePath, sourceCode }) => {
if (/\.css?$/i.test(filePath)) {
const { cssGlobalsToDefine, fixedCssCode } = replaceImportFromStaticInCssCode(
{ "cssCode": sourceCode.toString("utf8") }
);
allCssGlobalsToDefine = {
...allCssGlobalsToDefine,
...cssGlobalsToDefine
};
return { "modifiedSourceCode": Buffer.from(fixedCssCode, "utf8") };
}
if (/\.js?$/i.test(filePath)) {
const { fixedJsCode } = replaceImportFromStaticInJsCode({
"jsCode": sourceCode.toString("utf8"),
ftlValuesGlobalName
});
return { "modifiedSourceCode": Buffer.from(fixedJsCode, "utf8") };
}
return { "modifiedSourceCode": sourceCode };
}
});
const { generateFtlFilesCode } = generateFtlFilesCodeFactory({
"cssGlobalsToDefine": allCssGlobalsToDefine,
ftlValuesGlobalName,
"indexHtmlCode": fs.readFileSync(
pathJoin(reactAppBuildDirPath, "index.html")
).toString("utf8")
});
(["login.ftl", "register.ftl"] as const).forEach(pageBasename => {
const { ftlCode } = generateFtlFilesCode({ pageBasename });
fs.writeFileSync(
pathJoin(keycloakDir, "login", pageBasename),
Buffer.from(ftlCode, "utf8")
)
});

24
src/test/generateKeycloakThemeResources.ts Normal file
View File

@ -0,0 +1,24 @@
import * as st from "scripting-tools";
import { join as pathJoin } from "path";
import { generateKeycloakThemeResources } from "../bin/generateKeycloakThemeResources";
const cwd= pathJoin(__dirname, "..", "..", "etc_tmp");
st.execSync(`rm -rf ${cwd}`);
st.execSync(`mkdir ${cwd}`);
process.chdir(cwd);
st.execSync("wget https://github.com/garronej/keycloak-react-theming/releases/download/v0.0.1/build.zip");
st.execSync("unzip build.zip");
st.execSync("rm build.zip");
generateKeycloakThemeResources({
"themeName": "onyxia-ui",
"reactAppBuildDirPath": pathJoin(process.cwd(), "build"),
"keycloakThemeBuildingDirPath": pathJoin(process.cwd(), "keycloak_build")
});