docs: Build pages

Author: unlight

.github/workflows/ci.yml

@@ -49,3 +49,20 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+  deploy:
+    name: Deploy
+    runs-on: ubuntu-latest
+    if: github.ref == 'refs/heads/master'
+
+    steps:
+      - name: 'Install depependencies'
+        run: |
+          npm install --force
+      - name: 'Build docs'
+        run: |
+          npm run build_docs
+      - name: Deploy to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v4
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./dist

README.md

@@ -17,7 +17,7 @@ Demo - https://unlight.github.io/tailwind-float-label
 <form class="max-w-xs mx-auto p-5 space-y-4">
   <h2 class="text-2xl font-bold text-center">Example</h2>
   <div class="float-container">
-    <label for="name" class="float-label-self bg-white text-gray-500"
+    <label for="name" class="float-label px-2 bg-white text-gray-500"
       >Name</label
     >
     <input
@@ -31,6 +31,8 @@ Demo - https://unlight.github.io/tailwind-float-label
 </form>
 ```
 
+If you need animation, add to `.float-label` following classes: `transition-all duration-200`
+
 ## Similar Projects
 
 - https://github.com/notiz-dev/floating-form-field-tailwindcss

Taskfile

@@ -12,4 +12,8 @@ build() {
     set +x
 }
 
+build_docs() {
+    vite build
+}
+
 "$@"

index.html

@@ -13,12 +13,12 @@ <h1 class="text-xl font-bold mb-4 text-gray-800">Float Labels Example</h1>
 
       <form class="space-y-4">
         <div class="float-container">
-          <label for="name" class="float-label px-2 text-gray-600"
+          <label for="fullname" class="float-label px-2 text-gray-600"
             >Full Name (1: empty)</label
           >
           <input
             type="text"
-            id="name"
+            id="fullname"
             class="float-input w-full px-3 py-2 border border-gray-300"
             placeholder="Full Name placeholder"
           />
@@ -80,6 +80,21 @@ <h1 class="text-xl font-bold mb-4 text-gray-800">Float Labels Example</h1>
           Submit
         </button>
       </form>
+      <form class="max-w-xs mx-auto p-5 space-y-4">
+        <h2 class="text-2xl font-bold text-center">README Example</h2>
+        <div class="float-container">
+          <label for="name" class="float-label px-1 bg-white text-gray-500"
+            >Name</label
+          >
+          <input
+            type="text"
+            id="name"
+            autocomplete="off"
+            placeholder="Name"
+            class="float-input outline-none focus:shadow-outline border w-full px-1"
+          />
+        </div>
+      </form>
     </div>
   </body>
 </html>

package.json

@@ -23,7 +23,8 @@
     "test": "echo no tests",
     "tscheck": "echo tscheck... && tsc --noEmit",
     "tscheck:w": "npm run tscheck -- --watch",
-    "build": "sh Taskfile build"
+    "build": "sh Taskfile build",
+    "build_docs": "sh Taskfile build_docs"
   },
   "repository": {
     "type": "git",