init with kirby, vue and pagedjs interactive
This commit is contained in:
commit
dc0ae26464
968 changed files with 211706 additions and 0 deletions
69
claude.md
Normal file
69
claude.md
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
# GeoProject - Web-to-Print Interface
|
||||
|
||||
## Vue d'ensemble
|
||||
|
||||
Application web-to-print permettant la mise en page de récits imprimables. L'édition de contenu se fait via Kirby CMS (headless), la mise en page est rendue par PagedJS, et l'interface d'édition réactive utilise Vue 3.
|
||||
|
||||
## Stack technique
|
||||
|
||||
- **Frontend**: Vue 3 (Composition API) + Vite
|
||||
- **Print engine**: PagedJS (CSS Paged Media)
|
||||
- **CMS**: Kirby 5 (headless, flat-file)
|
||||
- **Backend**: PHP 8.1+
|
||||
|
||||
## Architecture
|
||||
|
||||
```
|
||||
/src # Vue 3 SPA
|
||||
├── main.js # Bootstrap Vue
|
||||
├── App.vue # Root + init PagedJS
|
||||
└── components/
|
||||
└── PagedJsWrapper.vue # Contenu print
|
||||
|
||||
/public # Kirby CMS
|
||||
├── index.php # Entry Kirby
|
||||
├── site/
|
||||
│ ├── blueprints/ # Schémas de contenu
|
||||
│ ├── templates/ # Templates PHP
|
||||
│ └── snippets/ # header.php injecte Vue
|
||||
└── content/ # Contenus markdown
|
||||
```
|
||||
|
||||
## Flux de données
|
||||
|
||||
1. **Kirby** → Stocke/gère le contenu (flat-files)
|
||||
2. **Templates PHP** → Rendent le wrapper HTML + injectent Vue
|
||||
3. **Vue** → Interface réactive pour éditer la mise en page
|
||||
4. **PagedJS** → Transforme le contenu en pages imprimables
|
||||
|
||||
## Points clés
|
||||
|
||||
### Intégration Vite/Kirby
|
||||
`/public/site/snippets/header.php` gère le dev/prod :
|
||||
- Dev : charge depuis `localhost:5173`
|
||||
- Prod : charge depuis `/assets/dist/`
|
||||
|
||||
### PagedJS
|
||||
- CSS `@page` rules dans les composants Vue
|
||||
- Interface preview dans `/src/assets/pagedjs-interface.css`
|
||||
- Initialisé via `Previewer` dans `App.vue`
|
||||
|
||||
### À 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
|
||||
|
||||
## Commandes
|
||||
|
||||
```bash
|
||||
npm run dev # Vite dev server (5173)
|
||||
npm run build # Build prod
|
||||
# Kirby sur serveur PHP séparé
|
||||
```
|
||||
|
||||
## Conventions
|
||||
|
||||
- Composants Vue : PascalCase
|
||||
- CSS : Variables pour theming, scoped styles
|
||||
- Print CSS : W3C Paged Media spec
|
||||
Loading…
Add table
Add a link
Reference in a new issue