{"id":30770448,"url":"https://github.com/octavadi/interactive-story-project","last_synced_at":"2026-04-16T19:39:55.044Z","repository":{"id":311851990,"uuid":"1045318489","full_name":"octavadi/interactive-story-project","owner":"octavadi","description":"🔧 Modular Interactive Story Template | n8n Chatbot Integration | Web Components Architecture | Cross-browser Compatible | Perfect for creating engaging story experiences with AI narrator support","archived":false,"fork":false,"pushed_at":"2025-08-27T08:16:48.000Z","size":19953,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-27T10:16:57.783Z","etag":null,"topics":["ai-narrator","chatbot","cross-browser","css3","html5","interactive-fiction","interactive-story","javascript","modular-architecture","n8n-integration","responsive-design","story-template","storytelling","template-system","web-components"],"latest_commit_sha":null,"homepage":"https://your-username.github.io/interactive-story-project","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/octavadi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-08-27T01:29:52.000Z","updated_at":"2025-08-27T08:16:51.000Z","dependencies_parsed_at":"2025-08-27T10:17:12.771Z","dependency_job_id":"9ddff71e-9f57-4464-a584-6f6da1db98f8","html_url":"https://github.com/octavadi/interactive-story-project","commit_stats":null,"previous_names":["octavadi/interactive-story-project"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/octavadi/interactive-story-project","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/octavadi%2Finteractive-story-project","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/octavadi%2Finteractive-story-project/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/octavadi%2Finteractive-story-project/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/octavadi%2Finteractive-story-project/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/octavadi","download_url":"https://codeload.github.com/octavadi/interactive-story-project/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/octavadi%2Finteractive-story-project/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273685604,"owners_count":25149722,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-04T02:00:08.968Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai-narrator","chatbot","cross-browser","css3","html5","interactive-fiction","interactive-story","javascript","modular-architecture","n8n-integration","responsive-design","story-template","storytelling","template-system","web-components"],"created_at":"2025-09-04T23:05:25.350Z","updated_at":"2026-04-16T19:39:49.989Z","avatar_url":"https://github.com/octavadi.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 📖 Interactive Story Project\n\n[![GitHub](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)\n[![HTML5](https://img.shields.io/badge/HTML5-E34F26?logo=html5\u0026logoColor=white)](#)\n[![CSS3](https://img.shields.io/badge/CSS3-1572B6?logo=css3\u0026logoColor=white)](#)\n[![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?logo=javascript\u0026logoColor=black)](#)\n\nTemplate sistem untuk membuat interactive story dengan integrasi chatbot n8n. Proyek ini menggunakan arsitektur modular dengan chatbot template yang dapat digunakan ulang di berbagai proyek story.\n\n## ✨ Demo\n\n![Interactive Story Demo](assets/images/posterStory_gemini2.5.png)\n\n## 🚀 Features\n\n### 📖 Story Features\n- ✅ Interactive story content dengan pilihan cerita\n- ✅ Editable text (double-click to edit)  \n- ✅ Image upload untuk scenes\n- ✅ Responsive design untuk semua device\n- ✅ Navigation system yang intuitif\n- ✅ Chat history dan save progress\n\n### 🤖 Chatbot Features\n- ✅ n8n workflow integration\n- ✅ Real-time chat dengan typing indicators\n- ✅ Configurable bot personality\n- ✅ Multiple persona templates\n- ✅ Message history dan context awareness\n- ✅ Error handling \u0026 retry mechanism\n- ✅ Webhook security protection\n\n### 🔧 Technical Features\n- ✅ Cross-browser compatibility (Chrome, Safari, Edge, Firefox)\n- ✅ Mobile-first responsive design\n- ✅ Web Components architecture\n- ✅ Modular template system\n- ✅ Comprehensive debugging tools\n- ✅ Performance optimized\n- ✅ PWA ready\n\n## 🏗️ Project Structure\n\n```\ninteractiveStory_proj/\n├── 📄 index.html                    # Main story page\n├── 📄 discussion.html               # Discussion page\n├── 🎨 styles/                       # Styling files\n│   ├── main.css                     # Core styles\n│   ├── index.css                    # Homepage styles\n│   ├── discussion.css               # Discussion page styles\n│   └── browser-compatibility.css    # Cross-browser support\n├── ⚡ js/                           # JavaScript files\n│   ├── main.js                      # Main story logic\n│   ├── browser-polyfills.js         # Browser compatibility\n│   ├── error-handler.js             # Error management\n│   ├── performance-utils.js         # Performance utilities\n│   └── chat-history-manager.js      # Chat history functionality\n├── 🤖 chatbot-template/             # Reusable chatbot system\n│   ├── components/                  # Chat UI components\n│   ├── js/                          # Core chatbot logic\n│   ├── styles/                      # Chatbot styling\n│   ├── tools/                       # Debugging tools\n│   ├── examples/                    # Configuration examples\n│   └── docs/                        # Template documentation\n├── 🧪 testing/                      # Test files\n│   ├── test-chat-history.html\n│   ├── test-discussion.html\n│   ├── browser-test.html\n│   └── test-markdown-cleanup.html\n├── 🧩 components/                   # Shared components\n│   └── shared-footer.js\n├── 🖼️ assets/                       # Static assets\n│   ├── images/                      # Story images\n│   └── icons/                       # UI icons\n└── 🛠️ scripts/                      # Utility scripts\n    ├── cleanup-old-files.sh\n    └── setup-new-project.sh\n```\n\n## 🚀 Quick Start\n\n### 📋 Prerequisites\n- Web browser yang modern (Chrome 60+, Safari 12+, Edge 79+, Firefox 65+)\n- Local web server (optional, untuk development)\n- n8n instance untuk chatbot integration\n\n### 🎯 Running Locally\n\n1. **Clone repository**\n```bash\ngit clone https://github.com/yourusername/interactive-story-project.git\ncd interactive-story-project\n```\n\n2. **Open in browser**\n```bash\n# Langsung buka file\nopen index.html\n\n# Atau gunakan local server (recommended)\npython -m http.server 8000\n# Then visit http://localhost:8000\n```\n\n3. **Configure chatbot** (optional)\n```bash\n# Buka bot configuration\nopen chatbot-template/botSetting.html\n```\n\n### ⚙️ Configuration\n\n#### 🤖 Bot Setup\n1. **Setup n8n workflow**: Import `chatbot-template/examples/n8n-chatbot-workflow.json`\n2. **Configure bot settings**: Buka `chatbot-template/botSetting.html`\n3. **Set webhook URL**: Update endpoint di konfigurasi bot\n4. **Choose persona**: Pilih dari predefined templates\n5. **Test connection**: Gunakan diagnostic tools\n\n#### 🎨 Customization\n```javascript\n// Configure story-specific bot\nconst storyConfig = {\n    botName: \"Story Narrator\",\n    botDescription: \"Your guide through this adventure\",\n    botAvatar: \"📚\",\n    webhookUrl: \"YOUR_WEBHOOK_URL_HERE\", // Jangan commit URL asli!\n    theme: {\n        primaryColor: \"#3b82f6\",\n        secondaryColor: \"#60a5fa\"\n    }\n};\n\nwindow.ConfigManager.saveConfig(storyConfig);\n```\n\n## 🛠️ Development\n\n### 🆕 Creating New Story Project\n```bash\n# Gunakan setup script\n./scripts/setup-new-project.sh my-new-story\n\n# Atau manual copy template\ncp -r chatbot-template/ /path/to/new-project/\n```\n\n### 🧪 Testing\n```bash\n# Browser compatibility test\nopen testing/browser-test.html\n\n# Chat history test\nopen testing/test-chat-history.html\n\n# Webhook connection test\nopen chatbot-template/tools/test-webhook-connection.html\n\n# n8n diagnostic\nopen chatbot-template/tools/n8n-diagnostic.html\n```\n\n### 📱 Browser Support\n\n| Browser | Version | Status |\n|---------|---------|--------|\n| **Chrome** | 60+ | 🟢 Full Support |\n| **Safari** | 12+ | 🟢 Full Support |\n| **Edge** | 79+ | 🟢 Full Support |\n| **Firefox** | 65+ | 🟢 Full Support |\n\n## 🔒 Security\n\n\u003e **⚠️ Important**: Jangan commit webhook URLs atau API keys ke repository!\n\n- Gunakan environment variables untuk sensitive data\n- Webhook URLs dan secrets sudah di-exclude dalam `.gitignore`\n- Test konfigurasi menggunakan file local yang tidak di-track git\n\n## 📚 Documentation\n\n- **[Chatbot Template Guide](chatbot-template/README.md)**: Dokumentasi lengkap template\n- **[Browser Compatibility](BROWSER_COMPATIBILITY.md)**: Cross-browser support guide\n- **[Template Usage](TEMPLATE_USAGE.md)**: Cara menggunakan template system\n\n## 🤝 Contributing\n\n1. Fork repository ini\n2. Create feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit changes (`git commit -m 'Add some amazing feature'`)\n4. Push to branch (`git push origin feature/amazing-feature`)\n5. Open Pull Request\n\n## 🐛 Troubleshooting\n\n### Common Issues\n- **Webhook 404**: Pastikan n8n workflow sudah aktif\n- **Config Not Saving**: Cek localStorage availability di browser\n- **Components Not Loading**: Periksa script loading order\n- **CORS Errors**: Configure n8n CORS settings\n\n### Debug Tools\n- Gunakan `testing/browser-test.html` untuk compatibility testing\n- Check `chatbot-template/tools/` untuk debugging utilities\n- Buka browser console untuk error messages\n- Test webhook connectivity dengan diagnostic tools\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 🙏 Acknowledgments\n\n- Built with modern web standards\n- Powered by n8n for chatbot integration\n- Icons and images generated with AI assistance\n- Cross-browser compatibility tested extensively\n\n## 🎉 Next Steps\n\n1. **📖 Explore Documentation**: Familiarize dengan template system\n2. **🧪 Test Integration**: Gunakan diagnostic tools\n3. **🎨 Customize**: Apply story theme dan branding\n4. **🚀 Create New Stories**: Use setup script untuk new projects\n5. **🤝 Contribute**: Share improvements back ke community\n\n---\n\n**🚀 Happy storytelling! Mari buat interactive stories yang amazing! 🚀**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foctavadi%2Finteractive-story-project","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foctavadi%2Finteractive-story-project","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foctavadi%2Finteractive-story-project/lists"}