From 1c2c8d97a0d01b2129cac4a688b71e060a208076 Mon Sep 17 00:00:00 2001 From: Garrone Joseph Date: Fri, 29 Jul 2022 23:11:13 +0000 Subject: [PATCH] GitBook: [#78] No subject --- contributing.md | 14 +++++++++++--- page-1.md | 2 +- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/contributing.md b/contributing.md index e39ee8ca7..8df867634 100644 --- a/contributing.md +++ b/contributing.md @@ -6,15 +6,23 @@ description: Looking for submitting a PR? Thank you! ### Adding support for a new page -[Here is an example of a good PR](https://github.com/InseeFrLab/keycloakify/pull/92) that adds support for a page. +[Here is an example of a good PR](https://github.com/InseeFrLab/keycloakify/pull/92) that adds support for a page. If you need to edit the i18n resources it should be done [here](https://github.com/InseeFrLab/keycloakify/blob/58c8306cf467f5884757683cf34428deba55ce57/src/lib/i18n/index.tsx#L9-L30) (and not in the `src/lib/i18n/generated_kcMessages` dir). +The keycloakify components are a plain React translation of the default theme that comes with Keycloak v11.0.3. + +You can download the FTL/CSS source files the components are based on with the following command: + +`npx -p keycloakify download-builtin-keycloak-theme` + +then select version 11.0.3 ([Video demo](https://user-images.githubusercontent.com/6702424/164304458-934b0e1d-9de7-4bb4-8a1c-e06a70b1636a.mov)). + ### Testing your changes in the demo app (or in your project) Let's assume you have made some change to the `keycloakify` codebase and you want to test those changes before submitting a PR. -Assuming you have cloned keycloakify in `~/github/keycloakify` this is how you would proceed. +Assuming you have cloned keycloakify in `~/github/keycloakify` this is how you would proceed. ```bash cd ~/github # Navigate to the dir where you have the keycloakify project @@ -36,7 +44,7 @@ cd keycloakify-demo-app yarn start ``` -Now you are able to test your local version of Keycloakify in the test app and make sure everything works as expected. +Now you are able to test your local version of Keycloakify in the test app and make sure everything works as expected. {% hint style="info" %} If you want to link your local version of `keycloakify` in your own app instead of the `keycloakify-demo-app` just run `yarn link_in_test_app ` diff --git a/page-1.md b/page-1.md index e7d44b2c0..e69018309 100644 --- a/page-1.md +++ b/page-1.md @@ -11,7 +11,7 @@ If your Keycloak theme is a standalone react project you can ignore this section {% endhint %} By default when your users reach the login pages all scripts, images and stylesheet are downloaded from the Keycloak server.\ -If you are specifically building a theme to integrate with an app or a website that allows users to first browse unauthenticated before logging in, you will get a significant performance boost if you jump through those hoops: +If you are specifically building a theme to integrate with an app or a website that allows users to browse unauthenticated before logging in, you will get a significant performance boost if you jump through those hoops: * Provide the url of your app in the `homepage` field of package.json. [ex](https://github.com/garronej/keycloakify-demo-app/blob/7847cc70ef374ab26a6cc7953461cf25603e9a6d/package.json#L2) or in a `public/CNAME` file. [ex](https://github.com/garronej/keycloakify-demo-app/blob/main/public/CNAME). * Build the theme using `npx build-keycloak-theme --external-assets` [ex](https://github.com/garronej/keycloakify-demo-app/blob/7847cc70ef374ab26a6cc7953461cf25603e9a6d/.github/workflows/ci.yaml#L21)