69 lines
2 KiB
Markdown
69 lines
2 KiB
Markdown
# 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
|