Joakim
1a0a6b3254
🛠️ Development Infrastructure: - package.json with npm scripts for development - live-server for hot reload during development - Custom dev helper script with project validation - Comprehensive .gitignore for Node.js and Go 📖 Documentation: - Updated README.md with project overview and quick start - DEVELOPMENT.md with detailed development guide - Demo instructions and testing scenarios 🚀 Available Commands: - npm run dev (start development server) - npm run dev:check (validate project setup) - npm run dev:demo (show testing instructions) - npm run dev:help (list all commands) ✨ Features: - Live reload on file changes - Project health checking - 18 editable elements detected - 14.3KB core library size Next: Ready for active development and testing!
120 lines
3.3 KiB
Markdown
120 lines
3.3 KiB
Markdown
# Insertr
|
|
|
|
> **Edit-in-place CMS for client websites** - Simple integration with class-based content editing
|
|
|
|
Insertr allows developers to make any website content editable by simply adding a CSS class. Clients can then log in and edit content directly on their website without needing to learn a complex admin interface.
|
|
|
|
## ✨ The Vision
|
|
|
|
```html
|
|
<!-- Developer adds this once -->
|
|
<script src="https://insertr.example.com/insertr.js"></script>
|
|
|
|
<!-- Then marks content as editable -->
|
|
<div class="insertr" data-content-id="hero">
|
|
<h1>Your Editable Content</h1>
|
|
</div>
|
|
```
|
|
|
|
**That's it!** Your clients can now edit this content inline.
|
|
|
|
## 🎯 Three User Types
|
|
|
|
### 1. **The Customer** (End User)
|
|
- Sees a clean, professional website
|
|
- No editing interface visible
|
|
- Fast loading with minimal overhead
|
|
|
|
### 2. **The Client** (Content Manager)
|
|
- Logs in to see the same website with subtle edit buttons
|
|
- Clicks edit buttons to modify content inline
|
|
- Can edit both simple text and rich markdown content
|
|
- Changes are saved immediately
|
|
|
|
### 3. **The Developer** (You)
|
|
- Simple integration: just add `class="insertr"`
|
|
- No complex setup or framework dependencies
|
|
- Works with any existing website
|
|
|
|
## 🚀 Current Status
|
|
|
|
**✅ Frontend Prototype Complete**
|
|
- Working edit-in-place functionality
|
|
- Mock authentication system
|
|
- Local persistence
|
|
- Multi-page support
|
|
- Responsive design
|
|
|
|
**🔄 In Development**
|
|
- Go backend with REST API
|
|
- Authentik OAuth integration
|
|
- File-based content storage
|
|
- Git version control
|
|
|
|
## 🛠️ Quick Start
|
|
|
|
1. **Clone and install**:
|
|
```bash
|
|
git clone <repository-url>
|
|
cd insertr
|
|
npm install
|
|
```
|
|
|
|
2. **Start development server**:
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
3. **Open http://localhost:3000** and test the demo!
|
|
|
|
## 📖 Documentation
|
|
|
|
- **[Development Guide](DEVELOPMENT.md)** - Setup, workflow, and contribution guide
|
|
- **[Demo Instructions](demo-site/README.md)** - How to test the prototype
|
|
- **[Project Planning](INITIAL.md)** - Requirements, research, and roadmap
|
|
|
|
## 🏗️ Architecture
|
|
|
|
### Current (Phase 1)
|
|
- **Frontend**: Vanilla JavaScript + Alpine.js
|
|
- **Storage**: localStorage (for prototype)
|
|
- **Authentication**: Mock system
|
|
- **Deployment**: Static files
|
|
|
|
### Planned (Phase 2)
|
|
- **Backend**: Go HTTP server
|
|
- **Storage**: File-based with Git versioning
|
|
- **Authentication**: Authentik OAuth 2.0
|
|
- **Deployment**: Single binary + static files
|
|
|
|
### Future (Phase 3)
|
|
- **Multi-tenant**: Host multiple client sites
|
|
- **Admin Dashboard**: Advanced content management
|
|
- **CDN Integration**: Global content delivery
|
|
- **Plugin System**: Extensible functionality
|
|
|
|
## 🎬 Demo Features
|
|
|
|
**Try the prototype to see:**
|
|
- ✏️ **Inline Editing** - Click edit buttons to modify content
|
|
- 📝 **Rich Content** - Markdown editing for formatted text
|
|
- 👤 **Authentication** - Login simulation with role switching
|
|
- 💾 **Persistence** - Content saves automatically
|
|
- 📱 **Responsive** - Works on desktop and mobile
|
|
- 🔄 **Multi-page** - Consistent experience across pages
|
|
|
|
## 🤝 Contributing
|
|
|
|
This project is in active development. See [DEVELOPMENT.md](DEVELOPMENT.md) for:
|
|
- Development setup
|
|
- Project structure
|
|
- Testing guidelines
|
|
- Future roadmap
|
|
|
|
## 📄 License
|
|
|
|
MIT License - see LICENSE file for details.
|
|
|
|
---
|
|
|
|
**Built with ❤️ for small business websites and their developers** |