Michael Mainguy
7bd25e1a7a
## PWA Implementation • Add comprehensive service worker for offline caching and app installation • Implement PWA manifest with app shortcuts and file handling • Create offline indicator component with update notifications • Add service worker utilities for cache management and updates • Update HTML with PWA meta tags and SEO optimization ## Content Standards Enhancement • Update presentation JSON generator prompt with strict Unicode prohibition • Add comprehensive content quality checklist for ASCII-only formatting • Create two example presentations demonstrating proper formatting • Fix build errors in OfflineIndicator component styling • Enforce consistent markdown formatting with plain dash bullets ## Features Added • Install as native app capability on all platforms • Complete offline functionality after first load • Automatic background updates with user notifications • Export/import JSON presentations with proper formatting • Real-time online/offline status indicators 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
212 lines
19 KiB
JSON
212 lines
19 KiB
JSON
{
|
|
"metadata": {
|
|
"id": "pres-1736722800000-slideproj",
|
|
"name": "SlideShare: Modern Presentation Platform",
|
|
"description": "Complete guide to SlideShare - a browser-based presentation authoring tool with offline capabilities",
|
|
"theme": "default",
|
|
"aspectRatio": "16:9",
|
|
"createdAt": "2025-01-12T21:00:00.000Z",
|
|
"updatedAt": "2025-01-12T21:00:00.000Z"
|
|
},
|
|
"slides": [
|
|
{
|
|
"id": "slide-0-1736722800000",
|
|
"layoutId": "title-slide",
|
|
"content": {
|
|
"title": "SlideShare: Modern Presentation Platform"
|
|
},
|
|
"notes": "Opening slide introducing SlideShare as a modern, web-based presentation platform",
|
|
"order": 0
|
|
},
|
|
{
|
|
"id": "slide-1-1736722800001",
|
|
"layoutId": "markdown-slide",
|
|
"content": {
|
|
"title": "What is SlideShare?",
|
|
"content": "## Revolutionary Presentation Tool\n\n### Key Features\n- **Browser-Based**: Works entirely in your web browser\n- **Offline-First**: No internet required after initial load\n- **Local Storage**: All data stored securely in IndexedDB\n- **Theme System**: Flexible, customizable design templates\n- **Export/Import**: JSON format for easy sharing\n- **PWA Ready**: Install as native app on any device\n\n### Built With Modern Tech\n- React 19 with TypeScript\n- Vite for fast development\n- Service Workers for offline functionality\n- IndexedDB for persistent storage"
|
|
},
|
|
"notes": "Explain core concept and key differentiators of SlideShare",
|
|
"order": 1
|
|
},
|
|
{
|
|
"id": "slide-2-1736722800002",
|
|
"layoutId": "2-content-blocks",
|
|
"content": {
|
|
"title": "Traditional vs SlideShare Approach",
|
|
"content1": "## Traditional Tools\n\n- Require software installation\n- Platform-specific applications\n- Subscription-based licensing\n- Cloud dependency for storage\n- Proprietary file formats\n- Limited customization options\n- Complex sharing workflows",
|
|
"content2": "## SlideShare Benefits\n\n- Zero installation required\n- Works on any modern browser\n- Completely free to use\n- Works offline after first load\n- Open JSON format\n- Highly customizable themes\n- Simple export and sharing"
|
|
},
|
|
"notes": "Compare traditional presentation tools with SlideShare's approach",
|
|
"order": 2
|
|
},
|
|
{
|
|
"id": "slide-3-1736722800003",
|
|
"layoutId": "diagram-slide",
|
|
"content": {
|
|
"title": "System Architecture Overview",
|
|
"diagram": "graph TB\n A[Browser] --> B[React Application]\n B --> C[Presentation Engine]\n B --> D[Theme System]\n B --> E[Storage Manager]\n \n C --> F[Slide Editor]\n C --> G[Presentation Mode]\n C --> H[Export System]\n \n D --> I[Layout Templates]\n D --> J[CSS Themes]\n D --> K[Master Slides]\n \n E --> L[IndexedDB]\n E --> M[Service Worker]\n E --> N[Cache Manager]\n \n M --> O[Offline Support]\n M --> P[PWA Features]\n M --> Q[Auto Updates]",
|
|
"content2": "Clean separation of concerns with modular architecture"
|
|
},
|
|
"notes": "Show how the system components work together",
|
|
"order": 3
|
|
},
|
|
{
|
|
"id": "slide-4-1736722800004",
|
|
"layoutId": "content-slide",
|
|
"content": {
|
|
"title": "Core Presentation Features",
|
|
"content": "## Slide Authoring\n- Visual slide editor with live preview\n- Multiple layout options per theme\n- Rich text and markdown support\n- Image upload and management\n- Code syntax highlighting\n- Mermaid diagram integration\n\n## Presentation Management\n- Create unlimited presentations\n- Organize by themes and categories\n- Full-screen presentation mode\n- Presenter notes support\n- Export to JSON format\n- Import presentations from files"
|
|
},
|
|
"notes": "Detail the main features users interact with",
|
|
"order": 4
|
|
},
|
|
{
|
|
"id": "slide-5-1736722800005",
|
|
"layoutId": "code-slide",
|
|
"content": {
|
|
"title": "Theme System Architecture",
|
|
"code": "// Theme structure example\nconst theme = {\n metadata: {\n id: \"professional\",\n name: \"Professional Theme\",\n author: \"Designer Name\"\n },\n \n layouts: [\n {\n id: \"title-slide\",\n name: \"Title Slide\",\n htmlTemplate: \"<div class='layout-title'>...</div>\",\n slots: [\n {\n id: \"title\",\n type: \"text\",\n required: true,\n placeholder: \"Presentation Title\"\n }\n ]\n }\n ],\n \n cssFile: \"style.css\",\n hasMasterSlide: true\n};",
|
|
"notes": "Themes are defined using simple JSON structure with HTML templates"
|
|
},
|
|
"notes": "Show how themes are structured programmatically",
|
|
"order": 5
|
|
},
|
|
{
|
|
"id": "slide-6-1736722800006",
|
|
"layoutId": "diagram-slide",
|
|
"content": {
|
|
"title": "User Workflow Process",
|
|
"diagram": "sequenceDiagram\n participant U as User\n participant A as SlideShare App\n participant T as Theme Engine\n participant S as Storage\n participant SW as Service Worker\n \n U->>A: Create New Presentation\n A->>T: Load Available Themes\n T->>A: Return Theme Options\n A->>U: Show Theme Selection\n \n U->>A: Select Theme & Create\n A->>S: Save Presentation Metadata\n S->>A: Confirm Saved\n \n U->>A: Add New Slide\n A->>T: Get Layout Templates\n T->>A: Return Layout Options\n A->>U: Show Layout Selection\n \n U->>A: Edit Slide Content\n A->>S: Auto-save Changes\n SW->>S: Cache Updates\n \n U->>A: Present Slides\n A->>U: Full-screen Mode",
|
|
"content2": "Seamless workflow from creation to presentation"
|
|
},
|
|
"notes": "Demonstrate the typical user interaction flow",
|
|
"order": 6
|
|
},
|
|
{
|
|
"id": "slide-7-1736722800007",
|
|
"layoutId": "markdown-slide",
|
|
"content": {
|
|
"title": "Available Layout Types",
|
|
"content": "## Layout Templates\n\n### **Title Slide**\n- Main presentation opener\n- Single title field\n- Theme-specific styling\n\n### **Content Slide**\n- Standard slide with title and content\n- Supports markdown formatting\n- Most commonly used layout\n\n### **2-Content Blocks**\n- Side-by-side content comparison\n- Great for before/after scenarios\n- Equal width content areas\n\n### **Image Slide**\n- Display images with captions\n- Automatic image optimization\n- Alt text support for accessibility\n\n### **Code Slide**\n- Syntax-highlighted code blocks\n- Multiple programming languages\n- Optional explanation notes\n\n### **Markdown Slide**\n- Full markdown support\n- Tables, lists, formatting\n- Live preview rendering\n\n### **Diagram Slide**\n- Mermaid diagram integration\n- Flowcharts, sequences, graphs\n- Interactive diagram rendering"
|
|
},
|
|
"notes": "Overview of all available layout templates",
|
|
"order": 7
|
|
},
|
|
{
|
|
"id": "slide-8-1736722800008",
|
|
"layoutId": "image-slide",
|
|
"content": {
|
|
"title": "Visual Slide Editor Interface",
|
|
"image": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='450' viewBox='0 0 800 450'%3E%3Cdefs%3E%3Cpattern id='grid' width='20' height='20' patternUnits='userSpaceOnUse'%3E%3Cpath d='M 20 0 L 0 0 0 20' fill='none' stroke='%23e2e8f0' stroke-width='1'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='%23f8fafc'/%3E%3Crect width='100%25' height='100%25' fill='url(%23grid)'/%3E%3Crect x='50' y='50' width='300' height='200' fill='%23fff' stroke='%234f46e5' stroke-width='2' rx='8'/%3E%3Ctext x='200' y='140' text-anchor='middle' font-family='system-ui' font-size='16' font-weight='600' fill='%234f46e5'%3ESlide Editor%3C/text%3E%3Ctext x='200' y='160' text-anchor='middle' font-family='system-ui' font-size='12' fill='%236b7280'%3ELive Preview%3C/text%3E%3Crect x='400' y='50' width='300' height='200' fill='%23fff' stroke='%2310b981' stroke-width='2' rx='8'/%3E%3Ctext x='550' y='140' text-anchor='middle' font-family='system-ui' font-size='16' font-weight='600' fill='%2310b981'%3EContent Editor%3C/text%3E%3Ctext x='550' y='160' text-anchor='middle' font-family='system-ui' font-size='12' fill='%236b7280'%3EReal-time Editing%3C/text%3E%3Crect x='50' y='280' width='650' height='120' fill='%23fff' stroke='%23f59e0b' stroke-width='2' rx='8'/%3E%3Ctext x='375' y='330' text-anchor='middle' font-family='system-ui' font-size='16' font-weight='600' fill='%23f59e0b'%3ELayout Selection%3C/text%3E%3Ctext x='375' y='350' text-anchor='middle' font-family='system-ui' font-size='12' fill='%236b7280'%3EChoose from 7 different layout types%3C/text%3E%3C/svg%3E",
|
|
"image-alt": "Visual representation of SlideShare's editor interface showing live preview, content editor, and layout selection areas"
|
|
},
|
|
"notes": "Show the main editing interface components",
|
|
"order": 8
|
|
},
|
|
{
|
|
"id": "slide-9-1736722800009",
|
|
"layoutId": "diagram-slide",
|
|
"content": {
|
|
"title": "Data Flow Architecture",
|
|
"diagram": "flowchart LR\n A[User Input] --> B{Content Type?}\n \n B -->|Text| C[Markdown Processor]\n B -->|Image| D[Image Handler]\n B -->|Code| E[Syntax Highlighter]\n B -->|Diagram| F[Mermaid Renderer]\n \n C --> G[HTML Sanitizer]\n D --> G\n E --> G\n F --> G\n \n G --> H[Template Engine]\n H --> I[Theme CSS]\n \n H --> J[Live Preview]\n I --> J\n \n J --> K[User Feedback]\n K --> A\n \n H --> L[Storage Manager]\n L --> M[(IndexedDB)]\n \n M --> N[Service Worker]\n N --> O[Offline Cache]",
|
|
"content2": "Data flows through processing pipeline to ensure security and consistency"
|
|
},
|
|
"notes": "Explain how user input is processed and stored",
|
|
"order": 9
|
|
},
|
|
{
|
|
"id": "slide-10-1736722800010",
|
|
"layoutId": "content-slide",
|
|
"content": {
|
|
"title": "Progressive Web App Features",
|
|
"content": "## Installation & Offline Support\n- Install as native app on any platform\n- Works completely offline after first load\n- Service worker handles caching automatically\n- Background sync for data consistency\n- Push notification support ready\n\n## Performance Optimizations\n- Lazy loading of theme resources\n- Efficient IndexedDB storage\n- Optimistic UI updates\n- Minimal bundle size with tree shaking\n- Fast startup with code splitting\n\n## Cross-Platform Compatibility\n- Responsive design for all screen sizes\n- Touch-friendly interface for mobile\n- Keyboard shortcuts for power users\n- Accessible markup and navigation\n- Dark mode theme support"
|
|
},
|
|
"notes": "Highlight PWA capabilities and performance features",
|
|
"order": 10
|
|
},
|
|
{
|
|
"id": "slide-11-1736722800011",
|
|
"layoutId": "diagram-slide",
|
|
"content": {
|
|
"title": "Storage and Caching Strategy",
|
|
"diagram": "graph TD\n A[User Data] --> B[IndexedDB]\n C[Static Assets] --> D[Service Worker Cache]\n E[Theme Files] --> D\n F[App Shell] --> D\n \n B --> G[Presentations]\n B --> H[User Settings]\n B --> I[Draft Content]\n \n D --> J[HTML/CSS/JS]\n D --> K[Theme Resources]\n D --> L[Layout Templates]\n \n G --> M[Export/Import]\n H --> N[Personalization]\n I --> O[Auto Recovery]\n \n J --> P[Offline Access]\n K --> P\n L --> P\n \n P --> Q[Full Functionality]\n M --> Q\n N --> Q\n O --> Q\n \n style B fill:#e1f5fe\n style D fill:#f3e5f5\n style Q fill:#e8f5e8",
|
|
"content2": "Multi-layer caching ensures complete offline functionality"
|
|
},
|
|
"notes": "Show how different types of data are stored and cached",
|
|
"order": 11
|
|
},
|
|
{
|
|
"id": "slide-12-1736722800012",
|
|
"layoutId": "code-slide",
|
|
"content": {
|
|
"title": "Creating Custom Themes",
|
|
"code": "<!-- Custom layout template -->\n<div class=\"slide layout-custom-intro\">\n <h1 class=\"slot title-slot\" \n data-slot=\"title\" \n data-placeholder=\"Slide Title\" \n data-required>\n {{title}}\n </h1>\n \n <div class=\"slot content-area\" \n data-slot=\"subtitle\" \n data-placeholder=\"Subtitle text...\">\n {{subtitle}}\n </div>\n \n <div class=\"slot image-container\" \n data-slot=\"background\" \n data-accept=\"image/*\">\n {{#background}}\n <img src=\"{{background}}\" alt=\"{{backgroundAlt}}\" />\n {{/background}}\n </div>\n</div>\n\n/* Custom CSS styling */\n.layout-custom-intro {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n text-align: center;\n justify-content: center;\n}",
|
|
"notes": "Themes use simple HTML templates with CSS styling - no JavaScript required"
|
|
},
|
|
"notes": "Show how easy it is to create custom layouts",
|
|
"order": 12
|
|
},
|
|
{
|
|
"id": "slide-13-1736722800013",
|
|
"layoutId": "2-content-blocks",
|
|
"content": {
|
|
"title": "Target Users and Use Cases",
|
|
"content1": "## Individual Users\n\n- **Students**: Create academic presentations\n- **Professionals**: Business presentations offline\n- **Educators**: Teaching materials and lectures\n- **Consultants**: Client presentations on-site\n- **Speakers**: Conference and workshop content\n- **Content Creators**: Portfolio and showcase slides",
|
|
"content2": "## Organizations\n\n- **Small Teams**: Collaborative presentation creation\n- **Remote Companies**: Offline-first workflow\n- **Educational Institutions**: Classroom integration\n- **Consulting Firms**: Client-ready presentations\n- **Startups**: Cost-effective presentation solution\n- **Non-Profits**: Resource-efficient communications"
|
|
},
|
|
"notes": "Identify key user segments and their specific needs",
|
|
"order": 13
|
|
},
|
|
{
|
|
"id": "slide-14-1736722800014",
|
|
"layoutId": "markdown-slide",
|
|
"content": {
|
|
"title": "Getting Started Guide",
|
|
"content": "## Quick Start Steps\n\n### 1. **Access SlideShare**\n- Open in any modern web browser\n- No installation or registration required\n- Works on desktop, tablet, and mobile\n\n### 2. **Create Your First Presentation**\n- Click \"Create New Presentation\"\n- Choose from available themes\n- Select aspect ratio (16:9, 4:3, 16:10)\n- Add title and description\n\n### 3. **Add and Edit Slides**\n- Select layout template for each slide\n- Fill in content using live editor\n- Preview changes in real-time\n- Use markdown for rich formatting\n\n### 4. **Present and Share**\n- Enter full-screen presentation mode\n- Navigate with keyboard or touch\n- Export as JSON for sharing\n- Import others' presentations\n\n### 5. **Install as App** (Optional)\n- Click install prompt when available\n- Access from home screen like native app\n- Enjoy full offline functionality"
|
|
},
|
|
"notes": "Step-by-step guide for new users",
|
|
"order": 14
|
|
},
|
|
{
|
|
"id": "slide-15-1736722800015",
|
|
"layoutId": "diagram-slide",
|
|
"content": {
|
|
"title": "Development Roadmap",
|
|
"diagram": "gantt\n title SlideShare Development Timeline\n dateFormat YYYY-MM-DD\n section Phase 1 - Core\n Theme System :done, des1, 2024-06-01, 2024-08-15\n Basic Editor :done, des2, 2024-07-01, 2024-09-01\n Presentation Mode :done, des3, 2024-08-15, 2024-10-01\n \n section Phase 2 - Enhancement\n PWA Features :done, des4, 2024-09-01, 2024-10-15\n Import/Export :done, des5, 2024-10-01, 2024-11-01\n Advanced Layouts :active, des6, 2024-10-15, 2024-12-01\n \n section Phase 3 - Polish\n Theme Marketplace : des7, 2024-12-01, 2025-02-01\n Collaboration Tools : des8, 2025-01-01, 2025-03-01\n Mobile App : des9, 2025-02-01, 2025-04-01\n \n section Phase 4 - Advanced\n Plugin System : des10, 2025-03-01, 2025-05-01\n Real-time Sync : des11, 2025-04-01, 2025-06-01\n Analytics Dashboard : des12, 2025-05-01, 2025-07-01",
|
|
"content2": "Strategic development phases from MVP to advanced features"
|
|
},
|
|
"notes": "Show project timeline and future development plans",
|
|
"order": 15
|
|
},
|
|
{
|
|
"id": "slide-16-1736722800016",
|
|
"layoutId": "content-slide",
|
|
"content": {
|
|
"title": "Technical Implementation Benefits",
|
|
"content": "## Development Advantages\n- Modern React 19 architecture with TypeScript\n- Vite build system for fast development cycles\n- Component-based design for maintainability\n- Comprehensive error handling and validation\n- Automated testing and quality assurance\n- Clean separation of concerns\n\n## Security and Privacy\n- All data stays on user's device\n- No tracking or analytics collection\n- DOMPurify sanitization for XSS protection\n- Content Security Policy implementation\n- Secure service worker implementation\n- Regular security audit practices\n\n## Performance Optimizations\n- Lazy loading and code splitting\n- Efficient caching strategies\n- Minimal runtime dependencies\n- Tree shaking for smaller bundles\n- Progressive enhancement approach"
|
|
},
|
|
"notes": "Highlight technical quality and security aspects",
|
|
"order": 16
|
|
},
|
|
{
|
|
"id": "slide-17-1736722800017",
|
|
"layoutId": "markdown-slide",
|
|
"content": {
|
|
"title": "Why Choose SlideShare?",
|
|
"content": "## **Privacy First**\n- Your data never leaves your device\n- No cloud storage dependencies\n- No user tracking or analytics\n- Complete control over your content\n\n## **Cost Effective**\n- Completely free to use\n- No subscription fees\n- No premium features behind paywall\n- Open source and transparent\n\n## **Reliable Performance**\n- Works offline after initial load\n- No internet connectivity required\n- Fast loading and responsive interface\n- Cross-platform compatibility\n\n## **Future Proof**\n- Modern web standards implementation\n- Regular updates and improvements\n- Active development and support\n- Extensible architecture for growth\n\n## **User Friendly**\n- Intuitive interface design\n- Live preview functionality\n- Familiar editing experience\n- Comprehensive documentation"
|
|
},
|
|
"notes": "Summarize key value propositions",
|
|
"order": 17
|
|
},
|
|
{
|
|
"id": "slide-18-1736722800018",
|
|
"layoutId": "content-slide",
|
|
"content": {
|
|
"title": "Ready to Get Started?",
|
|
"content": "## Next Steps\n\n**Try SlideShare Today**\n- Visit the application in your browser\n- Create your first presentation\n- Explore different themes and layouts\n- Experience offline functionality\n- Install as PWA for native app experience\n\n**Join the Community**\n- Share feedback and suggestions\n- Contribute to theme development\n- Report issues and bugs\n- Help improve documentation\n- Spread the word about SlideShare\n\n**Perfect for:**\n- Students and educators\n- Business professionals\n- Content creators\n- Remote workers\n- Anyone who values privacy and offline access"
|
|
},
|
|
"notes": "Call to action and community engagement",
|
|
"order": 18
|
|
}
|
|
]
|
|
} |