Commit graph

15 commits

Author SHA1 Message Date
isUnknown
32e8301d91 feat: transform map-editor markers into Kirby subpages
Some checks failed
Deploy / Build and Deploy to Production (push) Has been cancelled
Major refactoring of the map-editor plugin to store markers as Kirby
subpages instead of YAML data, enabling extensible block content.

Backend Changes:
- Add API routes for marker CRUD operations (GET, POST, PATCH, DELETE)
- Create marker.yml blueprint with content & position tabs
- Add markers section to map.yml blueprint
- Update useMapData to only handle center/zoom/background
- Create useMarkersApi composable for API communication

Frontend Changes:
- Refactor MapEditor.vue to support multi/single modes
- Multi mode: loads markers via API, redirects to Panel for editing
- Single mode: displays single marker for position tab in marker page
- Remove MarkerEditor.vue modal (replaced by Panel editing)
- Normalize position format handling (lon vs lng)

API Features:
- Session-based auth for Panel requests (no CSRF needed)
- Proper error handling and validation
- Markers created as listed pages (not drafts)
- Uses Kirby's data() method for JSON parsing

Documentation:
- Add IMPLEMENTATION_SUMMARY.md with technical details
- Add TESTING_CHECKLIST.md with 38 test cases

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2026-01-29 14:08:40 +01:00
isUnknown
b47195488a map plugin : improve styles 2026-01-28 16:33:48 +01:00
isUnknown
2b0f4f8742 refactor: comprehensive map-editor plugin refactoring (phases 1-3)
All checks were successful
Deploy / Build and Deploy to Production (push) Successful in 18s
This commit implements a complete refactoring of the map-editor plugin to
improve code organization, reusability, and maintainability.

## Phase 1: Extraction of composables and factory functions

**New composables:**
- `useMarkers.js`: Centralized marker state and CRUD operations
  - Exports: markers, selectedMarkerId, editingMarker refs
  - Computed: canAddMarker, hasMarkers, selectedMarker
  - Methods: addMarker, updateMarker, deleteMarker, selectMarker, etc.
  - Includes createMarker() factory to eliminate code duplication

- `useMapData.js`: Map data persistence (YAML load/save)
  - Exports: center, zoom refs
  - Methods: loadMapData, saveMapData, debouncedSave
  - Handles lifecycle cleanup of debounce timeouts

**Benefits:**
- Eliminated code duplication (2 identical marker creation blocks)
- Separated business logic from UI concerns
- Improved testability with pure functions
- Added JSDoc documentation throughout

## Phase 2: Component extraction

**New components:**
- `MarkerList.vue`: Extracted sidebar UI from MapEditor.vue
  - Props: markers, selectedMarkerId, maxMarkers
  - Emits: add-marker, select-marker, edit-marker, delete-marker, select-location
  - Includes integrated GeocodeSearch component
  - Self-contained styles with scoped CSS

**Benefits:**
- MapEditor.vue reduced from 370 → 230 lines (-40%)
- Clear separation of concerns (orchestration vs presentation)
- Reusable component for potential future use
- Easier to test and maintain

## Phase 3: Utils restructuring with JSDoc

**New structure:**
```
utils/
├── constants.js           # NOMINATIM_API, MAP_DEFAULTS, DEBOUNCE_DELAYS
├── api/
│   └── nominatim.js      # geocode() with full JSDoc typedefs
└── helpers/
    └── debounce.js       # Generic debounce utility
```

**Removed:**
- `utils/geocoding.js` (replaced by modular structure)

**Benefits:**
- Constants centralized for easy configuration
- API layer separated from helpers
- Complete JSDoc type annotations for better IDE support
- Better organization following standard patterns

## Updated components

**MapEditor.vue:**
- Now uses useMarkers and useMapData composables
- Uses MarkerList component instead of inline template
- Cleaner setup function with better separation
- Reduced from 537 → 256 lines (CSS moved to MarkerList)

**GeocodeSearch.vue:**
- Updated imports to use new utils structure
- Uses DEBOUNCE_DELAYS constant instead of hardcoded value

## Build verification

-  npm run build successful
-  Bundle size unchanged (806.10 kB / 223.46 KiB gzipped)
-  All functionality preserved
-  No breaking changes

## Documentation

- Added comprehensive README.md with:
  - Architecture overview
  - Composables usage examples
  - Component API documentation
  - Data flow diagrams
  - Development guide

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2026-01-28 16:29:15 +01:00
isUnknown
437349cd2b feat: add Phase 2 features to map-editor plugin (rich marker content)
All checks were successful
Deploy / Build and Deploy to Production (push) Successful in 16s
Implement marker editing modal with comprehensive content management:
- MarkerEditor.vue modal with custom overlay (replaces k-dialog)
- Edit marker on double-click or via edit button in list
- Required fields: title (validated), optional description
- Editable position (lat/lon) and custom icon support
- Content blocks system: add/remove/reorder text and image blocks
- French translations for all UI elements
- Click marker in list to center map on it with smooth animation
- Fix marker anchor to bottom (pin tip) for accurate positioning
- Auto-save with isDirty flag to detect any form changes

