feat: let's goooo

README.md

@@ -1,77 +1,5 @@
 [![](https://git.klemek.fr/klemek/vue-template/actions/workflows/lint.yml/badge.svg?branch=main&style=flat-square)](https://git.klemek.fr/klemek/vue-template/actions?workflow=lint.yml) [![](https://git.klemek.fr/klemek/vue-template/actions/workflows/deploy.yml/badge.svg?branch=main&style=flat-square)](https://git.klemek.fr/klemek/vue-template/actions?workflow=deploy.yml)
 
-# Vue-boilerplate
+# Cool Domain Factory™
 
-_Minimal static Vue project_
+### [Tool link](https://cool-domain.klemek.fr/)
-
-<!-- TODO: 1. rename app (and tool URL) -->
-
-### [Tool link]()
-
-## Use this template
-
-<!-- TODO: 3. remove this part -->
-
-### Creating project
-
-#### Method 1: Using GitHub repository template
-
-[Use this template](https://git.klemek.fr/repo/create?template_id=10)
-
-#### Method 2: CLI forking
-
-```bash
-git clone ssh://git@git.klemek.fr:42617/klemek/vue-template.git {PROJECT}
-cd {PROJECT}
-git remote rename origin template
-git remote add origin {PROJECT REMOTE}
-```
-
-### Tasks
-
-> Every task is indicated with a TODO
-
-1. [ ] Rename app in [README.md](./README.md), [index.html](./index.html), [App.vue](./src/App.vue) and [package.json](./package.json)
-2. [ ] Change app hue and saturation in [style.css](./public/style.css)
-3. [ ] Remove this part and all TODO
-
-### Updating from template
-
-To update from templates latest changes:
-
-```shell
-make update-template
-```
-
-### Upgrade from version 1
-
-```shell
-git remote add template ssh://git@git.klemek.fr:42617/klemek/vue-template.git
-git fetch template
-git rm --force '*'
-git checkout template/main -- '*'
-git remote remove template
-# re-code logic by checking online code
-```
-
-### Makefile targets
-
-```txt
-Usage: make [target1] [target2] ...
-
-Commands/Targets:
-help                 show this message
-install              install project
-install              update project
-build                build static site in "dist"
-dev                  run dev server
-lint                 lint code
-format               fix and reformat code
-update-template      fetch and merge core changes from template
-```
-
-### Tips
-
-- [Material design colors](https://materialui.co/colors/) are available, you can use `class="red-500"` on your HTML (see [full list](https://github.com/shuhei/material-colors/blob/master/dist/colors.css))
-- [Lucide icons](https://lucide.dev/icons) are available, you can use `<i icon=house></i>` on your Vue template
-- The .button class make links more beautifuls (can also be .disabled or colored amber-300)

bun.lock

@@ -1,10 +1,11 @@
 {
   "lockfileVersion": 1,
+  "configVersion": 0,
   "workspaces": {
     "": {
       "name": "vue-boilerplate",
       "dependencies": {
-        "lucide": "^1.18.0",
+        "@tailwindcss/vite": "^4.3.1",
         "vue": "^3.5.38",
       },
       "devDependencies": {
@@ -301,6 +302,36 @@
 
     "@rollup/rollup-win32-x64-msvc": ["@rollup/rollup-win32-x64-msvc@4.54.0", "", { "os": "win32", "cpu": "x64" }, "sha512-hYT5d3YNdSh3mbCU1gwQyPgQd3T2ne0A3KG8KSBdav5TiBg6eInVmV+TeR5uHufiIgSFg0XsOWGW5/RhNcSvPg=="],
 
+    "@tailwindcss/node": ["@tailwindcss/node@4.3.1", "", { "dependencies": { "@jridgewell/remapping": "^2.3.5", "enhanced-resolve": "5.21.6", "jiti": "^2.7.0", "lightningcss": "1.32.0", "magic-string": "^0.30.21", "source-map-js": "^1.2.1", "tailwindcss": "4.3.1" } }, "sha512-6NDaqRoAMSXD1mr/RXu0HBvNE9a2n5tHPsxu9XHLws8o4Twes5rBM2205SUUiJ9goAtadrN6xTGX0UDEwp/N4A=="],
+
+    "@tailwindcss/oxide": ["@tailwindcss/oxide@4.3.1", "", { "optionalDependencies": { "@tailwindcss/oxide-android-arm64": "4.3.1", "@tailwindcss/oxide-darwin-arm64": "4.3.1", "@tailwindcss/oxide-darwin-x64": "4.3.1", "@tailwindcss/oxide-freebsd-x64": "4.3.1", "@tailwindcss/oxide-linux-arm-gnueabihf": "4.3.1", "@tailwindcss/oxide-linux-arm64-gnu": "4.3.1", "@tailwindcss/oxide-linux-arm64-musl": "4.3.1", "@tailwindcss/oxide-linux-x64-gnu": "4.3.1", "@tailwindcss/oxide-linux-x64-musl": "4.3.1", "@tailwindcss/oxide-wasm32-wasi": "4.3.1", "@tailwindcss/oxide-win32-arm64-msvc": "4.3.1", "@tailwindcss/oxide-win32-x64-msvc": "4.3.1" } }, "sha512-yVPyo8RNkabVr3O2EhHEE0Rewu7YKzc1DhIqfL46LKveFrmu9XbDazNOJY7/GRuvw1h6u3utWnR29H/p5JPlgA=="],
+
+    "@tailwindcss/oxide-android-arm64": ["@tailwindcss/oxide-android-arm64@4.3.1", "", { "os": "android", "cpu": "arm64" }, "sha512-SVlyf61g374l5cHyg8x9kf5xmLcOaxvOTsbsqDnSsDJaKOEFZ7GCvi84VAVGpxojYOs1+3K6M0UjXfqPU8vmOQ=="],
+
+    "@tailwindcss/oxide-darwin-arm64": ["@tailwindcss/oxide-darwin-arm64@4.3.1", "", { "os": "darwin", "cpu": "arm64" }, "sha512-hVnWLwv+e/l7c4WKyVtHVrIPvYdqWHjRB3MDIqARynzFtnQg85kmQEFCbV9Ja0VVx4xXTIiDWY60Y7iz/iNoDA=="],
+
+    "@tailwindcss/oxide-darwin-x64": ["@tailwindcss/oxide-darwin-x64@4.3.1", "", { "os": "darwin", "cpu": "x64" }, "sha512-Cf7abu0WVgbhU7ANgPUnSAvm7nCvMweusHb8FnaHlLfv/Caq4GYaEZg7ZImzzmjx4lIAfuS8q+eLIS7A7IzxIg=="],
+
+    "@tailwindcss/oxide-freebsd-x64": ["@tailwindcss/oxide-freebsd-x64@4.3.1", "", { "os": "freebsd", "cpu": "x64" }, "sha512-ZZqzX2Y+GXtXXfqSfpJhDm60OoZfvLHLCgm+J7NVqgHHJjG/m9ugZI77RwTsVd4fnBJuCFP6Ae6kTJb71UdS8g=="],
+
+    "@tailwindcss/oxide-linux-arm-gnueabihf": ["@tailwindcss/oxide-linux-arm-gnueabihf@4.3.1", "", { "os": "linux", "cpu": "arm" }, "sha512-/Ah/xik0LaMYfv9DZ0S/t4pBlBNYOcqtRwusjgovHkvT8ixueWCLyJjsaF5kQIckjb4IT8Q6K6p/iPmZMixYgg=="],
+
+    "@tailwindcss/oxide-linux-arm64-gnu": ["@tailwindcss/oxide-linux-arm64-gnu@4.3.1", "", { "os": "linux", "cpu": "arm64" }, "sha512-gqdFoVJlw444GvpnheZLHmvTzSxI/cOUUh2KSNejQjTcYkW062SVD+En0rUgD+QV91bz1XGIGtt1HJd48xUGbQ=="],
+
+    "@tailwindcss/oxide-linux-arm64-musl": ["@tailwindcss/oxide-linux-arm64-musl@4.3.1", "", { "os": "linux", "cpu": "arm64" }, "sha512-Bwv9KwOvE0VKa86xPFif9b9c3Y1NxOV1P0gLti/IYaWEsQYZXDlxfGEtA8mdDZ7SG3wyNXAWYT5SIn3giL57oA=="],
+
+    "@tailwindcss/oxide-linux-x64-gnu": ["@tailwindcss/oxide-linux-x64-gnu@4.3.1", "", { "os": "linux", "cpu": "x64" }, "sha512-Ymi8O8T15HYQdOUWUtTI6ldN0neHP85FC+Qz32xTcZ7iJXtem/x8ITev0o1e9e5rkqj4lONZfTRLvkmin1+tKg=="],
+
+    "@tailwindcss/oxide-linux-x64-musl": ["@tailwindcss/oxide-linux-x64-musl@4.3.1", "", { "os": "linux", "cpu": "x64" }, "sha512-M+P/91qJ6uILLw4k2G93GMDRAXj61SMvFQYt39AqvUqYgExXpLL5aepfns7sj4HiAQeolirQF9E0lzRvdf4zPQ=="],
+
+    "@tailwindcss/oxide-wasm32-wasi": ["@tailwindcss/oxide-wasm32-wasi@4.3.1", "", { "dependencies": { "@emnapi/core": "^1.10.0", "@emnapi/runtime": "^1.10.0", "@emnapi/wasi-threads": "^1.2.1", "@napi-rs/wasm-runtime": "^1.1.4", "@tybys/wasm-util": "^0.10.2", "tslib": "^2.8.1" }, "cpu": "none" }, "sha512-zsM8uOeqvVGHsAXsJxsT28ttosFahLJKCLOTUBqRAtKnVgGSRitds9T432QiT8b77Yga7JIBkulIRRlJPtYhRA=="],
+
+    "@tailwindcss/oxide-win32-arm64-msvc": ["@tailwindcss/oxide-win32-arm64-msvc@4.3.1", "", { "os": "win32", "cpu": "arm64" }, "sha512-aiNvSq9BsVk8V513lDKlrCFAgf8qBMPZTpgEhInL+NwQqs97mYmupVMrPrgBBSL8Pv/0zXu9MrMF9rMun1ZeNg=="],
+
+    "@tailwindcss/oxide-win32-x64-msvc": ["@tailwindcss/oxide-win32-x64-msvc@4.3.1", "", { "os": "win32", "cpu": "x64" }, "sha512-xDEyu1rg290472FEGaKHnzyDyh5QH+AlWvsU5hMoMtPpzmKlRI0jaYKCgSHDYtaQWZOYbMaduSyCwFwY4n1HmA=="],
+
+    "@tailwindcss/vite": ["@tailwindcss/vite@4.3.1", "", { "dependencies": { "@tailwindcss/node": "4.3.1", "@tailwindcss/oxide": "4.3.1", "tailwindcss": "4.3.1" }, "peerDependencies": { "vite": "^5.2.0 || ^6 || ^7 || ^8" } }, "sha512-hItDHuIIlEV61R+faXu66s1K36aTurO/Qw0e45Vskz57gXl9pWOT6eg3zmcEui6CZXddbN7zd41bwmvag4JGwQ=="],
+
     "@tsconfig/node24": ["@tsconfig/node24@24.0.4", "", {}, "sha512-2A933l5P5oCbv6qSxHs7ckKwobs8BDAe9SJ/Xr2Hy+nDlwmLE1GhFh/g/vXGRZWgxBg9nX/5piDtHR9Dkw/XuA=="],
 
     "@types/estree": ["@types/estree@1.0.8", "", {}, "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w=="],
@@ -443,6 +474,8 @@
 
     "electron-to-chromium": ["electron-to-chromium@1.5.267", "", {}, "sha512-0Drusm6MVRXSOJpGbaSVgcQsuB4hEkMpHXaVstcPmhu5LIedxs1xNK/nIxmQIU/RPC0+1/o0AVZfBTkTNJOdUw=="],
 
+    "enhanced-resolve": ["enhanced-resolve@5.21.6", "", { "dependencies": { "graceful-fs": "^4.2.4", "tapable": "^2.3.3" } }, "sha512-aNnGCvbJ/RIyWo1IuhNdVjnNF+EjH9wpzpNHt+ci/m9He9LJvUN8wrCcXjp9cWsGNAuvSpVFTx/vraAFQ8qGjQ=="],
+
     "entities": ["entities@7.0.1", "", {}, "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA=="],
 
     "error-stack-parser-es": ["error-stack-parser-es@1.0.5", "", {}, "sha512-5qucVt2XcuGMcEGgWI7i+yZpmpByQ8J1lHhcL7PwqCwu9FPP3VUXzT4ltHe5i2z9dePwEHcDVOAfSnHsOlCXRA=="],
@@ -511,6 +544,8 @@
 
     "globals": ["globals@14.0.0", "", {}, "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ=="],
 
+    "graceful-fs": ["graceful-fs@4.2.11", "", {}, "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="],
+
     "has-flag": ["has-flag@4.0.0", "", {}, "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="],
 
     "hookable": ["hookable@5.5.3", "", {}, "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ=="],
@@ -563,14 +598,36 @@
 
     "levn": ["levn@0.4.1", "", { "dependencies": { "prelude-ls": "^1.2.1", "type-check": "~0.4.0" } }, "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ=="],
 
+    "lightningcss": ["lightningcss@1.32.0", "", { "dependencies": { "detect-libc": "^2.0.3" }, "optionalDependencies": { "lightningcss-android-arm64": "1.32.0", "lightningcss-darwin-arm64": "1.32.0", "lightningcss-darwin-x64": "1.32.0", "lightningcss-freebsd-x64": "1.32.0", "lightningcss-linux-arm-gnueabihf": "1.32.0", "lightningcss-linux-arm64-gnu": "1.32.0", "lightningcss-linux-arm64-musl": "1.32.0", "lightningcss-linux-x64-gnu": "1.32.0", "lightningcss-linux-x64-musl": "1.32.0", "lightningcss-win32-arm64-msvc": "1.32.0", "lightningcss-win32-x64-msvc": "1.32.0" } }, "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ=="],
+
+    "lightningcss-android-arm64": ["lightningcss-android-arm64@1.32.0", "", { "os": "android", "cpu": "arm64" }, "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg=="],
+
+    "lightningcss-darwin-arm64": ["lightningcss-darwin-arm64@1.32.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ=="],
+
+    "lightningcss-darwin-x64": ["lightningcss-darwin-x64@1.32.0", "", { "os": "darwin", "cpu": "x64" }, "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w=="],
+
+    "lightningcss-freebsd-x64": ["lightningcss-freebsd-x64@1.32.0", "", { "os": "freebsd", "cpu": "x64" }, "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig=="],
+
+    "lightningcss-linux-arm-gnueabihf": ["lightningcss-linux-arm-gnueabihf@1.32.0", "", { "os": "linux", "cpu": "arm" }, "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw=="],
+
+    "lightningcss-linux-arm64-gnu": ["lightningcss-linux-arm64-gnu@1.32.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ=="],
+
+    "lightningcss-linux-arm64-musl": ["lightningcss-linux-arm64-musl@1.32.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg=="],
+
+    "lightningcss-linux-x64-gnu": ["lightningcss-linux-x64-gnu@1.32.0", "", { "os": "linux", "cpu": "x64" }, "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA=="],
+
+    "lightningcss-linux-x64-musl": ["lightningcss-linux-x64-musl@1.32.0", "", { "os": "linux", "cpu": "x64" }, "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg=="],
+
+    "lightningcss-win32-arm64-msvc": ["lightningcss-win32-arm64-msvc@1.32.0", "", { "os": "win32", "cpu": "arm64" }, "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw=="],
+
+    "lightningcss-win32-x64-msvc": ["lightningcss-win32-x64-msvc@1.32.0", "", { "os": "win32", "cpu": "x64" }, "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q=="],
+
     "locate-path": ["locate-path@6.0.0", "", { "dependencies": { "p-locate": "^5.0.0" } }, "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw=="],
 
     "lodash.merge": ["lodash.merge@4.6.2", "", {}, "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="],
 
     "lru-cache": ["lru-cache@5.1.1", "", { "dependencies": { "yallist": "^3.0.2" } }, "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w=="],
 
-    "lucide": ["lucide@1.18.0", "", {}, "sha512-xzUa3LbA/Uvn3DCs7B7YfDcOZeqV8aZ4r4OFyCgJSfZGUdMglJiK3PJSbd26SXLLQvGGsYX9PdETCRXvfK4rnA=="],
-
     "magic-string": ["magic-string@0.30.21", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ=="],
 
     "memorystream": ["memorystream@0.3.1", "", {}, "sha512-S3UwM3yj5mtUSEfP41UZmt/0SCoVYUcU1rkXv+BQ5Ig8ndL4sPoJNBUJERafdPb5jjHJGuMgytgKvKIf58XNBw=="],
@@ -723,6 +780,10 @@
 
     "synckit": ["synckit@0.11.11", "", { "dependencies": { "@pkgr/core": "^0.2.9" } }, "sha512-MeQTA1r0litLUf0Rp/iisCaL8761lKAZHaimlbGK4j0HysC4PLfqygQj9srcs0m2RdtDYnF8UuYyKpbjHYp7Jw=="],
 
+    "tailwindcss": ["tailwindcss@4.3.1", "", {}, "sha512-hk+TB1m+K8CYNrP6rjQaq/Y+4Zylwpa87mLYBKCunwnnQ9p+fHb7kmSfGqyEJoxF/O6CDyABWVFEafNSYKll+Q=="],
+
+    "tapable": ["tapable@2.3.3", "", {}, "sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A=="],
+
     "tinyglobby": ["tinyglobby@0.2.15", "", { "dependencies": { "fdir": "^6.5.0", "picomatch": "^4.0.3" } }, "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ=="],
 
     "to-regex-range": ["to-regex-range@5.0.1", "", { "dependencies": { "is-number": "^7.0.0" } }, "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ=="],
@@ -803,6 +864,18 @@
 
     "@parcel/watcher/picomatch": ["picomatch@4.0.4", "", {}, "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A=="],
 
+    "@tailwindcss/oxide-wasm32-wasi/@emnapi/core": ["@emnapi/core@1.11.1", "", { "dependencies": { "@emnapi/wasi-threads": "1.2.2", "tslib": "^2.4.0" }, "bundled": true }, "sha512-RSvbQmHzdKzNsLYa/wHrbc3KN4sYLKAdPZxqiM2HATqv/SBk2/ENSHpvXGaLOMcsAyz0poEGqkmmKYG3OWiJEQ=="],
+
+    "@tailwindcss/oxide-wasm32-wasi/@emnapi/runtime": ["@emnapi/runtime@1.11.1", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-vgj7R3y3Wgx24IQaGPA/R6YFXLHVMOZ0uVEyIQPaWs+rd1AzfEMXlAC22FYwO1XkKR6NPsq7mUandH8oIRdZFw=="],
+
+    "@tailwindcss/oxide-wasm32-wasi/@emnapi/wasi-threads": ["@emnapi/wasi-threads@1.2.2", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-c95qOXkHdydNKhscBTebqEC1CVAZpyqOfVfBzQ1qgzyl3gfeldUjIggDbIZgDKsHLgnsM+igH7TJ/eAasaVuMA=="],
+
+    "@tailwindcss/oxide-wasm32-wasi/@napi-rs/wasm-runtime": ["@napi-rs/wasm-runtime@1.1.5", "", { "dependencies": { "@tybys/wasm-util": "^0.10.2" }, "peerDependencies": { "@emnapi/core": "^1.7.1", "@emnapi/runtime": "^1.7.1" }, "bundled": true }, "sha512-AWPoBRJ9tsnVhor4sjO7rkni+7p+2IAEFj6cx06UgP10jkQHqay/36uRV/bFkgrh18D9vb4cr8Q0Pthskgzy+Q=="],
+
+    "@tailwindcss/oxide-wasm32-wasi/@tybys/wasm-util": ["@tybys/wasm-util@0.10.2", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-RoBvJ2X0wuKlWFIjrwffGw1IqZHKQqzIchKaadZZfnNpsAYp2mM0h36JtPCjNDAHGgYez/15uMBpfGwchhiMgg=="],
+
+    "@tailwindcss/oxide-wasm32-wasi/tslib": ["tslib@2.8.1", "", { "bundled": true }, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
+
     "@typescript-eslint/eslint-plugin/@typescript-eslint/parser": ["@typescript-eslint/parser@8.61.0", "", { "dependencies": { "@typescript-eslint/scope-manager": "8.61.0", "@typescript-eslint/types": "8.61.0", "@typescript-eslint/typescript-estree": "8.61.0", "@typescript-eslint/visitor-keys": "8.61.0", "debug": "^4.4.3" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0", "typescript": ">=4.8.4 <6.1.0" } }, "sha512-5B7PfA2e1NQGCnDHd/0lW7W3gvp3d59Ryw54FYO8Uswxo9f6ikw3AZV+Xj/TvpImmpsiYyUqAfhC6kJID1jF6w=="],
 
     "@typescript-eslint/eslint-plugin/@typescript-eslint/visitor-keys": ["@typescript-eslint/visitor-keys@8.61.0", "", { "dependencies": { "@typescript-eslint/types": "8.61.0", "eslint-visitor-keys": "^5.0.0" } }, "sha512-QVLZu3ZPQEE+HICQyAMZ2yLQhxf0meY/wx6Hx14YcTNj13JB3qHlX3lJ02L3fLGHgERRH71kvYDwiXIguT3AjQ=="],

index.html

@@ -1,22 +1,50 @@
 <!doctype html>
 <html lang="en">
   <head>
-    <!-- TODO: 1. rename app -->
+    <title>Cool Domain Factory™</title>
-    <title>Change this you moron</title>
+    <link rel="stylesheet" href="/src/style.css" />
-    <link rel="stylesheet" href="/src/style.scss" />
     <!-- <link rel="icon" href="/favicon.ico"> -->
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta charset="UTF-8" />
     <!-- card related -->
-    <!--
+
-        <meta property="og:title" content="">
+    <meta property="og:title" content="Cool Domain Factory™" />
-        <meta property="og:description" content="">
+    <!--<meta property="og:description" content="">
         <meta property="og:image" content="https://.../preview_640x320.jpg">
-        <meta property="org:url" content="https://...">
+        <meta property="org:url" content="https://...">-->
-        -->
   </head>
-  <body>
+  <body class="min-h-screen flex flex-col w-screen">
+    <div class="hero bg-base-200 grow">
+      <div class="hero-content text-center">
         <div id="app"></div>
+      </div>
+    </div>
+    <footer
+      class="footer sm:footer-horizontal footer-center bg-base-300 text-base-content p-2"
+    >
+      <aside>
+        <p>
+          <a href="#french">🇫🇷</a> / <a href="#english">🇺🇸</a> - 2026 -
+          <a
+            href="https://git.klemek.fr/klemek/cool-domain-web"
+            class="underline"
+            >klemek</a
+          >
+          - Photo by
+          <a
+            href="https://unsplash.com/@ronakjain?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText"
+            class="underline"
+            >Ronak Jain</a
+          >
+          on
+          <a
+            href="https://unsplash.com/photos/low-angle-photo-of-yellow-and-black-striped-buildings-corner-37Hk9D4Ig_4?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText"
+            class="underline"
+            >Unsplash</a
+          >
+        </p>
+      </aside>
+    </footer>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>

package.json

@@ -20,7 +20,7 @@
     "lint-fix:oxlint": "oxlint . --fix"
   },
   "dependencies": {
-    "lucide": "^1.18.0",
+    "@tailwindcss/vite": "^4.3.1",
     "vue": "^3.5.38"
   },
   "devDependencies": {

src/App.vue

@@ -1,22 +1,31 @@
 <script setup lang="ts">
-import { ref, onMounted, onUpdated, nextTick, onBeforeMount } from "vue";
+import { ref, onMounted, onBeforeMount, watch } from "vue";
-import { createIcons, icons } from "lucide";
 import { WhoIs } from "./lib/whois";
 import { DomainFactory } from "./lib/factory";
 
+enum State {
+  Loading,
+  Ready,
+  Generating,
+  Fetching,
+  Error,
+}
+
+function getLang() {
+  return document.location.hash === "#french" ? "french" : "english";
+}
+
 const visible = ref<boolean>(false);
 const whois = ref<WhoIs>(new WhoIs());
 const factory = ref<DomainFactory>(new DomainFactory());
 const domain = ref<string | null>(null);
-const domainAvailable = ref<boolean | null>(null);
+const domainAvailable = ref<boolean>(false);
-const lang = ref<string>("english");
+const lang = ref<string>(getLang());
-const loading = ref<boolean>(true);
+const state = ref<State>(State.Loading);
-const fetching = ref<boolean>(false);
-const error = ref<string | null>(null);
 
 function newDomain() {
   if (!factory.value.error) {
-    fetching.value = true;
+    state.value = State.Generating;
     factory.value
       .next(lang.value)
       .then((value) => {
@@ -24,24 +33,31 @@ function newDomain() {
         checkAvailability();
       })
       .catch((err: unknown) => {
+        state.value = State.Error;
         throw err;
       });
   }
 }
 
 function checkAvailability() {
-  domainAvailable.value = null;
   if (!whois.value.error && domain.value) {
+    const promiseDomain = domain.value;
+    state.value = State.Fetching;
     whois.value
-      .isDomainAvailable(domain.value)
+      .isDomainAvailable(promiseDomain)
       .then((available) => {
+        if (domain.value !== promiseDomain) {
+          return; // domain changed
+        }
         domainAvailable.value = available;
-        fetching.value = false;
         if (!available) {
           newDomain();
+        } else {
+          state.value = State.Ready;
         }
       })
       .catch((err: unknown) => {
+        state.value = State.Error;
         throw err;
       });
   }
@@ -49,48 +65,101 @@ function checkAvailability() {
 
 onBeforeMount(async () => {
   await whois.value.init();
-  await factory.value.init();
+  await factory.value.init(whois.value);
   newDomain();
-  loading.value = false;
+  state.value = State.Ready;
 });
 onMounted(() => {
   setTimeout(() => {
     visible.value = true;
   });
 });
-onUpdated(async () => {
+watch(
-  await nextTick();
+  () => document.location.hash,
-  createIcons({
+  () => {
-    icons,
+    const newLang = getLang();
-    nameAttr: "icon",
+    if (newLang !== lang.value) {
-    attrs: {
+      lang.value = newLang;
-      width: "1.1em",
+      newDomain();
-      height: "1.1em",
+    }
   },
-  });
+);
-});
 </script>
 
 <template>
-  <main :style="{ display: visible ? 'inherit' : 'none' }">
+  <div :style="{ display: visible ? 'inherit' : 'none' }">
-    <h1>
+    <div class="card bg-base-100 w-xl max-w-xl shrink-0 shadow-2xl">
-      <span v-show="fetching || loading"><i icon="cog"></i></span>
+      <div class="card-body">
-      {{ domain }}
+        <h1 class="text-5xl font-bold font-doto">
-      <span v-show="!loading"
+          <span
-        >({{
+            v-if="state !== State.Loading && domain"
-          domainAvailable === null
+            class="inline-block me-2"
-            ? "?"
-            : domainAvailable
-              ? "available"
-              : "unavailable"
-        }})</span
           >
+            <div v-if="state === State.Fetching" class="status status-xl"></div>
+            <div
+              v-else-if="domainAvailable"
+              class="inline-grid *:[grid-area:1/1]"
+            >
+              <div class="status status-xl status-success animate-ping"></div>
+              <div class="status status-xl status-success"></div>
+            </div>
+            <div v-else class="inline-grid *:[grid-area:1/1]">
+              <div class="status status-xl status-error animate-ping"></div>
+              <div class="status status-xl status-error"></div>
+            </div>
+          </span>
+          <span
+            v-if="!domain"
+            class="loading loading-spinner loading-xl"
+          ></span>
+          <span v-else>{{ domain }}</span>
         </h1>
-    <button v-show="!loading && !fetching" @click="newDomain">
+        <p v-if="state === State.Loading" class="py-6">
-      New domain
+          <span v-if="lang === 'french'"
+            >Chargement de la Cool Domain Factory™</span
+          >
+          <span v-else>Loading the Cool Domain Factory™</span>
+          <span class="loading loading-dots loading-xs"></span>
+        </p>
+        <p v-else-if="state === State.Generating" class="py-6">
+          <span v-if="lang === 'french'">Création d'un domaine cool</span>
+          <span v-else>Generating a new cool domain</span>
+          <span class="loading loading-dots loading-xs"></span>
+        </p>
+        <p v-else-if="state === State.Fetching" class="py-6">
+          <span v-if="lang === 'french'">Vérification de la disponibilité</span>
+          <span v-else>Checking domain availability</span>
+          <span class="loading loading-dots loading-xs"></span>
+        </p>
+        <div v-else-if="state === State.Ready && domainAvailable" class="py-6">
+          <span v-if="lang === 'french'">Ce domaine semble disponible !</span>
+          <span v-else>This domain seems available!</span>
+        </div>
+        <div v-else-if="state === State.Ready && !domainAvailable" class="py-6">
+          <span v-if="lang === 'french'">Ce domaine n'est pas disponible.</span>
+          <span v-else>This domain is not available.</span>
+        </div>
+        <div v-else-if="state === State.Error" class="py-6">
+          <span v-if="lang === 'french'"
+            >Une erreur est survenue, merci de recharger la page.</span
+          >
+          <span v-else>An error has occured, please reload the page.</span>
+        </div>
+        <button
+          :disabled="
+            state === State.Loading ||
+            state === State.Generating ||
+            state === State.Error
+          "
+          class="btn btn-primary"
+          @click="newDomain"
+        >
+          <span v-if="lang === 'french'">Nouveau domaine</span>
+          <span v-else>New domain</span>
         </button>
-    <span v-if="error">Error: {{ error }}</span>
+      </div>
-  </main>
+    </div>
+  </div>
 </template>
 
 <style scoped>

src/lib/factory.ts

@@ -2,6 +2,7 @@ import { getTLDList } from "./tld";
 import englishWords from "@/data/english.txt?raw";
 import frenchWords from "@/data/french.txt?raw";
 import { randomElement, shuffled } from "./random";
+import type { WhoIs } from "./whois";
 
 export class DomainFactory {
   tldList: string[] = [];
@@ -9,9 +10,9 @@ export class DomainFactory {
   words: Record<string, string[]> = {};
   generated: string[] = [];
 
-  async init() {
+  async init(whois: WhoIs) {
     try {
-      this.tldList = await getTLDList();
+      this.tldList = await getTLDList(whois);
     } catch (e) {
       this.error = "Could not load TLD list";
       throw e;

src/lib/tld.ts

@@ -1,20 +1,40 @@
-export async function getTLDList(): Promise<string[]> {
+import type { WhoIs } from "./whois";
+
+export async function getTLDList(whois: WhoIs): Promise<string[]> {
   const response = await fetch(
     "https://cors.klemek.fr/https://publicsuffix.org/list/public_suffix_list.dat",
   );
   const content = await response.text();
   const tldList: string[] = [];
-  content.split("\n").forEach((line) => {
+  // @ts-expect-error - not empty string
+  content
+    .split("// ===END ICANN DOMAINS===")[0]
+    .split("\n")
+    .forEach((line) => {
       line = line.trim();
       if (
         line.length &&
         !line.startsWith("//") &&
         !line.startsWith("*") &&
-      line.replace(/[^\\x00-\\x7F]/g, "") === line &&
+        line.replace(/[^\x20-\x7F]/g, "") === line
-      (!line.includes(".") || tldList.every((other) => !line.endsWith(other)))
       ) {
+        tldList.forEach((other) => {
+          if (line.endsWith(`.${other}`)) {
+            tldList.splice(tldList.indexOf(other), 1);
+          }
+        });
         tldList.push(line);
       }
     });
-  return tldList;
+  return tldList.filter((tld) => {
+    if (!whois.rdapEndpoints) {
+      return true;
+    }
+    for (const rdap_tld of Object.keys(whois.rdapEndpoints)) {
+      if (rdap_tld == tld || tld.endsWith(`.${rdap_tld}`)) {
+        return true;
+      }
+    }
+    return false;
+  });
 }

src/style.css

@@ -0,0 +1,19 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
+@import "tailwindcss";
+@plugin "daisyui" {
+  themes: cyberpunk --default;
+}
+
+html,
+body {
+  font-family: "Roboto", Verdana, serif;
+}
+
+.hero {
+  background-image: url(./background.jpg);
+
+  @supports (background-image: url(./background.webp)) {
+    background-image: url(./background.webp);
+  }
+}

src/style.scss

@@ -1,217 +0,0 @@
-@use './material-colors.css';
-
-/*
-=================================================
-https://www.joshwcomeau.com/css/custom-css-reset/
-=================================================
-*/
-
-/*
-  1. Use a more-intuitive box-sizing model.
-*/
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-/*
-    2. Remove default margin
-  */
-* {
-  margin: 0;
-}
-/*
-    3. Allow percentage-based heights in the application
-  */
-html,
-body,
-div#app {
-  height: 100%;
-}
-/*
-    Typographic tweaks!
-    4. Add accessible line-height
-    5. Improve text rendering
-  */
-body {
-  line-height: 1.5;
-  -webkit-font-smoothing: antialiased;
-}
-/*
-    6. Improve media defaults
-  */
-img,
-picture,
-video,
-canvas,
-svg {
-  display: block;
-  max-width: 100%;
-}
-/*
-    7. Remove built-in form typography styles
-  */
-input,
-button,
-textarea,
-select {
-  font: inherit;
-}
-/*
-    8. Avoid text overflows
-  */
-p,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  overflow-wrap: break-word;
-}
-/*
-    9. Create a root stacking context
-  */
-#root,
-#__next {
-  isolation: isolate;
-}
-
-/*
-=================================================
-CUSTOM STYLE
-=================================================
-*/
-
-@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
-
-:root {
-  /* https://materialui.co/colors/ */
-  /* TODO: 2. change hue and saturation */
-  --hue-primary: 65.52;
-  --sat-primary: 20%;
-  --background: hsl(var(--hue-primary), var(--sat-primary), 96.08%);
-  --background-primary: hsl(var(--hue-primary), var(--sat-primary), 93.33%);
-  --background-secondary: hsl(var(--hue-primary), var(--sat-primary), 90%);
-  --color-primary: hsl(var(--hue-primary), var(--sat-primary), 50%);
-  --text-primary: hsl(var(--hue-primary), var(--sat-primary), 25%);
-  --text-secondary: hsl(var(--hue-primary), var(--sat-primary), 30%);
-}
-
-/*
-=================================================
-https://blog.koley.in/2019/339-bytes-of-responsive-css
-https://www.swyx.io/css-100-bytes
-https://gist.github.com/JoeyBurzynski/617fb6201335779f8424ad9528b72c41
-=================================================
-*/
-
-html,
-body {
-  padding: 0;
-  max-width: 100%;
-  color: var(--text-primary);
-  font-family: 'Roboto', Verdana, serif;
-}
-
-body {
-  background-color: var(--background);
-}
-
-main {
-  padding: 1.5rem;
-  margin: auto;
-  background-color: var(--background-primary);
-  min-height: 100%;
-}
-
-table {
-  border-collapse: collapse;
-  width: 100%;
-  font-size: 0.9em;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin: 1em 0 0.5em;
-}
-
-p,
-ul,
-ol {
-  margin-bottom: 2em;
-  color: var(--text-secondary);
-}
-
-hr {
-  opacity: 25%;
-  border-bottom: 0;
-  margin-bottom: 0.5em;
-}
-
-textarea,
-input,
-select,
-.mono {
-  font-family: 'Roboto Mono', monospace;
-}
-
-textarea {
-  width: 100%;
-  min-width: 100%;
-  max-width: 100%;
-}
-
-a {
-  color: inherit;
-}
-
-.button {
-  display: block;
-  width: 100%;
-  text-decoration: none;
-  padding: 1em;
-  margin-bottom: 0.75em;
-  border: 1px solid var(--color-primary);
-  border-radius: 0.5em;
-  background-color: var(--background);
-  cursor: pointer;
-  font-size: 1.333em;
-}
-
-.button:hover {
-  background-color: var(--background-secondary);
-}
-
-@media only screen and (min-width: 768px) {
-  main {
-    max-width: 42rem;
-  }
-  table {
-    font-size: inherit;
-  }
-}
-
-/*
- * LUCIDE ICONS
- */
-
-svg.lucide {
-  display: inline-block;
-  vertical-align: text-top;
-}
-
-b .lucide,
-h1 .lucide,
-h2 .lucide,
-h3 .lucide,
-h4 .lucide,
-h5 .lucide,
-h6 .lucide {
-  stroke-width: 3;
-}

vite.config.ts

@@ -1,17 +1,18 @@
-import { fileURLToPath, URL } from 'node:url'
+import { fileURLToPath, URL } from "node:url";
 
-import { defineConfig } from 'vite'
+import { defineConfig } from "vite";
-import vue from '@vitejs/plugin-vue'
+import vue from "@vitejs/plugin-vue";
-import vueDevTools from 'vite-plugin-vue-devtools'
+import vueDevTools from "vite-plugin-vue-devtools";
+import tailwindcss from "@tailwindcss/vite";
 
 // https://vite.dev/config/
 export default defineConfig({
-  base: '',
+  base: "",
-  plugins: [vue(), vueDevTools()],
+  plugins: [vue(), vueDevTools(), tailwindcss()],
-  publicDir: 'public',
+  publicDir: "public",
   resolve: {
     alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url)),
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
     },
   },
-})
+});