Commit Graph

7 Commits

Author SHA1 Message Date
d0e70f81e7 Major code quality improvements: Fix XSS vulnerabilities and replace browser dialogs
Security Fixes:
- Add DOMPurify HTML sanitization for all dangerouslySetInnerHTML usage
- Create comprehensive HTML sanitization utility with configurable security levels
- Implement safe template rendering for slide content and layouts
- Add input validation for image sources and dangerous attributes

UI/UX Improvements:
- Replace browser alert() and confirm() with proper React modal components
- Create reusable Modal, AlertDialog, and ConfirmDialog components
- Add useDialog hook for easy dialog state management
- Implement proper accessibility with keyboard navigation and focus management
- Add smooth animations and responsive design for dialogs

Components Added:
- src/utils/htmlSanitizer.ts - Comprehensive HTML sanitization
- src/components/ui/Modal.tsx - Base modal component
- src/components/ui/AlertDialog.tsx - Alert dialog component
- src/components/ui/ConfirmDialog.tsx - Confirmation dialog component
- src/hooks/useDialog.ts - Dialog state management hook

Updated Components:
- SlideEditor.tsx - Now uses sanitized HTML rendering
- LayoutPreviewPage.tsx - Now uses sanitized HTML rendering
- PresentationEditor.tsx - Now uses React dialogs instead of browser dialogs

Benefits:
 Eliminates XSS vulnerabilities from unsafe HTML rendering
 Provides consistent, accessible user interface
 Improves user experience with proper modal dialogs
 Maintains security while preserving slide formatting capabilities
 Follows React best practices for component composition

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-20 17:41:15 -05:00
2a905d50e0 Enhance default theme with proper content centering and 2-content-blocks layout
- Update default theme CSS for proper content centering and aspect ratio integration
- Add text-align: center to base slide styling for consistent centering
- Implement specific alignment for title, subtitle, and text slots
- Add aspect ratio specific adjustments (different padding and max-width per ratio)
- Create new 2-content-blocks layout with side-by-side equal spacing
- Use CSS Grid for 50/50 split with proper gap and visual separation
- Add responsive design for mobile devices (stacks vertically)
- Include subtle styling to distinguish content blocks
- Improve typography scaling for two-column layout

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-20 17:15:03 -05:00
9b0b16969f feat: implement complete presentation management system with aspect ratio support
## Major Features Added:

### Presentation Management
- Complete CRUD operations for presentations (create, read, update, delete)
- IndexedDB storage for offline presentation data
- Comprehensive presentation list view with metadata
- Navigation integration with header menu

### Slide Management
- Full slide editor with layout selection and content editing
- Live preview with theme styling applied
- Speaker notes functionality
- Enhanced layout previews with realistic sample content
- Themed layout selection with proper CSS inheritance

### Aspect Ratio System
- Support for 3 common presentation formats: 16:9, 4:3, 16:10
- Global CSS system baked into theme engine
- Visual aspect ratio selection in presentation creation
- Responsive scaling for different viewing contexts
- Print-optimized styling with proper dimensions

### User Experience Improvements
- Enhanced sample content generation for realistic previews
- Improved navigation with presentation management
- Better form styling and user interaction
- Comprehensive error handling and loading states
- Mobile-responsive design throughout

### Technical Infrastructure
- Complete TypeScript type system for presentations
- Modular component architecture
- CSS aspect ratio classes for theme consistency
- Enhanced template rendering with live updates
- Robust storage utilities with proper error handling

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-20 16:34:00 -05:00
98958b2cb3 Remove iframe previews and improve theme hot reload with SVG demo content
- Remove iframe previews from theme detail and layout detail pages for cleaner UI
- Replace with informative layout cards showing descriptions and slot type badges
- Fix theme hot reload by switching from custom HMR to full page reload
- Update template renderer to use slot names as demo content
- Add SVG pattern generation for image slots with grid background and slot labels
- Improve demo content for all slot types (code, lists, tables, etc.)
- Clean up HMR listeners and simplify theme change detection

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-20 14:11:51 -05:00
15d3789bb4 Add full-screen layout preview route and fix iframe sandbox issue
- Create LayoutPreviewPage component for full-screen layout previews
- Add preview route /themes/:themeId/layouts/:layoutId/preview to App routing
- Update theme components with preview links and improved navigation
- Fix iframe sandbox error by adding allow-scripts permission
- Enhance template renderer with layout metadata support
- Replace PostCSS with regex-only CSS parsing for browser compatibility
- Add comprehensive standards documentation for code quality
- Clean up CSS slot indicators to be always visible with descriptions

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-20 13:48:13 -05:00
3f1c299850 updated README.md, removed boilersplate and added instructions for using 2025-08-20 10:26:23 -05:00
6e6c09b5ba Add comprehensive theme routing and browsing system
- Add React Router with theme browser, theme detail, and layout detail pages
- Implement manifest-based theme discovery for better performance
- Add Welcome component as home page with feature overview
- Fix layout and styling issues with proper CSS centering
- Implement introspective theme browsing (dynamically discover colors/variables)
- Add layout preview system with iframe scaling
- Create comprehensive theme detail page with color palette display
- Fix TypeScript errors and build issues
- Remove hardcoded theme assumptions in favor of dynamic discovery

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-20 10:17:55 -05:00