generated from coulomb/repo-seed
tegwick
5bec61740b
Implements a new templating approach that allows complete visual control
in Inkscape while maintaining 100% valid SVG.
New Features:
- DOM-based generator using DOMParser and cloneNode()
- Prototype elements (month-proto, lane-proto, item-proto) instead of string templates
- Full WYSIWYG editing in Inkscape - see exactly how timeline will look
- Auto-detection of template type (prototype vs template-v2)
- Text element mapping via IDs (e.g., id="item-title")
- SVG transforms for positioning instead of placeholder replacement
Implementation:
- generator-dom.js: New DOM-based generator with cloning logic
- engine.js: Auto-detect template type and use appropriate generator
- example-proto/: Complete working example with prototype template
- PROTOTYPE_TEMPLATES.md: Comprehensive guide for creating prototype templates
Benefits:
- No string placeholders ({{PLACEHOLDER}}) needed
- Native SVG editing workflow
- Better performance (DOM manipulation vs regex)
- Easier maintenance and styling
- Backward compatible (old template-v2 still works)
Template Structure:
- Prototypes with specific IDs visible in SVG (hidden after cloning)
- Container groups for generated content
- CSS classes for styling
- Text elements with IDs matching field names
All 56 tests still passing.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
65 lines
1.1 KiB
CSS
65 lines
1.1 KiB
CSS
/* Example Project Dark Green Theme */
|
|
/* This CSS demonstrates successful external stylesheet loading */
|
|
|
|
body {
|
|
background: #1e3a2f !important;
|
|
}
|
|
|
|
#projectName {
|
|
color: #2d8659 !important;
|
|
border-bottom: 2px solid #2d8659;
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
#projectSubtitle {
|
|
color: #4a9b6b !important;
|
|
}
|
|
|
|
/* File Manager Override */
|
|
#fileManager {
|
|
background: #243329 !important;
|
|
border-color: #2d8659 !important;
|
|
}
|
|
|
|
#fileManager h3 {
|
|
color: #4a9b6b !important;
|
|
}
|
|
|
|
.file-item {
|
|
background: #2a3f32 !important;
|
|
border-color: #2d8659 !important;
|
|
}
|
|
|
|
.file-item:hover {
|
|
border-color: #4a9b6b !important;
|
|
box-shadow: 0 2px 8px rgba(45, 134, 89, 0.2) !important;
|
|
}
|
|
|
|
.file-label {
|
|
color: #4a9b6b !important;
|
|
}
|
|
|
|
.upload-btn {
|
|
background: #2d8659 !important;
|
|
}
|
|
|
|
.upload-btn:hover {
|
|
background: #1e5a3d !important;
|
|
}
|
|
|
|
/* Buttons */
|
|
button {
|
|
background: #2d8659 !important;
|
|
}
|
|
|
|
button:hover:not(:disabled) {
|
|
background: #4a9b6b !important;
|
|
}
|
|
|
|
/* Viewer */
|
|
#viewer {
|
|
background: #2a3f32 !important;
|
|
border-color: #2d8659 !important;
|
|
color: #e8f5e8 !important;
|
|
}
|