Modal features:
- Title field (required)
- Description textarea (optional)
- Position inputs (latitude/longitude)
- Icon selector (default or custom via UUID/filename)
- Content builder with text and image blocks
- Block reordering (up/down) and deletion
- Validation: save button enabled only when title filled and form modified

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2026-01-28 16:16:19 +01:00
isUnknown
dc84ff63a2 feat: add map-editor plugin with interactive OSM map and markers
All checks were successful
Deploy / Build and Deploy to Production (push) Successful in 19s
Implement Phase 1 of custom Kirby plugin for editing interactive maps:
- OpenStreetMap base layer with MapLibre GL JS
- Click to add markers, drag to reposition
- Marker list sidebar with selection and deletion
- Auto-save with debounce (YAML format)
- Add marker button creates marker at current map center
- Max 50 markers per map (configurable)
- Clean UI with marker counter

Blueprint updated to use new map-editor field type instead of placeholder.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2026-01-28 15:43:23 +01:00
isUnknown
7e42c4baec refactor: rename carte template to map for consistency
All checks were successful
Deploy / Build and Deploy to Production (push) Successful in 15s
Rename all carte.yml files to map.yml and update references in blueprints to use English naming convention consistently across the codebase. This includes renaming 5 content files and updating template references in narrative and block blueprints.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2026-01-28 14:07:40 +01:00
isUnknown
0f46618066 feat: add custom CSS save system with dual-editor interface
All checks were successful
Deploy / Build and Deploy to Production (push) Successful in 16s
Implement complete custom CSS management system:
- Separate base CSS (readonly) and custom CSS (editable)
- Save custom CSS to Kirby backend per narrative
- Visual save button with state indicators (dirty/saving/success/error)
- CSRF-protected API endpoint for CSS operations
- Dual-editor StylesheetViewer (base + custom with edit mode toggle)
- Auto-format custom CSS with Prettier on edit mode exit

Backend changes:
- Add web2print Kirby plugin with POST/GET routes
- Add customCss field to narrative blueprint
- Add CSRF token meta tag in header
- Include customCss and modified timestamps in JSON template
- Install code-editor plugin for Kirby panel

Frontend changes:
- Refactor stylesheet store with baseCss/customCss refs
- Make content a computed property (baseCss + customCss)
- Add helper methods: replaceBlock, replaceInCustomCss, setCustomCss
- Update all components to use new store API
- Create SaveButton component with FAB design
- Redesign StylesheetViewer with collapsable sections
- Initialize store from narrative data on app mount

File changes:
- Rename stylesheet.css → stylesheet.print.css
- Update all references to new filename

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2026-01-09 13:39:25 +01:00
isUnknown
af788ad1e0 refactor: rename 'recit' to 'narrative' for English code naming
- Rename store: recit.js → narrative.js (useRecitStore → useNarrativeStore)
- Rename templates: recit.php/json.php → narrative.php/json.php
- Rename blueprint: recit.yml → narrative.yml
- Update all imports and references in Vue/JS files
- Update PHP template references and data attributes
- Update CLAUDE.md documentation
- Create comprehensive README.md with English-French dictionary

The dictionary section maps English code terms to French content terms
for easier navigation between codebase and CMS content.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2026-01-09 10:34:10 +01:00
isUnknown
16f01681dc fix build : copy some styles
All checks were successful
Deploy / Build and Deploy to Production (push) Successful in 15s
2026-01-08 16:07:15 +01:00
isUnknown
ceaf318272 improve default styles 2025-12-10 11:35:37 +01:00
isUnknown
790eb7414e feat: integrate Kirby CMS data with Vue print editor
- Add JSON content representation template (recit.json.php)
- Create virtual /print page plugin for recit pages
- Add recit.php base template for content representation
- Create Pinia store for recit data management
- Add block components (text, heading, image, list, quote, video, map)
- Update PagedJsWrapper for dynamic content rendering with data-page-type
- Modify header.php to pass recit JSON URL via data attribute
- Update App.vue to load recit data on mount

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-08 18:01:01 +01:00
isUnknown
9af36fb422 feat: integrate Coloris color picker for background field
Add Coloris.js library for enhanced color selection in PageSettings with
automatic button state sync across tab changes.

Features:
- Color picker with swatches, alpha support, and format toggle (hex/rgb/hsl)
- Button positioned to the left of input field
- Automatic sync when switching tabs (remembers selected color)
- Close button and click-outside-to-close functionality
- Dark theme with pill UI style

Changes:
- Install @melloware/coloris package
- PageSettings.vue: Integrate Coloris with data-coloris attribute,
  add tab visibility detection via provide/inject, force button update
  when returning to document tab
- EditorPanel.vue: Provide activeTab to child components, increase
  panel width to 30rem
- _forms.scss: Add .input-with-color styles with custom Coloris
  button positioning (absolute positioned to left of input)
- Temporarily comment out rgb/hex format buttons (replaced by Coloris
  format toggle)

Technical details:
- Uses provide/inject pattern to detect tab changes
- Triggers synthetic input events to force Coloris button refresh
- Custom CSS overrides to position swatch button correctly

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-04 15:03:29 +01:00
sarahgarcin1
b8cb77c0e5 blueprints 2025-12-02 21:45:22 +01:00
isUnknown
a627a14fa1 improve styles 2025-11-24 17:30:36 +01:00
isUnknown
dc0ae26464 init with kirby, vue and pagedjs interactive 2025-11-24 14:01:48 +01:00