71 lines
2.3 KiB
Plaintext
71 lines
2.3 KiB
Plaintext
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. |