aggiornato per uso di taiwind
This commit is contained in:
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.
|
||||
Reference in New Issue
Block a user