feat(ci): adding ci pipelines

.github/workflows/ci-pipeline-branch.yml

@@ -0,0 +1,18 @@
+name: CI Pipeline Push and Pull Request
+
+on:
+  push:
+    branches: [ "master" ]
+  pull_request:
+    branches: [ "master" ]
+
+jobs:
+  build-lib:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+      - run: npm install
+      - run: npm run build

.github/workflows/ci-pipeline-release.yml

@@ -0,0 +1,31 @@
+name: CI Pipeline Release
+
+on:
+  release:
+    types: [created]
+
+jobs:
+  build-lib:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+      - run: npm install
+      - run: npm run build
+
+      - name: Zip Release
+        uses: TheDoctor0/zip-release@0.7.0
+        with:
+          type: 'zip'
+          filename: 'keywind-release-${{github.ref_name}}.zip'
+          path: 'theme/keywind'
+
+      - name: Upload Release
+        uses: ncipollo/release-action@v1.12.0
+        with:
+          artifacts: 'keywind-release-${{github.ref_name}}.zip'
+          token: ${{ secrets.GITHUB_TOKEN }}   
+          allowUpdates: true
+

.gitignore

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

.prettierrc

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

README.md

@@ -4,6 +4,48 @@ Keywind is a component-based Keycloak Login Theme built with [Tailwind CSS](http
 
 ![Preview](./preview.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
+
+- 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**:
@@ -16,24 +58,17 @@ 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
+4. Brand and customize components with [FreeMarker](https://freemarker.apache.org/docs/dgui_quickstart_template.html)
 
-* Login
-* Password Reset
-* Register
+## Customization
 
-## Examples
+### Theme
 
-### Color 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:
 
-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:
+`tailwind.config.js`
 
 ```js
-// tailwind.config.js
 module.exports = {
   theme: {
     extend: {
@@ -42,32 +77,36 @@ 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:
+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 component="button" rest...>
-  <${component}
-    class="bg-primary-600 flex justify-center px-6 py-3 relative rounded-lg text-md text-white w-full focus:outline-none focus:ring-2 focus:ring-primary-600 focus:ring-offset-2 hover:bg-primary-700"
-    <#list rest as attrName, attrValue>
-      ${attrName}="${attrValue}"
-    </#list>
-  >
+<#macro kw>
+  <body class="bg-primary-100">
     <#nested>
-  </${component}>
+  </body>
 </#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
+```
+
+To deploy a theme as an archive, create a JAR archive with the theme resources.
+
+```bash
+pnpm build:jar
 ```

package.json

@@ -1,19 +1,27 @@
 {
+  "$schema": "https://json.schemastore.org/package",
+  "name": "keywind",
   "scripts": {
-    "start": "snowpack dev",
-    "build": "snowpack build"
-  },
-  "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"
+    "build": "tsc && vite build",
+    "build:jar": "vite-node scripts/build",
+    "dev": "vite build --watch",
+    "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
-    "alpinejs": "^3.2.1"
+    "alpinejs": "^3.12.0",
+    "rfc4648": "^1.5.2"
+  },
+  "devDependencies": {
+    "@tailwindcss/forms": "^0.5.3",
+    "@types/alpinejs": "^3.7.1",
+    "@types/archiver": "^5.3.1",
+    "@types/node": "^18.15.0",
+    "archiver": "^5.3.1",
+    "autoprefixer": "^10.4.14",
+    "postcss": "^8.4.21",
+    "tailwindcss": "^3.2.7",
+    "typescript": "^4.9.5",
+    "vite": "^4.1.4",
+    "vite-node": "^0.29.2"
   }
 }