keywind/README.md

# :wind_face: Keywind

Keywind is a component-based Keycloak Login & E-Mail Theme built with [Tailwind CSS](https://github.com/tailwindlabs/tailwindcss), [Mailwind](https://www.mailwind.io/) and [Alpine.js](https://github.com/alpinejs/alpine).

![Preview Login](./preview-login.png)

![Preview Login](./preview-email.png)

### Styled Pages

- Error
- Login
- Login Config TOTP
- Login IDP Link Confirm
- Login OAuth Grant
- Login OTP
- Login Page Expired
- Login Password
- Login Recovery Authn Code Config
- Login Recovery Authn Code Input
- Login Reset Password
- Login Update Password
- Login Update Profile
- Login Username
- Logout Confirm
- Register
- Select Authenticator
- Terms and Conditions
- WebAuthn Authenticate
- WebAuthn Error
- WebAuthn Register

### Identity Provider Icons

- Apple
- Bitbucket
- Discord
- Facebook
- GitHub
- GitLab
- Google
- Instagram
- LinkedIn
- Microsoft
- OpenID
- Red Hat OpenShift
- PayPal
- Slack
- Stack Overflow
- Twitter

## Installation

Keywind has been designed with component-based architecture from the start, and **you can customize as little or as much Keywind as you need**:

1. [Deploy Keywind Themes](https://www.keycloak.org/docs/latest/server_development/#deploying-themes)
2. [Create your own Themes](https://www.keycloak.org/docs/latest/server_development/#creating-a-theme)
3. Specify parent theme in [theme properties](https://www.keycloak.org/docs/latest/server_development/#theme-properties):

```
parent=keywind
```

4. Brand and customize components with [FreeMarker](https://freemarker.apache.org/docs/dgui_quickstart_template.html)

## Customization

### Theme

When you do need to customize a palette, you can configure your colors under the `colors` key in the `theme` section of Tailwind config file:

`tailwind.config.js`

```js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: colors.red,
      },
    },
  },
};
```

Read more about Tailwind CSS configuration in the [documentation](https://tailwindcss.com/docs/configuration).

### Components

You can update Keywind components in your own child theme. For example, create a copy of the `body` component and change the background:

`theme/mytheme/login/components/atoms/body.ftl`

```
<#macro kw>
  <body class="bg-primary-100">
    <#nested>
  </body>
</#macro>
```

If you want to customize your own email components, update the files located in:

`theme/mytheme/email/html-src`

## Build

When you're ready to deploy your own theme, run the build command to generate a static production build.

```bash
pnpm install
pnpm build
```

To deploy a theme as an archive, create a JAR archive with the theme resources.

```bash
pnpm build:jar
```
Initial commit 2021-07-05 11:40:00 +00:00			`# :wind_face: Keywind`

feat: email theme 2023-09-25 06:53:18 +00:00			`Keywind is a component-based Keycloak Login & E-Mail Theme built with [Tailwind CSS](https://github.com/tailwindlabs/tailwindcss), [Mailwind](https://www.mailwind.io/) and [Alpine.js](https://github.com/alpinejs/alpine).`
Initial commit 2021-07-05 11:40:00 +00:00
feat: email theme 2023-09-25 06:53:18 +00:00			`![Preview Login](./preview-login.png)`

			`![Preview Login](./preview-email.png)`
Initial commit 2021-07-05 11:40:00 +00:00
Update README.md 2021-11-21 12:20:00 +00:00			`### Styled Pages`

[pages] Add Error, Login Page Expired, and Terms (#34) 2023-03-19 16:40:00 +00:00			`- Error`
Update README.md 2021-11-21 12:20:00 +00:00			`- Login`
Prettier 2022-04-05 20:20:00 +00:00			`- Login Config TOTP`
Update README.md 2021-11-21 12:20:00 +00:00			`- Login IDP Link Confirm`
Prettier 2022-12-17 19:00:00 +00:00			`- Login OAuth Grant`
Prettier 2022-04-05 20:20:00 +00:00			`- Login OTP`
[pages] Add Error, Login Page Expired, and Terms (#34) 2023-03-19 16:40:00 +00:00			`- Login Page Expired`
[pages] Add Login Password and Login Username (#38) 2023-03-25 15:10:02 +00:00			`- Login Password`
[pages] Update WebAuthn 2023-02-04 20:00:00 +00:00			`- Login Recovery Authn Code Config`
			`- Login Recovery Authn Code Input`
Update README.md 2021-11-21 12:20:00 +00:00			`- Login Reset Password`
			`- Login Update Password`
			`- Login Update Profile`
[pages] Add Login Password and Login Username (#38) 2023-03-25 15:10:02 +00:00			`- Login Username`
[pages] Add Logout Confirm 2022-09-25 19:00:00 +00:00			`- Logout Confirm`
Update README.md 2021-11-21 12:20:00 +00:00			`- Register`
[pages] Update WebAuthn 2023-02-04 20:00:00 +00:00			`- Select Authenticator`
[pages] Add Error, Login Page Expired, and Terms (#34) 2023-03-19 16:40:00 +00:00			`- Terms and Conditions`
[pages] Update WebAuthn 2023-02-04 20:00:00 +00:00			`- WebAuthn Authenticate`
			`- WebAuthn Error`
			`- WebAuthn Register`
Update README.md 2021-11-21 12:20:00 +00:00
[icon] Add all providers 2022-10-16 14:00:00 +00:00			`### Identity Provider Icons`
Update README.md 2021-11-21 12:20:00 +00:00
[providers] Apple (#50) 2023-09-10 16:50:00 +00:00			`- Apple`
[icon] Add all providers 2022-10-16 14:00:00 +00:00			`- Bitbucket`
[providers] Add Discord (#40) 2023-03-26 17:40:01 +00:00			`- Discord`
Update README.md 2021-11-21 12:20:00 +00:00			`- Facebook`
			`- GitHub`
[icon] Add all providers 2022-10-16 14:00:00 +00:00			`- GitLab`
Update README.md 2021-11-21 12:20:00 +00:00			`- Google`
[icon] Add all providers 2022-10-16 14:00:00 +00:00			`- Instagram`
			`- LinkedIn`
Update README.md 2021-11-21 12:20:00 +00:00			`- Microsoft`
[icon] Add all providers 2022-10-16 14:00:00 +00:00			`- OpenID`
			`- Red Hat OpenShift`
			`- PayPal`
[providers] Add Slack 2023-02-02 20:00:00 +00:00			`- Slack`
[icon] Add all providers 2022-10-16 14:00:00 +00:00			`- Stack Overflow`
			`- Twitter`
Update README.md 2021-11-21 12:20:00 +00:00
Initial commit 2021-07-05 11:40:00 +00:00			`## Installation`

			`Keywind has been designed with component-based architecture from the start, and you can customize as little or as much Keywind as you need:`

feat: email theme 2023-09-25 06:53:18 +00:00			`1. [Deploy Keywind Themes](https://www.keycloak.org/docs/latest/server_development/#deploying-themes)`
			`2. [Create your own Themes](https://www.keycloak.org/docs/latest/server_development/#creating-a-theme)`
Initial commit 2021-07-05 11:40:00 +00:00			`3. Specify parent theme in [theme properties](https://www.keycloak.org/docs/latest/server_development/#theme-properties):`

			```
			`parent=keywind`
			```

fix a typo 2023-01-23 21:37:14 +00:00			`4. Brand and customize components with [FreeMarker](https://freemarker.apache.org/docs/dgui_quickstart_template.html)`
Initial commit 2021-07-05 11:40:00 +00:00
Update README.md 2021-11-21 12:20:00 +00:00			`## Customization`
Initial commit 2021-07-05 11:40:00 +00:00
Update README.md 2021-11-21 12:20:00 +00:00			`### Theme`
Initial commit 2021-07-05 11:40:00 +00:00
Update components 2023-01-14 20:00:00 +00:00			When you do need to customize a palette, you can configure your colors under the `colors` key in the `theme` section of Tailwind config file:

			`tailwind.config.js`
Initial commit 2021-07-05 11:40:00 +00:00
			```js
			`module.exports = {`
			`theme: {`
			`extend: {`
			`colors: {`
			`primary: colors.red,`
			`},`
			`},`
			`},`
Update README.md 2021-11-21 12:20:00 +00:00			`};`
Initial commit 2021-07-05 11:40:00 +00:00			```

			`Read more about Tailwind CSS configuration in the [documentation](https://tailwindcss.com/docs/configuration).`

Update README.md 2021-11-21 12:20:00 +00:00			`### Components`
Initial commit 2021-07-05 11:40:00 +00:00
Update components 2023-01-14 20:00:00 +00:00			You can update Keywind components in your own child theme. For example, create a copy of the `body` component and change the background:

			`theme/mytheme/login/components/atoms/body.ftl`
Initial commit 2021-07-05 11:40:00 +00:00
			```
Update components 2023-01-14 20:00:00 +00:00			`<#macro kw>`
			`<body class="bg-primary-100">`
Initial commit 2021-07-05 11:40:00 +00:00			`<#nested>`
Update components 2023-01-14 20:00:00 +00:00			`</body>`
Initial commit 2021-07-05 11:40:00 +00:00			`</#macro>`
			```

feat: email theme 2023-09-25 06:53:18 +00:00			`If you want to customize your own email components, update the files located in:`

			`theme/mytheme/email/html-src`

Update README.md 2021-11-21 12:20:00 +00:00			`## Build`
Initial commit 2021-07-05 11:40:00 +00:00
			`When you're ready to deploy your own theme, run the build command to generate a static production build.`

			```bash
Prettier 2022-04-05 20:20:00 +00:00			`pnpm install`
			`pnpm build`
Initial commit 2021-07-05 11:40:00 +00:00			```
Add script to create JAR archive 2023-03-10 20:00:00 +00:00
			`To deploy a theme as an archive, create a JAR archive with the theme resources.`

			```bash
			`pnpm build:jar`
			```