slideshare/onlinePresentation.json

{
  "metadata": {
    "id": "pres-1736712000000-slideshare",
    "name": "SlideShare: Modern Web-Based Presentation Tool",
    "description": "An overview of the SlideShare presentation authoring and delivery platform",
    "theme": "default",
    "aspectRatio": "16:9",
    "createdAt": "2025-01-12T18:00:00.000Z",
    "updatedAt": "2025-01-12T18:00:00.000Z"
  },
  "slides": [
    {
      "id": "slide-0-1736712000000",
      "layoutId": "title-slide",
      "content": {
        "title": "SlideShare: Modern Presentation Authoring"
      },
      "order": 0
    },
    {
      "id": "slide-1-1736712000001",
      "layoutId": "content-slide",
      "content": {
        "title": "What is SlideShare?",
        "content": "A powerful, browser-based presentation tool that works entirely offline.\n\n• No backend server required\n• All data stored locally in IndexedDB\n• Built with React and modern web technologies\n• Theme-based design system\n• Export and share presentations as JSON"
      },
      "notes": "Emphasize the offline-first approach and zero server dependency",
      "order": 1
    },
    {
      "id": "slide-2-1736712000002",
      "layoutId": "markdown-slide",
      "content": {
        "title": "Key Features",
        "content": "## Core Capabilities\n\n### 📝 **Intuitive Slide Authoring**\n- Visual slide editor with live preview\n- Multiple layout options per theme\n- Drag-and-drop content placement\n- Rich text and markdown support\n\n### 🎨 **Flexible Theming System**\n- Pre-built professional themes\n- Customizable layouts with HTML/CSS\n- Consistent design across presentations\n- Theme switching without content loss\n\n### 💾 **Local-First Architecture**\n- Works completely offline\n- IndexedDB for persistent storage\n- Export/import JSON presentations\n- No cloud dependency or subscription"
      },
      "order": 2
    },
    {
      "id": "slide-3-1736712000003",
      "layoutId": "2-content-blocks",
      "content": {
        "title": "Traditional vs SlideShare",
        "content1": "**Traditional Tools:**\n\n• Require installation\n• Platform-specific\n• Subscription-based\n• Cloud dependency\n• Limited customization\n• Proprietary formats",
        "content2": "**SlideShare:**\n\n• Runs in any browser\n• Cross-platform\n• Free and open\n• Works offline\n• Fully customizable\n• Open JSON format"
      },
      "notes": "Highlight the advantages of web-based, local-first approach",
      "order": 3
    },
    {
      "id": "slide-4-1736712000004",
      "layoutId": "diagram-slide",
      "content": {
        "title": "Architecture Overview",
        "diagram": "graph TD\n    A[Browser] --> B[React Application]\n    B --> C[Presentation Editor]\n    B --> D[Theme Engine]\n    B --> E[Storage Layer]\n    C --> F[Slide Components]\n    D --> G[Layout Templates]\n    D --> H[CSS Styles]\n    E --> I[IndexedDB]\n    E --> J[JSON Export/Import]",
        "content2": "Clean separation of concerns with modular architecture",
        "notes": "The architecture emphasizes modularity and browser-native technologies"
      },
      "order": 4
    },
    {
      "id": "slide-5-1736712000005",
      "layoutId": "markdown-slide",
      "content": {
        "title": "Theme System Design",
        "content": "## Powerful & Flexible\n\n### **Layout Templates**\n- Simple HTML with Handlebars syntax\n- Semantic slot-based content areas\n- Multiple layouts per theme\n\n### **Styling with CSS**\n- CSS custom properties for theming\n- Responsive design built-in\n- Print-friendly styles included\n\n### **Content Slots**\n```html\n<div class=\"slot\" \n     data-slot=\"title\" \n     data-placeholder=\"Enter title\">\n  {{title}}\n</div>\n```\n\n> Designers can create themes using only HTML and CSS - no JavaScript required!"
      },
      "order": 5
    },
    {
      "id": "slide-6-1736712000006",
      "layoutId": "code-slide",
      "content": {
        "title": "Simple Theme Creation",
        "code": "<!-- layout-quote.html -->\n<div class=\"slide layout-quote\">\n  <blockquote class=\"slot quote-text\" \n              data-slot=\"quote\"\n              data-placeholder=\"Enter quote...\">\n    {{quote}}\n  </blockquote>\n  \n  <cite class=\"slot author-text\"\n        data-slot=\"author\"\n        data-placeholder=\"Author name\">\n    — {{author}}\n  </cite>\n</div>\n\n/* style.css */\n.layout-quote {\n  justify-content: center;\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n}\n\n.layout-quote blockquote {\n  font-size: 2.5rem;\n  font-style: italic;\n  color: white;\n}",
        "notes": "Creating a new layout is as simple as HTML and CSS"
      },
      "order": 6
    },
    {
      "id": "slide-7-1736712000007",
      "layoutId": "markdown-slide",
      "content": {
        "title": "Why It's Valuable",
        "content": "## 🚀 **For Individuals**\n- **Zero Cost**: No subscriptions or licenses\n- **Privacy First**: Your data stays on your device\n- **Work Anywhere**: No internet required after initial load\n- **Full Control**: Export and own your content\n\n## 🏢 **For Organizations**\n- **Self-Hosted**: Deploy on internal networks\n- **Customizable**: Brand-aligned themes\n- **Secure**: No data leaves the organization\n- **Standardized**: Consistent presentation format\n\n## 👩‍💻 **For Developers**\n- **Open Source**: Extend and customize freely\n- **Modern Stack**: React, TypeScript, Vite\n- **Clean Architecture**: Easy to understand and modify\n- **Theme API**: Create custom themes with HTML/CSS"
      },
      "order": 7
    },
    {
      "id": "slide-8-1736712000008",
      "layoutId": "content-slide",
      "content": {
        "title": "Technical Excellence",
        "content": "Built with modern best practices:\n\n• React 19 with latest patterns\n• TypeScript for type safety\n• Vite for fast development\n• IndexedDB for robust storage\n• Semantic HTML for accessibility\n• CSS custom properties for theming\n• Responsive design principles\n• Clean, maintainable codebase"
      },
      "notes": "Emphasize the modern, professional development approach",
      "order": 8
    },
    {
      "id": "slide-9-1736712000009",
      "layoutId": "markdown-slide",
      "content": {
        "title": "Content Types Supported",
        "content": "## Rich Content Options\n\n### 📝 **Text & Typography**\n- Plain text with formatting\n- Markdown with full syntax support\n- Custom fonts per theme\n\n### 🖼️ **Visual Elements**\n- Images with drag-and-drop upload\n- Mermaid diagrams for flowcharts\n- Code blocks with syntax highlighting\n\n### 🎯 **Layout Varieties**\n- Title slides\n- Content slides\n- Two-column layouts\n- Image showcases\n- Code demonstrations\n- Diagram presentations\n- Markdown-rich content"
      },
      "order": 9
    },
    {
      "id": "slide-10-1736712000010",
      "layoutId": "2-content-blocks",
      "content": {
        "title": "Export & Sharing",
        "content1": "**Export Options:**\n\n• JSON format for data portability\n• URL-encoded filenames\n• Complete presentation structure\n• Theme information included\n• Easy backup and restore",
        "content2": "**Sharing Features:**\n\n• Send JSON files directly\n• Import into any instance\n• Version control friendly\n• Collaborative workflows\n• Future: PDF export planned"
      },
      "order": 10
    },
    {
      "id": "slide-11-1736712000011",
      "layoutId": "diagram-slide",
      "content": {
        "title": "Development Workflow",
        "diagram": "graph LR\n    A[Create Theme] --> B[Design Layouts]\n    B --> C[Author Content]\n    C --> D[Preview Live]\n    D --> E{Happy?}\n    E -->|No| C\n    E -->|Yes| F[Present]\n    F --> G[Export/Share]\n    \n    style A fill:#667eea\n    style F fill:#764ba2\n    style G fill:#f093fb",
        "content2": "Streamlined workflow from creation to presentation",
        "notes": "The workflow is designed to be intuitive and efficient"
      },
      "order": 11
    },
    {
      "id": "slide-12-1736712000012",
      "layoutId": "content-slide",
      "content": {
        "title": "Future Roadmap",
        "content": "Planned enhancements:\n\n• Additional built-in themes\n• Theme marketplace/gallery\n• PDF export functionality\n• Presenter mode with notes view\n• Animation and transitions\n• Real-time collaboration\n• Plugin system for extensions\n• Mobile app for presenting"
      },
      "notes": "The project has an ambitious roadmap while maintaining simplicity",
      "order": 12
    },
    {
      "id": "slide-13-1736712000013",
      "layoutId": "markdown-slide",
      "content": {
        "title": "Get Started Today",
        "content": "## 🎯 **Quick Start**\n\n### **For Users:**\n1. Open SlideShare in your browser\n2. Create a new presentation\n3. Choose a theme\n4. Add slides and content\n5. Present or export\n\n### **For Developers:**\n```bash\n# Clone the repository\ngit clone [repo-url]\n\n# Install dependencies\nnpm install\n\n# Start development\nnpm run dev\n```\n\n### **For Designers:**\n- Create custom themes with HTML/CSS\n- No programming knowledge required\n- Use the built-in theme as a template"
      },
      "order": 13
    },
    {
      "id": "slide-14-1736712000014",
      "layoutId": "content-slide",
      "content": {
        "title": "Summary",
        "content": "SlideShare revolutionizes presentations:\n\n✅ Works entirely offline\n✅ No server or subscription required\n✅ Professional themes and layouts\n✅ Export and own your data\n✅ Open source and extensible\n✅ Modern web technologies\n✅ Privacy-focused design\n\nThe future of presentations is local-first, open, and free."
      },
      "notes": "Reinforce the key value propositions",
      "order": 14
    }
  ]
}