diff --git a/.claude/settings.local.json b/.claude/settings.local.json index 82aef29..34efff9 100644 --- a/.claude/settings.local.json +++ b/.claude/settings.local.json @@ -11,7 +11,10 @@ "WebFetch(domain:docs.snipcart.com)", "WebFetch(domain:www.mondialrelay.fr)", "WebFetch(domain:storage.mondialrelay.fr)", - "WebFetch(domain:jsfiddle.net)" + "WebFetch(domain:jsfiddle.net)", + "Bash(tree:*)", + "Bash(git add:*)", + "Bash(git commit:*)" ], "deny": [], "ask": [] diff --git a/api/cache/donorbox_data.json b/api/cache/donorbox_data.json deleted file mode 100644 index 75bf0d3..0000000 --- a/api/cache/donorbox_data.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "total_raised": "7784.93", - "goal_amt": "50000.0", - "currency": "eur", - "donations_count": 123, - "campaign_name": "Soutenez Index avant le 31 d\u00e9cembre 2025 !", - "updated_at": "2025-12-02T11:55:25+00:00" -} \ No newline at end of file diff --git a/claude.md b/claude.md index 12b707d..2d439a9 100644 --- a/claude.md +++ b/claude.md @@ -14,19 +14,47 @@ Application web-to-print permettant la mise en page de récits imprimables. L'é ## Architecture ``` -/src # Vue 3 SPA - ├── main.js # Bootstrap Vue - ├── App.vue # Root + init PagedJS - └── components/ - └── PagedJsWrapper.vue # Contenu print +/src # Vue 3 SPA + ├── main.js # Bootstrap Vue + ├── App.vue # Root + init PagedJS + ├── style.css # Styles globaux + ├── components/ + │ ├── blocks/ # COMPOSANTS DE BLOCS (HeadingBlock, TextBlock, etc.) + │ │ └── index.js # Export central des blocs + │ ├── editor/ # PANNEAUX D'ÉDITION (PageSettings, TextSettings, etc.) + │ ├── ui/ # COMPOSANTS UI RÉUTILISABLES (InputWithUnit, MarginEditor, etc.) + │ ├── PagedJsWrapper.vue # Wrapper principal PagedJS + │ ├── ElementPopup.vue # Popup d'édition d'élément + │ ├── PagePopup.vue # Popup d'édition de page + │ ├── SidePanel.vue # Panneau latéral + │ ├── PreviewLoader.vue # Loader de preview + │ └── StylesheetViewer.vue # Viewer de feuilles de style + ├── composables/ # COMPOSABLES VUE (useCssSync, useCssUpdater, etc.) + ├── stores/ # STORES PINIA (recit.js, stylesheet.js) + └── utils/ # UTILITAIRES JS (css-parsing.js, etc.) -/public # Kirby CMS - ├── index.php # Entry Kirby +/api/cache # Cache des données API (donorbox_data.json, etc.) + +/public # Kirby CMS + assets statiques + ├── index.php # Entry Kirby + ├── composer.json # Dépendances PHP + ├── assets/ + │ ├── css/ # CSS sources (exclus du déploiement) + │ ├── fonts/ # Webfonts + │ └── svg/ # Icônes SVG ├── site/ - │ ├── blueprints/ # Schémas de contenu - │ ├── templates/ # Templates PHP - │ └── snippets/ # header.php injecte Vue - └── content/ # Contenus markdown + │ ├── blueprints/ # Schémas de contenu Kirby + │ ├── templates/ # Templates PHP Kirby + │ ├── snippets/ # Snippets PHP (header.php injecte Vue) + │ ├── plugins/ # Plugins Kirby + │ ├── accounts/ # Comptes utilisateurs (exclu déploiement) + │ ├── cache/ # Cache Kirby (exclu déploiement) + │ └── sessions/ # Sessions (exclu déploiement) + ├── content/ # Contenus markdown Kirby + └── media/ # Médias uploadés + +/.forgejo/workflows # CI/CD Forgejo +/Dockerfile.ci # Image Docker pour CI (à copier sur VPS) ``` ## Flux de données @@ -45,25 +73,81 @@ Application web-to-print permettant la mise en page de récits imprimables. L'é ### PagedJS - CSS `@page` rules dans les composants Vue -- Interface preview dans `/src/assets/pagedjs-interface.css` - Initialisé via `Previewer` dans `App.vue` +- Preview navigable avec interface de navigation -### À implémenter -- API REST Kirby pour exposer le contenu en JSON -- Fetch dynamique dans Vue -- Panneaux/popups d'édition réactive -- State management si nécessaire +### State Management +- **Pinia** utilisé pour la gestion d'état +- `stores/recit.js` : État du récit (contenu, navigation) +- `stores/stylesheet.js` : État des feuilles de style CSS + +### Conventions de placement (IMPORTANT : respecter cette organisation) + +**Nouveau composant de bloc (heading, text, image, etc.)** +→ `/src/components/blocks/NomBlock.vue` + export dans `blocks/index.js` + +**Nouveau panneau d'édition/settings** +→ `/src/components/editor/NomSettings.vue` + +**Nouveau composant UI réutilisable (input, bouton, etc.)** +→ `/src/components/ui/NomComposant.vue` + +**Nouveau composable Vue (logique réutilisable)** +→ `/src/composables/useNomComposable.js` + +**Nouveau store Pinia** +→ `/src/stores/nom.js` + +**Nouvelle fonction utilitaire** +→ `/src/utils/nom-util.js` + +**Cache API externe** +→ `/api/cache/nom_data.json` + +**Nouveau template/snippet Kirby** +→ `/public/site/templates/` ou `/public/site/snippets/` + +**Nouveau blueprint Kirby** +→ `/public/site/blueprints/` ## Commandes ```bash npm run dev # Vite dev server (5173) -npm run build # Build prod +npm run build # Build prod dans /public/assets/dist/ # Kirby sur serveur PHP séparé ``` +## Déploiement + +### CI/CD Forgejo +- Workflow : `.forgejo/workflows/deploy.yml` +- Image Docker : `forgejo-ci-node:latest` (construite depuis `Dockerfile.ci`) +- Déploiement via FTP avec `lftp` + +### Fichiers/dossiers exclus du déploiement FTP +``` +assets/local/ # Assets locaux +assets/css/src/ # Sources SCSS +assets/css/*.css # CSS compilés localement +assets/css/*.map # Source maps +assets/css/*.scss # Sources SCSS +site/accounts/ # Comptes utilisateurs +site/cache/ # Cache Kirby +site/sessions/ # Sessions actives +``` + +### Build process +1. Clone du repo +2. `npm ci` : Install des dépendances +3. Copie de `/public` vers `/dist` +4. `npm run build` : Vite build dans `/dist/assets/dist/` +5. Déploiement FTP de `/dist` vers production + ## Conventions - Composants Vue : PascalCase - CSS : Variables pour theming, scoped styles - Print CSS : W3C Paged Media spec +- Stores Pinia : camelCase pour les fichiers, PascalCase pour les noms (ex: `useRecitStore`) +- Composables : Préfixe `use` (ex: `useCssSync`)