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

Merge remote-tracking branch 'origin/main' into doge_ftl_errors

Browse Source
This commit is contained in:
garronej 2021-12-12 14:12:31 +01:00
commit a292cb0b4b
1 changed files with 13 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
README.md
View File

@ -71,7 +71,7 @@ If you already have a Keycloak custom theme, it can be easily ported to Keycloak
- [GitHub Actions](#github-actions) - [GitHub Actions](#github-actions)
- [Limitations](#limitations) - [Limitations](#limitations)
- [`process.env.PUBLIC_URL` not supported.](#processenvpublic_url-not-supported) - [`process.env.PUBLIC_URL` not supported.](#processenvpublic_url-not-supported)
- [`@font-face` importing fonts from the `src/` dir](#font-face-importing-fonts-from-thesrc-dir) - [`@font-face` importing fonts from the `src/` dir](#font-face-importing-fonts-from-the-src-dir)
- [Example of setup that **won't** work](#example-of-setup-that-wont-work) - [Example of setup that **won't** work](#example-of-setup-that-wont-work)
- [Possible workarounds](#possible-workarounds) - [Possible workarounds](#possible-workarounds)
- [Implement context persistence (optional)](#implement-context-persistence-optional) - [Implement context persistence (optional)](#implement-context-persistence-optional)
@ -150,27 +150,23 @@ your index should look something like:
`src/index.tsx` `src/index.tsx`
```tsx ```tsx
import { App } from "./<wherever>/App"; import { App } from "./<wherever>/App";
import { import { KcApp, defaultKcProps, getKcContext } from "keycloakify";
KcApp, import { css } from "tss-react/@emotion/css";
defaultKcProps,
getKcContext
} from "keycloakify";
import { css } from "tss-react/@emotion/css";
const { kcContext } = getKcContext(); const { kcContext } = getKcContext();
const myClassName = css({ "color": "red" }); const myClassName = css({ "color": "red" });
reactDom.render( reactDom.render(
<KcApp <KcApp
kcContext={kcContext} kcContext={kcContext}
{...{ {...{
...defaultKcProps, ...defaultKcProps,
"kcHeaderWrapperClass": myClassName "kcHeaderWrapperClass": myClassName,
}} }}
/> />,
document.getElementById("root") document.getElementById("root"),
); );
``` ```
@ -356,7 +352,7 @@ the building and publishing of the theme (the .jar file).
You won't be able to [import things from your public directory **in your JavaScript code**](https://create-react-app.dev/docs/using-the-public-folder/#adding-assets-outside-of-the-module-system). You won't be able to [import things from your public directory **in your JavaScript code**](https://create-react-app.dev/docs/using-the-public-folder/#adding-assets-outside-of-the-module-system).
(This isn't recommended anyway). (This isn't recommended anyway).
## `@font-face` importing fonts from the `src/` dir ## `@font-face` importing fonts from the `src/` dir
If you are building the theme with [--external-assets](#enable-loading-in-a-blink-of-a-eye-of-login-pages-) If you are building the theme with [--external-assets](#enable-loading-in-a-blink-of-a-eye-of-login-pages-)
this limitation doesn't apply, you can import fonts however you see fit. this limitation doesn't apply, you can import fonts however you see fit.