Add development workflow and project setup
🛠️ 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!
This commit is contained in:
120
README.md
Normal file
120
README.md
Normal file
@@ -0,0 +1,120 @@
|
||||
# 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**
|
||||
Reference in New Issue
Block a user