aggiornato per uso di taiwind
This commit is contained in:
fabio
71
codex-prompt/add-flowbite.txt
Normal file
71
codex-prompt/add-flowbite.txt
Normal file
@@ -0,0 +1,71 @@
|
||||
TASK: Integra Flowbite (UI + JS behavior) e aggiungi Makefile per Tailwind CLI (build/watch). Uso più terminali: non aggiungere tool per runner multi-process.
|
||||
|
||||
1) Dipendenze Node
|
||||
- Se non esiste package.json in root, crearlo.
|
||||
- Installare:
|
||||
- npm install -D @tailwindcss/cli tailwindcss
|
||||
- npm install flowbite
|
||||
|
||||
2) Tailwind config
|
||||
- Creare tailwind.config.js con:
|
||||
content: [
|
||||
"./web/templates/**/*.{html,gohtml}",
|
||||
"./web/static/**/*.js",
|
||||
"./node_modules/flowbite/**/*.js"
|
||||
],
|
||||
theme: { extend: {} },
|
||||
plugins: [ require("flowbite/plugin") ]
|
||||
|
||||
3) CSS input
|
||||
- Creare ./assets/tailwind/input.css con:
|
||||
@import "tailwindcss";
|
||||
|
||||
4) Scripts npm
|
||||
- In package.json aggiungere:
|
||||
"scripts": {
|
||||
"tw:build": "npx @tailwindcss/cli -i ./assets/tailwind/input.css -o ./web/static/css/app.css --minify",
|
||||
"tw:watch": "npx @tailwindcss/cli -i ./assets/tailwind/input.css -o ./web/static/css/app.css --watch"
|
||||
}
|
||||
|
||||
5) Copia Flowbite JS
|
||||
- Creare directory web/static/vendor se manca
|
||||
- Copiare:
|
||||
node_modules/flowbite/dist/flowbite.min.js -> web/static/vendor/flowbite.js
|
||||
|
||||
6) Layout
|
||||
- Aggiornare /web/templates/layout.html per includere:
|
||||
<link rel="stylesheet" href="/static/css/app.css?v={{.BuildHash}}">
|
||||
<script src="/static/vendor/htmx.min.js"></script>
|
||||
<script src="/static/vendor/flowbite.js"></script>
|
||||
- Rimuovere dal layout riferimenti attivi al vecchio UI kit Svelte (ma non cancellare /ui-kit dal repo)
|
||||
|
||||
7) Makefile
|
||||
- Creare/aggiornare Makefile con target:
|
||||
- tw-build: npm run tw:build
|
||||
- tw-watch: npm run tw:watch
|
||||
- flowbite-copy: mkdir -p web/static/vendor && cp node_modules/flowbite/dist/flowbite.min.js web/static/vendor/flowbite.js
|
||||
- assets: flowbite-copy tw-build
|
||||
- server: go run ./cmd/server
|
||||
- Non creare target che avvia più processi insieme.
|
||||
|
||||
8) Partials Flowbite
|
||||
- Creare /web/templates/components:
|
||||
- navbar.html
|
||||
- modal.html
|
||||
- dropdown.html
|
||||
- tabs.html
|
||||
- collapse.html
|
||||
Con markup Flowbite + data-attributes standard, senza JS custom.
|
||||
|
||||
9) Licenze
|
||||
- Creare /licenses/FLOWBITE-MIT.txt e THIRD_PARTY_NOTICES.md (Flowbite MIT, Tailwind MIT).
|
||||
|
||||
10) README
|
||||
- Aggiornare README con istruzioni:
|
||||
Terminale 1: npm i && make assets && make tw-watch
|
||||
Terminale 2: make server
|
||||
|
||||
Criteri:
|
||||
- make assets genera CSS e copia flowbite.js
|
||||
- modals/dropdowns Flowbite funzionano
|
||||
- progetto compilabile e avviabile.
|
||||
141
codex-prompt/flowbite-convert.txt
Normal file
141
codex-prompt/flowbite-convert.txt
Normal file
@@ -0,0 +1,141 @@
|
||||
TASK: Convertire tutti i template HTML esistenti per usare componenti Flowbite (markup + behavior JS) mantenendo logica MVC e HTMX.
|
||||
|
||||
Non modificare controller, services, repo.
|
||||
Modificare solo template e layout.
|
||||
|
||||
-------------------------------------
|
||||
1) LAYOUT GLOBALE
|
||||
-------------------------------------
|
||||
|
||||
Aggiornare /web/templates/layout.html:
|
||||
|
||||
- Layout container moderno Tailwind
|
||||
- Navbar Flowbite responsive con:
|
||||
- Logo/AppName a sinistra
|
||||
- Link:
|
||||
- Public: Login / Signup
|
||||
- Private: Dashboard / Users
|
||||
- Admin: Admin (solo se role=admin)
|
||||
- Dropdown utente con logout
|
||||
- Include:
|
||||
<link rel="stylesheet" href="/static/css/app.css?v={{.BuildHash}}">
|
||||
<script src="/static/vendor/htmx.min.js"></script>
|
||||
<script src="/static/vendor/flowbite.js"></script>
|
||||
|
||||
Struttura:
|
||||
- Navbar top
|
||||
- Container max-w-7xl mx-auto p-6
|
||||
- Footer minimale
|
||||
|
||||
-------------------------------------
|
||||
2) PUBLIC TEMPLATES
|
||||
-------------------------------------
|
||||
|
||||
Convertire:
|
||||
|
||||
/web/templates/public/login.html
|
||||
/web/templates/public/signup.html
|
||||
/web/templates/public/forgot_password.html
|
||||
/web/templates/public/reset_password.html
|
||||
|
||||
Usare:
|
||||
- Card Flowbite per form
|
||||
- Input Flowbite style
|
||||
- Button primary
|
||||
- Alert Flowbite per flash messages
|
||||
- Layout centrato verticalmente (flex items-center justify-center min-h-screen)
|
||||
|
||||
-------------------------------------
|
||||
3) PRIVATE USERS
|
||||
-------------------------------------
|
||||
|
||||
/web/templates/private/users/index.html
|
||||
|
||||
- Header sezione con:
|
||||
- Titolo
|
||||
- Pulsante "Nuovo Utente" (modal Flowbite)
|
||||
- Search input Flowbite
|
||||
- Table Flowbite styled (striped, hover)
|
||||
- Pagination button Flowbite
|
||||
- Modal Flowbite per dettaglio utente
|
||||
|
||||
Assicurarsi che:
|
||||
- hx-get
|
||||
- hx-target
|
||||
- hx-swap
|
||||
rimangano funzionanti
|
||||
|
||||
-------------------------------------
|
||||
4) ADMIN
|
||||
-------------------------------------
|
||||
|
||||
/web/templates/admin/dashboard.html
|
||||
/web/templates/admin/users.html
|
||||
/web/templates/admin/audit_logs.html
|
||||
|
||||
Usare:
|
||||
- Card summary (stats)
|
||||
- Table Flowbite
|
||||
- Badge per ruoli (admin = red, user = blue)
|
||||
- Tabs Flowbite se presenti più sezioni
|
||||
|
||||
-------------------------------------
|
||||
5) FLASH MESSAGES
|
||||
-------------------------------------
|
||||
|
||||
Creare partial:
|
||||
- /web/templates/components/flash.html
|
||||
|
||||
Usare Flowbite alert component:
|
||||
- success -> green
|
||||
- error -> red
|
||||
- warning -> yellow
|
||||
|
||||
Includere in layout sopra {{embed}}
|
||||
|
||||
-------------------------------------
|
||||
6) MODAL STANDARD
|
||||
-------------------------------------
|
||||
|
||||
Creare partial riusabile:
|
||||
/web/templates/components/modal.html
|
||||
|
||||
Markup Flowbite standard con:
|
||||
- id dinamico
|
||||
- header con titolo
|
||||
- body slot
|
||||
- footer slot opzionale
|
||||
- data-modal-toggle attributes
|
||||
|
||||
Usare nelle pagine private.
|
||||
|
||||
-------------------------------------
|
||||
7) ACCESSIBILITÀ
|
||||
-------------------------------------
|
||||
|
||||
- Usare aria attributes corretti come in documentazione Flowbite
|
||||
- Non rompere keyboard interaction
|
||||
- Mantenere form method e csrf se presente
|
||||
|
||||
-------------------------------------
|
||||
8) RESPONSIVE DESIGN
|
||||
-------------------------------------
|
||||
|
||||
- Navbar collapse mobile
|
||||
- Table scrollable mobile
|
||||
- Forms full width mobile
|
||||
|
||||
-------------------------------------
|
||||
9) CRITERI DI ACCETTAZIONE
|
||||
-------------------------------------
|
||||
|
||||
- Tutte le pagine hanno layout moderno Flowbite
|
||||
- Modals funzionano
|
||||
- Dropdown funzionano
|
||||
- Navbar responsive
|
||||
- HTMX partial update continua a funzionare
|
||||
- Nessuna modifica backend richiesta
|
||||
- Nessun errore JS in console
|
||||
|
||||
Scrivere codice pulito, leggibile, con commenti minimi.
|
||||
Non eliminare logica Go template esistente.
|
||||
Reference in New Issue
Block a user