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

Kirby → Stocke/gère le contenu (flat-files)
Templates PHP → Rendent le wrapper HTML + injectent Vue
Vue → Interface réactive pour éditer la mise en page
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

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

2 KiB Raw Blame History