Created example Dockerfile

.gitignore

@@ -1,3 +1,5 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
 # dependencies
 node_modules/
 

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "printWidth": 100,
+  "singleQuote": true
+}

Dockerfile

@@ -0,0 +1,62 @@
+# 1. Create docker network, so db and keycloak can connect with each other: docker network create keycloak-network
+# 2. Connect db container to network: docker network connect keycloak-network <db-container-id>
+# 3. Create DB and user for keycloak: 
+#     - docker exec -it <db-container-name> psql -h localhost -U <table_name> -c "create user keycloak with encrypted password 'secret';"
+#     - docker exec -it <db-container-name> psql -h localhost -U <table_name> -c "CREATE DATABASE keycloak OWNER keycloak;"
+# 4. Add network param to keycloak container: ... --net keycloak-network ...
+
+# build: docker build . -t keycloak(_dev)
+# run dev : docker run --name keycloak_dev -p 8080:8080 --net keycloak-network -e KEYCLOAK_ADMIN=admin -e KEYCLOAK_ADMIN_PASSWORD=admin -e KC_DB_URL=jdbc:postgresql://<db_url>:<db_port>/keycloak -ec KC_DB_USERNAME=keycloak -e KC_DB_PASSWORD=secret -e KC_HOSTNAME=localhost -e KC_DB_USERNAME=keycloak -e start_command=start-dev keycloak_dev
+# run prod: docker run --name keycloak -p 8443:8443 --net keycloak-network -e KEYCLOAK_ADMIN=admin -e KEYCLOAK_ADMIN_PASSWORD=admin -e KC_DB_URL=jdbc:postgresql://<db_url>:<db_port>/keycloak -e KC_DB_USERNAME=keycloak -e KC_DB_PASSWORD=secret -e KC_HOSTNAME=localhost -e KC_DB_USERNAME=keycloak -e start_command=start keycloak
+
+ARG keycloak_version=latest
+ARG keycloak_image_url=quay.io/keycloak/keycloak:${keycloak_version}
+
+FROM node:latest as keycloak_asset_builder
+
+RUN curl -f https://get.pnpm.io/v6.16.js | node - add --global pnpm
+
+WORKDIR /keycloak_assets
+COPY . /keycloak_assets
+
+RUN pnpm install
+RUN pnpm build
+
+####
+
+ARG keycloak_version
+ARG keycloak_image_url
+
+FROM ${keycloak_image_url} as keycloak_builder
+
+ENV KC_HEALTH_ENABLED=true
+ENV KC_METRICS_ENABLED=true
+#ENV KC_FEATURES=token-exchange
+
+ENV KC_DB=postgres
+
+# Install custom providers
+# https://github.com/aerogear/keycloak-metrics-spi/
+RUN curl -sL https://github.com/aerogear/keycloak-metrics-spi/releases/download/2.5.3/keycloak-metrics-spi-2.5.3.jar -o /opt/keycloak/providers/keycloak-metrics-spi-2.5.3.jar
+
+# copy asset build from above
+COPY --from=keycloak_asset_builder /keycloak_assets/themes /opt/keycloak/themes/
+
+# import all preconfigured realms
+# https://github.com/keycloak/keycloak-quickstarts/blob/latest/quickstart-realm.json
+# COPY realm_config/ /opt/keycloak/data/import
+
+RUN /opt/keycloak/bin/kc.sh build
+
+#####
+
+FROM ${keycloak_image_url} as keycloak_runtime
+COPY --from=keycloak_builder /opt/keycloak/ /opt/keycloak/
+WORKDIR /opt/keycloak
+# for demonstration purposes only, please make sure to use proper certificates in production instead
+RUN keytool -genkeypair -storepass password -storetype PKCS12 -keyalg RSA -keysize 2048 -dname "CN=server" -alias server -ext "SAN:c=DNS:localhost,IP:127.0.0.1" -keystore conf/server.keystore
+
+ENV start_command="start"
+
+ENTRYPOINT ["/opt/keycloak/bin/kc.sh"]
+CMD ["${start_command} --import-realm"]

README.md

@@ -4,6 +4,24 @@ Keywind is a component-based Keycloak Login Theme built with [Tailwind CSS](http
 
 ![Preview](./preview.png)
 
+### Styled Pages
+
+- Login
+- Login Config TOTP
+- Login IDP Link Confirm
+- Login OTP
+- Login Reset Password
+- Login Update Password
+- Login Update Profile
+- Register
+
+### Social Media Icons
+
+- Facebook
+- GitHub
+- Google
+- Microsoft
+
 ## 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**:
@@ -16,19 +34,11 @@ Keywind has been designed with component-based architecture from the start, and
 parent=keywind
 ```
 
-4. Brand and Customize components with [FreeMaker](https://freemarker.apache.org/docs/dgui_quickstart_template.html)
-
-## Features
-
-### Styled Pages
-
-* Login
-* Password Reset
-* Register
+4. Brand and customize components with [FreeMaker](https://freemarker.apache.org/docs/dgui_quickstart_template.html)
 
-## Examples
+## Customization
 
-### Color Theme
+### 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.js` file:
 
@@ -42,12 +52,12 @@ module.exports = {
       },
     },
   },
-}
+};
 ```
 
 Read more about Tailwind CSS configuration in the [documentation](https://tailwindcss.com/docs/configuration).
 
-### Primary Button Size
+### Components
 
 You can inherit Keywind components in your own theme. For example, to resize the primary button you should create a styled `theme/mytheme/components/button/primary.ftl` file:
 
@@ -64,10 +74,11 @@ You can inherit Keywind components in your own theme. For example, to resize the
 </#macro>
 ```
 
-### Build
+## Build
 
 When you're ready to deploy your own theme, run the build command to generate a static production build.
 
 ```bash
-yarn build
+pnpm install
+pnpm build
 ```

package.json

@@ -1,19 +1,20 @@
 {
+  "$schema": "https://json.schemastore.org/package",
   "scripts": {
-    "start": "snowpack dev",
-    "build": "snowpack build"
+    "build": "snowpack build",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "dependencies": {
+    "alpinejs": "^3.9.5"
   },
   "devDependencies": {
     "@snowpack/plugin-postcss": "^1.4.3",
-    "@tailwindcss/forms": "^0.3.3",
-    "@types/tailwindcss": "^2.2.1",
-    "autoprefixer": "^10.2.6",
-    "cssnano": "^5.0.6",
-    "postcss": "^8.3.5",
-    "snowpack": "^3.7.1",
-    "tailwindcss": "^2.2.4"
-  },
-  "dependencies": {
-    "alpinejs": "^3.2.1"
+    "@tailwindcss/forms": "^0.5.0",
+    "@types/tailwindcss": "^3.0.10",
+    "autoprefixer": "^10.4.4",
+    "cssnano": "^5.1.7",
+    "postcss": "^8.4.12",
+    "snowpack": "^3.8.8",
+    "tailwindcss": "^3.0.23"
   }
 }